/* DESIGN.md → Project motion override / Verified hero reference.
   Source motion paths/timings: slush.app's public homepage interaction script.
   DO 1/5: preserve Lateral800, crushed leading, SVG geometry and sticker pairings.
   DO 2–7 / DON'T 1–7: motion introduces no paint, typography, radius or shadow. */
:root {
  --ref-motion-ease:cubic-bezier(.65,.05,0,1);
  --ref-motion-bounce:linear(0,.5737 7.6%,.8382 11.87%,.9463 14.19%,1.0292 16.54%,1.0886 18.97%,1.1258 21.53%,1.137 22.97%,1.1424 24.48%,1.1423 26.1%,1.1366 27.86%,1.1165 31.01%,1.0507 38.62%,1.0219 42.57%,.9995 46.99%,.9872 51.63%,.9842 58.77%,1.0011 81.26%,1);
}
/* Character ink compensation is source glyph geometry, not layout spacing. */
.ref-motion-word{display:inline-block;white-space:nowrap}
.ref-motion-char{display:inline-block;padding-inline:.1em;margin-inline:-.1em}
.ref-motion-ready [data-ref-reveal]:not([data-ref-visible]){opacity:0}
.ref-motion-ready [data-ref-reveal="letters"]:not([data-ref-visible]){opacity:1}
.ref-motion-ready [data-ref-reveal="letters"]:not([data-ref-visible]) .ref-motion-char{opacity:0}
.ref-motion-ready .home-logo-letter-list{justify-content:flex-start}
.ref-motion-logo-trail{pointer-events:none}
[data-ref-parallax]{translate:var(--ref-parallax-x,0px) var(--ref-parallax-y,0px)}
.ref-motion-ready .band-track,
.ref-motion-ready [data-marquee-scroll-target]{translate:var(--ref-marquee-x,0px) 0;will-change:translate}
[data-ref-marquee-clone]{pointer-events:auto}
/* Focus within moving bands pauses them and brings the original link into view. */
.ref-motion-ready .band-row:focus-within .band-track,
.ref-motion-ready [data-marquee-scroll-direction-target]:focus-within [data-marquee-scroll-target]{will-change:auto}
/* DO 3/4/6: existing black1/pill1600/Aeonik700 controls remain their actual hit areas.
   Independent faces rotate in a flat parent; the resting text has its own 2D
   paint layer to avoid WebKit culling an untransformed backface-hidden label. */
.ref-flip-button{perspective:calc(var(--reference-unit) * 62.5);transform-style:flat}
.ref-flip-button[data-ref-flip-position]{position:relative}
.ref-flip-front{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:inherit;backface-visibility:visible;transition:translate .85s var(--ref-motion-bounce),rotate .75s var(--ref-motion-bounce),opacity .15s ease-out}
.ref-flip-back{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  border:var(--border-standard);border-radius:var(--radius-buttons);
  background:var(--color-carbon);color:var(--color-paper-white);
  opacity:0;translate:0 2em -6em;rotate:1 0 0 -90deg;
  pointer-events:none;backface-visibility:hidden;
  transition:translate .85s var(--ref-motion-bounce),rotate .75s var(--ref-motion-bounce),opacity .15s ease-out;
} /* Carbon/Paper White from DESIGN; colored CTA fills deliberately excluded. */
.ref-flip-button.button-primary .ref-flip-back{background:var(--color-paper-white);color:var(--color-carbon)}
/* The faces own hover inversion. Keep the outer hit-area paint stable so the
   earlier generic hover rule cannot recolor its text mid-flip (DO 3/6). */
