/* ============================================================
   Fallowing Space — display.css  (Tab 2 / client device)
   Full-bleed, completely clean. No controls, no branding while a
   session is running. Fills ANY screen size without layout change,
   which is what keeps it display-agnostic (tablet half today; cast
   to a monitor or a second device later, unchanged).
   ============================================================ */

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
}

.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;          /* avoid mobile browser-chrome jump */
}

/* Each visual lives in its own full-bleed layer; we cross-fade. */
.layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.layer.on { opacity: 1; }

/* --- Video mode (placeholder until the video phase) --- */
.video-layer {
  background: radial-gradient(120% 120% at 50% 30%, #463d35, #1c1916);
  color: rgba(255, 253, 249, 0.35);
}
.video-layer .hint {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: clamp(0.8rem, 2.5vw, 1.1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Bilateral mode (placeholder ball until the engine phase) --- */
.bilateral-layer { background: #161310; }
.ball {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe0cd, #bf5a2e 70%);
  box-shadow: 0 0 60px rgba(191, 90, 46, 0.55);
  will-change: transform;
}

/* Idle screen shown before the controller connects. */
.idle {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1c1916;
  color: rgba(255, 253, 249, 0.4);
  font-family: "Hanken Grotesk", sans-serif;
  font-size: clamp(0.85rem, 2.6vw, 1.15rem);
  letter-spacing: 0.06em;
  transition: opacity 0.3s ease;
}
.idle.hidden { opacity: 0; pointer-events: none; }

/* ---------- Live therapist video (full-bleed) ---------- */
.full-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.full-video.on { opacity: 1; }