/* --- CORE STYLES --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background-color: #000; color: #fff;
    font-family: 'Montserrat', sans-serif;
    overflow: hidden; height: 100vh; width: 100vw;
}

/* --- PRELOADER (The Container) --- */
#exp-loader {
    position: fixed; inset: 0; z-index: 10000;
    background: #000; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    transform-origin: center center;
    /* The 'Implode' transition */
    transition: transform 1.5s cubic-bezier(0.7, 0, 0.3, 1), opacity 1.5s ease; 
}

/* The "Black Hole" Effect Class */
.loader-implode {
    transform: scale(0.001) rotate(180deg); /* Suck into middle */
    opacity: 0;
}

/* The Visualizer Canvas Background */
#loader-viz-canvas {
    position: absolute; inset: 0; z-index: 0;
    opacity: 0; 
    /* THE 30 SECOND FADE IN */
    transition: opacity 30s ease-in; 
    pointer-events: none;
}

/* Loader Content Wrapper */
.loader-ui-wrapper {
    position: relative; z-index: 10;
    display: flex; flex-direction: column; align-items: center;
}

.loader-logo { 
    width: 60px; margin-bottom: 30px; opacity: 0.8; 
    animation: pulseLogo 2s infinite ease-in-out;
}

.loader-text { 
    font-size: 0.7rem; letter-spacing: 4px; margin-bottom: 20px; 
    text-transform: uppercase; color: #4A90E2; 
    animation: pulseText 1.5s infinite ease-in-out;
}

.loader-bar-bg { 
    width: 250px; height: 2px; background: rgba(255,255,255,0.1); 
    overflow: hidden; position: relative;
}

.loader-bar-fill { 
    width: 0%; height: 100%; background: #4A90E2; 
    box-shadow: 0 0 10px #4A90E2; 
    transition: width 0.2s linear; 
}

.loader-spinner {
    margin-top: 25px; font-size: 1.2rem; color: #333;
}

@keyframes pulseText { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes pulseLogo { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; } }

/* --- MAIN SCENE TRANSITIONS --- */
#webgl-container { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    z-index: 2; pointer-events: none;
    opacity: 0; /* Start hidden for the fade-in */
    transition: opacity 2.5s ease-out; /* The Scene Fade In */
}

/* --- MOON GLOW (opening) — soft CSS halo tracked to the moon sprite --- */
#moon-glow {
    position: fixed; display: none; pointer-events: none;
    border-radius: 50%; z-index: 3;
    /* background + size + position set live by JS */
    transition: opacity 0.2s linear;
}

.stage-ui {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; 
    opacity: 0; /* Start hidden */
    transition: opacity 2.5s ease-out, transform 1.5s ease;
}

/* Classes to trigger visibility */
.scene-visible { opacity: 1 !important; }
.ui-visible { opacity: 1 !important; pointer-events: auto !important; }

/* --- BACKGROUND COLORS --- */
.bg-layer { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    z-index: 1; transition: opacity 2s ease; pointer-events: none; 
    opacity: 0; /* Managed by JS */
}
#bg-surface { background-color: #0f172a; opacity: 0; transition: opacity 2.5s ease; }
#bg-depths { background-color: #000; opacity: 0; } 

/* --- CONTROLS --- */
.controls-stack {
    position: absolute; bottom: 50px; left: 50px;
    display: flex; flex-direction: column; 
    align-items: flex-start; gap: 15px; 
    z-index: 100; pointer-events: auto;
}
.controls-row { display: flex; align-items: center; gap: 25px; }

/* --- UPDATED BUTTON STYLES --- */
.play-btn-round {
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.6); border: 2px solid; 
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    font-size: 1rem; flex-shrink: 0; 
    cursor: pointer; /* THE HAND CURSOR */
}

/* HOVER EFFECT FOR SMALL BUTTONS */
.play-btn-round:hover {
    transform: scale(1.15); /* Slight grow */
    background: rgba(255, 255, 255, 0.15); /* Brighter bg */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); /* Glow */
}

