/* ==========================================================================
   لقطة | LAQTA Studio — Animations CSS (الانتقالات السينمائية والقطع الحركي)
   ========================================================================== */

/* --------------------------------------------------------------------------
   أ) انتقالات القطع السينمائي (Cut Transitions - Hard Clip Paths)
   -------------------------------------------------------------------------- */
@keyframes cut-in {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes cut-in-top {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes cut-in-side {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.cut-enter {
  animation: cut-in var(--duration-mid) var(--ease-cinematic) both;
}

/* --------------------------------------------------------------------------
   ب) اهتزاز الكادر الخاطف عند تبديل الفيلم (Micro-shake - 80ms)
   -------------------------------------------------------------------------- */
@keyframes frame-shake {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-2px);
  }
  75% {
    transform: translateY(2px);
  }
}

.reel-frame.is-active {
  animation: frame-shake 80ms ease-out;
}

/* --------------------------------------------------------------------------
   ج) تقريب رقم المشهد العملاق عند الدخول (Scene Counter Zoom)
   -------------------------------------------------------------------------- */
@keyframes scene-number-zoom {
  from {
    transform: scale(1.4);
    opacity: 0;
  }
  60% {
    opacity: 0.15;
  }
  to {
    transform: scale(1);
    opacity: 0.15;
  }
}

.scene-number.is-entering {
  animation: scene-number-zoom 500ms var(--ease-cinematic) both;
}

/* --------------------------------------------------------------------------
   د) كشف النصوص الحديث عبر السكرول (Scroll-driven View Timeline)
   -------------------------------------------------------------------------- */
@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-up 800ms var(--ease-cinematic) both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
}

/* --------------------------------------------------------------------------
   هـ) بديل كشف النصوص بالـJavaScript في المتصفحات غير الداعمة
   -------------------------------------------------------------------------- */
.js-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms var(--ease-cinematic),
              transform 800ms var(--ease-cinematic);
}

.js-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   و) كشف الصور بستار سينمائي (Clip-path Reveal for Media)
   -------------------------------------------------------------------------- */
@keyframes img-curtain {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

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

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

/* --------------------------------------------------------------------------
   ز) تحسين أداء المعالجة الرسومية (will-change)
   -------------------------------------------------------------------------- */
.hero-bg,
.reel-frame,
.scene-horizontal-track,
.scene-number {
  will-change: transform;
}

.reel-frame.is-active {
  will-change: opacity, transform;
}

/* --------------------------------------------------------------------------
   ح) تعطيل الحركات لتفضيلات تقليل الحركة (prefers-reduced-motion)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .cut-enter,
  .reel-frame.is-active,
  .scene-number.is-entering,
  .reveal,
  .js-reveal,
  .js-reveal-clip {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* ضمان ظهور أول كادر عند تعطيل الحركة */
  .reel-frame:first-child {
    opacity: 1 !important;
  }
}