/* =========================================================
   Scene 3 — Por qué local?
   Steps: 0 wait · 1 pregunta cae · 2 nube · 3 paisaje ink reveal · 4 tren
   Fondo: scene-bg-layer (styles.css). Esta escena no tiene bg propio.
   ========================================================= */

/* ---- Título overlay (fuera de .scene, z-50) ---- */
.s3-title-intro {
  position: absolute;
  left: 7%;
  top: 8%;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 130px;
  letter-spacing: -0.025em;
  color: #1a1410;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
}
.s3-title-intro.is-visible,
.s3-title-intro.is-showing { opacity: 1; }
.s3-ti-cursor { display: inline-block; margin-left: 5px; opacity: 0; }
.s3-ti-cursor::before { content: '|'; font-weight: 200; }
.s3-title-intro.is-visible .s3-ti-cursor {
  animation: s3CursorBlink 900ms linear infinite;
}
.s3-title-intro.is-showing .s3-ti-cursor { opacity: 0; animation: none; }
@keyframes s3CursorBlink { 0%,48% { opacity: 1; } 50%,100% { opacity: 0; } }

.scene--3 { --ink-dark: #1a1410; color: var(--ink-dark); }

/* =========================================================
   PREGUNTA — cae verticalmente desde arriba
   ========================================================= */
.s3-question-positioner { position: absolute; right: 50px; top: 32%; z-index: 2; }
.s3-question-wrap {
  transform: translateY(-900px);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 860ms cubic-bezier(0.34, 1.18, 0.64, 1),
    opacity   220ms ease;
}
.scene--3[data-step="1"] .s3-question-wrap,
.scene--3[data-step="2"] .s3-question-wrap,
.scene--3[data-step="3"] .s3-question-wrap,
.scene--3[data-step="4"] .s3-question-wrap,
.scene--3[data-step="5"] .s3-question-wrap,
.scene--3[data-step="6"] .s3-question-wrap,
.scene--3[data-step="7"] .s3-question-wrap,
.scene--3[data-step="8"] .s3-question-wrap {
  transform: translateY(0);
  opacity: 1;
}
.s3-question {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 58px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #1a1410;
  white-space: nowrap;
  text-align: left;
}

/* =========================================================
   NUBE ChatGPT — desliza desde la derecha
   ========================================================= */
.s3-cloud {
  position: absolute;
  left: calc(75% - 240px);
  top: 69%;
  transform: translateY(-50%) translateX(1300px);
  z-index: 3;
  width: 480px;
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 900ms var(--ease-bounce),
    opacity   300ms ease;
}
.scene--3[data-step="2"] .s3-cloud,
.scene--3[data-step="3"] .s3-cloud,
.scene--3[data-step="4"] .s3-cloud,
.scene--3[data-step="5"] .s3-cloud,
.scene--3[data-step="6"] .s3-cloud,
.scene--3[data-step="7"] .s3-cloud,
.scene--3[data-step="8"] .s3-cloud {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}
.s3-cloud-float { animation: s3CloudFloat 4.5s ease-in-out infinite; }
@keyframes s3CloudFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
.s3-cloud-img { display: block; width: 100%; height: auto; }

/* =========================================================
   PAISAJE — ink reveal orgánico tipo nube (gooey + turbulence)
   El div cubre todo el stage pero la máscara SVG (#s3InkMask)
   solo revela el área de la nube. Primer 30% horizontal,
   segundo tercio vertical. Horizonte alineado a y≈565px.
   ========================================================= */
.s3-halo {
  position: absolute;
  left: 10px;  top: 380px;
  width: 560px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255,190,120,.32),
    rgba(255,170,110,.12) 60%,
    rgba(255,170,110,0)   84%);
  filter: blur(42px);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 1;
  transition: opacity 450ms ease;
}
.scene--3[data-step="3"] .s3-halo,
.scene--3[data-step="4"] .s3-halo,
.scene--3[data-step="5"] .s3-halo,
.scene--3[data-step="6"] .s3-halo,
.scene--3[data-step="7"] .s3-halo,
.scene--3[data-step="8"] .s3-halo { opacity: 1; }

