/* 네온 퍼플 — 홈·About 공통 팔레트와 빛 배경, 모든 페이지의 알약 네비. style.css 뒤에 불러옵니다. */

body[data-page="home"], body[data-page="about"] {
  --bg: #0b0712;
  --surface: #150f20;
  --surface-2: #1d1529;
  --line: #2b2140;
  --text: #f3edff;
  --muted: #a697bf;
  --accent: #c084fc;
  --accent-soft: rgba(192, 132, 252, 0.16);
  --ink: #1a0b2e;
  background: var(--bg);
}

/* ── 네비: 알약 버튼 ───────────────────────── */
.nav { gap: 8px; }
.nav a {
  padding: 7px 16px; border: 1.5px solid var(--accent); border-radius: 999px;
  color: var(--accent); font-weight: 600; font-size: 14px; transition: background .2s, color .2s;
}
.nav a::after { display: none; }
.nav a:hover { background: var(--accent-soft); }
.nav a.active { background: var(--accent); color: var(--ink, #1a0b2e); }
body[data-page="home"] .site-header.scrolled, body[data-page="about"] .site-header.scrolled { background: rgba(11, 7, 18, 0.78); }

/* ── 히어로 ─────────────────────────────────── */
.hero.neon {
  display: grid; grid-template-rows: auto auto; align-content: center; row-gap: 48px;
  min-height: 100svh; padding: 104px 0 40px; overflow: hidden;
}
.hero.neon::before { display: none; }

.neon-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.glow { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; }
.glow.g1 {
  width: 62vw; height: 62vw; left: -16vw; top: -22vw; opacity: .7;
  background: radial-gradient(circle, #8b5cf6 0%, #5b21b6 38%, transparent 70%);
  transform: translate(calc(var(--mx, 0) * 50px), calc(var(--my, 0) * 50px));
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
  animation: g-drift 22s ease-in-out infinite alternate;
}
.glow.g2 {
  width: 52vw; height: 52vw; right: -18vw; top: 24vh; opacity: .42;
  background: radial-gradient(circle, #d8b4fe 0%, #a855f7 34%, transparent 70%);
  transform: translate(calc(var(--mx, 0) * -36px), calc(var(--my, 0) * -24px));
  transition: transform 1.8s cubic-bezier(.2, .7, .2, 1);
  animation: g-drift 28s ease-in-out infinite alternate-reverse;
}
.glow.g3 {
  width: 44vw; height: 44vw; left: 28vw; bottom: -26vw; opacity: .28;
  background: radial-gradient(circle, #f5d0fe 0%, #c084fc 30%, transparent 70%);
  animation: g-drift 26s ease-in-out infinite alternate;
}
@keyframes g-drift { from { scale: 1; rotate: 0deg; } to { scale: 1.12; rotate: 12deg; } }

/* 필름 그레인 — SVG 노이즈를 살짝 흔들어 입자감 */
.grain {
  position: absolute; inset: -40%; opacity: .16; mix-blend-mode: overlay; pointer-events: none;
  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='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 300px 300px;
  animation: grain 1.4s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

.hero-in { position: relative; z-index: 1; }

/* About — 같은 빛 배경을 은은하게, 화면에 고정 */
.neon-bg.subtle { position: fixed; z-index: 0; }
.neon-bg.subtle .glow { opacity: .28; }
.neon-bg.subtle .glow.g1 { left: -24vw; top: -30vw; }
.neon-bg.subtle .glow.g2 { right: -22vw; top: 40vh; opacity: .18; }
.neon-bg.subtle .grain { opacity: .1; }
body[data-page="about"] #app > .container { position: relative; z-index: 1; }
body[data-page="about"] .about-hero h1 { color: var(--accent); text-shadow: 0 0 24px rgba(192, 132, 252, .3); }
body[data-page="about"] .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
body[data-page="about"] .section-title { color: var(--accent); }
body[data-page="about"] .cap:hover { border-color: var(--accent); }
body[data-page="about"] .tag.role { background: var(--accent-soft); color: var(--accent); }
.hero.neon .eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 18px;
}
.hero.neon .giant {
  /* 한 줄 고정: 컨테이너(1080px) 안에 'XR CONTENT CREATOR'가 들어가는 크기 */
  font-size: clamp(40px, 8.3vw, 101px); line-height: .95; letter-spacing: -.045em; font-weight: 900; white-space: nowrap;
  text-transform: uppercase; color: var(--accent);
  text-shadow: 0 0 28px rgba(192, 132, 252, .38), 0 0 110px rgba(124, 58, 237, .45);
}
.hero.neon .headline { font-size: clamp(16px, 1.9vw, 21px); color: var(--muted); margin-top: 22px; max-width: 560px; }

.hero-foot { margin-top: 24px; }

.hero-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero.neon .actions { margin-top: 0; }
body[data-page="home"] .btn { border-color: var(--line); }
body[data-page="home"] .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--ink); box-shadow: 0 0 24px rgba(192, 132, 252, .35); }
.hero.neon .scroll-cue { position: static; transform: none; padding-bottom: 0; animation: none; }
.hero.neon .scroll-cue::after { display: none; }

/* 히어로 등장 */
.hero.neon .hero-in > * { animation: rise 1s cubic-bezier(.2, .7, .2, 1) both; }
.hero.neon .hero-in > :nth-child(2) { animation-delay: .1s; }
.hero.neon .hero-in > :nth-child(3) { animation-delay: .22s; }
.hero.neon .hero-foot { animation: rise 1s .5s cubic-bezier(.2, .7, .2, 1) both; }

/* ── 섹션 · 카드: 호버에 네온 테두리 ── */
body[data-page="home"] .section-title { color: var(--accent); }
body[data-page="home"] .cap { border-radius: 12px; }
body[data-page="home"] .cap:hover { border-color: var(--accent); box-shadow: 0 0 36px rgba(192, 132, 252, .18); }

body[data-page="home"] .card .thumb { border-radius: 10px; border: 1px solid var(--line); transform-style: preserve-3d; }
/* 호버: 카드가 흔들리며 떠오름 (CSS만으로 동작, 마우스를 안 움직여도 보임) */
body[data-page="home"] .card:hover .thumb { animation: card-wobble .7s cubic-bezier(.3, .8, .3, 1) both; }
@keyframes card-wobble {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  20%  { transform: translateY(-10px) rotate(-2.2deg) scale(1.03); }
  45%  { transform: translateY(-10px) rotate(1.6deg) scale(1.03); }
  70%  { transform: translateY(-10px) rotate(-.8deg) scale(1.03); }
  100% { transform: translateY(-10px) rotate(0deg) scale(1.03); }
}
body[data-page="home"] .card:hover .thumb {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 44px rgba(192, 132, 252, .35), 0 24px 60px -24px rgba(124, 58, 237, .6);
}
body[data-page="home"] .card h3 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
body[data-page="home"] .card .badge { color: var(--accent); }
body[data-page="home"] .tag { background: transparent; border: 1px solid var(--line); }
body[data-page="home"] .tag.role { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
body[data-page="home"] .site-footer { border-top-color: var(--line); }

@media (max-width: 760px) {
  .hero.neon { padding-top: 88px; }
  .hero.neon .giant { font-size: 15.5vw; white-space: normal; line-height: .9; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .hero.neon .scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glow, .grain { animation: none !important; }
}

/* style.css가 '움직임 줄이기' 설정에서 모든 애니메이션을 끄지만, 호버 흔들림은 사용자가 직접 올렸을 때만 나오므로 유지 */
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .card:hover .thumb { animation: card-wobble .7s cubic-bezier(.3, .8, .3, 1) both !important; }
}

/* ── 하단 아카이브: 조용한 한 줄 목록 ─────────── */
.archive { margin-top: 72px; }
.archive .section-title { color: var(--muted); }
.archive .list { border-top-color: var(--line); }
.archive .list-row { padding: 13px 4px; font-size: 15px; border-bottom-color: var(--line); }
.archive .list-row strong { font-weight: 600; color: color-mix(in srgb, var(--text) 82%, var(--bg)); }
.archive .list-row span { font-size: 13px; }
.archive a.list-row:hover strong { color: var(--accent); }
.archive .list-row .arrow { font-size: 12px; }