/* ════════════════════════════════════════════════════════════
   MOTION LIBRARY — 바닐라, 하드웨어 가속(transform/opacity만)
   원칙(taste-skill): 절제된 과감함 · 네온글로우 X · 순흑 X
   · 스프링 이징 · 스태거 오케스트레이션 · prefers-reduced-motion 존중
   ════════════════════════════════════════════════════════════ */

/* ─── 1. Reveal 변형 (IntersectionObserver가 .visible 부여) ─── */
/* 우아·고급(hnleadersdental 참조): 크게 움직이되 느리고 부드럽게(1.1s 감속) — 회전·과한 확대 X */
[data-reveal]{opacity:0;will-change:transform,opacity;
  transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out)}
[data-reveal="up"]{transform:translateY(90px)}
[data-reveal="down"]{transform:translateY(-90px)}
[data-reveal="left"]{transform:translateX(-92px)}
[data-reveal="right"]{transform:translateX(92px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="blur"]{filter:blur(12px);transition:opacity 1.1s var(--ease-out),transform 1.1s var(--ease-out),filter 1.1s var(--ease-out)}
[data-reveal].visible{opacity:1;transform:none;filter:none;will-change:auto}

/* ─── 2. Stagger (부모 .visible → 자식 순차 폭포) ─── */
[data-stagger] > *{opacity:0;transform:translateY(48px);will-change:transform,opacity;
  transition:opacity .95s var(--ease-out),transform .95s var(--ease-out)}
[data-stagger].visible > *{opacity:1;transform:none;will-change:auto}
[data-stagger].visible > *:nth-child(1){transition-delay:.06s}
[data-stagger].visible > *:nth-child(2){transition-delay:.16s}
[data-stagger].visible > *:nth-child(3){transition-delay:.26s}
[data-stagger].visible > *:nth-child(4){transition-delay:.36s}
[data-stagger].visible > *:nth-child(5){transition-delay:.46s}
[data-stagger].visible > *:nth-child(6){transition-delay:.56s}
[data-stagger].visible > *:nth-child(7){transition-delay:.66s}
[data-stagger].visible > *:nth-child(8){transition-delay:.76s}

/* ─── 3. 스크롤 진행 바 (상단) ─── */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:1200;
  background:linear-gradient(90deg,var(--blue),var(--blue-soft));
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* ─── 4. 3D 틸트 카드 (커서 추적, JS가 --rx/--ry 설정) ─── */
[data-tilt]{transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateZ(0);
  transition:transform .3s var(--ease-out);transform-style:preserve-3d}
[data-tilt] .tilt-pop{transform:translateZ(36px)}

/* ─── 5. 스포트라이트 (커서 따라 은은한 빛, JS가 --mx/--my) ─── */
[data-spotlight]{position:relative;isolation:isolate}
[data-spotlight]::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(30,95,191,.12),transparent 62%);
  opacity:0;transition:opacity .35s var(--ease-out);pointer-events:none}
[data-spotlight]:hover::after{opacity:1}

/* ─── 6. 마그네틱 버튼 (JS가 transform translate) ─── */
[data-magnetic]{will-change:transform;transition:transform .35s var(--ease-out)}

/* ─── 7. 그라데이션 보더 카드 (회전하는 테두리 빛) ─── */
.grad-border{position:relative;border-radius:var(--r-lg);isolation:isolate}
.grad-border::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--ang,0deg),transparent 0%,var(--blue) 18%,transparent 36%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.grad-border:hover::before{opacity:1;animation:angSpin 3s linear infinite}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes angSpin{to{--ang:360deg}}

/* ─── 8. 무한 마이크로 모션 (절제) ─── */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.float-slow{animation:floaty 5.5s ease-in-out infinite;will-change:transform}
@keyframes pulseRing{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.6);opacity:0}100%{opacity:0}}
.pulse-dot{position:relative}
.pulse-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);
  animation:pulseRing 2.4s var(--ease-out) infinite}

/* ─── 9. 흐르는 띠 마퀴 (장비·신뢰 키워드) ─── */
.marquee-mask{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee{display:inline-flex;gap:var(--sp-5);white-space:nowrap;animation:marquee 26s linear infinite;will-change:transform}
.marquee-mask:hover .marquee{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ─── 10. 그라데이션 텍스트 (액센트 단어만 — 절제) ─── */
.text-grad{background:linear-gradient(110deg,var(--blue),var(--blue-soft) 80%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ─── 11. 라인 드로잉 SVG (인뷰 시 그려짐) ─── */
.draw-svg [pathLength]{stroke-dasharray:100;stroke-dashoffset:100}
.draw-svg.visible [pathLength]{animation:drawLine 1.1s var(--ease-out) forwards}
@keyframes drawLine{to{stroke-dashoffset:0}}

/* ─── 접근성: 모션 최소화 선호 시 전부 정지 ─── */
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-stagger] > *{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .scroll-progress{display:none}
  [data-tilt]{transform:none!important}
  .float-slow,.pulse-dot::before,.marquee,.grad-border:hover::before{animation:none!important}
  .draw-svg [pathLength]{stroke-dashoffset:0}
}