/* ==========================================================================
   ORCHESTRA AI — Studio Room Tour
   absaar.dev · cyber-organic dark theme
   ========================================================================== */

:root{
  --ink:        #07080b;
  --ink-2:      #0d1015;
  --line:       rgba(255,255,255,.10);
  --line-2:     rgba(255,255,255,.18);
  --text:       #e8ecf2;
  --text-dim:   #8b95a6;
  --cyan:       #00e5ff;
  --magenta:    #ff3db1;
  --amber:      #ffb469;
  --glass:      rgba(14,17,22,.72);
  --blur:       saturate(150%) blur(16px);
  --ease:       cubic-bezier(.22,.61,.36,1);
  --font:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                Helvetica, Arial, sans-serif;
  --mono:       ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0; height:100%;
  background:var(--ink); color:var(--text);
  font-family:var(--font);
  overscroll-behavior:none;
}

body{ overflow:hidden; }

/* ==========================================================================
   LOADING SCREEN
   ========================================================================== */

.loader{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 40%, #12161d 0%, #07080b 62%, #050608 100%);
  transition:opacity .9s var(--ease), visibility .9s var(--ease);
}
.loader.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }

.loader__inner{ width:min(86vw,340px); text-align:center; }

/* concentric rings + pulsing core */
.loader__mark{
  position:relative; width:92px; height:92px; margin:0 auto 30px;
}
.loader__ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(0,229,255,.32);
  border-top-color:var(--cyan);
  animation:spin 2.4s linear infinite;
}
.loader__ring--2{
  inset:16px;
  border-color:rgba(255,61,177,.24);
  border-bottom-color:var(--magenta);
  animation:spin 1.6s linear infinite reverse;
}
.loader__core{
  position:absolute; left:50%; top:50%; width:12px; height:12px;
  margin:-6px 0 0 -6px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 22px 5px rgba(0,229,255,.55);
  animation:pulse 1.9s var(--ease) infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse{
  0%,100%{ transform:scale(1);   opacity:1;   }
  50%    { transform:scale(1.5); opacity:.55; }
}

.loader__brand{
  margin:0; font-size:19px; font-weight:800;
  letter-spacing:.34em; text-indent:.34em;
}
.loader__brand span{
  color:var(--cyan);
  text-shadow:0 0 18px rgba(0,229,255,.5);
}
.loader__sub{
  margin:9px 0 26px; font-size:10.5px; letter-spacing:.30em;
  text-indent:.30em; text-transform:uppercase; color:var(--text-dim);
}

.loader__track{
  height:2px; border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.09);
}
.loader__bar{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  box-shadow:0 0 14px rgba(0,229,255,.6);
  transition:width .35s var(--ease);
}
.loader__pct{
  margin:14px 0 0; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.10em; color:var(--text-dim);
  display:flex; justify-content:center; gap:12px;
}
.loader__task{ opacity:.62; }
.loader__by{
  position:absolute; bottom:24px; left:0; right:0; text-align:center;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.26);
}

/* ==========================================================================
   FATAL ERROR
   ========================================================================== */

.fatal{
  position:fixed; inset:0; z-index:120;
  display:grid; place-items:center; padding:28px;
  background:rgba(5,6,8,.96);
}
.fatal[hidden]{ display:none; }
.fatal__box{ max-width:460px; text-align:center; }
.fatal__box h2{ margin:0 0 12px; font-size:17px; font-weight:700; letter-spacing:.01em; }
.fatal__box p{ margin:0 0 10px; font-size:13px; line-height:1.65; color:var(--text-dim); }
.fatal__hint{ font-size:12px !important; opacity:.7; }

/* ==========================================================================
   STAGE
   ========================================================================== */

.stage{ position:fixed; inset:0; }
#scene{ display:block; width:100%; height:100%; touch-action:none; outline:none; }

