:root{
  --bg:#000;
  --chrome:#f4f4f6;
  --red:#ff1e2d;
  --hud:#0d0d10;
  --glass:#ffffff12;
  --ring:#ffffff08;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:#fff;
  overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* =========================
   GATE (simple fade)
   ========================= */
#gate{
  position:fixed; inset:0; background:#000;
  display:grid; place-items:center; z-index:50;
}
.gate-inner{ position:relative; isolation:isolate }
.gate-title{
  margin:0; letter-spacing:.12em; font-weight:800;
  color:#e5e5e7; text-align:center; font-size:clamp(26px,5vw,56px);
  text-shadow:0 0 12px var(--red);
  opacity:0; animation:gateTitleFade .6s ease-out forwards;
}
@keyframes gateTitleFade{ to{opacity:1} }
.pulse{
  position:absolute; inset:-120px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,30,45,.13), transparent 60%);
  animation:pulse 1.8s ease-in-out infinite;
  filter:blur(18px); z-index:-1;
}
@keyframes pulse{
  0%,100%{ opacity:.7; transform:scale(.95) }
  50%    { opacity:1;  transform:scale(1.08) }
}
body.opening #gate{ animation:gateAway 2.5s cubic-bezier(.2,.8,.1,1) forwards }
@keyframes gateAway{
  0%{opacity:1}
  10%{background:#fff}
  40%{background:#000; opacity:1}
  100%{opacity:0; visibility:hidden}
}

/* =========================
   CANVAS
   ========================= */
#scene{ position:fixed; inset:0; display:block; pointer-events:none }

/* =========================
   HUD / NAV
   ========================= */
#hud{ position:fixed; inset:0; pointer-events:none }
.brand{
  position:absolute; top:32px; left:40px; font-weight:900; letter-spacing:.14em;
  font-size:clamp(18px,3vw,28px); text-transform:uppercase; pointer-events:auto;
}
.chips{
  position:absolute; top:32px; right:40px; display:flex; gap:10px; pointer-events:auto; z-index:10;
}
.chip{
  padding:8px 14px; border-radius:999px; border:1px solid var(--ring);
  background:#0006; color:#fff; backdrop-filter:blur(6px);
  font-weight:700; letter-spacing:.08em; cursor:pointer; transition:.2s;
}
.chip:hover{ border-color:#ffffff33; background:#ffffff10 }

/* =========================
   PANELS
   ========================= */
.panel{
  position:fixed; inset:0; background:#060606f2; backdrop-filter:blur(5px);
  transform:translateY(100%); transition: transform .8s cubic-bezier(.2,.8,.1,1), opacity .8s;
  display:grid; place-items:center; z-index:20; opacity:0; padding:80px 24px;
}
.panel[aria-hidden="false"]{ transform:translateY(0); opacity:1 }
.panel h2{ margin:0 0 14px; font-size:clamp(22px,3.6vw,42px); letter-spacing:.2em }
.panel p{ max-width:900px; text-align:center; opacity:.9 }
.panel-title{ letter-spacing:.35em; text-transform:uppercase }
.panel .hint{ opacity:.55; margin-top:16px; letter-spacing:.2em; font-size:.9rem }
.close{
  position:absolute; top:26px; right:30px; width:42px; height:42px; border-radius:50%;
  border:1px solid #ffffff22; background:#0006; color:#fff; cursor:pointer; backdrop-filter:blur(6px);
  font-size:26px; line-height:40px; text-align:center; transition:.2s; z-index:3;
}
.close:hover{ background:#ffffff12; border-color:#ffffff44 }

/* =========================
   AURORA RIBBON PLAYER
   ========================= */
#player.ribbon{
  --pct: 0%;
  position:absolute;
  left:50%; transform:translateX(-50%);
  top: calc(42% + 140px);

  width: clamp(520px, 62vw, 980px);
  min-height: 86px;

  display:grid;
  grid-template-columns: 72px 1fr 74px;
  align-items:center;
  gap: 18px;

  padding: 16px 18px;
  border-radius: 22px;

  background:
    radial-gradient(140% 220% at 0% 0%, rgba(255,58,71,.12) 0%, transparent 45%),
    radial-gradient(140% 220% at 100% 100%, rgba(255,58,71,.10) 0%, transparent 50%),
    linear-gradient(180deg, rgba(14,14,18,.86), rgba(9,9,11,.82));
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 20px 70px rgba(0,0,0,.45),
              inset 0 1px 0 rgba(255,255,255,.06),
              inset 0 -1px 0 rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  isolation: isolate;

  opacity:0; transform: translate(-50%, 6px);
  animation: ribbonIn .6s cubic-bezier(.2,.8,.2,1) .2s forwards;
}
@keyframes ribbonIn{ to{ opacity:1; transform: translate(-50%,0)} }

#player.ribbon::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at -10% 120%, rgba(255,58,71,.18), transparent 60%),
    radial-gradient(80% 60% at 110% -10%, rgba(255,58,71,.15), transparent 60%);
  opacity:.55; mix-blend-mode: screen;
  animation: ribbonGlow 9s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes ribbonGlow{
  0%   { filter: blur(10px) brightness(1); }
  100% { filter: blur(16px) brightness(1.25); }
}

/* Play/Pause Button (fixed version) */
#pp{
  --ink:#f3f3f5;
  width:56px; height:56px; border-radius:16px;
  border:1px solid #ffffff24;
  background: linear-gradient(180deg,#17171b,#121216);
  color:var(--ink);
  display:grid; place-items:center;
  position:relative; isolation:isolate;
  cursor:pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05),
              0 10px 28px rgba(0,0,0,.35);
  transition: transform .12s ease, background .25s ease,
              border-color .25s ease, box-shadow .25s ease;
}
#pp:hover{
  transform: translateY(-1px) scale(1.02);
  border-color:#ffffff3a;
  background: linear-gradient(180deg,#1a1a20,#14141a);
}
#pp:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(255,62,74,.35),
              inset 0 0 0 1px rgba(0,0,0,.6);
}

/* Default (PLAYING) = PAUSE bars */
#pp::before,
#pp::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:6px; height:22px;
  background:currentColor;
  border-radius:1px;
}
#pp::before{ left:18px; }
#pp::after { right:18px; }

