/* =========================================================
   La PC Gamer y la IA local — cinematic experience
   1920×1080 base · designed for Google TV + D-pad
   ========================================================= */

:root {
  /* type scale (tv-distance) */
  --type-display: 120px;
  --type-title: 84px;
  --type-subtitle: 48px;
  --type-body: 32px;
  --type-small: 24px;

  /* palette */
  --ink: #f4ecd8;
  --ink-dim: rgba(244, 236, 216, 0.55);
  --gold: #f4a52b;
  --gold-soft: #c98217;
  --black: #050403;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}

/* =========================================================
   Viewport — full screen, letterboxes the fixed canvas on black
   ========================================================= */
.viewport {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
}

/* =========================================================
   Stage — FIXED 1920×1080 canvas, uniformly scaled via JS.
   Everything inside is positioned against this fixed box, so the
   whole slide shrinks/grows as one unit (like a PDF / PPT slide):
   nothing reflows, reorders, or moves relative to its neighbours.
   ========================================================= */
.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: #000;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
}

/* Each scene fills the stage; only the active one is visible */
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease-out);
}
/* The engine toggles .is-active on the current scene — scales to N scenes */
.scene.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   Background video layer
   ========================================================= */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  pointer-events: none;
}
.bg-video.is-active { opacity: 1; }

/* =========================================================
   Generic wipe-reveal — reusable for ALL scene titles.
   Pattern:
     <div class="[scene]-title-wrap">          ← position it per scene
       <h2 class="[scene]-title wipe-text">T</h2>
       <div class="[scene]-title-bar wipe-bar"></div>
     </div>
   Trigger: animateTitleWipe(wrapElement)  in director.js
   ========================================================= */
.wipe-text {
  clip-path: inset(0 100% 0 0);   /* fully hidden until wipe */
  display: block;
}
.wipe-text.wipe-active {
  animation: titleWipe 2s ease forwards;
}
.wipe-bar {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 5px;
  background: currentColor;
  opacity: 0;
  pointer-events: none;
}
.wipe-bar.wipe-active {
  animation: barSweep 2s ease forwards;
}
/* Both animations share the same duration+easing so bar edge
   stays locked to the clip boundary throughout the sweep.
   0–30% = 0–0.6s pause · 30–70% = sweep · 70–85% = hold · 85–100% = fade */
@keyframes titleWipe {
  0%,  30%  { clip-path: inset(0 100% 0 0); }
  70%, 100% { clip-path: inset(0   0% 0 0); }
}
@keyframes barSweep {
  0%   { opacity: 1; transform: translateX(0); }
  30%  { opacity: 1; transform: translateX(0); }
  70%  { opacity: 1; transform: translateX(var(--bar-end, 850px)); }
  85%  { opacity: 1; transform: translateX(var(--bar-end, 850px)); }
  100% { opacity: 0; transform: translateX(var(--bar-end, 850px)); }
}

/* =========================================================
   Shared background — scenes 2 onward (scene-bg.png)
   ---------------------------------------------------------
   Este div vive FUERA de todas las .scene, directo en #stage.
   NUNCA se mueve ni transiciona. Las escenas 2+ no tienen bg propio;
   este layer es EL fondo. Al agregar una nueva escena (N ≥ 2),
   añadir: #stage[data-scene="N"] .scene-bg-layer { opacity: 1; }
   ========================================================= */
.scene-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('assets/scene-bg.png');
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0;
}
#stage[data-scene="2"] .scene-bg-layer,
#stage[data-scene="3"] .scene-bg-layer,
#stage[data-scene="4"] .scene-bg-layer,
#stage[data-scene="5"] .scene-bg-layer,
#stage[data-scene="6"] .scene-bg-layer,
#stage[data-scene="7"] .scene-bg-layer,
#stage[data-scene="8"] .scene-bg-layer,
#stage[data-scene="9"] .scene-bg-layer { opacity: 1; }