/**
 * @file css/animations.css
 * @description نظام الحركات المعمارية المدفوعة بالسكرول (Scroll-Driven Animations 2026)
 * والمنظور ثلاثي الأبعاد لاستوديو إيوان (IWAN Atelier).
 * يعتمد على معيار animation-timeline الأصلي مع دعم بديل سلس بـ IntersectionObserver.
 */

/* --------------------------------------------------------------------------
   1. حصر خاصية will-change بحذر هندسي صارم للأداء المعماري العالي
   -------------------------------------------------------------------------- */
.hero-layer-bg,
.hero-layer-content,
.parallax-layer-slow,
.parallax-layer-medium,
.parallax-layer-fast {
  will-change: transform;
}

/* --------------------------------------------------------------------------
   2. أنيميشن السكرول الأصلي المدفوع بـ GPU (CSS Scroll-Driven Animations)
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  /* الصعود التدريجي مع الشفافية */
  @keyframes reveal-up {
    from {
      opacity: 0;
      transform: translateY(60px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* كشف الستارة الأفقية من اليمين (RTL Curtain Reveal) */
  @keyframes reveal-clip {
    from {
      clip-path: inset(0 100% 0 0);
    }
    to {
      clip-path: inset(0 0% 0 0);
    }
  }

  /* كشف الستارة من اليسار */
  @keyframes reveal-clip-left {
    from {
      clip-path: inset(0 0 0 100%);
    }
    to {
      clip-path: inset(0 0 0 0%);
    }
  }

  /* كشف الستارة الصاعدة من الأسفل */
  @keyframes reveal-clip-bottom {
    from {
      clip-path: inset(100% 0 0 0);
    }
    to {
      clip-path: inset(0% 0 0 0);
    }
  }

  /* التكبير التدريجي المعماري */
  @keyframes scale-in {
    from {
      transform: scale(0.94);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  /* دوران مستوى CTA ثلاثي الأبعاد */
  @keyframes cta-rotate {
    from {
      transform: rotateX(12deg);
      opacity: 0.6;
    }
    to {
      transform: rotateX(0deg);
      opacity: 1;
    }
  }

  /* ربط الأنيميشن بالجدول الزمني لحركة السكرول المباشرة */
  .reveal {
    animation: reveal-up 1s var(--ease-cinematic) both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }

  .reveal-clip {
    animation: reveal-clip 1.2s var(--ease-cinematic) both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  .reveal-clip-left {
    animation: reveal-clip-left 1.2s var(--ease-cinematic) both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  .reveal-clip-bottom {
    animation: reveal-clip-bottom 1.2s var(--ease-cinematic) both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  .reveal-scale {
    animation: scale-in 1s var(--ease-cinematic) both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }

  .cta-section .cta-3d-plane {
    animation: cta-rotate 1.2s var(--ease-cinematic) both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
}

/* Fallback خارج @supports لدوران مستوى CTA */
.cta-section .cta-3d-plane {
  transition: transform 1s var(--ease-cinematic);
}

/* --------------------------------------------------------------------------
   3. بديل التوافق للمتصفحات (Fallback via IntersectionObserver)
   -------------------------------------------------------------------------- */
.js-reveal {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 0.85s var(--ease-cinematic),
              transform 0.85s var(--ease-cinematic);
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease-cinematic);
}

.js-reveal-clip.is-visible {
  clip-path: inset(0 0% 0 0);
}

.js-reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.8s var(--ease-cinematic),
              transform 0.8s var(--ease-cinematic);
}

.js-reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   4. أنيميشن كشف الكلمات المتتالية (Staggered Word Reveal)
   -------------------------------------------------------------------------- */
.word-reveal {
  display: inline-block;
}

.word-reveal > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-cinematic),
              transform 0.6s var(--ease-cinematic);
  transition-delay: calc(var(--i, 0) * 0.08s);
}

.word-reveal.is-visible > span {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   5. تفاعل أزرار الموقع (Interactive Button Dynamics)
   -------------------------------------------------------------------------- */
.btn-primary::before,
.btn-ghost {
  transition: transform 0.4s var(--ease-cinematic),
              background-color 0.4s var(--ease-cinematic),
              color 0.4s var(--ease-cinematic);
}

/* --------------------------------------------------------------------------
   6. أنيميشن مسار الخط الزمني بـ SVG (Dynamic Stroke Drawing)
   -------------------------------------------------------------------------- */
.timeline-line-path {
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: calc(var(--path-length, 1000) - (var(--timeline-progress, 0) * var(--path-length, 1000)));
  transition: stroke-dashoffset 0.1s linear;
}

/* --------------------------------------------------------------------------
   7. أنيميشن دخول وخروج اللايتبوكس ثلاثي الأبعاد (3D Lightbox Modal)
   -------------------------------------------------------------------------- */
@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: scale(0.94) rotateX(6deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotateX(0deg);
  }
}

@keyframes lightbox-image-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lightbox.is-open .lightbox-content {
  animation: lightbox-in 0.4s var(--ease-cinematic) forwards;
}

.lightbox.is-open .lightbox-img {
  animation: lightbox-image-in 0.5s var(--ease-cinematic) forwards;
}

/* --------------------------------------------------------------------------
   8. أنيميشن الأكورديون بشبكة التمدد (CSS Grid Accordion Expansion)
   -------------------------------------------------------------------------- */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-cinematic);
}

.accordion-item.is-open .accordion-content {
  grid-template-rows: 1fr;
}

.accordion-content > div {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   9. مراعاة تقليل الحركة للوصولية (Prefers-Reduced-Motion)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-clip,
  .reveal-clip-left,
  .reveal-clip-bottom,
  .reveal-scale,
  .js-reveal,
  .js-reveal-clip,
  .js-reveal-scale,
  .word-reveal > span,
  .lightbox-content,
  .lightbox-img,
  .timeline-line-path,
  .cta-section .cta-3d-plane {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    stroke-dashoffset: 0 !important;
  }
}