/* =========================================================
   Scene 7 — ¿Dónde consigo uno?
   ========================================================= */

/* ── CASCADE OUT (step 7-0) ──────────────────────────── */
@keyframes s7-char-pop-out {
  0%   { opacity: 1;   transform: scale(1);    filter: blur(0px); }
  30%  { opacity: 0.8; transform: scale(1.18);                    }
  100% { opacity: 0;   transform: scale(1.45); filter: blur(2px); }
}

.s7-exitchar {
  display: inline-block;
  vertical-align: baseline;
  animation: s7-char-pop-out var(--s7-dur, 340ms) ease-out both;
  animation-delay: var(--s7-delay, 0ms);
  will-change: transform, opacity;
}

/* ── CASCADE IN (step 7-1) ───────────────────────────────
   fill-mode: both → el char arranca en el estado FROM
   (opacity:0, scale:1.45) DURANTE el delay.
   Sin esto todos los chars aparecen escritos de entrada.  */
@keyframes s7-char-pop-in {
  0%   { opacity: 0;   transform: scale(1.45); filter: blur(2px); }
  65%  { opacity: 0.9; transform: scale(1.02); filter: blur(0px); }
  100% { opacity: 1;   transform: scale(1);    filter: blur(0px); }
}

.s7-enterchar {
  display: inline-block;
  vertical-align: baseline;
  animation: s7-char-pop-in var(--s7-in-dur, 360ms) ease-out both;
  animation-delay: var(--s7-in-delay, 0ms);
  will-change: transform, opacity;
}

/* ── QUESTION TEXT ───────────────────────────────────── */
#s7Question {
  position: absolute;
  left: 0;
  width: 1920px;
  top: 460px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 96px;
  font-weight: 800;
  color: #1a1410;
  white-space: nowrap;
  opacity: 0;           /* oculto hasta que JS lo activa */
  pointer-events: none;
  z-index: 25;
  will-change: transform, opacity;
  transform-origin: 0 0;
}

/* ── LOGO CARDS — sin recuadro, sombra sobre el shape ── */
.s7-logo-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  opacity: 0;
  pointer-events: none;
  z-index: 27;
  will-change: transform, opacity;
}

/* Centrado vertical: espacio libre entre título (~168px) y
   borde inferior (1080px). Logo height ≈ 290+28+52 = 370px
   → top = 168 + (912 - 370) / 2 ≈ 439px                  */
#s7Ollama   { left: 430px;  top: 440px; }
#s7LMStudio { left: 1240px; top: 440px; }

/* Ollama: ícono alto 646×854 → constraining por altura    */
#s7Ollama .s7-logo-icon {
  height: 290px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.22));
}

/* LM Studio: ícono cuadrado 512×512, ya tiene bordes
   redondeados en el propio SVG                            */
#s7LMStudio .s7-logo-icon {
  width: 290px;
  height: 290px;
  display: block;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.22));
}

/* Labels */
.s7-logo-name {
  font-size: 52px;
  font-weight: 700;
  color: #1a1410;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  text-shadow: 0 3px 14px rgba(0,0,0,0.14);
}

/* Ollama: imagen PNG con tipografía oficial              */
.s7-ollama-text {
  height: 68px;
  width: auto;
  display: block;
  filter: drop-shadow(0 3px 14px rgba(0,0,0,0.14));
}

/* LM Studio: Inter — geométrica, cuadrada                */
#s7LMStudio .s7-logo-name {
  font-family: 'Inter', sans-serif;
  font-size: 66px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── EMOJIS (steps 7-3..7-7) ─────────────────────────── */
.s7-emoji {
  position: absolute;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
  transform-origin: center center;
  will-change: transform, opacity;
}

.s7-emoji img {
  width: 160px;
  height: 160px;
  display: block;
}

/* Posición calculada dinámicamente por JS en cada step:
   top/left se setean via positionEmojiAtLogoBottom() para que
   el borde inferior del emoji coincida con el borde inferior
   visual del logo (incluyendo su transform scale actual).     */
#s7EmojiFrustracion,
#s7EmojiCaca,
#s7EmojiEnamorado { top: 0; left: 0; }

/* ── RECTÁNGULO DE VIDEO (escena 8) ───────────────── */
#s7VideoRect {
  position: absolute;
  left: 320px;
  top: 180px;
  width: 1280px;
  height: 720px;
  z-index: 26;
  transform: scale(0);
  transform-origin: left center;
  opacity: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.55),
    0 6px 24px  rgba(0,0,0,0.35);
  pointer-events: none;
  will-change: transform, opacity;
}

#s7Video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

#s7PlayBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130px;
  height: 130px;
  pointer-events: none;
  will-change: opacity;
}

#s7PlayBtn svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5));
}