/* Demostración animada del hero: marco, escenas, pasos y selector de asistente.
   Los @keyframes se generan en src/ShowcaseTimeline.php (tiempos en segundos).
   El reproductor (un clic sobre el video lo pausa y otro lo continúa) está en css/showcase-player.css. */
.slide--showcase .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); }
@media (max-width: 860px) { .slide--showcase .wrap { grid-template-columns: 1fr; } }

.showcase {
  position: relative;
  isolation: isolate;
  margin: 0;
  /* los 30 px de más arriba son el sitio del botón de pausa (css/showcase-player.css) */
  padding: calc(clamp(8px, 2vw, 28px) + 30px) clamp(8px, 2vw, 28px) clamp(8px, 2vw, 28px);
  --sc-shadow: 0 30px 60px -20px rgba(15, 23, 42, 0.35);
}

.glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0.55; animation: glow-drift 14s ease-in-out infinite alternate; }
.glow--a { width: 55%; aspect-ratio: 1; left: -6%; top: -10%; background: radial-gradient(circle, #6f95ff, transparent 65%); }
.glow--b { width: 50%; aspect-ratio: 1; right: -4%; bottom: -6%; background: radial-gradient(circle, #3ccfbd, transparent 65%); animation-delay: -6s; }
@keyframes glow-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(4%, 6%) scale(1.15); } }
/* Los halos se salen unos píxeles de la sección (y además se mueven): sin recorte, el navegador mostraba una barra
   de desplazamiento horizontal en ciertos instantes. «clip» solo recorta en horizontal y no crea un contenedor de
   desplazamiento, así que el desenfoque sigue viéndose por arriba y por abajo y el imán entre slides no cambia. */
.slide--showcase { overflow-x: clip; }
/* La portada se alinea arriba (no centrada): así la separación con la cabecera no crece en pantallas altas; el margen de arriba crece poco con la altura. */
.slide--showcase { align-items: flex-start; padding-top: clamp(20px, 6vh, 64px); }

/* El padding-bottom en % se calcula sobre el ancho del marco: reserva el espacio que ocupa la tarjeta
   de la observación al sobresalir por debajo (24 % del alto del marco ≈ 12,2 % del ancho, más margen
   por la perspectiva). La leyenda queda debajo de ese espacio y z-index 1 pone la demostración
   siempre por encima del texto. */
/* El relleno de abajo (5 % del ancho) deja sitio a la sombra del portátil; con el 15 % de antes el aviso de debajo quedaba demasiado lejos */
.float { position: relative; z-index: 1; padding-bottom: 5%; animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Capas de giro, de afuera hacia adentro (todas con perspectiva compartida):
   .tilt-inner  inclinación fija de reposo (ya no sigue al cursor)
   .orbit       oscilación lenta en reposo, para que el marco nunca esté quieto
   .flip        giro de «puerta giratoria» en cada cambio de escena (ver ShowcaseTimeline::flip);
                también es el reloj maestro que leen js/showcase.js y js/showcase-sim.js */
.tilt { perspective: 1600px; }
.tilt-inner { position: relative; transform: rotateX(3deg) rotateY(-7deg); transform-style: preserve-3d; }
.orbit { transform-style: preserve-3d; animation: orbit 13s ease-in-out infinite alternate; }
@keyframes orbit {
  from { transform: rotateY(-6deg) rotateX(1.5deg); }
  to { transform: rotateY(7deg) rotateX(-1.5deg); }
}
.flip { transform-style: preserve-3d; animation: flip var(--loop) infinite; }   /* «flip» ya no mueve nada: es solo el reloj de la demostración (ShowcaseTimeline::clock) */

/* Cambio de escena: dos líneas de luz nacen en el centro de la pantalla y se alejan, una hacia arriba y otra hacia abajo, al mismo ritmo con que la escena nueva se abre (ShowcaseTimeline::wipes) */
.wipe {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 6;
  height: 0.45cqw;
  margin-top: -0.22cqw;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(180, 205, 255, 0.95) 16%, #fff 50%, rgba(180, 205, 255, 0.95) 84%, transparent);
  box-shadow: 0 0 1.6cqw 0.5cqw rgba(111, 149, 255, 0.55);
  animation: wipeUp var(--loop) infinite;
}
.wipe--down { animation-name: wipeDown; }

.frame {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0b0d12;
  box-shadow: var(--sc-shadow), 0 0 0 6px color-mix(in srgb, var(--bg2) 65%, transparent);
  aspect-ratio: 2507 / 1277;
}

/* Escenas: cada una es una captura (o la conversación simulada) con su propia «cámara» (zoom) */
/* z-index 1 es el nivel de reposo de las escenas; mientras una se abre sube a 3 (ver ShowcaseTimeline::scene) para quedar encima de la anterior, y por debajo de la capa de pasos y del selector */
.scene { position: absolute; inset: 0; z-index: 1; opacity: 0; animation-duration: var(--loop); animation-iteration-count: infinite; }
.scene--case { animation-name: sceneCase; }
.scene--chat { animation-name: sceneChat; }
.scene--claude { animation-name: sceneClaude; }
.camera { position: absolute; inset: 0; transform-origin: 0 0; animation: camera var(--loop) infinite; }
.shot { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.shot--fit { object-fit: cover; }

/* Velo: atenúa la escena mientras un paso se muestra grande, para que se lea sin distracciones */
.veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(8, 14, 30, 0.5), rgba(8, 14, 30, 0.68));
  backdrop-filter: blur(2px);
  animation: veil var(--loop) infinite;
}

/* Pasos: entran GRANDES al centro y se reducen a la esquina inferior izquierda.
   Todas las medidas salen de font-size (em), así el tamaño completo se anima con una sola propiedad. */
.steps { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.step {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 50%);
  display: flex;
  align-items: center;
  gap: 0.55em;
  width: max-content;
  max-width: 56cqw;
  padding: 0.4em 1.05em 0.4em 0.4em;
  border-radius: 1.5em;
  background: rgba(255, 255, 255, 0.97);
  border: 0.09em solid rgba(37, 87, 214, 0.35);
  color: #0f172a;
  font-size: 2.8cqw;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-align: left;
  box-shadow: 0 1.4cqw 3.6cqw rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation-duration: var(--loop);
  animation-iteration-count: infinite;
}
.step b {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #2557d6, #3ccfbd);
  color: #fff;
  font-size: 0.8em;
  font-weight: 800;
}
.step--c1 { animation-name: c1; } .step--c2 { animation-name: c2; }
.step--s1 { animation-name: s1; } .step--s2 { animation-name: s2; } .step--s2b { animation-name: s2b; }
.step--s3 { animation-name: s3; } .step--s4 { animation-name: s4; }
.step--c8 { animation-name: c8; } .step--c9 { animation-name: c9; }

/* Selector «ChatGPT | Claude» */
.switch {
  position: absolute;
  z-index: 5;
  top: 2.4cqw;
  left: 50%;
  display: flex;
  gap: 0.4cqw;
  padding: 0.5cqw;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(8px);
  box-shadow: 0 1cqw 2.4cqw rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translate(-50%, -8px);
  animation: switchShow var(--loop) infinite;
}
.sw {
  padding: 0.7cqw 2cqw;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.7cqw;
  color: #475569;
  animation-duration: var(--loop);
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}
.sw--gpt { animation-name: swGpt; }
.sw--claude { animation-name: swClaude; }

.progress { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.12); }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6f95ff, #3ccfbd); animation: progress-fill var(--loop) linear infinite; }
@keyframes progress-fill { from { width: 0; } to { width: 100%; } }

/* Leyenda: debajo del espacio que ocupa la tarjeta, nunca debajo de ella (z-index 0 < 1 de .float) */
/* La leyenda bajo el video se ve como un aviso (caja con fondo azul suave, borde de acento a la izquierda e icono de información), para que no quede un texto gris suelto */
.showcase figcaption {
  position: relative;
  z-index: 2;   /* por encima de las capas 3D: si el portátil se agranda un poco al girar, no tapa el aviso */
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0.75rem auto 0;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
}
.showcase figcaption svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.showcase figcaption .cap-body { display: grid; gap: 2px; min-width: 0; }
.showcase figcaption .cap-head { color: var(--ink); font-size: 1rem; font-weight: 700; line-height: 1.25; }
.showcase figcaption b { color: var(--ink); }

@media (max-width: 860px) {
  .tilt-inner { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glow, .float, .orbit, .flip, .camera, .spot, .ping, .ping::after, .progress i, .cursor, .click, .popup { animation: none; }
  .tilt-inner { transform: none; }
  .intro, .scene--case, .scene--claude, .casecard, .switch, .veil { display: none; }
  .scene--chat { opacity: 1; animation: none; }
  .ping, .spot { opacity: 1; }
  .cursor, .click { display: none; }
  .popup { opacity: 1; transform: none; }
  /* Sin animación: los pasos quedan como una lista pequeña al pie del marco */
  .steps { inset: auto 2.2cqw 3.2cqw 2.2cqw; display: flex; flex-wrap: wrap; gap: 0.8cqw; }
  .step { position: static; transform: none; animation: none; opacity: 1; font-size: 1.75cqw; max-width: none; }
}

/* Pantallas bajas: la demostración se encoge para que la portada entera (con su flecha «siguiente») quepa en la pantalla. Su alto es unas 0,79
   veces su ancho; 165 px = cabecera (64) + relleno de la slide (56) + leyenda y margen. En pantallas altas no cambia nada (el tope es mayor que su ancho). */
@media (min-width: 861px) { .showcase { max-width: calc((100svh - 165px) / 0.79); margin-inline: auto; } }