/* ==========================================================================
   Tamra Developers — animations.css
   Scroll reveals, keyframes, motion. All motion is disabled under
   prefers-reduced-motion.
   ========================================================================== */

/* --- Reveal primitives (JS adds .is-inview via IntersectionObserver) ----- */
[data-reveal] {
  opacity: 0;
  transform: translateY(2.2rem);
  transition: opacity 1s var(--ease), transform 1.15s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-inview { opacity: 1; transform: none; }

[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-2.4rem); }
[data-reveal="right"] { transform: translateX(2.4rem); }
[data-reveal="scale"] { transform: scale(0.96); }

/* --- Masked text / image reveal ------------------------------------------ */
[data-reveal-mask] { overflow: hidden; display: block; }
[data-reveal-mask] > * {
  display: block;
  transform: translateY(105%);
  transition: transform 1.25s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal-mask].is-inview > * { transform: none; }

/* --- Image curtain reveal ------------------------------------------------ */
[data-reveal-image] { position: relative; overflow: hidden; }
[data-reveal-image]::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  transform-origin: bottom;
  transition: transform 1.35s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  z-index: 2;
}
[data-reveal-image].is-inview::after { transform: scaleY(0); }
[data-reveal-image] > img { transform: scale(1.1); transition: transform 1.8s var(--ease); }
[data-reveal-image].is-inview > img { transform: scale(1); }

/* --- Keyframes ----------------------------------------------------------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes pulse {
  0% { transform: scale(0.75); opacity: 0.85; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes scrollHint {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}
.hero__scroll i { transform-origin: top; animation: scrollHint 2.6s var(--ease) infinite; }

@keyframes heroFloat {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}
.hero__media img,
.hero__media video { animation: heroFloat 14s var(--ease) forwards; }

@keyframes kenburns {
  0% { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.09) translate3d(-1.2%, -1.2%, 0); }
}
.cta__media img { animation: kenburns 22s var(--ease) alternate infinite; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(1.2rem); }
  to { opacity: 1; transform: none; }
}
.hero__inner > * { animation: fadeUp 1.3s var(--ease) both; }
.hero__inner > *:nth-child(1) { animation-delay: 0.15s; }
.hero__inner > *:nth-child(2) { animation-delay: 0.3s; }
.hero__inner > *:nth-child(3) { animation-delay: 0.45s; }
.hero__inner > *:nth-child(4) { animation-delay: 0.6s; }
.hero__inner > *:nth-child(5) { animation-delay: 0.75s; }

/* --- Counter -------------------------------------------------------------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal-mask] > *,
  [data-reveal-image] > img { opacity: 1 !important; transform: none !important; }
  [data-reveal-image]::after { display: none; }
  .blueprint__lines path,
  .blueprint__lines line,
  .blueprint__lines circle { stroke-dashoffset: 0 !important; }
  .marquee__track { animation: none; }
}

/* ---- Editorial layer motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .curtain { display: none; }
  .words .w { transform: none !important; opacity: 1 !important; transition: none !important; }
  .story__slide, .story__media figure { opacity: 1 !important; transform: none !important; }
}