/* =========================================================
   VENTARA — MOTION SYSTEM
   Scroll reveals, ambient animations, choreographed entrances.
   Honors prefers-reduced-motion at the bottom.
   ========================================================= */

/* ---------- Reveal (base) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}
.reveal-fade.in { opacity: 1; }

.reveal-up-sm {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal-up-sm.in { opacity: 1; transform: translateY(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.reveal-scale.in { opacity: 1; transform: scale(1); }

/* Stagger children of a .reveal-stagger container */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal-stagger.in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 560ms; }

/* ---------- Text mask reveal (split by line) ---------- */
.mask-reveal {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.mask-reveal > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1100ms var(--ease-out);
}
.mask-reveal.in > span { transform: translateY(0); }
.mask-reveal.d-1 > span { transition-delay: 120ms; }
.mask-reveal.d-2 > span { transition-delay: 240ms; }
.mask-reveal.d-3 > span { transition-delay: 360ms; }

/* ---------- Count-up wrapper ---------- */
.count {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ---------- Cinematic background (Ken Burns) ---------- */
.cine-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
}
.cine-bg::before {
  content: "";
  position: absolute; inset: -4%;
  background-size: cover;
  background-position: center;
  background-image: var(--cine-img);
  filter: saturate(0.88) contrast(1.06) brightness(0.9);
  animation: ken-burns 28s var(--ease-out) infinite alternate;
}
@keyframes ken-burns {
  0%   { transform: scale(1.04) translate(0%, 0%); }
  100% { transform: scale(1.12) translate(-1.2%, -1.4%); }
}

.cine-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,11,20,0.55) 0%, rgba(5,11,20,0.20) 35%, rgba(5,11,20,0.92) 100%),
    radial-gradient(120% 60% at 15% 0%, rgba(5,11,20,0.45), transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.cine-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  z-index: 2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* Cursor-reactive light overlay (set --mx, --my from JS) */
.cine-light {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 30%),
    rgba(243,192,137,0.14),
    transparent 60%
  );
  transition: background 300ms var(--ease-out);
}

/* ---------- Signal rings (ambient pulse) ---------- */
.signal-rings {
  position: absolute;
  width: 520px; height: 520px;
  pointer-events: none;
  z-index: 1;
}
.signal-rings span {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(243,192,137,0.30);
  animation: ring-pulse 4.6s var(--ease-out) infinite;
}
.signal-rings span:nth-child(2) { animation-delay: 1.2s; }
.signal-rings span:nth-child(3) { animation-delay: 2.4s; }
@keyframes ring-pulse {
  0% { transform: scale(0.4); opacity: 0; }
  20% { opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee-group {
  display: flex; align-items: center; gap: 28px;
  padding-right: 28px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Chat bubble cascade ---------- */
.chat-bubble {
  opacity: 0;
  transform: translateY(8px);
  animation: bubble-in 500ms var(--ease-out) forwards;
}
@keyframes bubble-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Floating ambient ---------- */
.float-y {
  animation: floaty 9s var(--ease-in-out) infinite;
}
.float-y.delay-1 { animation-delay: -3s; }
.float-y.delay-2 { animation-delay: -6s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---------- Caret blink ---------- */
.caret { display: inline-block; width: 2px; height: 0.95em; background: currentColor; vertical-align: text-bottom; margin-left: 2px; animation: caret-blink 1.1s steps(2,start) infinite; }
@keyframes caret-blink { to { opacity: 0; } }

/* ---------- Underline draw ---------- */
.draw-underline {
  position: relative;
  display: inline-block;
}
.draw-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.08em;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-out) 200ms;
}
.draw-underline.in::after { transform: scaleX(1); }

/* ---------- Number ticker ---------- */
.ticker {
  display: inline-flex;
  font-variant-numeric: tabular-nums;
}

/* ---------- Pinned section helpers ---------- */
.pin-stage { position: relative; }
.pin-stage .pin-track {
  position: sticky; top: 0;
  height: 100vh;
  display: grid; place-items: center;
  overflow: hidden;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-fade, .reveal-up-sm, .reveal-scale,
  .reveal-stagger > *, .mask-reveal > span {
    opacity: 1 !important;
    transform: none !important;
  }
  .cine-bg::before { animation: none !important; }
  .marquee-track { animation: none !important; }
  .signal-rings span { animation: none !important; opacity: 0.25 !important; }
}