/* ===== scroll reveal (CSS scroll-driven, IO fallback adds .in) ===== */
.js .reveal{opacity:0;transform:translateY(var(--reveal-dist))}
.reveal.in{opacity:1;transform:none;transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out)}
.reveal[data-delay="1"].in{transition-delay:.08s}.reveal[data-delay="2"].in{transition-delay:.16s}.reveal[data-delay="3"].in{transition-delay:.24s}.reveal[data-delay="4"].in{transition-delay:.32s}.reveal[data-delay="5"].in{transition-delay:.4s}
@supports (animation-timeline:view()){
  .reveal:not(.no-sda){opacity:1;transform:none;animation:reveal-up var(--dur-enter) var(--ease-out) both;animation-timeline:view();animation-range:entry 0% entry 28%}
  .reveal[data-delay]:not(.no-sda){animation-range:entry 6% entry 34%}
}
@keyframes reveal-up{from{opacity:0;transform:translateY(var(--reveal-dist))}to{opacity:1;transform:none}}

/* stagger children */
.js .stagger>*{opacity:0;transform:translateY(var(--reveal-dist))}
.stagger.in>*{opacity:1;transform:none;transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out)}
.stagger.in>*:nth-child(1){transition-delay:0s}.stagger.in>*:nth-child(2){transition-delay:.08s}.stagger.in>*:nth-child(3){transition-delay:.16s}.stagger.in>*:nth-child(4){transition-delay:.24s}.stagger.in>*:nth-child(5){transition-delay:.32s}.stagger.in>*:nth-child(6){transition-delay:.4s}.stagger.in>*:nth-child(7){transition-delay:.48s}.stagger.in>*:nth-child(8){transition-delay:.56s}

/* draw line */
.js .draw path,.js .draw line{stroke-dasharray:1;stroke-dashoffset:1}
.draw.in path,.draw.in line{animation:draw 1.2s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* pill card inflate */
.js .inflate{border-radius:24px}
.inflate.in{border-radius:var(--pill);transition:border-radius .9s var(--ease-out),opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out)}

/* stamp */
.js .stamp{transform:scale(1.12);opacity:0}
.stamp.in{transform:none;opacity:1;transition:transform .5s var(--ease-expo),opacity .3s}

/* hero: JS가 로드되기 전에도 최종 상태로 보임 → JS가 되감아 재생 (FOUC/LCP 보호) */
.js-anim .hero__title .char{display:inline-block;will-change:transform}
.js-anim .hero .hcell{will-change:transform}

/* view transitions */
@view-transition{navigation:auto}
::view-transition-old(root){animation:180ms var(--ease-out) both fade-out}
::view-transition-new(root){animation:260ms var(--ease-out) both fade-in}
@keyframes fade-out{to{opacity:0}}@keyframes fade-in{from{opacity:0}}

@media (prefers-reduced-motion:reduce){html:not(.motion-on) .reveal,html:not(.motion-on) .stagger>*,html:not(.motion-on) .stamp,html:not(.motion-on) .inflate{opacity:1!important;transform:none!important;animation:none!important;border-radius:var(--pill)}html:not(.motion-on) .marquee__track{animation:none}html:not(.motion-on) .draw path,html:not(.motion-on) .draw line{stroke-dashoffset:0}
}