/* shared.css — theme tokens, fonts, reset, and the scene scaffolding shared by
   main.html and join.html. Aesthetic: a dark room lit by warm candle-light. */

/* Self-hosted Open Sans (never the Google CDN — captive portals break it). */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/open-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/open-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/open-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/open-sans-800.woff2') format('woff2');
}

:root {
  --ink: #0a0a12;        /* near-black room */
  --ink-2: #11111d;
  --paper: #f6f4ee;      /* warm off-white */
  --candle: #ffd166;     /* warm light accent — the candle */
  --candle-deep: #f4a259;
  --ember: #e0533d;
  --cool: #2f6fed;
  --muted: rgba(246, 244, 238, 0.6);
  --line: rgba(246, 244, 238, 0.12);
  --font: 'Open Sans', -apple-system, system-ui, 'Segoe UI', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

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

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

/* The single full-bleed stage every view renders into. */
.stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: background-color 600ms ease;
  background: var(--ink);
}

.scene {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6vmin;
  gap: 3vmin;
}

/* Universal full-bleed background image/video layer (behind scene content). */
.bg-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.bg-media img,
.bg-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Huge display text that fills the field in either orientation. */
.display {
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-size: clamp(3rem, 18vmin, 22rem);
  word-break: break-word;
  max-width: 94%;
}
.display-md {
  font-weight: 700;
  font-size: clamp(2rem, 9vmin, 7rem);
  line-height: 1.02;
}
.kicker {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(0.7rem, 2.2vmin, 1.1rem);
  color: var(--candle);
  opacity: 0.9;
}
.subtle {
  color: var(--muted);
  font-size: clamp(0.9rem, 3.4vmin, 1.6rem);
  font-weight: 400;
}

/* Soft entrance used across scenes (staggered via inline animation-delay). */
@keyframes ok-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.rise { animation: ok-rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* A slow breathing pulse for standby — purely local, no sync needed. */
@keyframes ok-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.985); }
  50% { opacity: 1; transform: scale(1.015); }
}
.breathe { animation: ok-breathe 4.5s ease-in-out infinite; }

/* Candle flame mark (CSS, used on standby + as a watermark). */
.flame {
  width: clamp(40px, 9vmin, 110px);
  aspect-ratio: 1 / 1.5;
  background: radial-gradient(60% 60% at 50% 70%, var(--candle) 0%, var(--candle-deep) 45%, rgba(244, 162, 89, 0) 72%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: drop-shadow(0 0 22px rgba(255, 209, 102, 0.55));
  animation: ok-flicker 2.6s ease-in-out infinite;
}
@keyframes ok-flicker {
  0%, 100% { transform: scale(1) translateY(0) rotate(-1deg); opacity: 0.92; }
  50% { transform: scale(1.06) translateY(-2px) rotate(1deg); opacity: 1; }
}

/* --- particles ------------------------------------------------------------- */
.ok-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.ok-particle {
  position: absolute;
  top: -8vh;
  will-change: transform;
  animation-name: ok-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.ok-particle-confetti { border-radius: 1px; }
@keyframes ok-fall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translateY(112vh) rotate(540deg); opacity: 0.9; }
}

/* --- mosaic ---------------------------------------------------------------- */
.mosaic-tile {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.mosaic-tile svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes ok-ignite {
  from { opacity: 0; transform: scale(1.06); filter: brightness(0.4); }
  to { opacity: 1; transform: scale(1); filter: brightness(1); }
}
.ignite { animation: ok-ignite 900ms cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Orientation nudge for the mosaic (requires portrait). */
.rotate-nudge {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3vmin;
  background: var(--ink);
  z-index: 50;
  padding: 8vmin;
}
.rotate-nudge .phone-rot {
  font-size: 18vmin;
  animation: ok-rotate-hint 2.2s ease-in-out infinite;
}
@keyframes ok-rotate-hint {
  0%, 100% { transform: rotate(90deg); }
  50% { transform: rotate(0deg); }
}

/* A connection dot used by room views. */
.conn-dot {
  position: fixed;
  top: 12px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #555;
  z-index: 40;
  transition: background-color 300ms ease;
}
.conn-dot.on { background: #3ad17a; }
.conn-dot.off { background: var(--ember); }

.hidden { display: none !important; }