/* ═══════════ LUNA — THE ROOM ═══════════ */
:root {
  --ink: #0b0a0f;
  --ink-2: #100e17;
  --pink: #ff3d8b;
  --cyan: #31d9ff;
  --violet: #a24bff;
  --white: #f2eef6;
  --dim: #9c93ab;
  --display: 'Baloo 2', 'Segoe UI', sans-serif;
  --sans: 'Inter', 'Helvetica Neue', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--white); font-family: var(--sans); font-weight: 300; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: var(--pink); color: #fff; }
.glow { color: var(--pink); text-shadow: 0 0 24px rgba(255,61,139,.5); }
.kicker { display: inline-block; font-family: var(--sans); font-weight: 600; font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1.1rem; }
.section-title { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 5.5vw, 4.2rem); line-height: 1.05; }
.section-head { max-width: 1200px; margin: 0 auto 3.2rem; padding: 0 3rem; text-align: center; }

/* live dot motif */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); margin-right: .5em; position: relative; top: -1px; animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }

/* buttons */
.btn { font-family: var(--sans); font-weight: 600; font-size: .85rem; letter-spacing: .04em; text-decoration: none; padding: 1.05rem 2.3rem; border-radius: 999px; cursor: pointer; border: none; transition: all .3s; display: inline-block; }
.btn-glow { background: linear-gradient(135deg, var(--pink), var(--violet)); color: #fff; box-shadow: 0 8px 30px rgba(255,61,139,.4); }
.btn-glow:hover { box-shadow: 0 10px 40px rgba(255,61,139,.6); transform: translateY(-2px); }
.btn-ghost { color: var(--white); border: 1px solid rgba(255,255,255,.2); background: transparent; }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-lg { padding: 1.2rem 3rem; font-size: 1rem; }

/* ═══ AGE GATE ═══ */
.gate { position: fixed; inset: 0; z-index: 200; background: radial-gradient(ellipse at center, #1a0f24, var(--ink) 70%); display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; transition: opacity .6s, visibility .6s; }
.gate.hidden { opacity: 0; visibility: hidden; }
.gate-inner { max-width: 28rem; }
.gate-mark { width: 60px; height: 60px; margin: 0 auto 1.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 1.5rem; background: linear-gradient(135deg, var(--pink), var(--violet)); box-shadow: 0 0 30px rgba(255,61,139,.4); }
.gate-name { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 7vw, 3.2rem); letter-spacing: .04em; margin-bottom: 1.4rem; }
.gate-sub { font-size: .95rem; line-height: 1.7; color: var(--dim); margin-bottom: 2.2rem; }
.gate-sub strong { color: var(--white); font-weight: 500; }
.gate-actions { display: flex; gap: 1rem; justify-content: center; }
.gate-fine { margin-top: 2.2rem; font-size: .66rem; letter-spacing: .25em; text-transform: uppercase; color: var(--dim); }

/* ═══ NAV ═══ */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 90; display: flex; align-items: center; justify-content: space-between; padding: 1.3rem 3rem; transition: background .5s, backdrop-filter .5s, padding .5s, border-color .5s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(11,10,15,.82); backdrop-filter: blur(12px); padding: 1rem 3rem; border-color: rgba(255,255,255,.08); }
.nav-logo { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: .04em; color: var(--white); text-decoration: none; }
.nav-links { display: flex; gap: 2.1rem; }
.nav-links a { font-size: .85rem; font-weight: 500; color: var(--dim); text-decoration: none; transition: color .3s; }
.nav-links a:hover { color: var(--cyan); }
.nav-right { display: flex; align-items: center; gap: 1rem; }
.live-pill { display: flex; align-items: center; font-size: .72rem; font-weight: 600; letter-spacing: .05em; color: var(--dim); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: .45rem 1rem; border-radius: 999px; }
.live-pill i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); margin-right: .5em; }
.live-pill.on { color: var(--pink); border-color: rgba(255,61,139,.3); }
.live-pill.on i { background: var(--pink); box-shadow: 0 0 8px var(--pink); animation: livePulse 1.6s ease-in-out infinite; }
.nav-cta { font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--pink), var(--violet)); padding: .6rem 1.4rem; border-radius: 999px; transition: transform .3s; }
.nav-cta:hover { transform: translateY(-1px); }