.ref-flip-button:is(:hover,:focus-visible){background:var(--color-paper-white);color:var(--color-carbon)}
.ref-flip-button.button-primary:is(:hover,:focus-visible){background:var(--color-carbon);color:var(--color-paper-white)}
.band-link{perspective:calc(var(--reference-unit) * 62.5);transform-style:preserve-3d}
.band-face,.band-back{backface-visibility:hidden;transition:translate .85s var(--ref-motion-bounce),rotate .75s var(--ref-motion-bounce),opacity .15s ease-out}
.band-back{opacity:0;translate:0 2em -6em;rotate:1 0 0 -90deg;pointer-events:none}
.site-header .plus-button::before{transition:scale .75s var(--ref-motion-bounce)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ref-flip-button:is(:hover,:focus-visible) .ref-flip-front,
  .band-link:is(:hover,:focus-visible) .band-face{translate:0 -2em -6em;rotate:1 0 0 85deg;opacity:0}
  .ref-flip-button:is(:hover,:focus-visible) .ref-flip-back,
  .band-link:is(:hover,:focus-visible) .band-back{translate:0 0 0;rotate:1 0 0 0deg;opacity:1}
  .site-header .plus-button:hover::before{scale:0 1}
}
@media(max-width:991px){.site-header .plus-button[aria-expanded="true"]::before{scale:0 1}}
@media(prefers-reduced-motion:reduce){
  [data-ref-reveal],.ref-motion-char{opacity:1!important}
  [data-ref-parallax],.band-track,[data-marquee-scroll-target]{translate:none!important;will-change:auto!important}
  .ref-motion-logo-trail{display:none!important}
  .ref-flip-front,.ref-flip-back,.band-face,.band-back{transition:none!important}
  .ref-flip-back,.band-back{display:none!important}
  .site-header .plus-button::before{transition:none}
}
/* DESIGN tokens: PaperWhite/Carbon, body-lg15 scaled, spacing12/16,
   Aeonik700/.030, black1 and pill1600. Source cursor geometry: logo3em. */
.ref-download-cursor{
  position:fixed;z-index:1000;inset:0 auto auto 0;display:none;align-items:center;
  pointer-events:none;opacity:0;padding:.75em 1em;border:var(--border-standard);
  border-radius:var(--radius-pills);background:var(--color-paper-white);color:var(--color-carbon);
  font:var(--font-weight-bold) calc(var(--reference-unit) * .9375)/1 var(--font-aeonik-pro);
  letter-spacing:var(--tracking-button);text-transform:uppercase;white-space:nowrap;
  translate:var(--ref-cursor-x,0px) var(--ref-cursor-y,0px);
  transform:translate(var(--ref-cursor-anchor-x,6%),var(--ref-cursor-anchor-y,50%));
  transition:opacity .2s,translate .35s cubic-bezier(.215,.61,.355,1),transform .9s cubic-bezier(.215,.61,.355,1);
}
.ref-download-cursor img{width:3em;height:3em;margin-right:.625em;object-fit:contain}
.ref-download-cursor img[hidden]{display:none}
@media(min-width:992px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .ref-download-cursor{display:flex}.ref-download-cursor[data-visible]{opacity:1}
}
/* DO 3/4/6: shared tab highlight reuses Carbon/black1/pill1600; its size and
   position are measured from the existing token-sized tab, with no new padding. */
.mid-section .platform-tabs.ref-tabs-enhanced{position:relative;isolation:isolate}
.ref-tab-highlight{position:absolute;left:0;top:0;z-index:0;background:var(--color-carbon);border:var(--border-standard);border-radius:var(--radius-nav);pointer-events:none;transition:translate .5s var(--ref-motion-ease),width .5s var(--ref-motion-ease),height .5s var(--ref-motion-ease)}
.mid-section .ref-tabs-enhanced .platform-tab{position:relative;z-index:1;background:transparent;color:var(--color-carbon)}
.mid-section .ref-tabs-enhanced .platform-tab[data-ref-highlight]{color:var(--color-paper-white)}
@media(prefers-reduced-motion:reduce){.ref-tab-highlight{transition:none}}
/* Keep the user's 1.5× announcement speed; only pause hidden/offscreen work. */
.marquee[data-ref-paused] .marquee-track{animation-play-state:paused}
/* Source compact-menu cross rotates to a minus; only the existing 1px glyph moves. */
@media(max-width:991px){
  .site-header .plus-button{transition:rotate .75s var(--ref-motion-bounce)}
  .site-header .plus-button[aria-expanded="true"]{rotate:90deg}
}
@media(max-width:991px) and (prefers-reduced-motion:reduce){.site-header .plus-button{transition:none}}