/* ═══════════ THE BOLDGROW TOWER — the ride ═══════════ */
:root {
  --ink: #08080a;
  --ink-2: #0d0d10;
  --gold: #d8b26a;
  --gold-bright: #f0d59a;
  --gold-soft: rgba(216, 178, 106, 0.3);
  --bone: #ece7dc;
  --bone-dim: #8f8a7e;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Space Grotesk', 'Helvetica Neue', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--bone); font-family: var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: var(--gold); color: var(--ink); }
.eyebrow { font-size: .7rem; letter-spacing: .45em; text-transform: uppercase; color: var(--gold); }

/* ═══ FIXED CABIN CHROME ═══ */
.cabin-chrome { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .6s; }
.cabin-chrome.on { opacity: 1; }
/* gold interior frame — you're inside the cabin */
.frame-top, .frame-bottom { position: absolute; left: 0; right: 0; height: 4.5vh; background: linear-gradient(180deg, #1a160f, #0b0a07); }
.frame-top { top: 0; box-shadow: inset 0 -1px 0 var(--gold-soft), 0 2px 20px rgba(0,0,0,.6); border-bottom: 1px solid rgba(216,178,106,.25); }
.frame-bottom { bottom: 0; box-shadow: inset 0 1px 0 var(--gold-soft), 0 -2px 20px rgba(0,0,0,.6); border-top: 1px solid rgba(216,178,106,.25); }
.frame-left, .frame-right { position: absolute; top: 0; bottom: 0; width: 3vw; background: linear-gradient(90deg, #14110b, transparent); }
.frame-left { left: 0; border-left: 2px solid rgba(216,178,106,.18); }
.frame-right { right: 0; background: linear-gradient(270deg, #14110b, transparent); border-right: 2px solid rgba(216,178,106,.18); }

/* HUD */
.hud { position: absolute; top: 6vh; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.hud-panel { display: flex; flex-direction: column; align-items: center; padding: .7rem 2rem; background: rgba(8,8,10,.7); backdrop-filter: blur(8px); border: 1px solid var(--gold-soft); border-radius: 4px; box-shadow: 0 0 30px rgba(0,0,0,.5), inset 0 0 20px rgba(216,178,106,.05); }
.hud-label { font-size: .58rem; letter-spacing: .4em; text-transform: uppercase; color: var(--bone-dim); }
.hud-floor { font-family: var(--sans); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--gold-bright); text-shadow: 0 0 18px rgba(216,178,106,.5); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.hud-dir { font-size: .56rem; letter-spacing: .3em; color: var(--gold); margin-top: .2rem; transition: opacity .3s; }
.hud-dir.arrived { color: var(--gold-bright); }
.hud-cable { width: 180px; height: 2px; background: rgba(236,231,220,.12); position: relative; border-radius: 2px; overflow: hidden; }
.hud-cable-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.hud-stops { display: flex; gap: 1.6rem; }
.hud-stop { font-size: .6rem; letter-spacing: .1em; color: rgba(236,231,220,.3); font-variant-numeric: tabular-nums; transition: color .3s, transform .3s; }
.hud-stop.on { color: var(--gold-bright); transform: scale(1.25); }
.hud-stop.passed { color: var(--gold-soft); }
.hum { position: absolute; bottom: 6vh; left: 50%; transform: translateX(-50%); font-size: .55rem; letter-spacing: .5em; text-transform: uppercase; color: var(--bone-dim); opacity: .5; animation: hum 3s ease-in-out infinite; }
@keyframes hum { 50% { opacity: .15; } }

/* ═══ ARRIVAL ═══ */
.arrival { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: flex-end; }
.arrival-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arrival-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,.4) 0%, transparent 30%, rgba(8,8,10,.5) 70%, var(--ink) 100%); }
.arrival-copy { position: relative; z-index: 2; padding: 0 8vw 12vh; }
.arrival-title { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 8vw, 7rem); line-height: .98; letter-spacing: .01em; margin: 1.5rem 0; }
.arrival-sub { font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.6; color: var(--bone-dim); }
.arrival-scroll { margin-top: 2.5rem; display: flex; align-items: center; gap: 1rem; font-size: .68rem; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); }
.arrival-scroll i { width: 40px; height: 1px; background: var(--gold-soft); position: relative; overflow: hidden; }
.arrival-scroll i::after { content: ''; position: absolute; left: -40%; top: 0; width: 40%; height: 100%; background: var(--gold); animation: slide 2s ease-in-out infinite; }
@keyframes slide { to { left: 110%; } }

/* ═══ SHAFT / CABIN ═══ */
.shaft { position: relative; height: 620vh; background: #000; }
.cabin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.descent-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.descent-tint { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(8,8,10,.7) 100%); pointer-events: none; }

/* doorway sits in the middle of the cabin */
.doorway { position: absolute; inset: 8vh 6vw; z-index: 5; overflow: hidden; border-radius: 6px; }

/* floor content revealed behind the doors */
.floor-stage { position: absolute; inset: 0; }
.floor { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.floor.active { opacity: 1; visibility: visible; }
.floor-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.floor-card { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 3vw 3rem; background: linear-gradient(0deg, rgba(8,8,10,.92) 10%, transparent 100%); }
.floor-tag { font-size: .66rem; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); }
.floor-card h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1; margin: .5rem 0 .8rem; }
.floor-card p { font-size: clamp(.9rem, 1.3vw, 1.05rem); line-height: 1.6; color: var(--bone-dim); max-width: 36rem; }
.floor-link { display: inline-block; margin-top: 1.4rem; font-family: var(--sans); font-weight: 600; font-size: .8rem; letter-spacing: .1em; color: var(--bone); border-bottom: 1px solid var(--gold); padding-bottom: .3rem; text-decoration: none; transition: color .3s; }
.floor-link:hover { color: var(--gold-bright); }

/* elevator doors — two brushed-gold panels */
.door { position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 8; background:
    linear-gradient(90deg, #16130c 0%, #221c10 30%, #2c2413 50%, #221c10 70%, #16130c 100%);
  box-shadow: inset 0 0 60px rgba(0,0,0,.6);
  will-change: transform;
}
.door::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(216,178,106,.045) 18px 19px); }
.door-left { left: 0; border-right: 1px solid rgba(216,178,106,.35); }
.door-right { right: 0; border-left: 1px solid rgba(216,178,106,.35); }
.door-seam { position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, transparent, rgba(216,178,106,.5), transparent); }
.door-left .door-seam { right: 0; }
.door-right .door-seam { left: 0; }

