/* ════════════════════════════════════════════════════════════════════
   Home page — "Select Your World" stage, quick recap
   Shares tokens/layout with site.css; loaded after it.
   ════════════════════════════════════════════════════════════════════ */

/* #region Home page nav override */
/* ─── Home page nav override ─────────────────────────────────────── */
/* Home page: the three verticals ARE the menu — the section nav stays hidden here,
   and reappears on every destination site (About, Music, Games, Film). */
.nav-links{display:none}
/* #endregion */

/* #region Select Your World stage */
/* ─── Select Your World stage ────────────────────────────────────── */
/* full-viewport stage shell */
.select{position:relative;height:100svh;min-height:560px;overflow:hidden}
/* "select your world" kicker label — hides once a world is opened */
.kicker{position:absolute;top:84px;left:0;right:0;z-index:30;text-align:center;
  font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.42em;text-transform:uppercase;
  color:var(--fp-cream);opacity:.7;pointer-events:none;
  transition:opacity .4s;margin:0}
.stage.open ~ .kicker,.select.is-open .kicker{opacity:0}

/* three-column grid (JS animates column widths for hover/open effects) */
.stage{display:grid;grid-template-columns:1fr 1fr 1fr;height:100%;width:100%}
/* each world panel + its accent color (--c) */
.world{
  position:relative;min-width:0;cursor:pointer;overflow:hidden;
  border-right:1px solid rgba(0,0,0,.5);
  --c:var(--fp-lime);
}
.world:last-child{border-right:0}
.world[data-world="music"]{--c:var(--fp-lime)}
.world[data-world="games"]{--c:var(--in-violet);--c2:var(--in-pink)}
.world[data-world="film"]{--c:var(--fp-orange)}

/* Games panel — neon Intusic brand mark (the gloss exception; no desaturation) */
.world[data-world="games"] .world-bg,.world[data-world="film"] .world-bg{filter:none;transform:none}
.in-mark{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url('../images/intusic-logos/intusic-logo-transparent.png') no-repeat center 40%;
  background-size:min(180px,44%);
  filter:drop-shadow(0 0 46px rgba(252,43,236,.5)) drop-shadow(0 0 14px rgba(255,86,36,.4));
  opacity:.92}
@keyframes in-pulse{
  0%,100%{transform:scale(1);filter:drop-shadow(0 0 30px rgba(252,43,236,.4)) drop-shadow(0 0 10px rgba(255,86,36,.32))}
  50%{transform:scale(1.055);filter:drop-shadow(0 0 64px rgba(252,43,236,.75)) drop-shadow(0 0 24px rgba(255,86,36,.6))}}
/* the neon mark only pulses while the Games panel is hovered/focused or open —
   otherwise it sits still so it isn't competing for attention on the stage */
.stage:not(.open) .world[data-world="games"]:hover .in-mark,
.stage:not(.open) .world[data-world="games"].kbfocus .in-mark{opacity:1;animation:in-pulse 2.8s ease-in-out infinite}
.stage.open .world[data-world="games"].is-open .in-mark{background-position:78% 46%;background-size:min(360px,34%);opacity:1;
  animation:in-pulse 2.8s ease-in-out infinite}

/* Film panel — "coming soon"-style placeholder badge */
.film-ph{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}
.film-ph span{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fp-orange);opacity:.55;border:1px dashed rgba(255,97,54,.4);border-radius:999px;padding:8px 16px;
  background:rgba(255,97,54,.05)}
.stage.open .world[data-world="film"].is-open .film-ph{align-items:flex-start;justify-content:flex-end;padding:90px 40px}

/* Mascot cursor companion (home variant — glows in the hovered world's --mc color) */
.mascot{position:fixed;left:50%;top:50%;z-index:55;width:58px;height:58px;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;will-change:left,top}
.mascot.show{opacity:1}
.mascot img{width:100%;height:auto;display:block;transform-origin:50% 60%;
  animation:mascot-bob 3.2s ease-in-out infinite;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.55))}
@keyframes mascot-bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-7px) rotate(5deg)}}
.mascot.near img{filter:drop-shadow(0 0 18px var(--mc,var(--fp-lime))) drop-shadow(0 3px 6px rgba(0,0,0,.55))}
.mascot.press img{animation:none;transform:scale(.78) rotate(0deg)}
@media (hover:none),(pointer:coarse){.mascot{display:none}}
/* #endregion */

/* #region world panel background layers */
/* ─── world panel background layers ──────────────────────────────── */
.world-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:grayscale(.55) brightness(.4) contrast(1.05);transform:scale(1.08);
  transition:filter .6s ease,transform 8s ease;}
