/**
 * HPMotion v1.0.0 · 효과 22개 · 사이트 번들 · ids: reveal, reveal-stagger, mask-reveal, img-scale, clip-wipe, scroll-hint-bounce, parallax, pin-scene, progress-bar, text-highlight-marker, split-lines, text-marquee, tilt-3d, shine, grain, glow-border, button-fill-slide, nav-blur-glass, back-to-top-progress, magnetic, hover-zoom, link-underline
 * HPMotion 효과 라이브러리 — 스타일 (kit/motion/motion.css)
 * from: D:\홈페이지\docs\superpowers\plans\2026-09-18-console-2차.md A절
 *
 * 규칙
 * - 초기 숨김은 반드시 `html.js:not([data-motion="off"])` 뒤에만 건다 (JS 실패·모션 끔이면 전부 보임).
 * - `@media (prefers-reduced-motion: reduce)`에서 반복·핀·3D·빛 효과는 꺼지고 등장은 즉시 표시.
 * - 모바일(<768px) 대안은 여기서 레이아웃으로 처리하고, JS는 `html.hp-mobile`을 보고 바인딩을 건너뛴다.
 * - 회사 사이트는 이 파일을 `site/assets/css/motion.css`로 복사만 한다(수정 금지). 색·크기는 `--hp-*` 변수로 덮어쓴다.
 */

:root {
  --hp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --hp-ease-inout: cubic-bezier(0.83, 0, 0.17, 1);
  --hp-dur: 0.9s;
  --hp-shine-color: rgba(255, 255, 255, 0.55);
  --hp-glow-color: #7cf0ff;
  --hp-spot-size: 260px;
  --hp-spot-color: rgba(0, 0, 0, 0.82);
  --hp-underline-color: currentColor;
  --hp-grain-opacity: 0.09;
  --hp-cursor-color: #fff;
  --hp-blob-a: #ff7a59;
  --hp-blob-b: #7c5cff;
  --hp-blob-c: #19d3c5;
  --hp-x: 50%;
  --hp-y: 50%;
}

/* ---------- 0. 게이트 ---------- */
html.js:not([data-motion="off"]) [data-motion="reveal"]:not(.hp-in),
html.js:not([data-motion="off"]) [data-motion="reveal-stagger"]:not(.hp-in) > *,
html.js:not([data-motion="off"]) [data-motion="blur-in"]:not(.hp-in) {
  opacity: 0;
}
html.js:not([data-motion="off"]) [data-motion="mask-reveal"]:not(.hp-in) { clip-path: inset(0 100% 0 0); }
html.js:not([data-motion="off"]) [data-motion="mask-reveal"][data-dir="right"]:not(.hp-in) { clip-path: inset(0 0 0 100%); }
html.js:not([data-motion="off"]) [data-motion="mask-reveal"][data-dir="up"]:not(.hp-in) { clip-path: inset(100% 0 0 0); }
html.js:not([data-motion="off"]) [data-motion="mask-reveal"][data-dir="down"]:not(.hp-in) { clip-path: inset(0 0 100% 0); }
html.js:not([data-motion="off"]) [data-motion="mask-reveal"][data-dir="circle"]:not(.hp-in) { clip-path: circle(0% at 50% 50%); }