/* PAUSED = PLAY triangle */
#pp.paused::after{ display:none; } /* hide right bar */
#pp.paused::before{
  width:0; height:0;
  background:none;
  border-left:18px solid currentColor;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  left:50%; transform:translate(-50%,-50%) translateX(2px);
}

/* Track cluster */
#player.ribbon .track{ display:grid; gap:10px; align-items:center }

/* Time readout */
#player.ribbon .title{
  display:flex; align-items:center; gap:10px;
  font:12px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:#e8e8ea; opacity:.9;
}
#player.ribbon .title .dash{ opacity:.45 }

/* Seek line */
#player.ribbon .bar{
  position:relative; height:8px; border-radius:999px; cursor:pointer;
  background: linear-gradient(180deg,#1c1c21,#141419);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  overflow:hidden;
}
#player.ribbon #prog{
  position:absolute; left:0; bottom:0;
  height:100%; width:var(--pct);
  background: linear-gradient(90deg, rgba(255,255,255,.95), #ff3a47 80%);
  box-shadow: 0 0 22px rgba(255,58,71,.35),
              0 0 4px rgba(255,255,255,.45);
}
#player.ribbon .scrub{
  position:absolute; top:50%; left:var(--pct);
  transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid rgba(24,24,28,.85);
  box-shadow:0 0 18px rgba(255,58,71,.4);
  pointer-events:none;
}

/* Volume */
#player.ribbon .volwrap{
  display:flex; justify-content:flex-end; align-items:center;
}
#player.ribbon .vol{
  -webkit-appearance:none; appearance:none;
  width:100%; max-width:64px; height:6px;
  border-radius:999px; outline:none;
  background:#202027;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transition: background .25s ease;
}
#player.ribbon .vol:hover{ background:#262634 }
#player.ribbon .vol::-webkit-slider-runnable-track,
#player.ribbon .vol::-moz-range-track{
  height:6px; background:transparent; border-radius:999px;
}
#player.ribbon .vol::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid #1b1b21; margin-top:-4px; cursor:pointer;
  box-shadow:0 0 10px rgba(255,58,71,.35);
}
#player.ribbon .vol::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:#fff; border:2px solid #1b1b21; cursor:pointer;
  box-shadow:0 0 10px rgba(255,58,71,.35);
}

