/* ═══════════════════════════════════════════════════════════════════════
   대문 고퀄 묶음 — 그래픽 층 + 아홉 모양의 그리기 (문서 41 · 2026-10-29 소유자 «대문에 놓일 고퀄리티 · 화려한 그래픽과 애니메이션»)

   한 파일인 까닭 — 아홉 모양이 그래픽 층(.hero-gfx) · 멈춤 버튼 · 칩 · 등장 안무 변수를 같이 쓴다. gl-blocks.css 끝에 붙이면 다른 묶음과 자리 다툼이 난다(2026-10-29 합치기 사고 — «}» 하나).
   붙는 길 — shell.json 의 표시(data-gl-hgfx · data-gl-kinetic …) · 렌더러 assetsFor(HERO_GFX_JS). 손으로 <link> 를 적지 않는다.

   🔴 색은 역할 토큰만 — 단, «늘 어두운 무대»(글자 속 영상 · 커서로 드러내기 · 겹 깊이 시차의 사진 위)는 대문 안에서 토큰을 어두운 값으로 다시 매긴다(--bg · --fg …).
      그래서 그 위의 글자 · 셰이더(getComputedStyle 로 토큰을 읽는다)가 밝은 화면에서도 어두운 무대 값을 받는다. 거기 적힌 어두운 hex 는 «의도» 다 — 사진 · 영상 자리의 검정과 같다.
   🔴 움직이는 것은 transform · opacity · clip-path · mask 자리 변수뿐. 안무는 @keyframes + 지연으로 «타임라인» 을 짠다(이징 · 겹침 · 지연). 스크립트가 없으면 안무 없이 최종 상태.
   🔴 «움직임 줄이기» 면 맨 끝 @media 가 모든 안무 · 반복을 끈다(정지 최종 상태). 폰(720px 이하)은 단순화한다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 공용 — 그래픽 층 · 멈춤 버튼 · 칩 · 낭독 전용 글 ────────────────────────────── */
.hero-gfx{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  /* 스크립트 · WebGL 이 없을 때의 바탕 — 토큰에서 뽑은 그라데이션 셋(민짜 단색 금지) */
  background:
    radial-gradient(120% 90% at 72% 18%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%),
    radial-gradient(90% 70% at 14% 88%, color-mix(in srgb, var(--accent-dark) 24%, transparent), transparent 60%),
    radial-gradient(60% 50% at 88% 78%, color-mix(in srgb, var(--fg) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg), var(--surface-2)); }
