/* ═══════════════════════════════════════════════════════════════════════════
   Website Builder — 3D Section Animations (2026)
   Performant: transform + opacity only. RTL-safe logical props.
   Triggered via IntersectionObserver in website-interactivity.js
   adding .ws-in-view class to each .website-section when it enters viewport.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .website-section *,
  .website-section::before,
  .website-section::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Entrance Keyframes ─────────────────────────────────────────────────── */

@keyframes wsFadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes wsFadeUpScale {
  from { opacity: 0; transform: translateY(28px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ws3dLeft {
  from { opacity: 0; transform: perspective(700px) translateX(-55px) rotateY(20deg); }
  to   { opacity: 1; transform: perspective(700px) translateX(0) rotateY(0deg); }
}

@keyframes ws3dRight {
  from { opacity: 0; transform: perspective(700px) translateX(55px) rotateY(-20deg); }
  to   { opacity: 1; transform: perspective(700px) translateX(0) rotateY(0deg); }
}

@keyframes ws3dUp {
  from { opacity: 0; transform: perspective(700px) translateY(50px) rotateX(16deg); }
  to   { opacity: 1; transform: perspective(700px) translateY(0) rotateX(0deg); }
}

@keyframes wsFlipIn {
  from { opacity: 0; transform: perspective(900px) rotateX(-28deg) translateY(32px) scale(0.96); }
  to   { opacity: 1; transform: perspective(900px) rotateX(0deg) translateY(0) scale(1); }
}

@keyframes wsCountIn {
  from { opacity: 0; transform: translateY(22px) scale(0.78); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes wsZoomIn {
  from { opacity: 0; transform: scale(0.88) rotateZ(-1deg); }
  to   { opacity: 1; transform: scale(1) rotateZ(0); }
}

/* ─── Ambient / Loop Keyframes ──────────────────────────────────────────── */

@keyframes wsMorphBlob {
  0%, 100% { border-radius: 42% 58% 70% 30% / 40% 52% 48% 60%; transform: rotate(0deg) scale(1); }
  25%       { border-radius: 58% 42% 30% 70% / 62% 32% 68% 38%; transform: rotate(90deg) scale(1.04); }
  50%       { border-radius: 30% 60% 68% 40% / 52% 60% 40% 58%; transform: rotate(180deg) scale(0.96); }
  75%       { border-radius: 68% 32% 42% 58% / 30% 70% 52% 60%; transform: rotate(270deg) scale(1.02); }
}

@keyframes wsFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-18px) rotate(2deg); }
}

@keyframes wsFloatX {
  0%, 100% { transform: translateX(0) translateY(0); }
  33%       { transform: translateX(14px) translateY(-10px); }
  66%       { transform: translateX(-10px) translateY(8px); }
}

@keyframes wsGradientPan {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@keyframes wsPlayPulse {
  0%, 100% { box-shadow: 0 16px 48px rgba(0,0,0,.40), 0 0 0 0 rgba(255,255,255,0.30); }
  50%       { box-shadow: 0 16px 48px rgba(0,0,0,.40), 0 0 0 24px rgba(255,255,255,0); }
}

@keyframes wsDotsShimmer {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 0.85; }
}

@keyframes wsOrbPulse {
  0%, 100% { transform: scale(1); opacity: 0.18; }
  50%       { transform: scale(1.12); opacity: 0.28; }
}

/* ─── 3D Card Tilt on Hover ─────────────────────────────────────────────── */
/* Applied universally to feature/course/blog/testimonial cards */

.tpl-af-card,
.tpl-and-cats-card,
.tpl-andalus-course,
.tpl-andalus-testi__card,
.tpl-andalus-blog__card,
.tpl-and-pricing-plan,
.tpl-andalus-team__card,
.tpl-andalus-partner {
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow  0.4s ease !important;
}

.tpl-af-card:hover,
.tpl-and-cats-card:hover {
  transform: perspective(900px) rotateX(-4deg) rotateY(4deg) translateY(-8px) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.13), 8px 8px 30px rgba(0,0,0,.07) !important;
}

[dir="rtl"] .tpl-af-card:hover,
[dir="rtl"] .tpl-and-cats-card:hover {
  transform: perspective(900px) rotateX(-4deg) rotateY(-4deg) translateY(-8px) !important;
}

.tpl-andalus-course:hover {
  transform: perspective(900px) translateY(-10px) rotateX(-3deg) !important;
}

.tpl-and-pricing-plan:hover {
  transform: perspective(900px) translateY(-8px) rotateX(-2deg) scale(1.01) !important;
}

/* ─── Hero Section Floating Decorations (no-image state) ────────────────── */

/* Morphing blob shapes — visible only when no hero image */
.tpl-ah:not(:has(.tpl-ah__hero-img))::before {
  content: '';
  position: absolute;
  inset-inline-end: 8%;
  top: 12%;
  width: 200px;
  height: 200px;
  border-radius: 42% 58% 70% 30% / 40% 52% 48% 60%;
  background: rgba(255,255,255,0.07);
  animation: wsMorphBlob 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.tpl-ah:not(:has(.tpl-ah__hero-img))::after {
  content: '';
  position: absolute;
  inset-inline-start: 6%;
  bottom: 18%;
  width: 130px;
  height: 130px;
  border-radius: 60% 40% 32% 68% / 60% 30% 70% 40%;
  background: rgba(255,255,255,0.05);
  animation: wsMorphBlob 18s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 1;
}

/* Dot grid shimmer */
.tpl-ah__dots {
  animation: wsDotsShimmer 5s ease-in-out infinite;
}

/* Orb pulse animation */
.tpl-ah__orb--a {
  animation: wsOrbPulse 8s ease-in-out infinite;
}
.tpl-ah__orb--b {
  animation: wsOrbPulse 11s ease-in-out infinite reverse;
}
.tpl-ah__orb--c {
  animation: wsFloatX 13s ease-in-out infinite;
}

/* Hero particles floating */
.hero-particle {
  animation: wsFloatX 12s ease-in-out infinite !important;
}
.hero-particle-0 { animation-duration: 14s !important; }
.hero-particle-1 { animation-duration: 11s !important; animation-delay: 2s !important; }
.hero-particle-2 { animation-duration: 16s !important; animation-delay: 4s !important; }
.hero-particle-3 { animation-duration: 10s !important; animation-delay: 1s !important; }
.hero-particle-4 { animation-duration: 15s !important; animation-delay: 3s !important; }
.hero-particle-5 { animation-duration: 13s !important; animation-delay: 5s !important; }

/* Hero badge float */
.hero-slide-icon-badge {
  animation: wsFloat 4s ease-in-out infinite;
}

/* ─── Video Section — Play Button Pulse ─────────────────────────────────── */

.tpl-and-video__play-btn {
  animation: wsPlayPulse 2.8s ease-in-out infinite;
}

/* ─── CTA Section — Animated Gradient Background ────────────────────────── */

.ws-section-cta .ws-cta-section,
.ws-section-cta .tpl-andalus-cta {
  position: relative;
}

/* ─── Feature Icon 3D Micro-interaction ─────────────────────────────────── */

.tpl-and-cats-icon,
.tpl-af-card__icon,
.tpl-andalus-feature {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.tpl-and-cats-card:hover .tpl-and-cats-icon {
  transform: scale(1.18) rotate(-8deg) translateZ(12px) !important;
}

.tpl-af-card:hover .tpl-af-card__icon {
  transform: scale(1.15) rotate(-6deg) !important;
}

/* ─── FAQ Depth Hover ────────────────────────────────────────────────────── */

.tpl-andalus-faq__row,
.tpl-and-faq-row {
  transition: background 0.28s ease, transform 0.22s ease !important;
}

.tpl-andalus-faq__row:hover,
.tpl-and-faq-row:hover {
  transform: translateX(5px);
}

[dir="rtl"] .tpl-andalus-faq__row:hover,
[dir="rtl"] .tpl-and-faq-row:hover {
  transform: translateX(-5px);
}

/* ─── Scroll-in Animations (class ws-in-view added by IntersectionObserver) */

/* ── Section headings ── */
.ws-in-view .tpl-andalus-h2,
.ws-in-view .tpl-ah__title,
.ws-in-view .tpl-and-video__title,
.ws-in-view .tpl-andalus-cta__title,
.ws-in-view .tpl-and-video__title {
  animation: wsFadeUp 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;
}

.ws-in-view .tpl-andalus-eyebrow {
  animation: wsFadeUp 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* ── Features ── */
.ws-section-features.ws-in-view .tpl-af-card,
.ws-section-features.ws-in-view .tpl-af-grid > * {
  animation: ws3dUp 0.55s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ws-section-features.ws-in-view .tpl-af-card:nth-child(1),
.ws-section-features.ws-in-view .tpl-af-grid > *:nth-child(1) { animation-delay: 0.05s; }
.ws-section-features.ws-in-view .tpl-af-card:nth-child(2),
.ws-section-features.ws-in-view .tpl-af-grid > *:nth-child(2) { animation-delay: 0.13s; }
.ws-section-features.ws-in-view .tpl-af-card:nth-child(3),
.ws-section-features.ws-in-view .tpl-af-grid > *:nth-child(3) { animation-delay: 0.21s; }
.ws-section-features.ws-in-view .tpl-af-card:nth-child(4),
.ws-section-features.ws-in-view .tpl-af-grid > *:nth-child(4) { animation-delay: 0.29s; }
.ws-section-features.ws-in-view .tpl-af-card:nth-child(n+5),
.ws-section-features.ws-in-view .tpl-af-grid > *:nth-child(n+5) { animation-delay: 0.37s; }

/* ── Categories ── */
.ws-section-categories.ws-in-view .tpl-and-cats-card {
  animation: ws3dUp 0.55s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ws-section-categories.ws-in-view .tpl-and-cats-card:nth-child(1) { animation-delay: 0.04s; }
.ws-section-categories.ws-in-view .tpl-and-cats-card:nth-child(2) { animation-delay: 0.12s; }
.ws-section-categories.ws-in-view .tpl-and-cats-card:nth-child(3) { animation-delay: 0.20s; }
.ws-section-categories.ws-in-view .tpl-and-cats-card:nth-child(4) { animation-delay: 0.28s; }
.ws-section-categories.ws-in-view .tpl-and-cats-card:nth-child(n+5) { animation-delay: 0.36s; }

/* ── Stats ── */
.ws-section-stats.ws-in-view .tpl-andalus-stats__cell,
.ws-section-stats.ws-in-view .stat {
  animation: ws3dUp 0.55s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ws-section-stats.ws-in-view .tpl-andalus-stats__cell:nth-child(1),
.ws-section-stats.ws-in-view .stat:nth-child(1) { animation-delay: 0.0s; }
.ws-section-stats.ws-in-view .tpl-andalus-stats__cell:nth-child(2),
.ws-section-stats.ws-in-view .stat:nth-child(2) { animation-delay: 0.1s; }
.ws-section-stats.ws-in-view .tpl-andalus-stats__cell:nth-child(3),
.ws-section-stats.ws-in-view .stat:nth-child(3) { animation-delay: 0.2s; }
.ws-section-stats.ws-in-view .tpl-andalus-stats__cell:nth-child(4),
.ws-section-stats.ws-in-view .stat:nth-child(4) { animation-delay: 0.3s; }

.ws-section-stats.ws-in-view .tpl-andalus-stats__num,
.ws-section-stats.ws-in-view .stat .n {
  animation: wsCountIn 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: 0.15s;
}

/* ── Courses ── */
.ws-section-courses.ws-in-view .tpl-andalus-course,
.ws-section-courses.ws-in-view .tpl-and-cats-card {
  animation: wsFlipIn 0.58s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ws-section-courses.ws-in-view .tpl-andalus-course:nth-child(1) { animation-delay: 0.04s; }
.ws-section-courses.ws-in-view .tpl-andalus-course:nth-child(2) { animation-delay: 0.14s; }
.ws-section-courses.ws-in-view .tpl-andalus-course:nth-child(3) { animation-delay: 0.24s; }
.ws-section-courses.ws-in-view .tpl-andalus-course:nth-child(4) { animation-delay: 0.34s; }
.ws-section-courses.ws-in-view .tpl-andalus-course:nth-child(n+5) { animation-delay: 0.44s; }

/* ── Testimonials ── */
.ws-section-testimonials.ws-in-view .tpl-andalus-testi__card {
  animation: ws3dUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ws-section-testimonials.ws-in-view .tpl-andalus-testi__card:nth-child(1) { animation-delay: 0.0s; }
.ws-section-testimonials.ws-in-view .tpl-andalus-testi__card:nth-child(2) { animation-delay: 0.12s; }
.ws-section-testimonials.ws-in-view .tpl-andalus-testi__card:nth-child(3) { animation-delay: 0.24s; }

/* ── Blog ── */
.ws-section-blog.ws-in-view .tpl-andalus-blog__card {
  animation: wsFadeUpScale 0.55s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ws-section-blog.ws-in-view .tpl-andalus-blog__card:nth-child(1) { animation-delay: 0.0s; }
.ws-section-blog.ws-in-view .tpl-andalus-blog__card:nth-child(2) { animation-delay: 0.1s; }
.ws-section-blog.ws-in-view .tpl-andalus-blog__card:nth-child(3) { animation-delay: 0.2s; }

/* ── Partners ── */
.ws-section-partners.ws-in-view .tpl-andalus-partner,
.ws-section-partners.ws-in-view .tpl-and-cats-card {
  animation: wsFadeUpScale 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* ── Timeline ── */
.ws-section-timeline.ws-in-view .tpl-and-tl-item {
  animation: ws3dLeft 0.58s cubic-bezier(0.23, 1, 0.32, 1) both;
}
[dir="rtl"] .ws-section-timeline.ws-in-view .tpl-and-tl-item {
  animation: ws3dRight 0.58s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ws-section-timeline.ws-in-view .tpl-and-tl-item:nth-child(1) { animation-delay: 0.0s; }
.ws-section-timeline.ws-in-view .tpl-and-tl-item:nth-child(2) { animation-delay: 0.1s; }
.ws-section-timeline.ws-in-view .tpl-and-tl-item:nth-child(3) { animation-delay: 0.2s; }
.ws-section-timeline.ws-in-view .tpl-and-tl-item:nth-child(4) { animation-delay: 0.3s; }
.ws-section-timeline.ws-in-view .tpl-and-tl-item:nth-child(n+5) { animation-delay: 0.4s; }

/* ── About / Image-Text ── */
.ws-section-about.ws-in-view .tpl-andalus-about__visual,
.ws-section-image-text.ws-in-view .tpl-andalus-imgtext__media {
  animation: ws3dLeft 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
}
[dir="rtl"] .ws-section-about.ws-in-view .tpl-andalus-about__visual,
[dir="rtl"] .ws-section-image-text.ws-in-view .tpl-andalus-imgtext__media {
  animation: ws3dRight 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ws-section-about.ws-in-view .tpl-andalus-about__lead,
.ws-section-image-text.ws-in-view .tpl-andalus-imgtext__body {
  animation: ws3dRight 0.7s 0.1s cubic-bezier(0.23, 1, 0.32, 1) both;
}
[dir="rtl"] .ws-section-about.ws-in-view .tpl-andalus-about__lead,
[dir="rtl"] .ws-section-image-text.ws-in-view .tpl-andalus-imgtext__body {
  animation: ws3dLeft 0.7s 0.1s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* About stats cells */
.ws-section-about.ws-in-view .tpl-andalus-about__stat {
  animation: wsCountIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ws-section-about.ws-in-view .tpl-andalus-about__stat:nth-child(1) { animation-delay: 0.15s; }
.ws-section-about.ws-in-view .tpl-andalus-about__stat:nth-child(2) { animation-delay: 0.25s; }
.ws-section-about.ws-in-view .tpl-andalus-about__stat:nth-child(3) { animation-delay: 0.35s; }

/* Floating badge card on about image */
.ws-section-about.ws-in-view .tpl-andalus-about__float {
  animation: wsZoomIn 0.55s 0.35s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* ── Pricing ── */
.ws-section-pricing.ws-in-view .tpl-and-pricing-plan,
.ws-section-pricing.ws-in-view .tpl-andalus-plan {
  animation: ws3dUp 0.55s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ws-section-pricing.ws-in-view .tpl-and-pricing-plan:nth-child(1),
.ws-section-pricing.ws-in-view .tpl-andalus-plan:nth-child(1) { animation-delay: 0.0s; }
.ws-section-pricing.ws-in-view .tpl-and-pricing-plan:nth-child(2),
.ws-section-pricing.ws-in-view .tpl-andalus-plan:nth-child(2) { animation-delay: 0.13s; }
.ws-section-pricing.ws-in-view .tpl-and-pricing-plan:nth-child(3),
.ws-section-pricing.ws-in-view .tpl-andalus-plan:nth-child(3) { animation-delay: 0.26s; }

/* ── Team ── */
.ws-section-team.ws-in-view .tpl-andalus-team__card {
  animation: wsFadeUpScale 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ws-section-team.ws-in-view .tpl-andalus-team__card:nth-child(1) { animation-delay: 0.0s; }
.ws-section-team.ws-in-view .tpl-andalus-team__card:nth-child(2) { animation-delay: 0.08s; }
.ws-section-team.ws-in-view .tpl-andalus-team__card:nth-child(3) { animation-delay: 0.16s; }
.ws-section-team.ws-in-view .tpl-andalus-team__card:nth-child(4) { animation-delay: 0.24s; }

/* ── Contact ── */
.ws-section-contact.ws-in-view .tpl-and-contact-card,
.ws-section-contact.ws-in-view .tpl-andalus-contact__form {
  animation: ws3dUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* ── Video ── */
.ws-section-video.ws-in-view .tpl-and-video__frame {
  animation: wsZoomIn 0.65s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* ── Gallery ── */
.ws-section-gallery.ws-in-view .tpl-andalus-gallery__tile {
  animation: wsZoomIn 0.45s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.ws-section-gallery.ws-in-view .tpl-andalus-gallery__tile:nth-child(odd)  { animation-delay: 0.05s; }
.ws-section-gallery.ws-in-view .tpl-andalus-gallery__tile:nth-child(even) { animation-delay: 0.12s; }

/* ── Newsletter ── */
.ws-section-newsletter.ws-in-view .tpl-andalus-newsletter,
.ws-section-newsletter.ws-in-view .tpl-andalus-nl-icon {
  animation: ws3dUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* ─── Perspective container for grids (depth illusion) ─────────────────── */

.tpl-and-cats-grid,
.tpl-af-split__feats,
.tpl-andalus-courses__grid,
.tpl-andalus-testi__grid,
.tpl-andalus-blog__grid,
.tpl-and-pricing-grid {
  perspective: 1400px;
  perspective-origin: 50% -15%;
}