/* Escena: luz y telón. Movimiento con sentido teatral; todo visible sin JavaScript y quieto con "reducir movimiento". */

/* 1. Foco de luz que sigue al ratón en los capítulos oscuros */
.esc-foco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 600ms ease; }
.esc-foco::before {
  content: ""; position: absolute; left: 0; top: 0; width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax; border-radius: 50%;
  background: radial-gradient(circle, rgb(240 191 117 / 0.16) 0%, rgb(240 191 117 / 0.07) 32%, rgb(240 191 117 / 0) 62%); /* taste-skill-ignore: luz de un foco de escena */
  transform: translate3d(var(--fx, 50vw), var(--fy, 40vh), 0);
}
.esc-lit > .esc-foco { opacity: 1; }
.esc-sec { position: relative; }
.esc-sec > :not(.esc-foco) { position: relative; z-index: 1; }

/* 2. Titulares que suben desde detrás de su línea */
.esc-ready .esc-h { overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.esc-ready .esc-h > .esc-l { display: inline-block; transform: translateY(105%); transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1); }
.esc-ready .esc-h.esc-in > .esc-l { transform: none; }

/* 3. Fotos: se abren como un telón y derivan despacio con el scroll */
@keyframes esc-telon { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.esc-ready .esc-t { clip-path: inset(0 100% 0 0); }
.esc-ready .esc-t.esc-in { animation: esc-telon 1100ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@supports (animation-timeline: view()) {
  .esc-par { overflow: hidden; }
  .esc-par img { animation: esc-deriva linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes esc-deriva { from { transform: translateY(-5%) scale(1.1); } to { transform: translateY(5%) scale(1.1); } }
}

/* 4. Cinta de disciplinas */
.esc-cinta { background: var(--negro-2); color: var(--arena); overflow: hidden; padding-block: clamp(18px, 2.4vw, 32px); }
.esc-cinta-track { display: flex; width: max-content; animation: esc-cinta 60s linear infinite; }
.esc-cinta:hover .esc-cinta-track { animation-play-state: paused; }
.esc-cinta p { margin: 0; padding-right: 0.6em; white-space: nowrap; font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.03em; }
.esc-cinta p span { color: var(--blanco); font-weight: 400; padding-inline: 0.5em; }
@keyframes esc-cinta { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .esc-foco { display: none; }
  .esc-ready .esc-h > .esc-l { transform: none; transition: none; }
  .esc-ready .esc-t, .esc-ready .esc-t.esc-in { clip-path: none; animation: none; }
  .esc-par img { animation: none !important; transform: none !important; }
  .esc-cinta-track { animation: none; flex-wrap: wrap; width: auto; }
  .esc-cinta-track p + p { display: none; }
  .esc-cinta p { white-space: normal; padding-inline: var(--m); }
}

/* 5. Portada: se encienden las luces de la sala.
   Todo es CSS y termina visible aunque falle el JavaScript; "esc-js" lo pone un script en <head>. */
@keyframes luces-sala { from { filter: brightness(0.06) saturate(0.3); transform: scale(1.16); } 55% { filter: brightness(0.7) saturate(0.8); } to { filter: none; transform: scale(1.04); } }
@keyframes luces-respira { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.6%, -1.2%, 0); } }
@keyframes luces-foco { 0% { transform: translate3d(-30%, 10%, 0); } 50% { transform: translate3d(25%, -12%, 0); } 100% { transform: translate3d(-10%, 18%, 0); } }
@keyframes luces-sube { from { transform: translateY(110%); filter: blur(10px); opacity: 0; } to { transform: none; filter: none; opacity: 1; } }
@keyframes luces-asoma { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes luces-bastidor { from { clip-path: inset(0 0 0 100%); transform: translateX(24px); } to { clip-path: inset(0); transform: none; } }
.esc-js .hero-img { animation: luces-sala 2600ms cubic-bezier(0.22, 1, 0.36, 1) both, luces-respira 22s 2600ms ease-in-out infinite alternate; }
/* el foco ámbar que recorre despacio la pared, como una luz de ensayo */
.esc-js .hero-panel::before {
  content: ""; position: absolute; z-index: 1; left: 10%; top: 0; width: 80%; height: 100%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(240 191 117 / 0.34), rgb(240 191 117 / 0)); /* taste-skill-ignore: luz de un foco de escena */
  mix-blend-mode: soft-light; opacity: 0;
  animation: luces-asoma 1800ms 1400ms ease-out both, luces-foco 26s 1400ms ease-in-out infinite alternate;
}
.esc-js .hero-title .hw { display: inline-block; animation: luces-sube 1100ms calc(900ms + var(--i) * 95ms) cubic-bezier(0.16, 1, 0.3, 1) both; }
.esc-js .hero-title { overflow: clip; padding-bottom: 0.08em; }
.esc-js .hero-logo { animation: luces-asoma 900ms 600ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.esc-js .hero-foot { animation: luces-asoma 1000ms 1500ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.esc-js .hero .sw { animation: luces-bastidor 900ms calc(1100ms + var(--i) * 80ms) cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero.esc-fuera .hero-img, .hero.esc-fuera .hero-panel::before { animation-play-state: paused; }

/* 6. "Un espacio en Sevilla…": cada peldaño se enciende al llegar a él */
@supports (animation-timeline: view()) {
  @keyframes peldano { from { opacity: 0.14; transform: translateX(-0.6em); } to { opacity: 1; transform: none; } }
  .esc-js .stair span { animation: peldano linear both; animation-timeline: view(); animation-range: entry 10% cover 42%; }

  /* 7. "Cuerpo en escena": las tres fotos flotan a distinta velocidad con el scroll */
  @keyframes flota-1 { from { translate: 0 14%; rotate: -2deg; } to { translate: 0 -10%; rotate: 2deg; } }
  @keyframes flota-2 { from { translate: 0 -6%; rotate: 2deg; } to { translate: 0 18%; rotate: -3deg; } }
  @keyframes flota-3 { from { translate: 0 22%; } to { translate: 0 -16%; } }
  .esc-js .movimiento .print { animation-timeline: view(); animation-range: cover 0% cover 100%; animation-fill-mode: both; animation-timing-function: linear; animation-delay: 0s !important; animation-duration: auto; }
  .esc-js .movimiento .p1 { animation-name: flota-1; }
  .esc-js .movimiento .p2 { animation-name: flota-2; }
  .esc-js .movimiento .p3 { animation-name: flota-3; }
}

/* 8. El equipo entra nombre a nombre */
.esc-ready .team li { opacity: 0; transform: translateY(20px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 60ms); }
.esc-ready .team.esc-in li { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .esc-js .hero-img, .esc-js .hero-title .hw, .esc-js .hero-logo, .esc-js .hero-foot, .esc-js .hero .sw, .esc-js .stair span, .esc-js .movimiento .print { animation: none !important; translate: none !important; rotate: none !important; }
  .esc-js .hero-panel::before { display: none; }
  .esc-ready .team li { opacity: 1; transform: none; transition: none; }
}