/* ═══════════════════════════════════════════════════════════
   motion.css — entrances, scroll reveals, hover
   Hero headline character reveal is split by motion.js.
   Everything is gated so that content is visible without JS.
   ═══════════════════════════════════════════════════════════ */

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rise{from{transform:translateY(112%) rotate(3deg);opacity:0}to{transform:none;opacity:1}}
@keyframes drawOn{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes popIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes wipeIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes failsafe{to{opacity:1}}

/* ───────────── Page entrance (CSS only, staggered via --i) ───────────── */
.enter{animation:fadeUp .9s var(--ease) both;animation-delay:calc(var(--i,0) * 110ms + 150ms)}
.enter-wipe{animation:wipeIn 1.1s var(--ease) both;animation-delay:calc(var(--i,0) * 110ms + 150ms)}

/* Wordmark: frame + C draw on, dot pops, text rises */
.topbar .mark__frame,.topbar .mark__c{stroke-dasharray:1;stroke-dashoffset:1;animation:drawOn 1.1s var(--ease) .15s forwards}
.topbar .mark__c{animation-delay:.45s}
.topbar .mark__dot{transform-box:fill-box;transform-origin:center;animation:popIn .5s var(--ease) 1.1s both}
.topbar .wordmark__text{animation:fadeUp .8s var(--ease) .5s both}

/* ───────────── Character reveal ───────────── */
.js .split-target:not(.is-split){opacity:0;animation:failsafe .01s 1.6s forwards}
.split-target .w{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:bottom;padding:.12em .04em;margin:-.12em -.04em}
.split-target .ch{display:inline-block;animation:rise .95s var(--ease) both;animation-delay:calc(var(--c) * 32ms + 420ms)}

/* ───────────── Scroll reveals ───────────── */
.js [data-in]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease), transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js [data-in].is-in{opacity:1;transform:none}
.js .reveal-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1s var(--ease)}
.js .reveal-wipe.is-visible{clip-path:inset(-.3em -2em -.3em -.3em)}

/* ───────────── Hover polish (150–250ms) ───────────── */
a{transition:color var(--dur-fast) var(--ease)}
.habit,.disc,.prod__price,.prod__spec{transition:background-color var(--dur) var(--ease)}
.habit:hover{--tile-bg:var(--surface-raised)}
.habit--3:hover{--tile-bg:var(--brand-accent)}
.habit .n{transition:color var(--dur) var(--ease), transform .5s var(--ease)}
.habit:hover .n{color:var(--brand-primary);transform:translateY(-4px)}
.habit--3:hover .n{color:var(--text-primary)}
.nav a,.crumbs a,.ftr__links a{transition:color var(--dur-fast) var(--ease)}

/* ───────────── Reduced motion ───────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
}