/* Calchroma — motion layer Concept: refraction (light splitting) + flow (material moving). SAFETY RULE, do not break it: every hidden state below is scoped to html.js-motion. That class is added by a one-line inline script in , and only when the visitor has NOT asked for reduced motion. So if JavaScript fails, is blocked, or is slow, nothing is ever hidden — the page renders as plain static HTML. Never write a hidden state outside this gate. */ :root{ --ease: cubic-bezier(.16, 1, .3, 1); /* expo-out: fast away, long settle */ --ease-flow: ease-in-out; /* the continuous band wave */ --dur-reveal: 700ms; --dur-mask: 820ms; } /* ── initial states (gated) ─────────────────────────────────────── */ html.js-motion .m-mask{display:block;overflow:hidden} html.js-motion .m-mask > *{display:block;transform:translateY(110%)} html.js-motion [data-rise]{opacity:0;transform:translateY(14px)} html.js-motion .grid > .card, html.js-motion .grid > .fact{opacity:0;transform:translateY(18px)} html.js-motion .chips li{opacity:0;transform:scale(.94)} html.js-motion .panel tbody tr{opacity:0;transform:translateY(9px)} html.js-motion .hero-art path, html.js-motion .band-art path{opacity:0} html.js-motion .brand svg path{opacity:0} /* ── things CSS can own outright ────────────────────────────────── */ .card{transition:border-color .2s var(--ease), transform .2s var(--ease)} .btn{transition:transform .12s var(--ease), background .18s var(--ease)} details summary i, summary::after{transition:transform .35s var(--ease)} /* Cross-document page transitions. One rule, ignored by browsers that do not support it, no JavaScript, no router. Test on a real server. */ @view-transition{navigation:auto} ::view-transition-old(root){animation:m-out 220ms var(--ease) both} ::view-transition-new(root){animation:m-in 320ms var(--ease) both} @keyframes m-out{to{opacity:0}} @keyframes m-in{from{opacity:0}} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;transition-duration:.001ms!important} @view-transition{navigation:none} }