/* ---------- brand plate ---------- */
.brand{
  position:absolute; top:22px; left:24px; z-index:12;
  display:flex; align-items:center; gap:12px;
  font-size:11px; letter-spacing:.20em; text-transform:uppercase;
  pointer-events:none; user-select:none;
}
.brand__dot{
  width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 12px 2px rgba(0,229,255,.75);
  animation:pulse 2.6s var(--ease) infinite;
}
.brand__name{ font-weight:800; letter-spacing:.24em; }
.brand__name b{ color:var(--cyan); font-weight:800; }
.brand__rule{ width:30px; height:1px; background:var(--line-2); }
.brand__meta{ color:var(--text-dim); font-size:10px; letter-spacing:.18em; }

/* ---------- hotspot tooltip ---------- */
.tip{
  position:absolute; z-index:14; width:min(78vw,268px);
  padding:16px 18px 17px;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--line-2); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.62), 0 0 0 1px rgba(0,229,255,.07) inset;
  transform:translate(-50%,-118%) scale(.96);
  opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:auto;
}
.tip.is-open{ opacity:1; transform:translate(-50%,-118%) scale(1); }
.tip[hidden]{ display:none; }
/* little arrow */
.tip::after{
  content:""; position:absolute; left:50%; bottom:-7px; width:12px; height:12px;
  margin-left:-6px; transform:rotate(45deg);
  background:var(--glass);
  border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
}
.tip__kicker{
  display:inline-block; margin-bottom:7px;
  font-family:var(--mono); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cyan);
}
.tip__title{ margin:0 0 7px; font-size:14.5px; font-weight:700; letter-spacing:.005em; }
.tip__body{ margin:0; font-size:12px; line-height:1.62; color:var(--text-dim); }
.tip__close{
  position:absolute; top:8px; right:10px;
  width:24px; height:24px; border:0; border-radius:50%;
  background:transparent; color:var(--text-dim);
  font-size:17px; line-height:1; cursor:pointer;
}
.tip__close:hover{ color:var(--text); background:rgba(255,255,255,.07); }

/* ---------- dock ---------- */
.dock{
  position:absolute; z-index:12; left:50%; bottom:26px;
  transform:translateX(-50%);
  display:flex; gap:6px; padding:6px;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.dock__btn{
  min-height:40px; padding:0 15px;
  font:600 11px/1 var(--font); letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-dim); background:transparent;
  border:1px solid transparent; border-radius:10px; cursor:pointer;
  transition:color .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
  white-space:nowrap;
}
.dock__btn:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.dock__btn.is-active{
  color:var(--ink); background:var(--cyan); border-color:var(--cyan);
  box-shadow:0 0 20px rgba(0,229,255,.35);
}
.dock__btn--toggle.is-active{
  color:var(--ink); background:var(--magenta); border-color:var(--magenta);
  box-shadow:0 0 20px rgba(255,61,177,.35);
}

/* ---------- hint ---------- */
.hint{
  position:absolute; z-index:11; left:0; right:0; bottom:82px;
  margin:0; text-align:center;
  font-size:10.5px; letter-spacing:.14em; color:rgba(255,255,255,.34);
  pointer-events:none;
  transition:opacity .6s var(--ease);
}
.hint.is-hidden{ opacity:0; }

/* ---------- cursor affordance ---------- */
.stage.is-pointing #scene{ cursor:pointer; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:680px){
  .brand{ top:16px; left:16px; gap:9px; }
  .brand__rule, .brand__meta{ display:none; }
  .dock{ left:12px; right:12px; bottom:14px; transform:none;
         justify-content:space-between; border-radius:16px; }
  .dock__btn{ flex:1 1 0; min-width:0; padding:0 6px; font-size:9.5px; letter-spacing:.05em; }
  .hint{ bottom:74px; font-size:9.5px; padding:0 18px; }
  .tip{ width:min(86vw,260px); }
}

@media (prefers-reduced-motion:reduce){
  .loader__ring, .loader__core, .brand__dot{ animation:none; }
  *{ transition-duration:.01ms !important; }
}