:root{
  --bg: #0A0710;
  --bg-1: #120B1C;
  --surface: #1B1226;
  --surface-2: #251A34;
  --purple-deep: #2E1065;
  --purple: #6D28D9;
  --purple-light: #A78BFA;
  --purple-soft: rgba(109,40,217,.18);
  --gold: #F0C555;
  --gold-soft: rgba(240,197,85,.16);
  --text: #F6F3FA;
  --text-dim: #B6ADC4;
  --text-faint: #7B7189;
  --border: rgba(255,255,255,.08);

  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);
}

*{ box-sizing: border-box; }
html, body{ overflow-x: hidden; max-width: 100%; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  -webkit-tap-highlight-color: transparent;
}
h1,h2,h3,.font-display{ font-family:'Fraunces','Iowan Old Style',Georgia,serif; }

button{ font-family: inherit; cursor: pointer; border:none; background:none; color:inherit; }
img{ display:block; max-width:100%; }

::selection{ background: var(--purple); color:#fff; }

/* ---------- scrollbar (subtle) ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: var(--surface-2); border-radius:99px; }

/* ---------- entrance animations ---------- */
@keyframes fadeUp{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes scaleIn{ from{ opacity:0; transform: scale(.92); } to{ opacity:1; transform:none; } }
@keyframes floatY{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
@keyframes shimmer{ 0%{ background-position: -200% 0; } 100%{ background-position: 200% 0; } }
@keyframes glowPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes spin-slow{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } }

.animate-fadeUp{ animation: fadeUp .7s var(--ease-out-expo) both; }
.animate-fadeIn{ animation: fadeIn .6s var(--ease-out-expo) both; }
.animate-scaleIn{ animation: scaleIn .5s var(--ease-back) both; }
.animate-float{ animation: floatY 5s ease-in-out infinite; }

/* ---------- gate screen ---------- */
.gate{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#000;
}
.gate-bg{
  position:absolute; inset:0; background-size: cover; background-position: center 20%;
  filter: saturate(1.1) brightness(.55);
  transform: scale(1.08);
  animation: gateZoom 18s ease-in-out infinite alternate;
}
@keyframes gateZoom{ from{ transform: scale(1.08); } to{ transform: scale(1.16); } }
.gate-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(10,7,16,.98) 10%, rgba(10,7,16,.55) 45%, rgba(10,7,16,.15) 70%),
    linear-gradient(180deg, rgba(10,7,16,.85) 0%, rgba(10,7,16,.25) 35%, rgba(10,7,16,.6) 100%);
}
.gate-content{ position:relative; z-index:2; text-align:center; padding:0 24px; max-width:560px; }
.gate-logo{ width:min(78vw, 320px); margin:0 auto 28px; filter: drop-shadow(0 12px 40px rgba(109,40,217,.55)); }
.gate-tagline{ color:var(--text-dim); font-size:15px; letter-spacing:.02em; margin-bottom:40px; }