.s3-landscape {
  position: absolute;
  inset: 0;
  background-image: url('../assets/paisaje.jpg');
  background-repeat: no-repeat;
  background-size: 710px 400px;
  background-position: -65px 337px;  /* horizonte de la foto ≈ y 565px */
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  -webkit-mask: url(#s3InkMask);
  mask: url(#s3InkMask);
}
.scene--3[data-step="3"] .s3-landscape,
.scene--3[data-step="4"] .s3-landscape,
.scene--3[data-step="5"] .s3-landscape,
.scene--3[data-step="6"] .s3-landscape,
.scene--3[data-step="7"] .s3-landscape,
.scene--3[data-step="8"] .s3-landscape { opacity: 1; }

.s3-ink-defs {
  position: absolute;
  width: 0; height: 0;
  overflow: visible;
  pointer-events: none;
}

/* =========================================================
   DOCUMENTOS — tercer tercio vertical, 15% desde margen izq.
   Entra desde la izquierda. step 5.
   ========================================================= */
.s3-docs {
  position: absolute;
  left: 133px;
  top: 730px;
  width: 290px;
  opacity: 0;
  transform: translateX(-700px);
  z-index: 3;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform 900ms var(--ease-bounce),
    opacity   300ms ease;
}
.s3-docs img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.20));
}
.scene--3[data-step="5"] .s3-docs,
.scene--3[data-step="6"] .s3-docs,
.scene--3[data-step="7"] .s3-docs,
.scene--3[data-step="8"] .s3-docs {
  transform: translateX(0);
  opacity: 1;
}

/* =========================================================
   SELLO CONFIDENCIAL — aparece 700ms después del aterrizaje
   de los documentos. Posicionado sobre el área del doc.
   ========================================================= */
.s3-stamp {
  position: absolute;
  left: 45px;
  top: 820px;
  width: 470px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 46px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(185, 28, 28, 0.86);
  border: 8px solid rgba(185, 28, 28, 0.86);
  border-radius: 6px;
  padding: 8px 5px;
  opacity: 0;
  transform: rotate(-20deg) scale(2);
  transform-origin: center center;
  pointer-events: none;
  z-index: 7;
  white-space: nowrap;
}
.s3-stamp.is-stamped {
  animation: s3StampIn 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes s3StampIn {
  0%   { opacity: 0; transform: rotate(-20deg) scale(1.7); }
  65%  { opacity: 1; transform: rotate(-20deg) scale(0.93); }
  100% { opacity: 1; transform: rotate(-20deg) scale(1); }
}

/* =========================================================
   FLECHA PUNTEADA (step 6)
   ========================================================= */
.s3-arrow-svg {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
}

/* =========================================================
   CANDADO (step 6) — abierto inicialmente, luego se cierra
   ========================================================= */
.s3-lock-wrap {
  position: absolute;
  left: 843px;
  top: 735px;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  z-index: 9;
  pointer-events: none;
  transition:
    transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   200ms ease;
}
.s3-lock-wrap.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* =========================================================
   SIN CONEXIÓN — aparece con parpadeo tras animación del tren
   ========================================================= */
.s3-noconn {
  position: absolute;
  left: 425px;
  top: 575px;
  width: 110px;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.s3-noconn img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.22));
}
.s3-noconn.is-blinking {
  animation: s3NoBlink 720ms ease-out forwards;
}
@keyframes s3NoBlink {
  0%   { opacity: 0; }
  14%  { opacity: 1; }
  28%  { opacity: 0; }
  48%  { opacity: 1; }
  64%  { opacity: 0; }
  82%  { opacity: 1; }
  100% { opacity: 1; }
}

/* =========================================================
   TREN — punta izquierda anclada al horizonte; crece a la derecha.
   transform-origin: 0% 62% = borde izquierdo, altura de la punta
   del tren (donde está la cola en perspectiva).
   ========================================================= */
.s3-train-wrap {
  position: absolute;
  left: 95px;
  top: 412px;        /* con origin 62% → punta a y≈535px (horizonte) */
  width: 396px;
  opacity: 0;
  transform: scale(0.04);
  transform-origin: 0% 62%;
  z-index: 4;
  pointer-events: none;
}
.s3-train-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.35));
}