.world-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,12,.25) 0%,rgba(12,12,12,.55) 55%,rgba(12,12,12,.9) 100%);
  transition:background .5s ease;}
.world-tint{position:absolute;inset:0;background:var(--c);opacity:0;mix-blend-mode:soft-light;transition:opacity .5s}
/* #endregion */

/* #region world face (label) */
/* ─── world face (label) ─────────────────────────────────────────── */
/* face: always-visible label so the page is instantly understandable */
.world-face{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;padding:0 22px 12svh;text-align:center;
  transition:opacity .4s ease,transform .5s ease;}
.world-no{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--c);margin-bottom:14px}
.world-name{font-family:var(--stamp);font-size:clamp(30px,4.4vw,68px);line-height:.92;
  letter-spacing:.01em;text-transform:uppercase;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.world-tag{margin-top:14px;font-size:14px;color:var(--fp-cream);opacity:0;transform:translateY(10px);
  max-width:240px;min-height:3.1em;transition:opacity .4s ease,transform .5s ease;}
.world-enter{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fp-black);background:var(--c);padding:9px 16px;border-radius:999px;
  opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .5s ease .05s;font-weight:700}
/* #endregion */

/* #region hover / focus preview (closed state) */
/* ─── hover / focus preview (closed state) ───────────────────────── */
.stage:not(.open) .world:hover .world-bg,.stage:not(.open) .world.kbfocus .world-bg{
  filter:grayscale(0) brightness(.62) contrast(1.05);transform:scale(1)}
.stage:not(.open) .world:hover .world-tint,.stage:not(.open) .world.kbfocus .world-tint{opacity:.5}
.stage:not(.open) .world:hover .world-tag,.stage:not(.open) .world:hover .world-enter,
.stage:not(.open) .world.kbfocus .world-tag,.stage:not(.open) .world.kbfocus .world-enter{opacity:1;transform:none}
.stage:not(.open) .world:hover .world-name,.stage:not(.open) .world.kbfocus .world-name{transform:translateY(-4px)}
.stage:not(.open):hover .world:not(:hover) .world-bg{filter:grayscale(.8) brightness(.28)}
/* #endregion */

/* #region accent baseline at bottom of each panel */
/* ─── accent baseline at bottom of each panel ────────────────────── */
.world::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c);
  transform:scaleX(0);transform-origin:left;transition:transform .5s ease;z-index:6}
.stage:not(.open) .world:hover::after,.stage:not(.open) .world.kbfocus::after{transform:scaleX(1)}
/* #endregion */

/* #region OPEN state */
/* ─── OPEN state ─────────────────────────────────────────────────── */
/* the opened panel goes full-color; its two siblings collapse to a rail */
.stage.open .world{cursor:default}
.stage.open .world:not(.is-open){cursor:pointer}
.stage.open .world.is-open .world-bg{filter:grayscale(0) brightness(.5) contrast(1.05);transform:scale(1)}
.stage.open .world.is-open .world-tint{opacity:.35}
.stage.open .world.is-open .world-veil{
  background:linear-gradient(115deg,rgba(12,12,12,.92) 0%,rgba(12,12,12,.7) 42%,rgba(12,12,12,.25) 100%);}
.stage.open .world:not(.is-open) .world-face,.stage.open .world.is-open .world-face{opacity:0;pointer-events:none}

/* collapsed rail label — vertical text shown on the two non-open panels */
.world-rail{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .4s ease .15s}
.world-rail span{font-family:var(--stamp);font-size:20px;letter-spacing:.06em;text-transform:uppercase;
  writing-mode:vertical-rl;transform:rotate(180deg);color:var(--fp-cream);opacity:.85}
.world-rail::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.stage.open .world:not(.is-open) .world-rail{opacity:1}
.stage.open .world:not(.is-open):hover .world-bg{filter:grayscale(.3) brightness(.5)}
/* #endregion */

/* #region detail panel revealed when open */
/* ─── detail panel revealed when open ────────────────────────────── */
/* panel shell — slides/fades in over the opened world */
.world-panel{position:absolute;z-index:8;left:0;top:0;bottom:0;width:min(560px,52vw);
  display:flex;flex-direction:column;justify-content:center;gap:0;
  padding:0 clamp(28px,5vw,72px);opacity:0;transform:translateX(-24px);pointer-events:none;visibility:hidden;
  transition:opacity .5s ease .15s,transform .6s cubic-bezier(.16,1,.3,1) .15s,visibility .5s .15s}