/* Mobile */
@media (max-width:640px){
  #player.ribbon{
    grid-template-columns:64px 1fr 58px;
    width:min(94vw,980px); min-height:80px;
    gap:12px; padding:12px 12px;
    top: calc(42% + 120px);
  }
  #pp{ width:50px; height:50px; border-radius:14px }
  #pp::before, #pp::after{ width:5px; height:18px }
  #pp::before{ left:16px } #pp::after{ right:16px }
  #pp.paused::before{
    border-left-width:16px;
    border-top-width:10px;
    border-bottom-width:10px;
  }
}

/* =========================
   HERO AVATAR + SIDE TEXT
   ========================= */
#avatar{
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  width:140px; height:140px; border-radius:50%; object-fit:cover;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.28));
  opacity:.95; pointer-events:none; z-index:1;
  animation:avatarFloat 7s ease-in-out infinite;
}
@keyframes avatarFloat{
  0%,100%{ transform:translate(-50%,-50%) translateY(0) }
  50%    { transform:translate(-50%,-50%) translateY(-4px) }
}
#avatar{ left:42% } /* shift left to make room for text */

#side-text{
  position:absolute; top:42%; left: calc(42% + 130px);
  transform: translateY(-50%); color:#fff;
  font-size: clamp(16px, 1.4vw, 20px); font-weight:600;
  opacity:.85; text-align:left; line-height:1.4; letter-spacing:.05em;
  font-family: "Inter", system-ui, sans-serif; pointer-events:none;
  animation: sideFade 2s ease-out forwards 2s; opacity:0;
}
#side-text .num{
  display:block; font-size: clamp(32px, 3.2vw, 52px); font-weight:800; line-height:1;
  color: var(--red);
  text-shadow: 0 0 12px rgba(255,30,45,.5);
}
@keyframes sideFade{ to{ opacity:1; transform: translateY(-50%) scale(1.02); } }

/* =========================
   KOREAN WORD
   ========================= */
#korean{
  position:fixed; bottom:18px; left:22px;
  font-family: 'Noto Sans KR', sans-serif;
  color:#fff; font-size:16px; letter-spacing:.5px; opacity:.85;
  z-index:6;
}

/* =========================
   LINKS PANEL
   ========================= */
#panel-links { text-align:center; }
#panel-links .links{
  display:flex; flex-wrap:wrap; gap:16px;
  justify-content:center; align-items:center;
  margin-top:18px;
}
#panel-links a,
#panel-links a:link,
#panel-links a:visited,
#panel-links a:hover,
#panel-links a:active{
  color:#fff !important;
  text-decoration:none !important;
}
#panel-links a{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px;
  border:1px solid #ffffff22;
  background: linear-gradient(180deg, #0b0b0dcc, #060608cc);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px #ffffff12, 0 10px 30px rgba(0,0,0,.35);
  font-weight:800; letter-spacing:.06em; text-transform:lowercase;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, opacity .35s;
  opacity:0; transform: translateY(10px);
  --accent: var(--red);
  animation: linkPillIn .7s ease forwards;
  -webkit-tap-highlight-color: transparent;
}
#panel-links a:nth-child(1){ animation-delay:.10s }
#panel-links a:nth-child(2){ animation-delay:.18s }
#panel-links a:nth-child(3){ animation-delay:.26s }
#panel-links a:nth-child(4){ animation-delay:.34s }
@keyframes linkPillIn{ to { opacity:1; transform: translateY(0); } }
#panel-links a::before{
  content:''; position:absolute; inset:-2px; border-radius:inherit;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,30,45,.6) 0%, transparent 60%);
  opacity:0; filter: blur(12px); transition: opacity .35s; z-index:-1;
}
#panel-links a::after{
  content:''; position:absolute; left:-20%; top:0; bottom:0; width:40%;
  background: linear-gradient(90deg, transparent, #ffffff66, transparent);
  transform: translateX(-160%) skewX(-18deg);
  opacity:0; transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .35s;
  pointer-events:none;
}
#panel-links a:hover{
  transform: translateY(-4px);
  border-color: rgba(255,30,45,.7);
  box-shadow: 0 12px 40px rgba(255,30,45,.28), inset 0 0 0 1px #ffffff22;
  text-shadow: 0 0 18px rgba(255,30,45,.55);
}
#panel-links a:hover::before{ opacity:.9 }
#panel-links a:hover::after{ opacity:1; transform: translateX(160%) skewX(-18deg) }

