/* ==========================================================================
   Motion — restrained, editorial. Reveal on entry, precise micro-interactions.
   All motion is opt-out via prefers-reduced-motion.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--t-reveal) var(--ease-expo) var(--d, 0ms),
    transform var(--t-reveal) var(--ease-expo) var(--d, 0ms),
    clip-path var(--t-reveal) var(--ease-expo) var(--d, 0ms),
    filter var(--t-reveal) var(--ease-expo) var(--d, 0ms);
}
[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="down"]  { transform: translateY(-22px); }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal="blur"]  { filter: blur(10px); transform: translateY(16px); }
[data-reveal="wipe"]  { clip-path: inset(0 0 100% 0); transform: none; }
[data-reveal].is-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

/* image mask reveal */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal::after {
  content: ""; position: absolute; inset: 0; background: var(--paper);
  transform: scaleY(1); transform-origin: bottom;
  transition: transform 1s var(--ease-expo) var(--d, 0ms);
}
.img-reveal.is-in::after { transform: scaleY(0); }
.section--deep .img-reveal::after, .reach .img-reveal::after { background: var(--deep); }
.img-reveal img { transform: scale(1.1); transition: transform 1.2s var(--ease-expo) var(--d, 0ms); }
.img-reveal.is-in img { transform: scale(1); }

/* stagger */
.stagger > * { transition-delay: 0ms; }
.stagger.is-in > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* ambient */
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.floaty { animation: floatY 7s var(--ease-inout) infinite; }

/* marquee */
.marquee { overflow: hidden; position: relative; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 7rem; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__item {
  display: flex; align-items: center; gap: var(--s-4);
  padding-inline: clamp(1.25rem, 2.6vw, 2.25rem);
  font-size: var(--fs-sm); color: var(--text-soft); white-space: nowrap;
}
.marquee__item b { color: var(--ink-700); font-weight: 600; font-size: var(--fs-base); }
.marquee__dot { width: 4px; height: 4px; background: var(--cyan); }

/* counter tick */
.stat__num.is-ticking { color: var(--cyan-700); transition: color var(--t-slow) var(--ease-out); }

/* lift */
.lift { transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.lift:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }

/* cursor spotlight */
.spotlight { position: relative; }
.spotlight::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(41,171,226,.13), transparent 62%);
  opacity: 0; transition: opacity var(--t-base) var(--ease-out);
  pointer-events: none; border-radius: inherit;
}
.spotlight:hover::before { opacity: 1; }

/* scroll progress: a thin rule that fills with cyan */
.scroll-progress {
  position: fixed; left: 0; top: 0; height: 2px; z-index: calc(var(--z-header) + 1);
  width: 100%; transform-origin: left; transform: scaleX(0);
  background: var(--cyan); pointer-events: none;
}

@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageIn .45s var(--ease-out) both; }

/* hero choreography */
@keyframes heroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero-anim { animation: heroRise 1s var(--ease-expo) both; }
.hero-anim[data-i="1"] { animation-delay: .05s; }
.hero-anim[data-i="2"] { animation-delay: .15s; }
.hero-anim[data-i="3"] { animation-delay: .26s; }
.hero-anim[data-i="4"] { animation-delay: .37s; }
.hero-anim[data-i="5"] { animation-delay: .48s; }
.hero-anim[data-i="6"] { animation-delay: .59s; }

/* button sweep */
.btn--shine { position: relative; overflow: hidden; }
.btn--shine::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 42%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg); transition: left .65s var(--ease-out);
  z-index: 3; pointer-events: none;
}
.btn--shine:hover::after { left: 132%; }

/* anchor nav */
.anchor-nav { display: flex; gap: var(--s-1); overflow-x: auto; }
.anchor-nav a {
  padding: var(--s-3) var(--s-4); font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-muted); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast);
}
.anchor-nav a:hover { color: var(--ink-900); }
.anchor-nav a.is-active { color: var(--ink-900); border-bottom-color: var(--cyan); font-weight: 600; }

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .img-reveal::after { display: none; }
  .img-reveal img { transform: none !important; }
  .marquee__track, .floaty { animation: none !important; }
  body { animation: none; }
}