/* ═══ HERO ═══ */
.hero { position: relative; height: 300vh; background: #000; }
.hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.hero-veil { position: absolute; inset: 0; background:
  radial-gradient(ellipse at 50% 55%, transparent 28%, rgba(11,10,15,.55) 100%),
  linear-gradient(180deg, rgba(11,10,15,.55) 0%, transparent 28%, transparent 60%, var(--ink) 100%); }
.hero-type { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 2rem; pointer-events: none; }
.hero-kicker { font-size: .75rem; font-weight: 600; letter-spacing: .35em; text-transform: uppercase; color: var(--pink); margin-bottom: 1.6rem; display: flex; align-items: center; }
.hero-name { font-family: var(--display); font-weight: 800; font-size: clamp(3.6rem, 14vw, 11.5rem); line-height: .92; letter-spacing: .02em; text-shadow: 0 4px 60px rgba(0,0,0,.6); }
.hero-tag { font-family: var(--sans); font-style: italic; font-size: clamp(1.05rem, 2.4vw, 1.7rem); color: var(--white); margin-top: 1.5rem; font-weight: 300; }
.hero-scroll { position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .8rem; font-size: .62rem; letter-spacing: .35em; text-transform: uppercase; color: var(--dim); }
.hero-scroll i { width: 1px; height: 42px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--pink); animation: drop 2s ease-in-out infinite; }
@keyframes drop { to { top: 110%; } }

/* floating chat bubbles */
.chat-drift { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.chat-bubble { position: absolute; bottom: -40px; padding: .5rem .9rem; border-radius: 999px; background: rgba(20,18,28,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.12); font-size: .78rem; color: var(--white); white-space: nowrap; opacity: 0; animation: bubbleUp 6s ease-in forwards; }
@keyframes bubbleUp { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70vh); } }

/* ═══ ABOUT ═══ */
.about { padding: 8.5rem 3rem; max-width: 1200px; margin: 0 auto; }
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 5rem; align-items: center; }
.about-lead { font-family: var(--sans); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.5; color: var(--white); margin-bottom: 1.5rem; font-weight: 300; }
.about-body { font-size: 1rem; line-height: 1.8; color: var(--dim); margin-bottom: 2rem; max-width: 32rem; }
.text-link { font-family: var(--sans); font-weight: 600; font-size: .85rem; color: var(--cyan); text-decoration: none; border-bottom: 1px solid rgba(49,217,255,.3); padding-bottom: .3rem; transition: color .3s; }
.text-link:hover { color: var(--pink); }
.about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; overflow: hidden; }
.stat { background: var(--ink); padding: 1.5rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.stat-k { font-size: .62rem; letter-spacing: .25em; text-transform: uppercase; color: var(--cyan); }
.stat-v { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--white); }

/* ═══ SCHEDULE ═══ */
.schedule { padding: 8.5rem 3rem; background: var(--ink-2); }
.countdown-banner { max-width: 900px; margin: 0 auto 3rem; background: linear-gradient(135deg, rgba(255,61,139,.1), rgba(162,75,255,.1)); border: 1px solid rgba(255,61,139,.2); border-radius: 20px; padding: 2.2rem 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cd-status { display: flex; align-items: center; font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.cd-timer { display: flex; gap: 1.4rem; }
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 3rem; }
.cd-num { font-family: var(--display); font-weight: 800; font-size: 2rem; color: var(--pink); font-variant-numeric: tabular-nums; text-shadow: 0 0 16px rgba(255,61,139,.35); }
.cd-label { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); }
.week-grid { max-width: 900px; margin: 0 auto 3rem; display: grid; grid-template-columns: repeat(7, 1fr); gap: .8rem; }
.day-cell { background: var(--ink); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 1.2rem .6rem; text-align: center; display: flex; flex-direction: column; gap: .5rem; transition: border-color .3s; }
.day-cell.today { border-color: var(--pink); box-shadow: 0 0 20px rgba(255,61,139,.15); }
.day-name { font-family: var(--display); font-weight: 700; font-size: .95rem; }
.day-time { font-size: .7rem; color: var(--dim); line-height: 1.3; }
.alert-row { max-width: 700px; margin: 0 auto; text-align: center; }
.alert-row p { font-family: var(--display); font-weight: 600; font-size: 1.2rem; margin-bottom: 1.3rem; }
#alertForm { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
#alertForm input { background: var(--ink); border: 1px solid rgba(255,255,255,.15); color: var(--white); font-family: var(--sans); font-size: .95rem; padding: 1rem 1.3rem; border-radius: 999px; outline: none; min-width: 240px; transition: border-color .3s; }
#alertForm input:focus { border-color: var(--cyan); }
#alertForm.sent input, #alertForm.sent button { display: none; }
.form-done { display: none; margin-top: 1rem; font-family: var(--sans); font-size: 1rem; color: var(--pink); }
#alertForm.sent + .form-done, .alert-row form.sent ~ .form-done { display: block; }

