/* Motion layer — transform/opacity only. Fully static under prefers-reduced-motion. */

/* Anti-FOUC: when JS is expected, hide animated nodes until they are shown.
   js-ready (fail-safe) or is-in / GSAP inline styles reveal them. No layout shift. */
html.js-motion:not(.js-ready) .reveal,
html.js-motion:not(.js-gsap):not(.js-ready) .hero__in .eyebrow,
html.js-motion:not(.js-gsap):not(.js-ready) .hero__in .collab--hero,
html.js-motion:not(.js-gsap):not(.js-ready) .hero__h,
html.js-motion:not(.js-gsap):not(.js-ready) .hero__p,
html.js-motion:not(.js-gsap):not(.js-ready) .hero__in .btn-row{
  opacity:0;
}

html.js-motion .reveal{
  opacity:0;
  transform:translate3d(0,1.25rem,0);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  will-change:opacity, transform;
}
html.js-motion .reveal.is-in{
  opacity:1;
  transform:none;
  will-change:auto;
}
html.js-motion .reveal-d1{transition-delay:.08s}
html.js-motion .reveal-d2{transition-delay:.16s}
html.js-motion .reveal-d3{transition-delay:.24s}
html.js-motion .reveal-d4{transition-delay:.32s}

/* GSAP drives these; disable CSS fallback so they don't double-animate */
html.js-gsap .reveal{
  opacity:1;
  transform:none;
  transition:none;
  will-change:auto;
}

/* Kinetic headline word masks */
.hero-line{
  display:block;
  overflow:hidden;
  padding-bottom:.06em;
  margin-bottom:-.06em;
}
.hero-word{
  display:inline-block;
  will-change:transform;
}
html.js-gsap .hero__media{
  transform-origin:center center;
  will-change:transform, opacity;
}

/* Scroll progress */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;z-index:80;
  height:2px;pointer-events:none;
  background:transparent;
}
.scroll-progress span{
  display:block;height:100%;width:100%;
  background:var(--gold);
  transform:scaleX(0);transform-origin:left center;
  will-change:transform;
}

/* Ticker — existing site words only, decorative */
.ticker{
  overflow:hidden;
  background:var(--midnight);
  color:var(--cream);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:.85rem 0;
  line-height:1;
}
.ticker__track{
  display:flex;align-items:center;gap:0;
  width:max-content;
  will-change:transform;
}
html.js-motion .ticker__track{
  animation:tickerMove 42s linear infinite;
}
.ticker span{
  font-weight:800;
  font-size:clamp(1.15rem,3.2vw,2rem);
  letter-spacing:-.03em;
  padding:0 0 0 .15em;
  white-space:nowrap;
}
.ticker__dot{
  font-weight:700;
  color:var(--gold);
  padding:0 1.25rem !important;
  font-size:clamp(1.15rem,3.2vw,2rem);
}
@keyframes tickerMove{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* Stats: reserve numeric width to keep CLS at 0 during count-up */
.stat__n{font-variant-numeric:tabular-nums;white-space:nowrap}

/* Card light sweep (opacity + transform only) */
@media (hover:hover) and (pointer:fine){
  html.js-motion .vcard,
  html.js-motion .pcard,
  html.js-motion .work-card{
    position:relative;
  }
  html.js-motion .vcard::after,
  html.js-motion .pcard::after,
  html.js-motion .work-frame::after{
    content:"";
    position:absolute;inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(115deg,transparent 30%,rgba(255,210,127,.22) 48%,transparent 66%);
    opacity:0;
    transform:translate3d(-40%,0,0);
    transition:opacity .5s var(--ease), transform .7s var(--ease);
  }
  html.js-motion .vcard:hover::after,
  html.js-motion .pcard:hover::after,
  html.js-motion .work-frame:hover::after{
    opacity:1;
    transform:translate3d(40%,0,0);
  }
  html.js-motion .vcard,
  html.js-motion .pcard{
    transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  }
  html.js-motion .vcard:hover,
  html.js-motion .pcard:hover{
    transform:translate3d(0,-6px,0);
    box-shadow:0 18px 50px rgba(0,11,33,.16);
  }
  html.js-motion .work-card{
    transition:transform .5s var(--ease);
  }
  html.js-motion .work-frame{
    overflow:hidden;
    transition:transform .6s var(--ease);
    will-change:transform;
  }
  html.js-motion .work-card:hover .work-frame{
    transform:scale(1.045);
  }
  html.js-motion .work-card:hover{
    transform:translate3d(0,-4px,0);
  }
  html.js-motion .work-frame video{
    transition:transform .6s var(--ease);
  }
  /* Nav pill hover */
  html.js-motion .nav a{
    transition:color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
  }
  /* Magnetic buttons use inline transform; this is the rest state */
  html.js-motion .btn{
    transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .35s var(--ease);
    will-change:transform;
  }
}

/* View Transitions — fade + slight scale; skipped when reduced */
@supports (view-transition-name: none){
  @view-transition { navigation: auto; }
  ::view-transition-old(root){
    animation:vtOut .32s cubic-bezier(.2,.7,.2,1) both;
  }
  ::view-transition-new(root){
    animation:vtIn .42s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes vtOut{to{opacity:0;transform:scale(.985)}}
  @keyframes vtIn{from{opacity:0;transform:scale(1.015)}}
}

/* Lenis: let it own smooth scrolling when active */
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto !important}
html.lenis.lenis-stopped{overflow:hidden}

/* Reduced motion: everything static and readable */
@media (prefers-reduced-motion:reduce){
  html.js-motion .reveal,
  html.js-motion .reveal.is-in,
  html.is-reduce .reveal,
  html.js-motion .hero__in .eyebrow,
  html.js-motion .hero__in .collab--hero,
  html.js-motion .hero__h,
  html.js-motion .hero__p,
  html.js-motion .hero__in .btn-row,
  html.js-ready .reveal,
  html.js-ready .hero__in .eyebrow,
  html.js-ready .hero__in .collab--hero,
  html.js-ready .hero__h,
  html.js-ready .hero__p,
  html.js-ready .hero__in .btn-row{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
    will-change:auto !important;
  }
  html.js-motion .ticker__track,
  .ticker__track{
    animation:none !important;
    transform:none !important;
    flex-wrap:wrap;
    justify-content:center;
    width:auto;
    max-width:100%;
    row-gap:.4rem;
  }
  .ticker__track span:nth-child(n+11){display:none}
  .scroll-progress{display:none}
  html.js-motion .vcard:hover,
  html.js-motion .pcard:hover,
  html.js-motion .work-card:hover,
  html.js-motion .work-card:hover .work-frame,
  html.js-motion .work-frame video{
    transform:none !important;
  }
  html.js-motion .vcard::after,
  html.js-motion .pcard::after,
  html.js-motion .work-frame::after{display:none}
  .btn, .nav a{transition:none !important}
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none !important}
}

/* Fail-safe: if motion.js never marks things in, show content */
html.js-ready:not(.js-gsap) .reveal:not(.is-in){
  opacity:1;
  transform:none;
}

/* Touch / no-hover: kill the earlier main.css card lift so mobile stays still */
@media (hover:none), (pointer:coarse){
  html.js-motion .vcard:hover,
  html.js-motion .pcard:hover{
    transform:none;
    box-shadow:none;
  }
}

@media (hover:hover) and (pointer:fine){
  html.js-motion .vgrid,
  html.js-motion .pgrid{perspective:900px}
}