/* 등장 효과 폴백(GSAP 없을 때 JS가 .hp-in 만 붙인다) */
[data-motion="reveal"], [data-motion="reveal-stagger"] > *, [data-motion="blur-in"], [data-motion="mask-reveal"] {
  transition: opacity var(--hp-dur) var(--hp-ease-out), transform var(--hp-dur) var(--hp-ease-out), filter var(--hp-dur) var(--hp-ease-out), clip-path 1.2s var(--hp-ease-inout);
}
html.hp-gsap [data-motion="reveal"], html.hp-gsap [data-motion="reveal-stagger"] > *, html.hp-gsap [data-motion="blur-in"], html.hp-gsap [data-motion="mask-reveal"] { transition: none; }
html.js:not([data-motion="off"]):not(.hp-gsap) [data-motion="reveal"]:not(.hp-in) { transform: translateY(40px); }
html.js:not([data-motion="off"]):not(.hp-gsap) [data-motion="reveal"][data-dir="left"]:not(.hp-in) { transform: translateX(-40px); }
html.js:not([data-motion="off"]):not(.hp-gsap) [data-motion="reveal"][data-dir="right"]:not(.hp-in) { transform: translateX(40px); }
html.js:not([data-motion="off"]):not(.hp-gsap) [data-motion="reveal"][data-dir="down"]:not(.hp-in) { transform: translateY(-40px); }
html.js:not([data-motion="off"]):not(.hp-gsap) [data-motion="reveal-stagger"]:not(.hp-in) > * { transform: translateY(32px); }
html.js:not([data-motion="off"]):not(.hp-gsap) [data-motion="blur-in"]:not(.hp-in) { filter: blur(14px); transform: scale(1.04); }
html:not(.hp-gsap) [data-motion="reveal-stagger"] > :nth-child(2) { transition-delay: 0.08s; }
html:not(.hp-gsap) [data-motion="reveal-stagger"] > :nth-child(3) { transition-delay: 0.16s; }
html:not(.hp-gsap) [data-motion="reveal-stagger"] > :nth-child(4) { transition-delay: 0.24s; }
html:not(.hp-gsap) [data-motion="reveal-stagger"] > :nth-child(5) { transition-delay: 0.32s; }
html:not(.hp-gsap) [data-motion="reveal-stagger"] > :nth-child(n + 6) { transition-delay: 0.4s; }

.hp-ch, .hp-word { display: inline-block; white-space: pre; }
.hp-word { white-space: normal; }
/* 로더 공통: JS 없음·모션 끔·완료(hp-done) 면 숨김 — id 가 preloader 로 시작하거나 정의에 preloader:true 인 효과 전부 */
html:not(.js) [data-motion^="preloader"], html[data-motion="off"] [data-motion^="preloader"], [data-motion^="preloader"].hp-done { display: none !important; }

/* ================= 효과별 (gen.mjs 가 effects/*.mjs 의 css 를 병합) ================= */
/* ---- mask-reveal (entrance.mjs) ---- */
[data-motion="mask-reveal"] { overflow: hidden; display: block; }
[data-motion="mask-reveal"] > img, [data-motion="mask-reveal"] > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- img-scale (entrance.mjs) ---- */
[data-motion="img-scale"] { overflow: hidden; display: block; }
[data-motion="img-scale"] > img, [data-motion="img-scale"] > video { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center; will-change: transform; }

/* ---- clip-wipe (entrance.mjs) ---- */
[data-motion="clip-wipe"] { position: relative; z-index: 2; }

/* ---- scroll-hint-bounce (scroll-b2.mjs) ---- */
[data-motion="scroll-hint-bounce"] [data-hint] { animation: hp-scroll-hint-bounce var(--hp-hint-dur, 1.6s) var(--hp-ease-inout) infinite; transition: opacity .5s var(--hp-ease-out); will-change: transform; }
[data-motion="scroll-hint-bounce"].hp-scroll-hint-bounce-off [data-hint] { opacity: 0; pointer-events: none; }
@keyframes hp-scroll-hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { [data-motion="scroll-hint-bounce"] [data-hint] { animation: none !important; opacity: 1 !important; transform: none !important; } }
html[data-motion="off"] [data-motion="scroll-hint-bounce"] [data-hint] { animation: none !important; }

/* ---- parallax (scroll.mjs) ---- */
[data-motion="parallax"] { will-change: transform; }
.hp-parallax-wrap, [data-parallax-wrap] { overflow: hidden; position: relative; }

/* ---- pin-scene (scroll.mjs) ---- */
[data-motion="pin-scene"] { position: relative; }
[data-motion="pin-scene"] [data-steps] { position: relative; }
html.hp-pin-ready [data-motion="pin-scene"].hp-pin-active [data-step] { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; will-change: transform, opacity; }
[data-motion="pin-scene"] [data-step-dots] { display: flex; gap: 8px; }
[data-motion="pin-scene"] [data-step-dots] i { display: block; width: 28px; height: 3px; background: currentColor; opacity: 0.25; transition: opacity 0.3s; }
[data-motion="pin-scene"] [data-step-dots] i.hp-on { opacity: 1; }

