/* ============================================================
   Legacy SMP — Cinematic
   Full-bleed dark scene · monumental wordmark · floating UI
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#050510;
  --bg-2:#08081a;
  --ink:#f5f3ff;
  --ink-2:#cfcae8;
  --muted:#8b86a8;
  --dim:#5b5775;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --violet:#a78bfa;
  --violet-2:#c4b5fd;
  --violet-3:#7c63e6;
  --violet-glow:rgba(167,139,250,.45);

  --fd:'Bebas Neue',Impact,Arial Narrow,sans-serif;
  --fb:'Inter',-apple-system,system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--violet);color:#000}
:focus-visible{outline:1px solid var(--violet-2);outline-offset:3px}

/* ───────────── SCENE ───────────── */
.scene{position:relative;min-height:100vh;width:100%;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(124,99,230,.16), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(20,15,50,.5), transparent 70%),
    linear-gradient(180deg, #060617 0%, #050510 50%, #03030a 100%);
}

/* twinkling starfield via tiled SVG */
.stars{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'><g fill='%23ffffff'><circle cx='32' cy='48' r='.6' opacity='.85'/><circle cx='118' cy='91' r='.4' opacity='.5'/><circle cx='197' cy='28' r='.7' opacity='.7'/><circle cx='256' cy='162' r='.5' opacity='.6'/><circle cx='334' cy='73' r='.4' opacity='.4'/><circle cx='401' cy='201' r='.9' opacity='.9'/><circle cx='468' cy='44' r='.5' opacity='.55'/><circle cx='527' cy='117' r='.6' opacity='.7'/><circle cx='572' cy='198' r='.4' opacity='.4'/><circle cx='65' cy='244' r='.5' opacity='.6'/><circle cx='149' cy='287' r='.7' opacity='.8'/><circle cx='216' cy='350' r='.4' opacity='.4'/><circle cx='298' cy='311' r='.9' opacity='.95'/><circle cx='367' cy='423' r='.5' opacity='.55'/><circle cx='441' cy='376' r='.6' opacity='.7'/><circle cx='503' cy='281' r='.5' opacity='.6'/><circle cx='562' cy='359' r='.4' opacity='.45'/><circle cx='29' cy='402' r='.7' opacity='.8'/><circle cx='90' cy='481' r='.5' opacity='.6'/><circle cx='171' cy='441' r='.4' opacity='.4'/><circle cx='244' cy='518' r='.6' opacity='.7'/><circle cx='320' cy='482' r='.4' opacity='.45'/><circle cx='389' cy='551' r='.8' opacity='.9'/><circle cx='458' cy='497' r='.5' opacity='.55'/><circle cx='526' cy='437' r='.6' opacity='.7'/><circle cx='585' cy='532' r='.4' opacity='.4'/><circle cx='12' cy='133' r='.4' opacity='.4'/><circle cx='86' cy='180' r='.5' opacity='.5'/><circle cx='280' cy='220' r='.4' opacity='.4'/><circle cx='373' cy='264' r='.5' opacity='.6'/><circle cx='495' cy='200' r='.4' opacity='.45'/></g></svg>");
  background-size:600px 600px;background-repeat:repeat;
  animation:drift 180s linear infinite;
  opacity:.85}
.stars.layer-2{background-size:400px 400px;animation-duration:240s;animation-direction:reverse;opacity:.6}
@keyframes drift{from{background-position:0 0}to{background-position:600px 600px}}

/* central glow behind wordmark */
.aura{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(90vw,1100px);height:min(60vh,520px);pointer-events:none;z-index:1;
  background:radial-gradient(ellipse, var(--violet-glow), transparent 65%);
  filter:blur(40px);opacity:.55}

/* ───────────── TOP BAR ───────────── */
.topbar{position:absolute;top:0;left:0;right:0;z-index:20;
  padding:clamp(18px,3vw,32px) clamp(18px,4vw,44px);
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;pointer-events:none}
.topbar > *{pointer-events:auto}