/* ═══ GALLERY ═══ */
.gallery { padding: 8.5rem 0; }
.gallery-grid { max-width: 1200px; margin: 0 auto; padding: 0 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; }
.g-item { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); aspect-ratio: 4/5; transition: border-color .4s, box-shadow .4s; }
.g-item.g-wide { grid-column: span 2; aspect-ratio: 21/9; }
.g-item:hover { border-color: rgba(255,61,139,.4); box-shadow: 0 0 40px rgba(255,61,139,.15); }
.g-video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s cubic-bezier(.22,1,.36,1); }
.g-item:hover .g-video { transform: scale(1.04); }
.g-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,10,15,.75), transparent 45%); pointer-events: none; }
.g-item figcaption { position: absolute; left: 1.4rem; bottom: 1.2rem; z-index: 2; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--white); text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.gallery-note { text-align: center; margin-top: 2.2rem; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

/* ═══ VIBE ═══ */
.vibe { padding: 8.5rem 3rem; background: var(--ink-2); text-align: center; }
.vibe-grid { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; text-align: left; }
.vibe-item { background: var(--ink); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 1.8rem; display: flex; gap: 1.2rem; align-items: flex-start; }
.vibe-num { font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--pink); }
.vibe-item p { font-size: 1rem; line-height: 1.5; color: var(--white); }
.vibe-cta { margin-top: 3rem; }

/* ═══ WATCH / LINKS ═══ */
.watch { padding: 8.5rem 3rem; }
.link-list { max-width: 640px; margin: 0 auto 5rem; display: flex; flex-direction: column; }
.link-row { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem .4rem; border-bottom: 1px solid rgba(255,255,255,.08); text-decoration: none; transition: padding .35s, border-color .35s; }
.link-row:hover { padding-left: 1rem; border-color: rgba(255,61,139,.3); }
.link-name { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--white); }
.link-meta { font-size: .8rem; font-weight: 600; color: var(--cyan); }
.proof { max-width: 600px; margin: 0 auto 5rem; text-align: center; }
.proof-line { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin-bottom: 1.2rem; }
.proof blockquote { font-size: 1rem; color: var(--dim); }
.proof cite { font-style: normal; color: var(--pink); font-size: .85rem; margin-left: .4rem; }
.final-cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; }

/* ═══ FOOTER ═══ */
.footer { padding: 3.2rem 3rem; text-align: center; display: flex; flex-direction: column; gap: .9rem; border-top: 1px solid rgba(255,255,255,.06); }
.footer-logo { font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.footer-fine { font-size: .68rem; color: var(--dim); }

/* ═══ REVEALS ═══ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* ═══ MOBILE ═══ */
@media (max-width: 860px) {
  .nav { padding: 1rem 1.2rem; }
  .nav-links { display: none; }
  .about, .schedule, .vibe, .watch, .gallery { padding-left: 1.2rem; padding-right: 1.2rem; }
  .about-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .g-item, .g-item.g-wide { grid-column: span 1; aspect-ratio: 4/5; }
  .vibe-grid { grid-template-columns: 1fr; }
  .week-grid { grid-template-columns: repeat(4, 1fr); }
  .cd-timer { gap: .8rem; }
  .cd-num { font-size: 1.5rem; }
  #alertForm { flex-direction: column; align-items: stretch; }
  #alertForm input { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .live-dot, .live-pill.on i, .hero-scroll i::after, .chat-bubble { animation: none; } }