/* 같은 인물, 여섯 가지 재질. 색과 장식은 히어로 경계 안에서만 바뀐다. */
.hero {
  background: var(--paper);
  color: var(--ink);
  --focus: 2px solid var(--ink);
}
.hero .hero-art { position: absolute; inset: 0; bottom: var(--hero-art-bottom, 30%); z-index: 0; pointer-events: none; overflow: hidden; }
.hero .topbar { gap: var(--s2); }
.hero .motion-btn { min-width: var(--control); }
.style-next { appearance: none; display: flex; align-items: center; gap: var(--s2); min-height: var(--control); padding: var(--s1) 0; margin-left: var(--s4); border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--meta); cursor: pointer; }
.style-next[hidden], .style-label[hidden] { display: none; }
.style-count { color: var(--ink-2); font-family: var(--font-mono); }
.style-label { min-width: 7.5em; text-align: left; }
.style-arrow { transition: transform var(--dur-1) var(--ease); font-size: var(--step-1); }
.style-next:hover .style-arrow { transform: translateX(4px); }
.hero .style-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--line); z-index: 2; }
.style-progress > span { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.hero:not([data-style="particles"]) canvas.fx { display: none; }
.hero:not([data-style="particles"]) canvas.fx.is-on ~ .name h1 > :is(.ko, .en) { color: var(--ink); }

/* 렌더러는 첫 프레임을 그린 뒤에만 DOM 이름의 페인트를 넘겨받는다. */
.hero canvas.material-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; }
.hero canvas.material-fx.is-on { opacity: 1; }
.hero.is-material .hero-art { visibility: hidden; }
.hero.is-material .name h1 > :is(.ko,.en), .hero.is-material canvas.fx.is-on ~ .name h1 > :is(.ko,.en) { color: transparent; text-shadow: none; }
.hero .motion-btn { min-width: 6em; display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); }
.hero .motion-btn::before { content: 'Ⅱ'; font-family: var(--font-mono); font-size: var(--meta); }
.hero .motion-btn[aria-pressed="false"]::before { content: '▷'; }
.hero .motion-btn:disabled { cursor: default; }
/* WebGL 없음·로딩·감소 모션에서도 읽을 수 있는 재질을 유지한다. */
.material-fallback { position: absolute; width: 48vw; height: 48vw; max-width: 38rem; max-height: 38rem; right: -8%; top: 16%; }
.hero[data-style="cyber"] .hero-art { background-image: linear-gradient(var(--hero-grid) 1px,transparent 1px),linear-gradient(90deg,var(--hero-grid) 1px,transparent 1px); background-size: 72px 72px; }
.hero[data-style="cyber"] .name h1 > :is(.ko,.en) { text-shadow: 4px 0 var(--hero-secondary),-4px 0 var(--hero-signal); }
.hero[data-style="kitsch"] .name h1 > :is(.ko,.en) { color: var(--hero-signal); text-shadow: 4px 4px var(--hero-secondary),8px 8px var(--ink); }
.hero[data-style="kitsch"] .material-fallback { background: var(--hero-secondary); clip-path: polygon(50% 0,59% 30%,85% 15%,70% 41%,100% 50%,70% 59%,85% 85%,59% 70%,50% 100%,41% 70%,15% 85%,30% 59%,0 50%,30% 41%,15% 15%,41% 30%); animation: material-orbit 12s linear infinite; }
.hero[data-style="minimal"] .material-fallback { background: repeating-radial-gradient(ellipse at center,transparent 0 13px,var(--line) 14px 15px,transparent 16px 25px); animation: material-orbit 18s linear infinite; }
.hero[data-style="soft"] .name h1 > :is(.ko,.en) { text-shadow: -2px -2px var(--hero-highlight),5px 7px 10px var(--hero-shadow); }
.hero[data-style="soft"] .material-fallback { background: radial-gradient(ellipse at 35% 30%,var(--hero-highlight),var(--hero-signal) 35%,var(--hero-secondary) 65%,transparent 66%); animation: material-breathe 4s ease-in-out infinite alternate; }
.hero[data-style="metaball"] .material-fallback { background: radial-gradient(ellipse at 40% 45%,var(--ink) 0 25%,transparent 26%),radial-gradient(ellipse at 65% 60%,var(--ink) 0 30%,transparent 31%); animation: material-breathe 3s ease-in-out infinite alternate; }
@keyframes material-orbit { to { transform: rotate(360deg); } }
@keyframes material-breathe { to { transform: translate(-4%,6%) scale(.92); } }
.hero[data-running="false"] .hero-art * { animation-play-state: paused; }
.hero[data-static="true"] .hero-art * { animation: none; }
.hero.is-material .name h1 > :is(.ko,.en) { color: transparent; text-shadow: none; }
@media (max-width: 60rem) {
  .material-fallback { width: 80vw; height: 80vw; top: 25%; right: -35%; opacity: .35; }
  .style-next { margin-left: 0; gap: var(--s1); }
  .hero .topbar { column-gap: var(--s2); row-gap: 0; }
  .hero .topbar-right { margin-left: auto; }
}
@media (max-width: 32rem) {
  .hero .topbar-right { width: 100%; justify-content: flex-end; }
  .style-next { margin-left: auto; }
  .hero .topbar { align-content: start; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-art * { animation: none; }
  .style-arrow { transition: none; }
}
@media (forced-colors: active) {
  .hero .hero-art, .hero canvas, .style-progress { display: none; }
  .hero canvas.fx.is-on ~ .name h1 > :is(.ko, .en) { color: CanvasText; text-shadow: none; }
}