/* ---- progress-bar (scroll.mjs) ---- */
[data-motion="progress-bar"] { transform-origin: left center; transform: scaleX(0); will-change: transform; }

/* ---- text-highlight-marker (typo-c.mjs) ---- */
[data-motion="text-highlight-marker"] { --hp-hm-color: rgba(255,209,102,.75); background-image: linear-gradient(var(--hp-hm-color), var(--hp-hm-color)); background-repeat: no-repeat; background-size: 0% 46%; background-position: 0 82%; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.08em; margin: 0 -0.08em; border-radius: 0.1em; }
@media (prefers-reduced-motion: reduce) { [data-motion="text-highlight-marker"] { background-size: 100% 46%; } }
html[data-motion="off"] [data-motion="text-highlight-marker"] { background-size: 100% 46%; }

/* ---- split-lines (typo.mjs) ---- */
[data-motion="split-lines"], [data-motion="split-chars"], [data-motion="text-wave"], [data-motion="text-scramble"], [data-motion="blur-in"] { will-change: transform, opacity; }

/* ---- text-marquee (typo.mjs) ---- */
[data-motion="text-marquee"] { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hp-marquee-track { display: flex; width: max-content; will-change: transform; animation: hp-marquee var(--hp-marquee-dur, 24s) linear infinite; }
.hp-marquee-track > * { flex: 0 0 auto; display: flex; align-items: center; gap: var(--hp-marquee-gap, 3rem); padding-right: var(--hp-marquee-gap, 3rem); }
[data-motion="text-marquee"][data-dir="right"] .hp-marquee-track { animation-direction: reverse; }
html.hp-gsap .hp-marquee-track { animation: none; }
html:not(.hp-gsap) [data-motion="text-marquee"]:hover .hp-marquee-track { animation-play-state: paused; }
@keyframes hp-marquee { to { transform: translateX(-50%); } }

/* ---- tilt-3d (3d.mjs) ---- */
[data-motion="tilt-3d"] { transform-style: preserve-3d; will-change: transform; position: relative; }
[data-motion="tilt-3d"] [data-depth] { transform: translateZ(calc(var(--hp-tilt-depth, 40px) * var(--d, 1))); }
.hp-tilt-glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at var(--hp-x) var(--hp-y), rgba(255, 255, 255, 0.35), transparent 60%); opacity: 0; transition: opacity 0.4s; mix-blend-mode: screen; }
[data-motion="tilt-3d"].hp-hover .hp-tilt-glare { opacity: 1; }

/* ---- shine (light.mjs) ---- */
.hp-has-shine { position: relative; overflow: hidden; isolation: isolate; }
.hp-shine { position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; pointer-events: none; background: linear-gradient(105deg, transparent 20%, var(--hp-shine-color) 50%, transparent 80%); transform: translateX(-160%) skewX(-18deg); will-change: transform; z-index: 3; mix-blend-mode: plus-lighter; }
[data-motion="shine"].hp-shine-text { background-image: linear-gradient(110deg, currentColor 40%, var(--hp-shine-color) 50%, currentColor 60%); background-size: 260% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: inherit; }

/* ---- grain (light.mjs) ---- */
[data-motion="grain"] { position: relative; }
.hp-grain { position: absolute; inset: -100%; pointer-events: none; z-index: 4; opacity: var(--hp-grain-opacity); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); background-size: 300px 300px; animation: hp-grain 0.6s steps(6) infinite; mix-blend-mode: overlay; }
.hp-grain.hp-grain-fixed { position: fixed; inset: -100%; }
@keyframes hp-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-8%, 6%); } 40% { transform: translate(5%, -9%); } 60% { transform: translate(-6%, -4%); } 80% { transform: translate(8%, 7%); } 100% { transform: translate(-3%, 3%); } }

