/* AXMARU motion — spec §4. 기본 = 완성 상태(no-motion-first). 모든 움직임은 아래 블록 안에서만.
   컴포지터 전용: transform · opacity · clip-path · stroke-dashoffset. */
@media (prefers-reduced-motion: no-preference){
  /* 4.2 어휘 */
  html.js:not([data-motion="reduce"]) .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--d-reveal) var(--ease),transform var(--d-reveal) var(--ease)}
  html.js:not([data-motion="reduce"]) .reveal--x{transform:translateX(-12px)}
  html.js:not([data-motion="reduce"]) .reveal.is-in,html.js:not([data-motion="reduce"]) .reveal--x.is-in{opacity:1;transform:none}
  /* reveal--clip: clip-path는 IntersectionObserver 교차 면적을 0으로 만들어 진입 감지가 안 됨(Chrome 실측) → 커튼(::after) 방식으로 같은 연출 */
  html.js:not([data-motion="reduce"]) .reveal--clip{position:relative;overflow:hidden}
  html.js:not([data-motion="reduce"]) .reveal--clip::after{content:"";position:absolute;inset:0;background:var(--bg);z-index:var(--z-curtain);transform-origin:bottom;transform:scaleY(1);transition:transform 600ms var(--ease);pointer-events:none}
  html.js:not([data-motion="reduce"]) .reveal--clip.is-in::after{transform:scaleY(0)}
  html.js:not([data-motion="reduce"]) .mask .mask__w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
  html.js:not([data-motion="reduce"]) .mask .mask__w>*{display:inline-block;transform:translateY(110%);transition:transform var(--d-head) var(--ease)}
  html.js:not([data-motion="reduce"]) .mask.is-in .mask__w>*{transform:none}
  html.js:not([data-motion="reduce"]) .mask--xl .mask__w>*{transition-duration:1100ms}
  html.js:not([data-motion="reduce"]) .draw path,html.js:not([data-motion="reduce"]) .draw ellipse,html.js:not([data-motion="reduce"]) .draw line{stroke-dasharray:1;stroke-dashoffset:1}
  html.js:not([data-motion="reduce"]) .draw.is-in path,html.js:not([data-motion="reduce"]) .draw.is-in ellipse,html.js:not([data-motion="reduce"]) .draw.is-in line{animation:drawLine var(--d-line) var(--ease) forwards;animation-delay:calc(var(--k,0) * 120ms)}
  html.js:not([data-motion="reduce"]) .draw--long.is-in path,html.js:not([data-motion="reduce"]) .draw--long.is-in line{animation-duration:var(--d-line-long)}
  html.js:not([data-motion="reduce"]) .draw .no-draw{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  html.js:not([data-motion="reduce"]) .grow{transform:scaleX(0);transform-origin:var(--origin,left);transition:transform 600ms var(--ease)}
  html.js:not([data-motion="reduce"]) .grow--y{transform:scaleY(0);transform-origin:top;transition:transform 600ms var(--ease)}
  html.js:not([data-motion="reduce"]) .grow.is-in,html.js:not([data-motion="reduce"]) .grow--y.is-in{transform:none}
  html.js:not([data-motion="reduce"]) .pop{transform:scale(0);transition:transform 300ms var(--ease);transform-box:fill-box;transform-origin:center}
  html.js:not([data-motion="reduce"]) .pop.is-in{transform:scale(1)}
  html.js:not([data-motion="reduce"]) .fade{opacity:0;transition:opacity var(--d-state) var(--ease)}
  html.js:not([data-motion="reduce"]) .fade.is-in{opacity:1}
  /* 스태거 (비선형) */
  html.js:not([data-motion="reduce"]) .st-1{transition-delay:var(--st-1);animation-delay:var(--st-1)}
  html.js:not([data-motion="reduce"]) .st-2{transition-delay:var(--st-2);animation-delay:var(--st-2)}
  html.js:not([data-motion="reduce"]) .st-3{transition-delay:var(--st-3);animation-delay:var(--st-3)}
  html.js:not([data-motion="reduce"]) .st-4{transition-delay:var(--st-4);animation-delay:var(--st-4)}
  html.js:not([data-motion="reduce"]) .st-5{transition-delay:var(--st-5);animation-delay:var(--st-5)}
  html.js:not([data-motion="reduce"]) .st-6{transition-delay:var(--st-6);animation-delay:var(--st-6)}
  html.js:not([data-motion="reduce"]) .st-7{transition-delay:var(--st-7);animation-delay:var(--st-7)}
  /* 루프 2종 — IO가 .is-visible 토글 */
  html.js:not([data-motion="reduce"]) .contour__ring{animation:breathe 8s ease-in-out infinite;animation-play-state:paused}
  html.js:not([data-motion="reduce"]) .roadmap__ring{animation:roadPulse 1.6s ease-out infinite;animation-play-state:paused}
  html.js:not([data-motion="reduce"]) .is-visible .contour__ring,html.js:not([data-motion="reduce"]) .is-visible .roadmap__ring{animation-play-state:running}
  html.js:not([data-motion="reduce"]) .contour__ring.is-pulse{animation:ringPulse 900ms var(--ease) 1 forwards}
  /* 스크롤 드리븐 인핸스먼트 — 2곳만 (미지원 시 JS rAF 폴백) */
  @supports (animation-timeline: scroll()){
    html.js:not([data-motion="reduce"]) .progress__fill{animation:progressX linear both;animation-timeline:scroll(root)}
    html.js:not([data-motion="reduce"]) .altimeter__fill{animation:progressY linear both;animation-timeline:scroll(root)}
    html.js:not([data-motion="reduce"]) .hero__contour{animation:heroDrift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  }
  @keyframes drawLine{to{stroke-dashoffset:0}}
  @keyframes maskUp{from{transform:translateY(110%)}to{transform:none}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @keyframes nodePop{from{transform:scale(0)}to{transform:scale(1)}}
  @keyframes ringPulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.8);opacity:0}}
  @keyframes breathe{0%,100%{opacity:.5}50%{opacity:.25}}
  @keyframes roadPulse{from{transform:scale(1);opacity:.6}to{transform:scale(1.6);opacity:0}}
  @keyframes progressX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes progressY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes heroDrift{from{transform:translateY(0)}to{transform:translateY(-24px)}}
}
/* 4.9 reduce 가드 — 토글로 reduce 시 완전 정적 */
@media (prefers-reduced-motion: reduce){
  .contour__ring,.roadmap__ring{animation:none}
}
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation:none!important;transition:none!important}