/* ==========================================================================
   YADEA — Animations
   Scroll reveals (driven by js/main.js IntersectionObserver),
   text/image reveals, parallax helpers and keyframes.
   Everything is disabled for users who prefer reduced motion.
   ========================================================================== */

/* ---------- Scroll reveal ----------
   Add [data-reveal] to an element. Optional variants:
   data-reveal="left" | "right" | "zoom" | "fade"; delay with style="--d: 120ms"  */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  transition:
    opacity 1s var(--ease),
    transform 1.2s var(--ease-expo);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal="left"] { transform: translate3d(-60px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(60px, 0, 0); }
.js [data-reveal="zoom"] { transform: scale(.94); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].is-inview { opacity: 1; transform: none; }

/* Image "curtain" reveal: wrapper clips, image settles from a slight zoom */
.js [data-reveal-img] { overflow: hidden; }
.js [data-reveal-img] > img,
.js [data-reveal-img] > picture > img {
  transform: scale(1.12);
  transition: transform 1.8s var(--ease-expo);
}
.js [data-reveal-img] {
  clip-path: inset(12% 6% 12% 6%);
  transition: clip-path 1.4s var(--ease-expo);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal-img].is-inview { clip-path: inset(0 0 0 0); }
.js [data-reveal-img].is-inview > img,
.js [data-reveal-img].is-inview > picture > img { transform: scale(1); }

/* Split line reveal for big headings (lines wrapped in .line > span) */
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line > span { display: block; transform: translate3d(0, 105%, 0); transition: transform 1.1s var(--ease-expo); transition-delay: var(--d, 0ms); }
.is-inview .line > span,
.is-active .line > span { transform: none; }

/* Parallax: JS sets --parallax (px) on [data-parallax] elements */
[data-parallax] { transform: translate3d(0, var(--parallax, 0px), 0) scale(var(--parallax-scale, 1.12)); will-change: transform; }

/* ---------- Page load ---------- */
.page-intro {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: #0d0d0d;
  pointer-events: none;
  transition: opacity .6s var(--ease) .15s, visibility 0s linear .8s;
}
.page-intro img { width: 150px; animation: introLogo 1s var(--ease-expo) both; }
.page-intro::after {
  content: ""; position: absolute; left: 50%; top: calc(50% + 40px);
  width: 120px; height: 2px; margin-left: -60px;
  background: linear-gradient(90deg, transparent, var(--c-brand), transparent);
  animation: introBar 1.1s var(--ease) infinite;
}
.is-loaded .page-intro { opacity: 0; visibility: hidden; }
@keyframes introLogo { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes introBar { 0% { transform: scaleX(0); opacity: 0; } 50% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(0); opacity: 0; } }

/* Scroll cue */
@keyframes cueBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Slow drift on hero images (Ken Burns) */
@keyframes kenburns { from { transform: scale(1.1); } to { transform: scale(1); } }

/* Pulse ring (smart-unlocking signal, badges) */
@keyframes pulseRing { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal], .js [data-reveal-img] { opacity: 1; transform: none; clip-path: none; }
  .line > span { transform: none; }
  [data-parallax] { transform: none; }
}