/* flythrough.css: the Interior's own sheet. Moved from the inline <style> in flythrough.html
   (first block) and the live rules of the former css/interior-chrome.css (last block);
   order preserved. Loads after chrome.css, as interior-chrome did. */

:root {
    --black: #0A0A0A; --white: #FFFFFF; --cream: #F5F2EB; --grey: #9A9A9A;
    --green: #00F5A0; --gold: #B8956E;
    --mono: 'Space Mono', monospace; --grot: 'Space Grotesk', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--grot); background: var(--black); color: var(--cream); overflow-x: hidden; }
::selection { background: var(--green); color: var(--black); }
a { color: var(--green); text-decoration: none; }

/* the flight is the page: tall body, fixed stage */
#flightspace { height: 1100vh; }
#stage { position: fixed; inset: 0; z-index: 1; }
#stage canvas { display: block; }

/* vignette + grain above the 3d */
.vignette { position: fixed; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 52%, rgba(5,5,5,0.75) 100%); }
.grain { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; }

.fi-hint {
    position: fixed; bottom: 2.2rem; right: 1.5rem; z-index: 50;
    font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.25em; color: rgba(0,245,160,0.7);
    text-transform: uppercase; pointer-events: none; animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

/* title gate */
.gate {
    position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    background: rgba(10,10,10,0.45); transition: opacity 900ms, visibility 900ms; padding: 0 6vw;
    backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.gate.gone { opacity: 0; visibility: hidden; }
.gate h1 { margin-top: 1rem; font-size: clamp(2.6rem, 8vw, 6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.0; color: var(--white); }
.gate h1 em { font-style: normal; color: var(--green); }
.gate p { margin-top: 1.4rem; color: var(--grey); max-width: 44ch; }
.gate p strong { color: var(--cream); font-weight: 500; }

/* fallback note */
.nofly {
    position: fixed; inset: 0; z-index: 70; display: none; align-items: center; justify-content: center;
    text-align: center; padding: 0 8vw; font-family: var(--mono); font-size: 0.7rem;
    letter-spacing: 0.2em; color: var(--grey); text-transform: uppercase; line-height: 2.4;
}
body.failed .nofly { display: flex; }
body.failed .gate, body.failed .fi-hint { display: none; }

/* the story layer: the journey as a legitimate telling */
.story { position: fixed; left: clamp(1.2rem, 5vw, 5rem); top: 50%; transform: translateY(-50%); z-index: 45; width: min(40ch, 38vw); pointer-events: none; }
.s-card {
    position: absolute; left: 0; top: 0; transform: translateY(-50%); opacity: 0; transition: opacity 600ms ease;
    padding: 1.6rem 1.7rem 1.5rem; border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.015));
    border: 1px solid rgba(255,255,255,0.14); border-top-color: rgba(255,255,255,0.3);
    box-shadow: 0 22px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    backdrop-filter: blur(16px) saturate(135%); -webkit-backdrop-filter: blur(16px) saturate(135%);
}
.s-card .sc-kick { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.3em; color: var(--gold); text-transform: uppercase; }
.s-card h2 { margin-top: 0.7rem; font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--white); text-shadow: 0 2px 26px rgba(5,5,5,0.95); }
.s-card p { margin-top: 0.9rem; color: rgba(245,242,235,0.78); font-size: 0.98rem; line-height: 1.7; text-shadow: 0 2px 20px rgba(5,5,5,0.95); }
.s-card p strong { color: var(--cream); font-weight: 500; }
.s-card .sc-rule { width: 3rem; height: 2px; background: var(--gold); margin-top: 1.1rem; }
@media (max-width: 760px) {
    .story { left: 1.2rem; right: 1.2rem; width: auto; top: auto; bottom: 6.5rem; transform: none; }
    .s-card { transform: none; bottom: 0; top: auto; }
    .s-card h2 { font-size: 1.15rem; }
    .s-card p { font-size: 0.88rem; }
}
/* finale: full-bleed film, no chrome */
.finale { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 80; opacity: 0; pointer-events: none; background: #000; }
body.finale-on .fi-hint, body.finale-on .vignette { opacity: 0; pointer-events: none; transition: opacity 500ms; }

/* menu (house standard) */
.menu { position: fixed; inset: 0; z-index: 200; background: rgba(10,10,10,0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: none; flex-direction: column; padding: 1.2rem 1.5rem 3rem; overflow-y: auto; }
.menu.open { display: flex; }
.menu .m-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.25em; color: #B8956E; text-transform: uppercase; padding-bottom: 1rem; border-bottom: 1px solid rgba(245,242,235,0.12); }
.menu .m-close { background: none; border: 1px solid rgba(245,242,235,0.25); color: #F5F2EB; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; padding: 0.35rem 0.9rem; cursor: pointer; }
.menu .m-close:hover { border-color: #00F5A0; color: #00F5A0; }
.menu nav { margin: 1.6rem auto; max-width: 900px; width: 100%; align-self: center; }
.menu nav a { display: grid; grid-template-columns: 4rem 1fr auto; gap: 1.5rem; align-items: baseline; padding: 1rem 0.5rem; border-bottom: 1px dashed rgba(245,242,235,0.12); transition: background 250ms; color: inherit; }
.menu nav a:hover { background: rgba(0,245,160,0.05); }
.menu .m-num { font-family: var(--mono); font-size: 0.7rem; color: #B8956E; letter-spacing: 0.2em; }
.menu .m-name { font-family: var(--grot); font-size: clamp(1.2rem, 2.4vw, 1.8rem); font-weight: 700; color: #fff; letter-spacing: -0.01em; line-height: 1.1; }
.menu .m-name small { display: block; font-size: 0.85rem; font-weight: 400; color: #9A9A9A; letter-spacing: 0; margin-top: 0.2rem; }
.menu .m-status { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.22em; color: #9A9A9A; text-transform: uppercase; }
.menu nav a.active .m-name, .menu nav a.active .m-status { color: #00F5A0; }
@media (max-width: 700px) { .menu nav a { grid-template-columns: 3rem 1fr; } .menu .m-status { display: none; } }
/* HUD mobile trim */
@media (max-width: 600px) {
  .fi-hint { left: 1rem; right: 1rem; text-align: center; }
}
/* mobile hamburger + menu polish */
@media (max-width: 600px) {
  .menu { padding: 1rem 1.1rem 2rem; }
  .menu .m-head { font-size: 0.54rem; letter-spacing: 0.18em; }
  .menu .m-close { font-size: 0; width: 42px; height: 34px; padding: 0; position: relative; }
  .menu .m-close::before { content: "\2715"; font-size: 1.05rem; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .menu nav { margin: 0.6rem auto; }
  .menu nav a { padding: 1.2rem 0.3rem; align-items: center; }
  .menu .m-name { font-size: 1.55rem; line-height: 1.05; }
  .menu .m-name small { font-size: 0.82rem; margin-top: 0.3rem; color: #9A9A9A; }
}
#mliquidCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
@media (pointer: coarse) {
    #flightspace, #stage, .vignette, .gate, .fi-hint, .finale { display: none !important; }
    body { overflow-y: auto; }
}
/* grouped menu (restructure v3) */
.menu nav .m-group{display:block;grid-template-columns:none;padding:1.7rem 0.5rem 0.5rem;margin-top:0.4rem;border-bottom:1px solid rgba(245,242,235,0.18);font-family:var(--mono);font-size:0.6rem;letter-spacing:0.28em;text-transform:uppercase;color:#B8956E;background:none;}
.menu nav a.m-group:hover{color:#00F5A0;background:none;}
.menu nav a.m-group.active{color:#00F5A0;}
.menu nav .m-group:first-child{margin-top:0;}

/* The Interior runs its own full-screen 3D stage, so it takes the site header
   without main.css (whose reset and body rules would fight the stage). These
   rules bridge the gap and keep the flight controls legible underneath. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:120}
.mobile-menu{z-index:119}