.btn-enter{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:18px 44px; border-radius:999px; font-weight:800; font-size:17px;
  letter-spacing:.02em; color:#1a1220;
  background: linear-gradient(135deg, #FFE9AE, var(--gold) 55%, #C99A2E);
  box-shadow: 0 10px 30px rgba(240,197,85,.35), 0 2px 0 rgba(255,255,255,.4) inset;
  transition: transform .35s var(--ease-out-expo), box-shadow .35s var(--ease-out-expo);
  animation: entrancePulse 3.2s ease-in-out infinite;
}
@keyframes entrancePulse{
  0%,100%{ box-shadow: 0 10px 30px rgba(240,197,85,.35), 0 2px 0 rgba(255,255,255,.4) inset; }
  50%{ box-shadow: 0 14px 44px rgba(240,197,85,.55), 0 2px 0 rgba(255,255,255,.4) inset; }
}
.btn-enter:hover{ transform: translateY(-3px) scale(1.03); }
.btn-enter:active{ transform: translateY(0) scale(.98); }
.btn-enter svg{ transition: transform .3s var(--ease-back); }
.btn-enter:hover svg{ transform: translateX(4px); }

/* ---------- header ---------- */
.hub-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.hub-header.scrolled{
  background: rgba(10,7,16,.85); backdrop-filter: blur(16px);
  border-color: var(--border);
}
.hub-logo{ height:30px; }

/* ---------- hero ---------- */
.hero{ position:relative; width:100%; height:min(78vh, 640px); min-height:420px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center 22%; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,7,16,.15) 0%, rgba(10,7,16,.05) 30%, var(--bg) 96%),
    linear-gradient(90deg, rgba(10,7,16,.92) 0%, rgba(10,7,16,.55) 42%, rgba(10,7,16,.1) 75%);
}
.hero-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:0 clamp(20px,5vw,64px) 56px; max-width:680px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  background: var(--gold-soft); color: var(--gold); border:1px solid rgba(240,197,85,.35);
  padding:6px 14px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:18px;
}
.hero-title{ font-size:clamp(2.2rem,5.5vw,3.6rem); font-weight:700; line-height:1.05; letter-spacing:-.02em; margin-bottom:16px; text-shadow: 0 4px 24px rgba(0,0,0,.4); }
.hero-desc{ color:var(--text-dim); font-size:16px; line-height:1.6; margin-bottom:28px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.btn-primary{
  display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:14px;
  background:#fff; color:#14101c; font-weight:800; font-size:15px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .25s var(--ease-out-expo), background .25s;
}
.btn-primary:hover{ transform: translateY(-2px) scale(1.02); background:#f1eef7; }
.btn-primary:active{ transform: translateY(0) scale(.97); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:14px;
  background: rgba(255,255,255,.08); color:#fff; font-weight:700; font-size:15px;
  border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px);
  transition: transform .25s var(--ease-out-expo), background .25s;
}
.btn-ghost:hover{ transform: translateY(-2px) scale(1.02); background: rgba(255,255,255,.14); }

/* ---------- rows / cards ---------- */
.row-section{ padding: 8px clamp(20px,5vw,64px) 12px; }
.row-title{ font-size:1.35rem; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.row-track{
  display:flex; gap:20px; overflow-x:auto; padding:10px 2px 28px;
  scroll-snap-type: x proximity;
}
.row-track::-webkit-scrollbar{ height:8px; }

.card{
  position:relative; flex:0 0 auto; width: 230px; border-radius:18px; overflow:hidden;
  background: var(--surface); border:1px solid var(--border);
  scroll-snap-align:start; cursor:pointer;
  transition: transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo), border-color .3s;
}
.card.featured{ width:280px; }
.card:hover{ transform: translateY(-8px) scale(1.045); box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px var(--purple-light); border-color: var(--purple-light); z-index:5; }
.card-img-wrap{ position:relative; aspect-ratio: 2/3; overflow:hidden; }
.card-img-wrap img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease-out-expo); }
.card:hover .card-img-wrap img{ transform: scale(1.08); }
.card-shine{
  position:absolute; inset:0; opacity:0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 45%, transparent 60%);
  background-size:250% 250%; transition: opacity .3s;
}
.card:hover .card-shine{ opacity:1; animation: shimmer 1.1s ease; }
.card-badge{
  position:absolute; top:10px; left:10px; background: var(--gold); color:#1a1220;
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.card-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .3s;
  background: rgba(10,7,16,.28);
}
.card:hover .card-play{ opacity:1; }
.card-play-btn{
  width:56px; height:56px; border-radius:999px; background: rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; transform: scale(.7);
  transition: transform .35s var(--ease-back);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.card:hover .card-play-btn{ transform: scale(1); }
.card-info{ padding:14px 14px 16px; }
.card-info h3{ font-size:14px; font-weight:700; margin:0 0 4px; line-height:1.3; }
.card-info p{ font-size:12px; color: var(--text-faint); margin:0; }

/* ---------- progress strip on featured card ---------- */
.progress-strip{ height:4px; background: var(--surface-2); border-radius:99px; overflow:hidden; margin-top:8px; }
.progress-strip > div{ height:100%; background: linear-gradient(90deg, var(--purple), var(--gold)); }

/* ---------- module modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:100; background: rgba(6,4,10,.72); backdrop-filter: blur(6px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease-out-expo);
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
@media (min-width: 820px){ .modal-overlay{ align-items:center; padding:32px; } }

.modal-panel{
  width:100%; max-width:840px; max-height:92vh; overflow-y:auto;
  background: var(--bg-1); border-radius:24px 24px 0 0; border:1px solid var(--border);
  transform: translateY(40px); opacity:0; transition: transform .45s var(--ease-out-expo), opacity .4s;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
@media (min-width: 820px){ .modal-panel{ border-radius:24px; transform: translateY(24px) scale(.97); } }
.modal-overlay.open .modal-panel{ transform: none; opacity:1; }

.modal-hero{ position:relative; height:260px; }
.modal-hero img{ width:100%; height:100%; object-fit:cover; }
.modal-hero::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,7,16,.1) 0%, var(--bg-1) 100%);
}
.modal-close{
  position:absolute; top:16px; right:16px; z-index:3; width:38px; height:38px; border-radius:999px;
  background: rgba(10,7,16,.6); backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center;
  transition: background .2s, transform .2s;
}
.modal-close:hover{ background: rgba(10,7,16,.85); transform: rotate(90deg); }
.modal-body{ padding: 0 clamp(20px,4vw,40px) 40px; margin-top:-64px; position:relative; z-index:2; }
.modal-title{ font-size:1.9rem; font-weight:700; margin-bottom:10px; }
.modal-meta{ display:flex; gap:10px; align-items:center; color:var(--text-dim); font-size:13px; margin-bottom:18px; flex-wrap:wrap; }
.modal-desc{ color: var(--text-dim); line-height:1.7; font-size:15px; margin-bottom:28px; max-width:60ch; }

.viewer-frame{
  width:100%; aspect-ratio: 4/5; max-height:70vh; border-radius:16px; overflow:hidden; border:1px solid var(--border);
  background: var(--surface); margin-bottom:20px;
}
.viewer-frame iframe{ width:100%; height:100%; border:0; }

.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background: var(--surface-2); font-size:12px; font-weight:600; color:var(--text-dim); }
.pill.gold{ background: var(--gold-soft); color: var(--gold); }

/* ---------- footer ---------- */
.hub-footer{ padding:40px clamp(20px,5vw,64px) 80px; color: var(--text-faint); font-size:12px; text-align:center; }

/* ---------- section reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- ambient glow blobs ---------- */
.blob{ position:absolute; border-radius:999px; filter: blur(80px); pointer-events:none; opacity:.35; }