.hero-gfx canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s ease; }
.hero.gl-gfx-on .hero-gfx canvas{ opacity: 1; }
.hero.gl-gfx-off .hero-gfx canvas{ display: none; }
.hero-gfx-pause{ position: absolute; right: 20px; bottom: 20px; z-index: 8; width: 44px; height: 44px; opacity: .8;
  background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.hero-gfx-pause[hidden]{ display: none; }
.hero-sr{ position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.hero-chips{ list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 36px; }
.hero-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--fg) 16%, transparent); background: color-mix(in srgb, var(--bg) 52%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero-chip::before{ content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
/* 고퀄 대문 공통 — 화면을 채우는 무대 · 글 위계 */
.hero.gl-t-kinetic, .hero.gl-t-reveal, .hero.gl-t-depth, .hero.gl-t-intro, .hero.gl-t-deck, .hero.gl-t-object3d, .hero.gl-t-aurora, .hero.gl-t-burst{
  position: relative; min-height: 100vh; display: grid; align-items: center; box-sizing: border-box; padding: calc(var(--nav-h, 64px) + 56px) 0 88px; }
.hero.gl-t-kinetic .hero-stripe, .hero.gl-t-intro .hero-stripe, .hero.gl-t-deck .hero-stripe, .hero.gl-t-burst .hero-stripe{ z-index: 0; opacity: .5; }
:is(.hero.gl-t-kinetic, .hero.gl-t-reveal, .hero.gl-t-depth, .hero.gl-t-intro, .hero.gl-t-deck, .hero.gl-t-object3d, .hero.gl-t-aurora, .hero.gl-t-burst) .hero-actions{ margin-bottom: 0; }
:is(.hero.gl-t-kinetic, .hero.gl-t-aurora, .hero.gl-t-burst, .hero.gl-t-object3d, .hero.gl-t-reveal).gl-al-center .hero-inner{ margin-inline: auto; text-align: center; }
:is(.hero.gl-t-kinetic, .hero.gl-t-aurora, .hero.gl-t-burst, .hero.gl-t-object3d, .hero.gl-t-reveal).gl-al-center :is(.hero-actions, .hero-chips){ justify-content: center; }
:is(.hero.gl-t-kinetic, .hero.gl-t-aurora, .hero.gl-t-burst, .hero.gl-t-object3d, .hero.gl-t-reveal).gl-al-center p.lead{ margin-inline: auto; }
/* 등장 안무 — 공용 조각(위젯마다 지연만 다르다) */
@keyframes gl-hx-up{ from{ opacity: 0; transform: translate3d(0, 28px, 0); } to{ opacity: 1; transform: none; } }
@keyframes gl-hx-fade{ from{ opacity: 0; } to{ opacity: 1; } }
:is(.hero.gl-t-kinetic, .hero.gl-t-aurora, .hero.gl-t-object3d, .hero.gl-t-burst, .hero.gl-t-deck, .hero.gl-t-reveal) .eyebrow{ animation: gl-hx-up .9s var(--ease) both .15s; }
:is(.hero.gl-t-kinetic, .hero.gl-t-aurora, .hero.gl-t-object3d, .hero.gl-t-burst, .hero.gl-t-deck, .hero.gl-t-reveal) p.lead{ animation: gl-hx-up .9s var(--ease) both .55s; }
:is(.hero.gl-t-kinetic, .hero.gl-t-aurora, .hero.gl-t-object3d, .hero.gl-t-burst, .hero.gl-t-deck, .hero.gl-t-reveal) .hero-actions .btn{ animation: gl-hx-up .8s var(--ease) both .75s; }
:is(.hero.gl-t-kinetic, .hero.gl-t-aurora, .hero.gl-t-object3d, .hero.gl-t-burst, .hero.gl-t-deck, .hero.gl-t-reveal) .hero-actions .btn:nth-child(2){ animation-delay: .9s; }
:is(.hero.gl-t-aurora, .hero.gl-t-object3d, .hero.gl-t-deck) h1{ animation: gl-hx-up 1s var(--ease) both .3s; }
.hero-chips .hero-chip{ animation: gl-hx-up .7s var(--ease) both calc(1s + var(--i, 0) * .09s); }

/* ── 거대 글자 키네틱 (kinetic) ────────────────────────────────────────────────
   h1 → .kinetic-letters > .kw(단어) > .kch(글자 · --i 순번 · --sx/--sy 흩어질 방향 · --rk 기울기 배수 — gl-kinetic.js 가 넣는다)
   들어오기: 글자마다 42ms 차로 아래 · 뒤(−400px) · 눕힌 채(rotateX −90°)에서 올라온다(backwards — 끝나면 정적 transform 으로 이어진다).
   커서(--kx/--ky −1~1) → 글자마다 다른 배수로 기운다. 스크롤(--kp 0~1) → 자간이 벌어지고 글자가 제 방향으로 흩어지며 옅어진다. */
.hero.gl-t-kinetic{ perspective: 1200px; overflow: hidden; }
.hero.gl-t-kinetic .hero-inner{ max-width: none; }
.hero.gl-t-kinetic h1{ font-size: clamp(54px, 11.2vw, 190px); line-height: .92; letter-spacing: calc(-.045em + var(--kp, 0) * .22em); margin: 0 0 32px; text-wrap: balance; transition: letter-spacing .1s linear; }
.hero.gl-t-kinetic.gl-al-center h1{ text-wrap: balance; }
.kinetic-letters{ display: inline; transform-style: preserve-3d; }
.kw{ display: inline-block; white-space: nowrap; transform-style: preserve-3d; }
.kch{ display: inline-block; transform-style: preserve-3d; will-change: transform, opacity;
  animation: kch-in 1.15s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.1s + var(--i, 0) * 42ms);
  opacity: calc(1 - var(--kp, 0) * .85);
  transform: translate3d(calc(var(--kp, 0) * var(--sx, 0) * 1px), calc(var(--kp, 0) * var(--sy, 0) * 1px), calc(var(--kp, 0) * var(--sy, 0) * -2px))
             rotateX(calc(var(--ky, 0) * -9deg * var(--rk, 1))) rotateY(calc(var(--kx, 0) * 11deg * var(--rk, 1))) rotateZ(calc(var(--kp, 0) * var(--sx, 0) * .08deg)); }
@keyframes kch-in{ from{ opacity: 0; transform: translate3d(0, .55em, -420px) rotateX(-92deg); } 55%{ opacity: 1; } to{ opacity: 1; transform: none; } }
.hero.gl-t-kinetic .hero-kinetic-chips{ margin-top: 8px; }
.hero.gl-t-kinetic[data-gl-paused] .kch{ animation-play-state: paused; }
/* 세부 끔 — 스크립트가 변수를 안 넣지만 CSS 도 제 몫을 한다(에디터 «세부를 골라도 안 바뀜» 검사와 한 벌) */
.hero.gl-t-kinetic.gl-d-scatter-off h1{ letter-spacing: -.045em; }
.hero.gl-t-kinetic.gl-d-scatter-off .kch{ --kp: 0; }
.hero.gl-t-kinetic.gl-d-tilt-off .kch{ --kx: 0; --ky: 0; }

/* ── 글자 속 영상 (tmask) ──────────────────────────────────────────────────────
   늘 어두운 무대 — 토큰을 어두운 값으로 다시 매긴다(의도 · 사진 · 영상 자리). 매체(.hero-tmask-media)에 같은 문서의 SVG mask(<text>)를 씌운다.
   스크롤(--gl-tm-p 0~1 · gl-tmask.js) → <g> 가 커진다(1 → 17배) → 글자가 화면을 다 덮으면(is-open) 마스크를 벗는다 → 화면 가득 영상. 글(설명 · 버튼)은 아래에서 옅어진다. */
.hero.gl-t-tmask{ --bg: #0a0a0b; --surface-2: #141416; --fg: #f1f1f3; --fg-strong: #ffffff; --muted-2: #c7c7cf; --muted: #a9a9b3;   /* 의도 — 늘 어두운 무대 */
  padding: 0; overflow: clip; background: #0a0a0b; color: var(--ondark-fg); }   /* 의도 — 영상 자리의 검정 */
.hero.gl-t-tmask .hero-tmask-stage{ position: relative; height: 100vh; min-height: 560px; overflow: clip; display: grid; }
.hero.gl-t-tmask.gl-tm-on{ height: 240vh; }
.hero.gl-t-tmask.gl-tm-on .hero-tmask-stage{ position: sticky; top: 0; }
.hero.gl-t-tmask .hero-gfx{ z-index: 0; }
.hero-tmask-media{ position: absolute; inset: 0; z-index: 1; mask: var(--tm-mask) center / 100% 100% no-repeat; -webkit-mask: var(--tm-mask) center / 100% 100% no-repeat; }
.hero-tmask-media .hero-photo{ position: absolute; inset: 0; margin: 0; }
.hero-tmask-media img, .hero-tmask-media video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-tmask-media img{ transform: scale(calc(1.08 + var(--gl-tm-p, 0) * .12)); filter: saturate(1.15) contrast(1.05); }
.hero-tmask-video{ opacity: 0; transition: opacity .8s ease; }
.hero-tmask-media.is-playing .hero-tmask-video{ opacity: 1; }
.hero-tmask-svg{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.hero-tmask-svg text{ font-family: var(--font-heading, var(--font-family, inherit)); font-weight: var(--w-display, 800); font-size: clamp(64px, 14.5vw, 250px); letter-spacing: -.045em; fill: #fff; }   /* 의도 — mask 밝기(흰 = 보임) */
.hero-tmask-g{ transform-box: view-box; transform-origin: 50% 50%; transform: scale(calc(1 + var(--gl-tm-p, 0) * var(--gl-tm-p, 0) * 17)); }
.hero.gl-t-tmask.is-open .hero-tmask-media{ mask: none; -webkit-mask: none; }
/* 글자 테두리 잔상 — 마스크 밖의 어두운 바탕 위에서 글자 윤곽이 은은히 빛난다(그래픽 층이 비친다) */
.hero.gl-t-tmask .hero-tmask-stage::after{ content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(60% 40% at 50% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); opacity: calc(1 - var(--gl-tm-p, 0) * 2); mix-blend-mode: screen; }
.hero.gl-t-tmask .hero-tmask-copy{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding-bottom: 56px; opacity: calc(1 - var(--gl-tm-p, 0) * 2.4); transform: translateY(calc(var(--gl-tm-p, 0) * 60px)); }
.hero.gl-t-tmask .hero-tmask-copy .hero-inner{ max-width: 640px; }
.hero.gl-t-tmask.gl-al-center .hero-tmask-copy .hero-inner{ margin-inline: auto; text-align: center; }
.hero.gl-t-tmask.gl-al-center .hero-actions{ justify-content: center; }
.hero.gl-t-tmask .eyebrow{ color: var(--ondark-fg); animation: gl-hx-up .9s var(--ease) both .3s; }
.hero.gl-t-tmask p.lead{ color: var(--ondark-muted); animation: gl-hx-up .9s var(--ease) both .5s; }
.hero.gl-t-tmask .hero-actions .btn{ animation: gl-hx-up .8s var(--ease) both .7s; }
.hero.gl-t-tmask .hero-tmask-media{ animation: gl-hx-fade 1.6s ease both; }
.hero.gl-t-tmask.gl-d-grow-off .hero-tmask-g{ transform: none; }
.hero.gl-t-tmask.no-mask .hero-tmask-media{ mask: none; -webkit-mask: none; }
.hero.gl-t-tmask.no-mask .hero-tmask-media::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, .25), rgba(10, 10, 11, .78)); }   /* 의도 — 사진 위 어두운 덮개 */
.hero.gl-t-tmask.no-mask .hero-tmask-copy .hero-sr{ position: static !important; width: auto !important; height: auto !important; margin: 0 0 24px !important; clip: auto !important; clip-path: none !important; white-space: normal !important; overflow: visible !important; color: var(--ondark-fg); }
.hero.gl-t-tmask .hero-gfx-pause{ position: absolute; }

/* ── 커서로 드러내기 (reveal) ──────────────────────────────────────────────────
   늘 어두운 무대(의도). 사진 위에 덮개(.hero-reveal-veil = 그래픽 층을 품은 어두운 층)가 있고, 덮개의 mask 가 커서 자리(--rx/--ry)에 구멍(--rr)을 뚫는다 — 가장자리는 55% → 100% 로 부드럽게.
   누르면(is-open) --rr 이 4000px 로 퍼진다(@property 로 전환 가능). 스크립트가 없으면 가운데 구멍 하나. */
@property --rr{ syntax: '<length>'; inherits: true; initial-value: 300px; }
.hero.gl-t-reveal{ --bg: #0a0a0b; --surface-2: #141416; --fg: #f1f1f3; --fg-strong: #ffffff; --muted-2: #c7c7cf; --muted: #a9a9b3;   /* 의도 — 늘 어두운 무대 */
  align-items: end; overflow: hidden; background: #0a0a0b; color: var(--ondark-fg); --rx: 50%; --ry: 42%; --rr: clamp(200px, 22vmax, 520px); }   /* 의도 — 사진 자리의 검정 */
.hero.gl-t-reveal.gl-d-size-large{ --rr: clamp(260px, 30vmax, 700px); }
.hero.gl-t-reveal.gl-d-size-small{ --rr: clamp(140px, 15vmax, 360px); }
.hero.gl-t-reveal .hero-reveal-photo{ position: absolute; inset: 0; margin: 0; z-index: 0; }
.hero.gl-t-reveal .hero-reveal-photo img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(1.12); transform: scale(1.04); transition: transform 1.4s var(--ease); }
.hero.gl-t-reveal.is-open .hero-reveal-photo img{ transform: none; }
.hero.gl-t-reveal .hero-reveal-photo::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(10, 10, 11, .72)); }   /* 의도 — 사진 위 글이 읽히게 아래서 어둡게 */
.hero.gl-t-reveal .hero-reveal-veil{ position: absolute; inset: 0; z-index: 1; transition: --rr 1.3s cubic-bezier(.3, 0, .1, 1);
  mask-image: radial-gradient(circle var(--rr) at var(--rx) var(--ry), transparent 0, transparent 52%, #000 100%);           /* 의도 — mask 밝기 */
  -webkit-mask-image: radial-gradient(circle var(--rr) at var(--rx) var(--ry), transparent 0, transparent 52%, #000 100%); }
.hero.gl-t-reveal .hero-reveal-veil .hero-gfx{ inset: 0; }
.hero.gl-t-reveal .hero-reveal-veil::after{ content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle calc(var(--rr) * 1.15) at var(--rx) var(--ry), color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%); mix-blend-mode: screen; }
.hero.gl-t-reveal.is-open{ --rr: 4000px; }
.hero.gl-t-reveal.is-open .hero-reveal-veil::after{ opacity: 0; transition: opacity .8s; }
.hero.gl-t-reveal .container{ z-index: 3; }
.hero.gl-t-reveal .hero-inner{ max-width: 760px; }
.hero.gl-t-reveal .eyebrow{ color: var(--ondark-fg); }
.hero.gl-t-reveal p.lead{ color: var(--ondark-muted); }
.hero.gl-t-reveal h1{ animation: gl-hx-up 1s var(--ease) both .3s; }
.hero-reveal-open{ position: absolute; right: 76px; bottom: 20px; z-index: 8; height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ondark-fg); background: color-mix(in srgb, var(--bg) 62%, transparent); border: 1px solid color-mix(in srgb, var(--ondark-fg) 28%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-reveal-open:hover{ border-color: var(--accent); color: var(--accent); }
.hero-reveal-open:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }
.hero-reveal-open[hidden]{ display: none; }
.hero.gl-t-reveal.gl-rv-on.is-aim{ cursor: crosshair; }

/* ── 겹 깊이 시차 (depth) ──────────────────────────────────────────────────────
   층(.hero-depth-layer · --d 깊이 0~1 — 클수록 가까워 많이 움직인다)은 커서 변수(--dx/--dy · gl-depth.js)에 CSS 전환으로 따라간다(rAF 없음).
   배경 사진(--d .18) · 덮개 · 장면 그림 셋(.55 · .8 · 1) · 글 + 칩(.4). 들어올 때는 층 «안쪽» 요소가 깊이 순서대로 올라온다(바깥 transform 과 안 부딪친다). */
.hero.gl-t-depth{ --ds: 30px; --bg: #0a0a0b; --surface-2: #141416; --fg: #f1f1f3; --fg-strong: #ffffff; --muted-2: #c7c7cf; --muted: #a9a9b3;   /* 의도 — 사진 위 늘 어두운 무대 */
  overflow: hidden; background: #0a0a0b; color: var(--ondark-fg); perspective: 1000px; }   /* 의도 — 사진 자리의 검정 */
.hero.gl-t-depth.gl-d-strength-strong{ --ds: 48px; }
.hero.gl-t-depth.gl-d-strength-subtle{ --ds: 14px; }
.hero-depth-layer{ will-change: transform; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1);
  transform: translate3d(calc(var(--dx, 0) * var(--d, .5) * var(--ds) * -1), calc(var(--dy, 0) * var(--d, .5) * var(--ds) * -.65), 0); }
.hero.gl-t-depth .hero-gfx{ z-index: 0; opacity: .45; }
.hero-depth-back{ position: absolute; inset: -7%; z-index: 1; }
.hero-depth-photo{ position: absolute; inset: 0; margin: 0; }
.hero-depth-photo img{ width: 100%; height: 100%; object-fit: cover; filter: brightness(.72) saturate(1.1); animation: dp-photo 2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes dp-photo{ from{ opacity: 0; transform: scale(1.12); } to{ opacity: 1; transform: none; } }
.hero.gl-t-depth .hero-veil{ position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(100deg, rgba(10, 10, 11, .9) 0%, rgba(10, 10, 11, .72) 42%, rgba(10, 10, 11, .18) 100%); }   /* 의도 — 사진 위 글이 읽히게 */
.hero-depth-shot{ position: absolute; z-index: 3; margin: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 5;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08) inset; }   /* 의도 — 사진 카드 그림자 */
.hero-depth-shot img{ display: block; width: 100%; height: 100%; object-fit: cover; animation: dp-in 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.hero-depth-shot-1{ right: 9%; top: 15%; width: clamp(170px, 19vw, 320px); }
.hero-depth-shot-1 img{ animation-delay: .35s; }
.hero-depth-shot-2{ right: 29%; bottom: 11%; width: clamp(130px, 14vw, 240px); }
.hero-depth-shot-2 img{ animation-delay: .55s; }
.hero-depth-shot-3{ right: 3%; bottom: 20%; width: clamp(110px, 11vw, 190px); }
.hero-depth-shot-3 img{ animation-delay: .75s; }
@keyframes dp-in{ from{ opacity: 0; transform: translate3d(0, 60px, 0) scale(1.08); } to{ opacity: 1; transform: none; } }
.hero.gl-t-depth .hero-depth-copy{ z-index: 4; }
.hero-depth-copy .hero-inner{ max-width: 620px; animation: gl-hx-up 1.1s var(--ease) both .5s; }
.hero.gl-t-depth .eyebrow{ color: var(--ondark-fg); }
.hero.gl-t-depth p.lead{ color: var(--ondark-muted); }
.hero.gl-t-depth .hero-depth-chips{ margin: 0 0 28px; }
.hero.gl-t-depth .hero-depth-chips .hero-chip{ animation-delay: calc(1.1s + var(--i, 0) * .1s); }
.hero.gl-t-depth .hero-actions{ animation: gl-hx-up .9s var(--ease) both 1.3s; }

/* ── 첫 장면 연출 (intro) ──────────────────────────────────────────────────────
   안무(is-play · gl-intro.js) 타임라인(--intro-k 배):  0.25s 장막 갈라짐(1.1s) · 0.3s 사진 1.35 → 1(1.8s) · 0.45s 윗줄 · 0.6s~ 제목 줄 마스크(줄마다 +.12s) · 1.05s 설명 · 1.25s/1.4s 버튼 · 1.5s~ 요약 줄.
   is-play 가 없으면(스크립트 없음 · 두 번째 방문 is-seen) 아무것도 움직이지 않는다 — 장막은 display: none. */
.hero.gl-t-intro{ --intro-k: 1; overflow: hidden; }
.hero.gl-t-intro.gl-d-speed-fast{ --intro-k: .65; }
.hero-intro-grid{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero.gl-t-intro .hero-inner{ max-width: none; }
.hero-intro-visual{ position: relative; aspect-ratio: 4 / 5; max-height: 74vh; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); box-shadow: 0 50px 120px color-mix(in srgb, var(--accent) 18%, transparent); }
.hero-intro-photo{ position: absolute; inset: 0; margin: 0; }
.hero-intro-photo img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-intro-curtain{ position: absolute; inset: 0; z-index: 2; display: none; }
.hero-intro-curtain i{ position: absolute; top: 0; bottom: 0; width: 50.5%; }
.hero-intro-curtain i:first-child{ left: 0; background: var(--accent); }
.hero-intro-curtain i:last-child{ right: 0; background: var(--accent-dark); }
.hero-intro-line{ display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-intro-line-in{ display: block; }
.hero-intro-line:nth-child(1){ --n: 0; } .hero-intro-line:nth-child(2){ --n: 1; } .hero-intro-line:nth-child(3){ --n: 2; } .hero-intro-line:nth-child(4){ --n: 3; }
.hero.gl-t-intro.is-play .hero-intro-curtain{ display: block; }
.hero.gl-t-intro.is-play .hero-intro-curtain i{ animation: intro-curtain calc(1.1s * var(--intro-k)) cubic-bezier(.75, 0, .2, 1) both calc(.25s * var(--intro-k)); }
.hero.gl-t-intro.is-play .hero-intro-curtain i:last-child{ --dir: 1; animation-delay: calc(.32s * var(--intro-k)); }
@keyframes intro-curtain{ to{ transform: translateX(calc(var(--dir, -1) * 102%)); } }
.hero.gl-t-intro.is-play .hero-intro-photo img{ animation: intro-photo calc(1.9s * var(--intro-k)) cubic-bezier(.2, .8, .2, 1) both calc(.3s * var(--intro-k)); }
@keyframes intro-photo{ from{ transform: scale(1.38); filter: saturate(.6) brightness(1.15); } to{ transform: none; filter: none; } }
.hero.gl-t-intro.is-play .hero-intro-visual{ animation: intro-frame calc(1.3s * var(--intro-k)) cubic-bezier(.2, .8, .2, 1) both; }
@keyframes intro-frame{ from{ clip-path: inset(12% 10% 12% 10% round var(--radius-lg)); } to{ clip-path: inset(0 round var(--radius-lg)); } }
.hero.gl-t-intro.is-play .eyebrow{ animation: gl-hx-up calc(.8s * var(--intro-k)) var(--ease) both calc(.45s * var(--intro-k)); }
.hero.gl-t-intro.is-play .hero-intro-line-in{ animation: intro-line calc(.95s * var(--intro-k)) cubic-bezier(.2, .8, .2, 1) both calc((.6s + var(--n, 0) * .12s) * var(--intro-k)); }
@keyframes intro-line{ from{ transform: translate3d(0, 110%, 0) rotate(2deg); } to{ transform: none; } }
.hero.gl-t-intro.is-play p.lead{ animation: gl-hx-up calc(.9s * var(--intro-k)) var(--ease) both calc(1.05s * var(--intro-k)); }
.hero.gl-t-intro.is-play .hero-actions .btn{ animation: gl-hx-up calc(.8s * var(--intro-k)) var(--ease) both calc(1.25s * var(--intro-k)); }
.hero.gl-t-intro.is-play .hero-actions .btn:nth-child(2){ animation-delay: calc(1.4s * var(--intro-k)); }
.hero.gl-t-intro.is-play .hero-points li{ animation: gl-hx-up calc(.7s * var(--intro-k)) var(--ease) both calc(1.5s * var(--intro-k)); }
.hero.gl-t-intro.is-play .hero-points li:nth-child(2){ animation-delay: calc(1.62s * var(--intro-k)); }
.hero.gl-t-intro.is-play .hero-points li:nth-child(3){ animation-delay: calc(1.74s * var(--intro-k)); }
.hero.gl-t-intro.is-play .hero-gfx canvas{ transition-delay: calc(.8s * var(--intro-k)); }
.hero.gl-t-intro.is-done .hero-intro-curtain{ display: none; }
.hero.gl-t-intro.gl-d-once-always .hero-intro-curtain i{ will-change: transform; }   /* 매번 트는 쪽은 장막을 미리 올려 둔다 */

/* ── 카드 셔플 쌓기 (deck) ─────────────────────────────────────────────────────
   .hero-deck-card[data-o]  0 = 맨 앞 · 1 · 2 오른쪽 뒤로 부채꼴 · 3 · 4 왼쪽 뒤로. 자리 바뀜은 CSS 전환(transform) — 끄는 동안(--drag · is-drag)은 전환 없이 따라온다.
   앞 카드 제목(.hero-deck-cap.is-on)은 왼쪽 글 아래에서 바뀐다(aria-live). */
.hero-deck-split{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero.gl-t-deck .hero-inner{ max-width: none; }
.hero-deck{ position: relative; display: grid; gap: 22px; justify-items: center; }
.hero-deck-stack{ position: relative; width: min(100%, 380px); aspect-ratio: 3 / 4; touch-action: pan-y; user-select: none; -webkit-user-select: none; perspective: 1400px; }
.hero-deck-card{ position: absolute; inset: 0; margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); cursor: grab;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent) inset;   /* 의도 — 사진 카드 그림자 */
  transition: transform .85s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; will-change: transform; transform-origin: 50% 110%; }
.hero-deck-card img{ display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hero-deck-card::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 11, .35)); pointer-events: none; }   /* 의도 — 카드 아래 살짝 어둡게 */
.hero-deck-card[data-o="0"]{ z-index: 5; transform: translate3d(var(--drag, 0px), 0, 0); cursor: grab; }
.hero-deck-card[data-o="0"]:active{ cursor: grabbing; }
.hero-deck-card[data-o="1"]{ z-index: 4; transform: translate3d(9%, -2%, -40px) rotate(6deg) scale(.96); }
.hero-deck-card[data-o="2"]{ z-index: 3; transform: translate3d(18%, -4%, -80px) rotate(12deg) scale(.92); opacity: .92; }
.hero-deck-card[data-o="3"]{ z-index: 2; transform: translate3d(-9%, -3%, -60px) rotate(-7deg) scale(.9); opacity: .85; }
.hero-deck-card[data-o="4"]{ z-index: 1; transform: translate3d(-18%, -6%, -100px) rotate(-13deg) scale(.86); opacity: .7; }
.hero-deck.is-drag .hero-deck-card[data-o="0"]{ transition: none; }
.hero-deck-card:focus-visible{ outline: 3px solid var(--accent); outline-offset: 4px; }
.hero-deck-stack .hero-deck-card{ animation: deck-in 1.1s cubic-bezier(.2, .8, .2, 1) backwards; }
.hero-deck-card[data-o="0"]{ animation-delay: .5s; } .hero-deck-card[data-o="1"]{ animation-delay: .62s; } .hero-deck-card[data-o="2"]{ animation-delay: .74s; } .hero-deck-card[data-o="3"]{ animation-delay: .86s; } .hero-deck-card[data-o="4"]{ animation-delay: .98s; }
@keyframes deck-in{ from{ opacity: 0; transform: translate3d(0, 80px, 0) rotate(0) scale(.9); } to{ opacity: 1; } }
.hero-deck-caps{ position: relative; height: 1.5em; margin: 0 0 28px; font-size: clamp(18px, 2vw, 24px); font-weight: 700; letter-spacing: -.01em; color: var(--accent); }
.hero-deck-caps::before{ content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 2px; background: var(--accent); }
.hero-deck-cap{ position: absolute; left: 16px; top: 0; right: 0; padding-left: 2px; margin-left: -2px; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-deck-cap.is-on{ opacity: 1; transform: none; }
.hero-deck-nav{ justify-content: center; }

/* ── 3D 오브젝트 (object3d) · 오로라 광원 (aurora) · 타이포 그래픽 폭발 (burst) — 셰이더 · 캔버스가 주인공, 글은 그 위 ── */
.hero.gl-t-object3d .hero-inner{ max-width: 560px; }
.hero.gl-t-object3d h1{ font-size: clamp(44px, 6.2vw, 96px); letter-spacing: -.035em; line-height: 1; }
.hero.gl-t-aurora .hero-inner{ max-width: 820px; }
.hero.gl-t-aurora h1{ font-size: clamp(48px, 7.4vw, 118px); letter-spacing: -.04em; line-height: .98; text-shadow: 0 0 60px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 140px color-mix(in srgb, var(--accent) 25%, transparent); }
.hero.gl-t-aurora .hero-aurora-chips{ margin-top: 6px; }
.hero.gl-t-burst{ overflow: hidden; }
.hero.gl-t-burst .hero-inner{ max-width: none; }
.hero.gl-t-burst .hero-burst-title{ font-size: clamp(56px, 10.5vw, 168px); line-height: .96; letter-spacing: -.045em; margin: 0 0 32px; transition: opacity .5s ease; }
.hero.gl-t-burst.is-burst-on .hero-burst-title{ opacity: 0; }
.hero-burst-canvas{ position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; display: none; }
.hero.gl-t-burst.is-burst-on .hero-burst-canvas{ display: block; }
.hero.gl-t-burst.gl-d-shape-shards .hero-burst-canvas{ mix-blend-mode: normal; }
.hero.gl-t-burst .hero-burst-inner{ position: relative; z-index: 3; }
.hero.gl-t-burst .hero-burst-inner .eyebrow{ animation-delay: 1.5s; }
.hero.gl-t-burst .hero-burst-inner p.lead{ animation-delay: 1.7s; }
.hero.gl-t-burst .hero-burst-inner .hero-actions .btn{ animation-delay: 1.9s; }
.hero.gl-t-burst .hero-burst-inner .hero-actions .btn:nth-child(2){ animation-delay: 2.05s; }

/* ── 폰 (720px 이하) — 단순화 ─────────────────────────────────────────────────── */
@media (max-width: 720px){
  .hero.gl-t-kinetic, .hero.gl-t-reveal, .hero.gl-t-depth, .hero.gl-t-intro, .hero.gl-t-deck, .hero.gl-t-object3d, .hero.gl-t-aurora, .hero.gl-t-burst{ min-height: 92vh; padding: calc(var(--nav-h, 64px) + 28px) 0 72px; }
  .hero.gl-t-kinetic h1{ font-size: clamp(44px, 15vw, 88px); }
  .kch{ animation-delay: calc(.1s + var(--i, 0) * 28ms); }
  .hero.gl-t-tmask .hero-tmask-stage{ min-height: 100vh; }
  .hero.gl-t-tmask.gl-tm-on{ height: 200vh; }
  .hero-tmask-svg text{ font-size: clamp(48px, 17vw, 110px); }
  .hero.gl-t-tmask .hero-tmask-copy{ padding-bottom: 40px; }
  .hero.gl-t-reveal{ --rr: clamp(140px, 36vmin, 300px); }
  .hero-reveal-open{ right: 72px; bottom: 16px; }
  .hero-gfx-pause{ right: 16px; bottom: 16px; }
  .hero-depth-shot-3{ display: none; }
  .hero-depth-shot-1{ right: 6%; top: 10%; width: 36vw; }
  .hero-depth-shot-2{ right: 48%; top: 16%; bottom: auto; width: 28vw; }
  .hero.gl-t-depth{ align-items: end; }
  .hero-intro-grid, .hero-deck-split{ grid-template-columns: 1fr; gap: 32px; }
  .hero-intro-visual{ order: -1; aspect-ratio: 16 / 11; max-height: 44vh; }
  .hero-deck-stack{ width: min(68vw, 300px); }
  .hero.gl-t-object3d{ align-items: end; }
  .hero.gl-t-object3d .hero-inner{ max-width: none; }
  .hero.gl-t-burst .hero-burst-title{ font-size: clamp(44px, 14vw, 80px); }
}

/* ── 움직임 줄이기 — 정지 최종 상태 ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .hero-gfx canvas{ transition: none; }
  .hero-gfx-pause{ display: none !important; }
  .hero-chips .hero-chip, .kch, .hero-depth-photo img, .hero-depth-shot img, .hero-depth-copy .hero-inner, .hero-deck-stack .hero-deck-card,
  :is(.hero.gl-t-kinetic, .hero.gl-t-aurora, .hero.gl-t-object3d, .hero.gl-t-burst, .hero.gl-t-deck, .hero.gl-t-reveal, .hero.gl-t-tmask, .hero.gl-t-depth) :is(.eyebrow, h1, p.lead, .hero-actions, .hero-actions .btn, .hero-tmask-media){ animation: none !important; }
  .kch{ transform: none !important; opacity: 1 !important; }
  .hero.gl-t-kinetic h1{ letter-spacing: -.045em; }
  .hero.gl-t-tmask.gl-tm-on{ height: auto !important; }
  .hero.gl-t-tmask.gl-tm-on .hero-tmask-stage{ position: static; }
  .hero-tmask-g{ transform: none !important; }
  .hero-tmask-media img{ transform: none !important; }
  .hero.gl-t-tmask .hero-tmask-copy{ opacity: 1 !important; transform: none !important; }
  .hero.gl-t-reveal .hero-reveal-veil{ display: none; }
  .hero.gl-t-reveal .hero-reveal-open{ display: none; }
  .hero-depth-layer{ transition: none; transform: none !important; }
  .hero.gl-t-intro.is-play .hero-intro-curtain{ display: none; }
  .hero.gl-t-intro.is-play :is(.hero-intro-photo img, .hero-intro-visual, .eyebrow, .hero-intro-line-in, p.lead, .hero-actions .btn, .hero-points li){ animation: none !important; }
  .hero-deck-card{ transition: none; }
  .hero-deck-cap{ transition: none; }
  .hero.gl-t-burst.is-burst-on .hero-burst-title{ opacity: 1; }
  .hero-burst-canvas{ display: none !important; }
}