/* OTVStream player shell — VIB3 brand */

@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --vib3-orange: #FF470E;
  --vib3-orange-light: #FFEEE8;
  --vib3-black: #1B1819;
  --vib3-black-mid: #231F20;
  --vib3-black-light: #2E2A2B;
  --vib3-stone: #A99C96;
  --vib3-stone-lightest: #F2EEEC;
  --vib3-stone-light: #D6CDC9;
  --vib3-stone-dark: #8F837D;
  --vib3-white: #FFFFFF;
  --font: 'Outfit', system-ui, sans-serif;
  --crossfade: 800ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--vib3-black);
  color: var(--vib3-white);
  font-family: var(--font);
  /* Signage cursor should be invisible */
  cursor: none;
}

/* ---- Stage & crossfade layers ---- */

#stage {
  position: fixed;
  inset: 0;
  background: var(--vib3-black);
}

.layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--crossfade) ease-in-out;
  /* Content is composited here; hidden layers ignore pointer input */
  pointer-events: none;
  will-change: opacity;
}

.layer.active {
  opacity: 1;
}

/* Media fills the layer, preserving aspect ratio (letterboxed on black) */
.layer > video,
.layer > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--vib3-black);
  border: 0;
}

.layer > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--vib3-black);
}

/* ---- Video-wall tiling ----
   For a spanning wall the content is rendered onto a canvas that is
   (cols x rows) the size of one panel, then translated so this panel's
   quadrant is what shows through the fixed viewport. */
.layer.tiled {
  overflow: hidden;
}
.layer.tiled .tile-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}
.layer.tiled .tile-canvas > video,
.layer.tiled .tile-canvas > img,
.layer.tiled .tile-canvas > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* spanning walls fill; letterboxing would break continuity */
  border: 0;
}

/* ---- Idle / no-screen overlay (VIB3 hero) ---- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--vib3-black);
  overflow: hidden;
}
.overlay[hidden] { display: none; }

.idle-mark {
  position: absolute;
  bottom: -32%;
  right: -14%;
  width: 78%;
  height: 78%;
  background: url('assets/logos/Monogram_VIB3_Orange.svg') no-repeat center / contain;
  pointer-events: none;
}

.idle-inner {
  position: relative;
  z-index: 2;
  max-width: 60%;
  padding: 6vh 6vw;
}

.idle-logo {
  width: 140px;
  height: 44px;
  background: url('assets/logos/Logo_VIB3_White.svg') no-repeat left center / contain;
  margin-bottom: 8vh;
}

.idle-label {
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vib3-stone);
  margin-bottom: 1.2rem;
}

.idle-title {
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  line-height: 1.05;
  margin-bottom: 1.6rem;
}

.idle-body {
  font-weight: 300;
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  color: var(--vib3-stone-light);
  max-width: 34ch;
}
.idle-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--vib3-orange);
  background: var(--vib3-black-light);
  padding: 0.1em 0.4em;
}
.idle-body a { color: var(--vib3-orange); text-decoration: none; }

/* ---- Debug badge ---- */

.debug {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 20;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--vib3-stone-light);
  background: rgba(27, 24, 25, 0.82);
  border-left: 2px solid var(--vib3-orange);
  padding: 8px 12px;
  max-width: 46ch;
  white-space: pre-wrap;
}
.debug[hidden] { display: none; }