/* Shared plumbing only — reset, motion utilities, pill nav.
   All visual identity lives in each prototype's own stylesheet. */

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
/* overflow-x:clip, never hidden — `hidden` makes body a scroll container and
   silently kills position:sticky in any descendant. `clip` does not. */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,video{display:block;max-width:100%}
ul,ol{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- easing tokens ----------
   Lifted from the reference sites' own stylesheets. */
:root{
  --e-out-expo:cubic-bezier(.19,1,.22,1);
  --e-out-quart:cubic-bezier(.25,1,.5,1);
  --e-out-quint:cubic-bezier(.22,1,.36,1);
  --e-inout-quint:cubic-bezier(.83,0,.17,1);
  --e-inout-expo:cubic-bezier(.87,0,.13,1);
}

/* ---------- reveal ---------- */
[data-rev]{opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--e-out-quart),transform .9s var(--e-out-quart)}
[data-rev][data-in]{opacity:1;transform:none}

/* ---------- masked word reveal ----------
   The one technique every reference site uses: a clipping wrapper with the
   word held below it, released on a per-word stagger. Words rise out from
   behind a hard edge instead of fading in. */
.sw{display:inline-block;overflow:clip;vertical-align:top;
  padding-bottom:.12em;margin-bottom:-.12em}
.sw > i{display:inline-block;font-style:inherit;transform:translateY(110%);
  transition:transform .8s var(--e-out-quart);transition-delay:var(--d,0ms)}
[data-in] .sw > i,.sw[data-in] > i{transform:translateY(0)}

/* ---------- clip reveal for media ----------
   Media arrives as an aperture opening, never as a fade. */
[data-clip]{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--e-out-quint)}
[data-clip][data-in]{clip-path:inset(0 0 0 0)}
[data-rev-d="1"]{transition-delay:.08s}
[data-rev-d="2"]{transition-delay:.16s}
[data-rev-d="3"]{transition-delay:.24s}
[data-rev-d="4"]{transition-delay:.32s}
[data-rev-d="5"]{transition-delay:.40s}

/* ---------- pill nav ---------- */
.pill{
  position:fixed;top:1.15rem;left:50%;transform:translateX(-50%);z-index:100;
  display:flex;align-items:center;gap:.15rem;padding:.34rem;
  border-radius:999px;
  transition:padding .4s cubic-bezier(.16,1,.3,1),background-color .4s ease,border-color .4s ease;
}
.pill a{
  position:relative;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:.46rem .82rem;border-radius:999px;white-space:nowrap;
  transition:color .22s cubic-bezier(.16,1,.3,1),background-color .22s cubic-bezier(.16,1,.3,1);
}
.pill[data-scrolled]{padding:.22rem}
.pill[data-scrolled] a{padding:.4rem .68rem}

/* ---------- progress ---------- */
.prog{position:fixed;left:0;top:0;height:2px;z-index:110;width:0;transition:width .1s linear}

@media (max-width:720px){
  .pill{top:auto;bottom:1rem}
  /* the pill is fixed to the bottom on touch — keep it off the last content */
  body{padding-bottom:4.5rem}
}
@media (prefers-reduced-motion:reduce){
  [data-rev]{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}