.stage.open .world.is-open .world-panel{opacity:1;transform:none;pointer-events:auto;visibility:visible}
/* number, name, tagline, description copy */
.panel-no{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--c)}
.panel-name{font-family:var(--stamp);font-size:clamp(40px,5.5vw,84px);line-height:.9;
  text-transform:uppercase;margin:12px 0 4px}
.panel-tag{font-size:clamp(16px,1.5vw,21px);font-weight:500;color:var(--fp-cream)}
.panel-body{margin-top:18px;font-size:15px;color:var(--fp-cream);opacity:.8;max-width:42ch}
/* quick stats row */
.panel-stats{display:flex;gap:30px;margin-top:26px;flex-wrap:wrap}
.panel-stats .s b{display:block;font-family:var(--stamp);font-size:32px;line-height:1;color:var(--c)}
.panel-stats .s span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
/* CTA buttons (home-local variant — reads the per-world --c accent) */
.panel-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.btn{font-size:13px;font-weight:600;letter-spacing:.02em;padding:13px 22px;border-radius:999px;
  display:inline-flex;align-items:center;gap:8px;transition:transform .12s ease,background .2s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn-fill{background:var(--c);color:var(--fp-black)}
.btn-fill:hover{box-shadow:0 0 24px -4px var(--c);filter:brightness(1.06)}
.btn-ghost{border:1.5px solid var(--border-strong);color:var(--fp-cream)}
.btn-ghost:hover{border-color:var(--c);color:var(--c)}
/* not-yet-live CTA — looks like a ghost button but inert */
.btn.is-disabled{border:1.5px solid var(--border-strong);color:var(--fp-cream);
  opacity:.55;cursor:not-allowed;pointer-events:none}
.btn.is-disabled:active{transform:none}

/* back / select-again control — appears top-left once a world is open */
.backbar{position:absolute;z-index:9;top:84px;left:clamp(28px,5vw,72px);
  opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;
  transition:opacity .4s ease .2s,transform .4s ease .2s,visibility .4s .2s}
.select.is-open .backbar{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.backbar button{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fp-cream);display:flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1.5px solid var(--border-strong);border-radius:999px;padding:9px 16px;
  transition:background .18s ease,border-color .18s ease,color .18s ease}
.backbar button:hover{background:var(--fp-lime);border-color:var(--fp-lime);color:var(--fp-black)}
/* #endregion */

/* #region controller hint */
/* ─── controller hint ─────────────────────────────────────────────── */
.hint{position:absolute;bottom:22px;left:0;right:0;z-index:30;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fp-cream);opacity:.72;pointer-events:none;transition:opacity .4s}
.stage.open ~ .hint{opacity:0}
.hint b{color:var(--fp-lime)}
/* #endregion */

/* #region pointer glow companion */
/* ─── pointer glow companion ─────────────────────────────────────── */
.glow{position:absolute;z-index:4;width:420px;height:420px;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .4s ease;mix-blend-mode:screen;
  background:radial-gradient(circle,var(--gc,#d5e84c) 0%,transparent 65%)}
.stage:not(.open):hover .glow{opacity:.18}
/* stays lit once a world is open too — only a page navigation clears it */
.stage.open .glow{opacity:.18}
/* #endregion */

/* #region Below-the-fold quick recap */
/* ─── Below-the-fold quick recap (easy to understand layer) ──────── */
/* eyebrow, heading, intro copy */
.recap{padding:70px 30px 30px;max-width:1100px;margin:0 auto;text-align:center}
.recap .ek{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--fp-pink)}
.recap h2{font-family:var(--stamp);font-size:clamp(30px,4vw,52px);text-transform:uppercase;line-height:.95;margin-top:16px}
.recap p{max-width:580px;margin:18px auto 0;color:var(--fp-cream);opacity:.7;font-size:15px}
/* stat row below the copy */
.recap-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:48px;margin-top:48px;
  padding-top:42px;border-top:1px solid var(--border)}
.recap-stats .s b{display:block;font-family:var(--stamp);font-size:44px;line-height:1;color:var(--fp-lime)}
.recap-stats .s span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
/* closing tagline */
.tagline{padding:18px 30px 32px;text-align:center;font-family:var(--stamp);font-size:clamp(22px,3vw,38px);
  text-transform:uppercase;letter-spacing:.02em}
.tagline .off{color:var(--fp-orange)}
/* #endregion */

/* #region footer */
/* ─── footer ─────────────────────────────────────────────────────── */
/* The home page now uses the shared 3-column footer from site.css
   (copyright | nav | socials). No home-specific overrides. */
/* #endregion */