/* --- NAV ARROW BUTTONS (Descend / Ascend) --- */
.nav-arrow-btn {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    cursor: pointer; pointer-events: auto; z-index: 120;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-arrow-btn .nav-circle {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid; background: rgba(15, 23, 42, 0.55);
    font-size: 1.35rem; backdrop-filter: blur(4px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-arrow-btn .nav-circle i { animation: pulseArrow 2.2s infinite; }
.nav-arrow-btn .nav-label {
    font-size: 0.6rem; letter-spacing: 3px; text-transform: uppercase;
    opacity: 0.75; transition: opacity 0.3s;
}
.nav-arrow-btn:hover { transform: translateX(-50%) scale(1.08); }
.nav-arrow-btn:hover .nav-circle {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 25px currentColor;
}
.nav-arrow-btn:hover .nav-label { opacity: 1; }

@keyframes pulseArrow { 
    0%, 100% { transform: translateY(-2px); opacity: 0.65; } 
    50% { transform: translateY(3px); opacity: 1; } 
}
       
/* Individual Stages */
#stage-surface-ui { z-index: 60; }

/* OVERLAY BUTTON (Start) */
#play-overlay-btn { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 1.5rem; border: 2px solid #4A90E2; border-radius: 50%; 
    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; 
    background: rgba(15, 23, 42, 0.8); transition: opacity 0.5s ease, transform 0.3s ease;
    z-index: 200; pointer-events: auto;
    cursor: pointer; /* THE HAND CURSOR */
}

/* HOVER EFFECT FOR OVERLAY BUTTON */
#play-overlay-btn:hover {
    transform: translate(-50%, -50%) scale(1.1); /* Maintain center + grow */
    background: rgba(74, 144, 226, 0.2);
    box-shadow: 0 0 30px rgba(74, 144, 226, 0.4);
}

#opening-play-btn { border-color: #4A90E2; display: none; }
#surface-info { opacity: 0; transition: opacity 1s ease; }

/* Descend arrow (Opening -> Largo): starts hidden, revealed when audio begins */
#surface-arrow { bottom: 42px; opacity: 0; transition: opacity 1s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
#surface-arrow .nav-circle { border-color: #4A90E2; color: #4A90E2; }
#surface-arrow .nav-label { color: #4A90E2; }

#stage-depths-ui { z-index: 70; opacity: 0; transform: translateY(100%); pointer-events: none; }
#largo-play-btn { border-color: #ff4444; background: rgba(0, 0, 0, 0.6); }
.largo-color { color: #ff4444; }
/* Ascend arrow (Largo -> Opening) */
.ascend-arrow { top: 42px; }
.ascend-arrow .nav-circle { border-color: #ff4444; color: #ff4444; }
.ascend-arrow .nav-label { color: #ff4444; }

.exit-btn {
    position: absolute; top: 30px; right: 30px; z-index: 300;
    color: #fff; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
    border-bottom: 1px solid transparent; cursor: pointer; transition: 0.3s; pointer-events: auto;
}
.exit-btn:hover { border-bottom: 1px solid #fff; }

/* ================= AUDIO PLAYER BAR (dark theme) ================= */
#gramo-player{
  --bar-bg:#0d1830; --bar-accent:#4A90E2; --bar-text:#e8e2d4;
}

/* bottom audio bar */
#gramo-player .audiobar{
  position:fixed; left:0; right:0; bottom:0; height:72px;
  background:var(--bar-bg); border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; gap:18px; padding:0 24px;
  z-index:150; color:var(--bar-text);
  font-family:'Montserrat',sans-serif;
  transform:translateY(100%); transition:transform 1s cubic-bezier(.4,0,.2,1);
}
#gramo-player.gramo-visible .audiobar{ transform:translateY(0); }
#gramo-player .bar-play{
  flex:0 0 auto; height:46px; width:46px; border-radius:50%;
  border:none; cursor:pointer; padding:0;
  background:rgba(255,255,255,.06); color:var(--bar-accent);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, background .2s ease;
}
#gramo-player .bar-play:hover{ background:rgba(255,255,255,.12); transform:scale(1.05); }
#gramo-player .wave-svg{ width:46px; height:46px; display:block; overflow:visible; }
#gramo-player .wave-path{ stroke:currentColor; stroke-width:2.4; stroke-linecap:round; fill:none; }
#gramo-player .track-meta{ flex:0 0 auto; min-width:140px; }
#gramo-player .track-title{ font-weight:600; font-size:14px; letter-spacing:.3px; }
#gramo-player .track-sub{ font-size:11px; opacity:.5; letter-spacing:.5px; text-transform:uppercase; }
#gramo-player .seek-wrap{ flex:1 1 auto; display:flex; align-items:center; gap:12px; }
#gramo-player .time{ font-size:12px; opacity:.65; font-variant-numeric:tabular-nums; min-width:42px; }
#gramo-player .time.total{ text-align:right; }
#gramo-player .seek{
  -webkit-appearance:none; appearance:none; flex:1 1 auto; height:5px; border-radius:3px;
  background:linear-gradient(to right, var(--bar-accent) 0%, rgba(255,255,255,.15) 0%);
  outline:none; cursor:pointer;
}
#gramo-player .seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:13px; height:13px; border-radius:50%;
  background:#fff; cursor:pointer; box-shadow:0 0 4px rgba(0,0,0,.4);
}
#gramo-player .seek::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:#fff; border:none; cursor:pointer;
}
#gramo-player .vol-wrap{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
#gramo-player .vol-ico{ opacity:.6; font-size:13px; }
#gramo-player .barvol{
  -webkit-appearance:none; appearance:none; width:90px; height:5px; border-radius:3px;
  background:rgba(255,255,255,.18); outline:none; cursor:pointer;
}
#gramo-player .barvol::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:12px; height:12px; border-radius:50%;
  background:var(--bar-accent); cursor:pointer;
}
#gramo-player .barvol::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; background:var(--bar-accent); border:none; cursor:pointer;
}