/* ---- glow-border (light.mjs) ---- */
[data-motion="glow-border"] { position: relative; --hp-gb-color: var(--hp-glow-color); }
[data-motion="glow-border"]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: radial-gradient(240px circle at var(--hp-x) var(--hp-y), var(--hp-gb-color), transparent 65%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s; pointer-events: none; z-index: 2; }
[data-motion="glow-border"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(320px circle at var(--hp-x) var(--hp-y), color-mix(in srgb, var(--hp-gb-color) 14%, transparent), transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; z-index: 0; }
[data-motion="glow-border"].hp-hover::before, [data-motion="glow-border"].hp-hover::after { opacity: 1; }

/* ---- button-fill-slide (interaction-d.mjs) ---- */
[data-motion="button-fill-slide"] { position: relative; overflow: hidden; isolation: isolate; transition: color .35s; }
[data-motion="button-fill-slide"]::before { content: ""; position: absolute; inset: 0; background: var(--hp-bfs-color, #fff); z-index: -1; transform: translateX(-101%); transition: transform .5s var(--hp-ease-out); }
[data-motion="button-fill-slide"][data-dir="right"]::before { transform: translateX(101%); }
[data-motion="button-fill-slide"][data-dir="up"]::before { transform: translateY(101%); }
[data-motion="button-fill-slide"][data-dir="down"]::before { transform: translateY(-101%); }
[data-motion="button-fill-slide"]:hover::before, [data-motion="button-fill-slide"]:focus-visible::before { transform: translate(0, 0); }
[data-motion="button-fill-slide"]:hover, [data-motion="button-fill-slide"]:focus-visible { color: var(--hp-bfs-text, #0b0d12); }
.hp-bfs-arrow { display: inline-block; transition: transform .4s var(--hp-ease-out); }
[data-motion="button-fill-slide"]:hover .hp-bfs-arrow { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { [data-motion="button-fill-slide"], [data-motion="button-fill-slide"]::before, .hp-bfs-arrow { transition: none !important; } }

/* ---- nav-blur-glass (interaction-nav.mjs) ---- */
[data-motion="nav-blur-glass"] { transition: background .4s, backdrop-filter .4s, border-color .4s, box-shadow .4s; border-bottom: 1px solid transparent; }
[data-motion="nav-blur-glass"].hp-nav-blur-glass-on { background: var(--hp-nav-glass, rgba(12,15,22,.62)); -webkit-backdrop-filter: blur(var(--hp-nav-blur, 14px)); backdrop-filter: blur(var(--hp-nav-blur, 14px)); border-bottom-color: rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
@media (prefers-reduced-motion: reduce) { [data-motion="nav-blur-glass"] { transition: none; } }

/* ---- back-to-top-progress (interaction-nav.mjs) ---- */
[data-motion="back-to-top-progress"] { opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .4s var(--hp-ease-out), transform .4s var(--hp-ease-out); cursor: pointer; }
[data-motion="back-to-top-progress"].hp-back-to-top-progress-on { opacity: 1; transform: none; pointer-events: auto; }
[data-motion="back-to-top-progress"] svg { transform: rotate(-90deg); }
[data-motion="back-to-top-progress"] [data-ring] { fill: none; stroke-linecap: round; will-change: stroke-dashoffset; }
@media (prefers-reduced-motion: reduce) { [data-motion="back-to-top-progress"] { opacity: 1; transform: none; pointer-events: auto; transition: none; } }

/* ---- magnetic (interaction.mjs) ---- */
[data-motion="magnetic"] { display: inline-block; will-change: transform; }
[data-motion="magnetic"] > * { display: inline-block; will-change: transform; }

/* ---- hover-zoom (interaction.mjs) ---- */
[data-motion="hover-zoom"] { overflow: hidden; position: relative; display: block; }
[data-motion="hover-zoom"] img, [data-motion="hover-zoom"] video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--hp-ease-out), filter 0.8s; will-change: transform; }
[data-motion="hover-zoom"]:hover img, [data-motion="hover-zoom"]:hover video { transform: scale(var(--hp-zoom, 1.08)); }
[data-motion="hover-zoom"] [data-caption] { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; transform: translateY(12px); opacity: 0; transition: transform 0.6s var(--hp-ease-out), opacity 0.5s; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); color: #fff; }
[data-motion="hover-zoom"]:hover [data-caption] { transform: translateY(0); opacity: 1; }
html.hp-mobile [data-motion="hover-zoom"] [data-caption] { transform: none; opacity: 1; }

/* ---- link-underline (interaction.mjs) ---- */
[data-motion="link-underline"] { text-decoration: none; background-image: linear-gradient(var(--hp-underline-color), var(--hp-underline-color)); background-size: 0% var(--hp-underline-w, 2px); background-position: 100% 100%; background-repeat: no-repeat; transition: background-size 0.5s var(--hp-ease-inout); padding-bottom: 2px; }
[data-motion="link-underline"]:hover, [data-motion="link-underline"]:focus-visible { background-size: 100% var(--hp-underline-w, 2px); background-position: 0% 100%; }

/* ---------- 8. 모바일 대안 ---------- */
@media (max-width: 767px) {
  [data-motion="horizontal"] [data-track] { flex-direction: column; width: 100%; transform: none !important; }
  [data-motion="horizontal"] [data-track] > * { width: 100%; }
  [data-motion="pin-scene"] [data-step] { position: static !important; opacity: 1 !important; transform: none !important; }
  [data-motion="ring-3d"] [data-track] { transform: none !important; display: grid; gap: 12px; height: auto !important; }
  [data-motion="ring-3d"] [data-track] > * { position: static; transform: none !important; }
  .hp-cursor, .hp-spotlight, .hp-trail-img, .hp-tilt-glare { display: none !important; }
  [data-motion="tilt-3d"], [data-motion="magnetic"], [data-motion="magnetic"] > *, [data-motion="depth-layers"] [data-depth], [data-motion="text-extrude"] { transform: none !important; }
  .hp-blobs { filter: blur(40px); }
  [data-motion="text-outline-fill"] .hp-of-fill { clip-path: inset(0 0 0 0) !important; }
}

/* ---------- 9. 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-motion]:not(.hp-in), html.js [data-motion="reveal-stagger"]:not(.hp-in) > * { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; visibility: visible !important; }
  [data-motion="split-lines"], [data-motion="split-chars"] { visibility: visible !important; }
  .hp-marquee-track, .hp-blob, .hp-grain, [data-motion="glow"] { animation: none !important; }
  .hp-shine, .hp-cursor, .hp-spotlight, .hp-trail-img { display: none !important; }
  [data-motion="text-reveal-scroll"] .hp-word { opacity: 1 !important; }
  [data-motion="text-outline-fill"] .hp-of-fill { clip-path: inset(0 0 0 0) !important; }
  [data-motion="progress-bar"] { transform: scaleX(1) !important; }
  [data-motion^="preloader"] { display: none !important; }
  [data-motion="pin-scene"] [data-step] { position: static !important; opacity: 1 !important; }
  [data-motion="horizontal"] [data-track] { flex-wrap: wrap; width: 100%; }
  [data-motion="hover-zoom"] img, [data-motion="flip-card"] > .hp-flip-inner, [data-motion="link-underline"] { transition: none !important; }
}
html[data-motion="off"] [data-motion]:not(.hp-in), html[data-motion="off"] [data-motion="reveal-stagger"] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; visibility: visible !important; }
html[data-motion="off"] .hp-marquee-track, html[data-motion="off"] .hp-blob, html[data-motion="off"] .hp-grain, html[data-motion="off"] [data-motion="glow"] { animation: none !important; }
html[data-motion="off"] [data-motion="text-outline-fill"] .hp-of-fill { clip-path: inset(0 0 0 0) !important; }
html[data-motion="off"] [data-motion="text-reveal-scroll"] .hp-word { opacity: 1 !important; }
html[data-motion="off"] [data-motion="progress-bar"] { transform: scaleX(1) !important; }