/* =========================================================
   Scene 5 — Modelos de IA
   Elementos: interrogación (reposicionado desde 4bis),
   flecha bosquejo, cerebro + label.
   ========================================================= */

/* ── Interrogación — posición settled post-transición ─── */
#s5Question {
  position: absolute;
  left: 400px;
  top: 349px;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
  transition: opacity 400ms ease;
}
#s5Question.is-visible {
  opacity: 1;
}

/* Floater interno — mantiene el movimiento suave del interrogación */
.s5q-floater {
  animation: s5QFloat 8.5s ease-in-out 2s infinite;
}
@keyframes s5QFloat {
  0%   { transform: translate(  0px,   0px) rotate( 0.00deg); }
  25%  { transform: translate(  6px, -13px) rotate( 0.45deg); }
  50%  { transform: translate( -5px, -20px) rotate(-0.32deg); }
  75%  { transform: translate(  4px,  -7px) rotate( 0.15deg); }
  100% { transform: translate(  0px,   0px) rotate( 0.00deg); }
}

#s5Question img {
  width: 240px;
  height: auto;
  filter: drop-shadow(0 20px 48px rgba(0,0,0,0.18));
}

/* ── Flecha bosquejo — emerge desde detrás del interrogación ── */
#s5Arrow {
  position: absolute;
  left: 420px;
  top: 508px;
  z-index: 18;           /* deliberadamente por debajo del interrogación (z-index 20) */
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
#s5Arrow img {
  width: 228px;          /* 40% más chico que el original 380px */
  height: auto;
  filter: drop-shadow(2px 3px 8px rgba(0,0,0,0.22));
}

/* Emerge con deslizamiento hacia la derecha desde dentro del interrogación */
#s5Arrow.is-entering {
  animation: s5ArrowIn 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes s5ArrowIn {
  from { opacity: 0; transform: translateX(0);      }
  to   { opacity: 1; transform: translateX(344px);  }
}

/* ── Cerebro — entra desde la derecha ──────────────────── */
#s5Brain {
  position: absolute;
  left: 1116px;
  top: 340px;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
#s5Brain img {
  width: 520px;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 70px rgba(120, 60, 220, 0.40));
}

/* Entrada desde la derecha */
#s5Brain.is-entering {
  animation: s5BrainIn 950ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes s5BrainIn {
  from { opacity: 0; transform: translateX(700px); }
  to   { opacity: 1; transform: translateX(0);     }
}

/* ── Floater interno: float continuo (no conflicta con entrada del outer) ── */
.s5b-floater {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: s5BrainFloat 7.2s ease-in-out 0.8s infinite;
}
@keyframes s5BrainFloat {
  0%   { transform: translate(  0px,   0px) rotate( 0.00deg); }
  25%  { transform: translate(  5px, -14px) rotate( 0.30deg); }
  50%  { transform: translate( -4px, -22px) rotate(-0.22deg); }
  75%  { transform: translate(  3px,  -8px) rotate( 0.15deg); }
  100% { transform: translate(  0px,   0px) rotate( 0.00deg); }
}

/* ── Label "Modelos de IA" — dentro del floater ────────── */
.s5-label {
  font-family: 'Inter', sans-serif;
  font-size: 76px;
  font-weight: 800;
  color: #1a1410;
  letter-spacing: -2px;
  margin-top: 28px;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  /* Empieza en la base del cerebro y cae hacia su posición natural */
  transform: translateY(-80px);
  transition: opacity 600ms ease, transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.s5-label.is-visible {
  opacity: 1;
  transform: translateY(0);
}