/* --- integration overrides --- */
/* gramophone replaces the small round play buttons + inline section title */
.controls-stack{ display:none !important; }
/* lift the descend arrow above the 72px bar */
#surface-arrow{ bottom:96px !important; }

/* studio credit — bottom-left, clear of the audio bar */
#exp-credit{
  position:fixed; left:24px; bottom:88px; z-index:140;
  font-family:'Montserrat',sans-serif;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.45); pointer-events:none;
}

/* ================= MOBILE OPTIMISATION ================= */
@media (max-width: 820px), (pointer: coarse) {
  /* compact the bar: wave toggle + seek + volume */
  #gramo-player .audiobar{ gap:12px; padding:0 14px; height:64px; }
  #gramo-player .track-meta{ min-width:0; }
  #gramo-player .track-title{ font-size:12px; }
  #gramo-player .track-sub{ display:none; }
  #gramo-player .time{ min-width:34px; font-size:11px; }

  /* let the seek bar shrink so the volume button isn't pushed off-screen */
  #gramo-player .seek-wrap{ min-width:0; }
  #gramo-player .seek{ min-width:0; }

  /* volume → tappable corner button that pops a vertical slider */
  #gramo-player .vol-wrap{ position:relative; flex:0 0 auto; gap:0; }
  #gramo-player .vol-ico{
    display:flex !important; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.06); color:var(--bar-accent);
    font-size:15px; opacity:1; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  #gramo-player .vol-wrap.open .vol-ico{ background:rgba(255,255,255,.14); }
  #gramo-player .barvol{
    position:absolute; left:50%; bottom:110px;
    width:120px; height:6px;
    transform:translateX(-50%) rotate(-90deg); transform-origin:center;
    background:rgba(255,255,255,.25); border-radius:6px;
    box-shadow:0 0 0 11px rgba(13,24,48,.96), 0 10px 28px rgba(0,0,0,.55);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease;
  }
  #gramo-player .vol-wrap.open .barvol{ opacity:1; visibility:visible; pointer-events:auto; }

  /* keep the descend arrow clear of the bar */
  #surface-arrow{ bottom:84px !important; }

  /* studio credit — bottom-left, clear of bar / arrow / volume */
  #exp-credit{ left:14px; bottom:76px; font-size:9px; letter-spacing:1.5px; }
}

/* ================= MOBILE DRAG INSTRUCTION ================= */
.drag-hint {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 400; color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase;
    text-align: center; pointer-events: none; opacity: 0;
    display: none; /* Hidden by default on desktop */
}

.drag-hint i {
    font-size: 1.8rem; margin-bottom: 15px; color: #4A90E2;
    animation: swipeHand 2s infinite ease-in-out;
}

@keyframes swipeHand {
    0%, 100% { transform: translateX(-15px) rotate(-10deg); }
    50% { transform: translateX(15px) rotate(10deg); }
}

@media (max-width: 820px), (pointer: coarse) {
    .drag-hint.show-hint {
        display: block;
        /* Fades in, stays for a moment, then fades out completely */
        animation: hintFadeInOut 4.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
}

@keyframes hintFadeInOut {
    0% { opacity: 0; transform: translate(-50%, -40%); }
    15% { opacity: 1; transform: translate(-50%, -50%); }
    80% { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -50%); }
}