.brand{display:flex;align-items:center;gap:14px}
.menu-btn{width:48px;height:48px;border-radius:50%;background:var(--violet-3);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s,transform .15s;flex-shrink:0}
.menu-btn:hover{background:var(--violet)}
.menu-btn:active{transform:scale(.95)}
.menu-btn span{width:18px;height:1.5px;background:#fff;display:block;position:relative}
.menu-btn span::before,.menu-btn span::after{content:'';position:absolute;left:0;width:18px;height:1.5px;background:#fff}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}

.brand-mark{display:flex;flex-direction:column;line-height:1}
.brand-mark .name{font-family:var(--fd);font-size:22px;letter-spacing:.04em;color:var(--ink)}
.brand-mark .sub{font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:5px}

.intro{max-width:340px;text-align:right;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.intro b{color:var(--ink);font-weight:500}

@media(max-width:720px){
  .intro{max-width:220px;font-size:12.5px}
  .brand-mark .name{font-size:18px}
}

/* ───────────── WORDMARK ───────────── */
.stage{position:relative;z-index:2;min-height:100vh;
  display:grid;grid-template-rows:1fr auto 1fr;align-items:center;justify-items:center;
  padding:120px 24px 140px;text-align:center}

.kicker{font-family:var(--fm);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);margin-bottom:24px;align-self:end}
.kicker::before,.kicker::after{content:'';display:inline-block;width:32px;height:1px;background:var(--line-2);vertical-align:middle;margin:0 14px}

.wordmark{font-family:var(--fd);
  font-size:clamp(80px,18vw,260px);
  line-height:.86;letter-spacing:.02em;
  color:var(--ink);
  text-shadow:
    0 0 80px var(--violet-glow),
    0 0 160px rgba(167,139,250,.18);
  background:linear-gradient(180deg, #fff 0%, #d8d3f6 40%, var(--violet-2) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  position:relative}
.wordmark .ampersand{display:inline-block;color:var(--violet);font-size:.42em;vertical-align:.7em;letter-spacing:.04em;margin:0 .12em;-webkit-text-fill-color:var(--violet)}

.tagline{font-family:var(--fb);font-size:clamp(14px,1.4vw,17px);font-weight:300;color:var(--ink-2);max-width:560px;margin-top:38px;line-height:1.6;align-self:start}
.tagline em{font-style:italic;color:var(--violet-2);font-weight:400}

/* ───────────── BOTTOM BAR ───────────── */
.botbar{position:absolute;bottom:0;left:0;right:0;z-index:20;
  padding:clamp(20px,3vw,36px) clamp(18px,4vw,44px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;pointer-events:none}
.botbar > *{pointer-events:auto}

.live{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.live .dot{width:7px;height:7px;border-radius:50%;background:var(--violet);
  box-shadow:0 0 0 0 var(--violet-glow);animation:pulse 2.2s infinite}
.live .dot.off{background:#9b2c2c;animation:none}
.live b{color:var(--ink);font-weight:500}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(167,139,250,.65)}70%{box-shadow:0 0 0 10px rgba(167,139,250,0)}100%{box-shadow:0 0 0 0 rgba(167,139,250,0)}}

.cta-pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--fb);font-size:14px;font-weight:500;
  background:var(--violet-3);color:#fff;
  padding:13px 26px;border-radius:999px;
  transition:background .25s,transform .15s;
  border:1px solid transparent}
.pill:hover{background:var(--violet)}
.pill:active{transform:scale(.97)}
.pill.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.pill.ghost:hover{background:rgba(255,255,255,.06);border-color:var(--line-2)}
.pill b{font-weight:600}

@media(max-width:680px){
  .botbar{flex-direction:column;align-items:stretch;gap:18px}
  .cta-pills{justify-content:stretch}
  .pill{flex:1;justify-content:center;padding:14px 18px;font-size:13.5px}
}

/* ───────────── FULL-SCREEN MENU OVERLAY ───────────── */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(5,5,16,.96);backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.overlay.open{opacity:1;pointer-events:auto}
.overlay-close{position:absolute;top:clamp(18px,3vw,32px);left:clamp(18px,4vw,44px);
  width:48px;height:48px;border-radius:50%;background:var(--violet-3);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;transition:background .25s}
.overlay-close:hover{background:var(--violet)}
.overlay-nav{display:flex;flex-direction:column;align-items:center;gap:8px}
.overlay-nav a{font-family:var(--fd);font-size:clamp(38px,7vw,76px);letter-spacing:.04em;color:var(--ink-2);
  padding:6px 24px;transition:color .25s,letter-spacing .35s;line-height:1.05;border-radius:6px}
.overlay-nav a:hover{color:var(--violet-2);letter-spacing:.08em}
.overlay-foot{position:absolute;bottom:clamp(20px,3vw,36px);left:0;right:0;text-align:center;
  font-family:var(--fm);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

/* ───────────── 3D CANVAS (fixed, scroll-reactive) ───────────── */
#bg3d{position:fixed;inset:0;z-index:1;pointer-events:none;display:block}
body.has3d .stars{z-index:0}

/* boot / opening overlay */
.boot{position:fixed;inset:0;z-index:300;background:#020208;pointer-events:none;
  transition:opacity 1.1s ease .15s;display:flex;align-items:center;justify-content:center}
.boot.done{opacity:0}
.boot-mark{font-family:var(--fm);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--violet-2);
  opacity:.0;animation:bootblink 1.6s ease-in-out infinite}
@keyframes bootblink{0%,100%{opacity:.25}50%{opacity:.9}}

/* center spacer reserves the volume the 3D text occupies */
.wordmark-space{height:clamp(140px,30vh,320px);display:flex;align-items:center;justify-content:center}
/* fallback (reduced-motion / no-webgl): show real text */
.wordmark{font-family:var(--fd);font-size:clamp(80px,18vw,260px);line-height:.86;letter-spacing:.02em;
  text-shadow:0 0 80px var(--violet-glow);
  background:linear-gradient(180deg,#fff,var(--violet-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.has3d .wordmark{display:none}

/* staggered intro reveal for the floating UI */
.reveal-up{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.reveal-up.ready{opacity:1;transform:none}
.r-d1{transition-delay:.15s}.r-d2{transition-delay:.3s}.r-d3{transition-delay:.45s}.r-d4{transition-delay:.6s}

/* the whole hero scrolls; fade its UI out as you leave */
.scene{will-change:opacity}

/* ───────────── SCROLL CUE ───────────── */
.scroll-cue{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--fm);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
  pointer-events:none}
.scroll-cue .bar{width:1px;height:46px;background:linear-gradient(var(--violet),transparent);
  animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:680px){.scroll-cue{display:none}}

/* ───────────── SECOND PANEL: ENTER THE WORLD ───────────── */
.world{position:relative;z-index:2;background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(124,99,230,.12), transparent 60%),
    linear-gradient(180deg,#03030a 0%, #06061a 60%, #050510 100%);
  padding:clamp(80px,12vw,160px) clamp(20px,5vw,56px) clamp(80px,10vw,140px);
  border-top:1px solid var(--line)}
.world-inner{max-width:1180px;margin:0 auto}
.world-head{text-align:center;margin-bottom:64px}
.world-head .kicker{margin-bottom:22px}
.world-head h2{font-family:var(--fd);font-size:clamp(44px,7vw,104px);line-height:.9;letter-spacing:.02em;
  background:linear-gradient(180deg,#fff,var(--violet-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.world-head p{max-width:540px;margin:24px auto 0;color:var(--ink-2);font-weight:300;font-size:16px;line-height:1.6}

.dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:820px){.dest-grid{grid-template-columns:1fr}}
.dest-card{position:relative;display:block;padding:36px 30px 30px;border-radius:18px;
  background:linear-gradient(165deg,rgba(124,99,230,.10),rgba(255,255,255,.02));
  border:1px solid var(--line);overflow:hidden;
  transform-style:preserve-3d;transition:transform .2s ease-out,border-color .3s,box-shadow .3s;
  will-change:transform}
.dest-card:hover{border-color:var(--line-2);box-shadow:0 30px 80px -30px rgba(124,99,230,.6)}
.dest-card .glow{position:absolute;width:220px;height:220px;border-radius:50%;right:-70px;top:-70px;
  background:radial-gradient(var(--violet-glow),transparent 70%);opacity:.25;transition:opacity .3s}
.dest-card:hover .glow{opacity:.5}
.dest-num{font-family:var(--fm);font-size:11px;letter-spacing:.2em;color:var(--violet-2);margin-bottom:18px}
.dest-card h3{font-family:var(--fd);font-size:clamp(30px,3.4vw,46px);line-height:.95;letter-spacing:.02em;color:var(--ink);margin-bottom:12px;transform:translateZ(40px)}
.dest-card p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-bottom:22px;max-width:34ch}
.dest-card .go{display:inline-flex;align-items:center;gap:9px;font-family:var(--fm);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-2)}
.dest-card .go::after{content:'→';transition:transform .25s}
.dest-card:hover .go::after{transform:translateX(5px)}

/* dispatches ticker */
.ticker{margin-top:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:22px 0;overflow:hidden;white-space:nowrap;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:inline-flex;gap:48px;animation:scrollx 40s linear infinite;will-change:transform}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{font-family:var(--fm);font-size:13px;letter-spacing:.08em;color:var(--ink-2);text-transform:uppercase}
.ticker-item b{color:var(--violet-2);font-weight:500}
.ticker-item .sep{color:var(--dim);margin-left:48px}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ───────────── REDUCED MOTION ───────────── */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .stars{animation:none}
  .live .dot{animation:none}
  .ticker-track{animation:none}
  #bg3d{display:none}
}