/* 온스토리 애니메이션 부품 v1 — 맞춤형 섹션이 이름으로 부른다 · 스크립트 0 · 규칙 docs/MOTION.md §7 · 이름 목록 lib/cs-anim.ts
   data-anim="up|left|zoom|wipe"  스크롤 등장(지원 안 하는 브라우저는 완성된 모습) · 부모 data-stagger = 차례로
   data-hover="lift|zoom"         마우스를 올리면 뜨기 · 안의 사진 확대
   data-loop="float|glow|pulse"   떠다니기 · 빛 · 표시등(끝없이 — 섹션당 1개)
   data-ticker                    흐르는 띠(첫 자식 = 같은 글 두 번 · 마우스·초점이면 멈춤 · 끝없이)
   data-kenburns                  첫 화면 사진이 천천히 다가옴(한 번)
   data-kenburns="view"           보일 때 확대 — 화면에 들어와 지나갈 때까지 1.12→1(스크롤 연동 · 위치 고정 = 패럴랙스 아님 · 지원 안 하면 정지 사진)
   data-bg · data-bg="dim"        배경 사진 틀 — 첫 자식 사진(img·figure·picture)을 상자 가득 깔고 넘침 자름 · dim = 글자 읽히게 어둡게(--cs-dim)
   data-snap                      스크롤 걸림 — 쪽 스크롤이 이 상자 근처에서만 화면 맨 위에 딱 맞게 멈춤(proximity · 이 상자 하나 · --cs-snap-top 위 여백 · 끄기와 상관없음)
   data-once="lift"               한 번 — 끝 모습은 섹션 CSS · 시작 모습은 --cs-from(기본 12px 아래)
   끄기 = 조상에 data-anim-off(/edit 애니메이션 효과 «끄기») · 움직임 줄이기 설정은 따르지 않는다(MOTION.md v6) */

@supports (animation-timeline:view()){
[data-anim]{animation:cs-up 1s cubic-bezier(.25,.46,.45,.94) both;animation-timeline:view();animation-range:entry 0% entry 90%}
[data-anim=left]{animation-name:cs-left}
[data-anim=zoom]{animation-name:cs-zoom}
[data-anim=wipe]{animation-name:cs-wipe}
[data-stagger]>[data-anim]:nth-child(2){animation-range:entry 8% entry 96%}
[data-stagger]>[data-anim]:nth-child(3){animation-range:entry 14% entry 100%}
[data-stagger]>[data-anim]:nth-child(n+4){animation-range:entry 20% entry 100%}
[data-kenburns=view]{animation:cs-kb 1s linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
}
@keyframes cs-up{from{opacity:0;transform:translateY(var(--mo-d,56px))}}
@keyframes cs-left{from{opacity:0;transform:translateX(calc(var(--mo-d,56px)*-1))}}
@keyframes cs-zoom{from{opacity:0;transform:scale(.92)}}
@keyframes cs-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

:where([data-hover=zoom]){overflow:clip}
@media (hover:hover) and (pointer:fine){
[data-hover=lift]{transition:transform .3s cubic-bezier(.25,.8,.25,1),box-shadow .3s cubic-bezier(.25,.8,.25,1)}
[data-hover=lift]:not([data-anim-off] *):hover{transform:translateY(var(--mo-lift,-2px));box-shadow:var(--hv-shadow,0 16px 32px rgba(26,39,34,.12))}
[data-hover=zoom] img{transition:transform .4s cubic-bezier(.25,.8,.25,1)}
[data-hover=zoom]:not([data-anim-off] *):hover img{transform:scale(var(--mo-zoom,1.08))}
}
@media (hover:none){[data-hover]:active{transform:scale(.98);transition:transform .12s}}

[data-loop=float]{animation:cs-float 4.2s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes cs-float{to{transform:translateY(-10px)}}
[data-loop=glow]{animation:cs-glow 2.8s ease-in-out infinite}
@keyframes cs-glow{0%,100%{box-shadow:0 0 0 6px transparent,0 0 24px transparent}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--cs-glow,currentColor) 30%,transparent),0 0 24px color-mix(in srgb,var(--cs-glow,currentColor) 45%,transparent)}}
:where([data-loop=pulse]){position:relative}
[data-loop=pulse]::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;pointer-events:none;animation:cs-pulse 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes cs-pulse{from{transform:scale(1);opacity:.7}to{transform:scale(2.6);opacity:0}}

:where([data-ticker]){overflow:clip;white-space:nowrap}
:where([data-ticker]>*){width:max-content}
[data-ticker]>*{animation:cs-tick var(--cs-tick,38s) linear infinite}
[data-ticker]:is(:hover,:focus-within)>*{animation-play-state:paused}
@keyframes cs-tick{to{transform:translateX(-50%)}}

[data-kenburns]:not([data-kenburns=view]){animation:cs-kb 18s cubic-bezier(.25,.46,.45,.94) both}
@keyframes cs-kb{from{transform:scale(1.12)}}
:where([data-bg]){position:relative;isolation:isolate;overflow:clip}
:where([data-bg])>:is(img,figure,picture):first-child{position:absolute;inset:0;z-index:-2;width:100%;height:100%;margin:0}
:where([data-bg])>:first-child:is(img),:where([data-bg])>:is(figure,picture):first-child img{display:block;width:100%;height:100%;object-fit:cover}
[data-bg=dim]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgb(0 0 0/calc(var(--cs-dim,.5)*.5)),rgb(0 0 0/var(--cs-dim,.5)))}
html:has(.cs [data-snap]){scroll-snap-type:y proximity}
.cs [data-snap]{scroll-snap-align:start;scroll-margin-top:var(--cs-snap-top,0px)}
[data-once=lift]{animation:cs-once 1.6s cubic-bezier(.6,.05,.2,1) .4s both}
@keyframes cs-once{0%,50%{transform:var(--cs-from,translateY(12px))}}

[data-anim-off] :is([data-anim],[data-loop],[data-ticker]>*,[data-kenburns],[data-once]),[data-anim-off] [data-loop]::after,[data-anim-off] .cs *,[data-anim-off] .cs ::before,[data-anim-off] .cs ::after{animation:none!important}