/* ═══ GROUND FLOOR ═══ */
.ground { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12vh 8vw; background: radial-gradient(ellipse at center, var(--ink-2), var(--ink)); }
.ground::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(80vw, 700px); height: 340px; background: radial-gradient(ellipse at center, rgba(216,178,106,.08), transparent 70%); pointer-events: none; }
.ground-inner { position: relative; max-width: 44rem; }
.ground-title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: 1; margin: 1.5rem 0; }
.ground-sub { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.7; color: var(--bone-dim); max-width: 34rem; margin: 0 auto; }
.ground-actions { margin-top: 3rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn { font-family: var(--sans); font-weight: 600; font-size: .85rem; letter-spacing: .05em; text-decoration: none; padding: 1.05rem 2.2rem; border-radius: 3px; transition: all .3s; }
.btn-gold { background: var(--gold); color: var(--ink); box-shadow: 0 10px 40px rgba(216,178,106,.3); }
.btn-gold:hover { background: var(--gold-bright); transform: translateY(-2px); }
.btn-ghost { color: var(--bone); border: 1px solid var(--gold-soft); }
.btn-ghost:hover { border-color: var(--gold); }
.ground-sign { margin-top: 3rem; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--bone-dim); letter-spacing: .04em; }

/* ═══ MOBILE ═══ */
@media (max-width: 820px) {
  .frame-left, .frame-right { width: 2vw; }
  .doorway { inset: 7vh 3vw; }
  .hud-panel { padding: .5rem 1.4rem; }
  .hud-floor { font-size: 2rem; }
  .arrival-copy { padding: 0 6vw 14vh; }
  .floor-card { padding: 2rem 5vw; }
}
@media (prefers-reduced-motion: reduce) { .arrival-scroll i::after, .hum { animation: none; } }