/* IRL panel layout */
.panel-stack .stack{
  position:relative; width:min(1100px,92vw); height:min(60vh,520px);
  margin:12px auto; perspective:1000px;
}
.panel-stack .card{
  position:absolute; object-fit:cover; border-radius:14px;
  box-shadow: 0 20px 80px #0008, inset 0 0 0 1px #ffffff1a;
  filter:saturate(1.06) contrast(1.05);
  will-change: transform; transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.panel-stack .c1{ left:5%; top:12%; width:45%; height:55%; z-index:4 }
.panel-stack .c2{ right:5%; top:18%; width:50%; height:60%; z-index:3 }
.panel-stack .c3{ left:20%; bottom:-2%; width:48%; height:58%; z-index:2 }
.panel-stack .c4{ right:10%; bottom:-6%; width:42%; height:50%; z-index:1 }
.panel-stack .card{ opacity:0; animation: irlFadeIn 1s cubic-bezier(.2,.8,.2,1) forwards }
@keyframes irlFadeIn{ 0%{opacity:0} 100%{opacity:1} }

/* =========================
   White heart cursor (global)
   ========================= */
/* default */
html, body {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="%23fff"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5c0-2.99 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.51 22 8.5c0 3.78-3.4 6.86-8.55 11.53L12 21.35z"/></svg>') 12 12, auto;
}

/* clickable elements keep the heart + pointer behavior */
a, button, .chip, #pp, .close, input[type="range"], [role="button"] {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="%23fff"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5c0-2.99 2.42-5.5 5.5-5.5 1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.51 22 8.5c0 3.78-3.4 6.86-8.55 11.53L12 21.35z"/></svg>') 12 12, pointer;
}

/* =========================
   Sparkle Aura Counter — refined alignment
   ========================= */
#sparkle-aura{
  position: fixed;
  right: 24px; bottom: 20px;
  display: inline-flex;
  align-items: baseline;       /* fix alignment */
  gap: 4px;                    /* slightly tighter spacing */
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s ease, transform .6s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  z-index: 80;
  filter: drop-shadow(0 0 10px rgba(255,190,220,.25));
}

/* show after entering site */
body.opening #sparkle-aura{
  opacity: .85;
  transform: translateY(0);
}

#sparkle-aura .sparkle-icon{
  position: relative;
  top: -1px;                   /* nudge up a pixel for visual centering */
  font-size: 14px;
  line-height: 1;
  color: #ffb6f9;
  text-shadow:
    0 0 8px rgba(255,150,230,.6),
    0 0 16px rgba(255,200,255,.2);
  animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle{
  0%,100%{ opacity:.85; transform: scale(1); }
  50%{ opacity:1; transform: scale(1.25) rotate(8deg); }
}

#sparkle-val{
  font-size: 13px;
  line-height: 1;
  letter-spacing: .06em;
  color: #ffdff8;
  text-shadow: 0 0 8px rgba(255,180,240,.4);
  transform-origin: left center;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}

#sparkle-aura.pop #sparkle-val{
  transform: scale(1.25) translateY(-1px);
}

/* mobile tweak */
@media (max-width:640px){
  #sparkle-aura{
    right: 14px;
    bottom: 16px;
    gap: 3px;
    font-size: 12px;
  }
  #sparkle-aura .sparkle-icon{ top:-0.5px; font-size:13px }
}