/* Cleared Go · la llegada: el velo, el sello que cae y el telón de dos hojas (2026-10-02).
   Encargo «el recorrido» (clearedgo/produccion/recorrido/): Nico eligió en su equipo el telón A, «Las dos
   hojas», el sello en la cabecera del panel y el paso fundido entre portada y panel (aprobaciones.md).
   La idea rectora: la frontera te sella y te deja pasar. El sello que cae es la firma de la marca (M-15).
   Va en la portada, /home.html, /mundo y /world. Sólo se animan transform y opacity: es lo único que
   el navegador mueve sin recalcular la página, y lo que sostiene 60 cuadros en un equipo de dos núcleos. */

.telon {
  --papel-velo: rgba(243, 242, 242, 0.86);
  --sello: #ec3013;
  --sello-texto: #c42610;
  --caida: cubic-bezier(.3, 1.35, .5, 1);
  --apertura: cubic-bezier(.65, 0, .35, 1);
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden;
  /* Seguro: si telon.js no llega a correr, el velo se va solo a los 6 s y nunca tapa un sitio roto. */
  animation: telon-seguro 0s 6s forwards;
}
@keyframes telon-seguro { to { visibility: hidden; opacity: 0; pointer-events: none; } }
html:not(.js) .telon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .telon { --papel-velo: rgba(25, 24, 23, 0.86); --sello: #ff5334; --sello-texto: #ff8f78; }
}
:root[data-theme="dark"] .telon { --papel-velo: rgba(25, 24, 23, 0.86); --sello: #ff5334; --sello-texto: #ff8f78; }

/* El velo: papel de la marca al 86 % con un desenfoque de 8 px. La página se adivina detrás, no se lee. */
.telon-hojas { position: absolute; inset: 0; animation: telon-golpe 150ms ease-out 400ms; }
.telon-hoja {
  position: absolute; left: 0; right: 0; height: 50.2%; background: var(--papel-velo);
  -webkit-backdrop-filter: blur(8px) saturate(.9); backdrop-filter: blur(8px) saturate(.9);
  --escena: "telón de llegada, aprobado por Nico el 02/10"; transition: transform 700ms var(--apertura); will-change: transform;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .telon-hoja { background: rgba(243, 242, 242, 0.96); }
}
.telon-hoja--1 { top: 0; }
.telon-hoja--2 { bottom: 0; }
/* El telón de dos hojas: el velo se parte a lo alto, como un pasaporte que se abre */
.telon.abierto .telon-hoja--1 { transform: translateY(-100%); }
.telon.abierto .telon-hoja--2 { transform: translateY(100%); }
/* El golpe del sello: el velo acusa el impacto */
@keyframes telon-golpe { 0% { transform: translateY(0); } 40% { transform: translateY(3px); } 100% { transform: translateY(0); } }

/* El sello: el mismo del logotipo (M-08), en grande. El reposo es el sello ya puesto; la caída es una
   animación de CSS que arranca con el primer cuadro pintado. Con JavaScript dependía del procesador,
   ocupado al cargar la película (medido el 02/10: 0 a 7 cuadros por segundo en la caída). */
.telon-sello {
  position: absolute; left: 50%; top: 50%;
  display: inline-flex; align-items: baseline; gap: .25em; white-space: nowrap;
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 900; letter-spacing: -.02em; font-size: clamp(26px, 4.4vw, 54px);
  color: var(--sello-texto); border: .09em solid var(--sello); padding: .14em .36em .1em;
  transform: translate(-50%, -50%) scale(1) rotate(-2deg); opacity: 1;
  transform-origin: 50% 50%; will-change: transform, opacity;
  animation: sello-cae 380ms var(--caida) 60ms backwards;
}
@keyframes sello-cae {
  from { transform: translate(-50%, -50%) scale(2.4) rotate(-16deg); opacity: 0; }
  45% { opacity: 1; }
  to { transform: translate(-50%, -50%) scale(1) rotate(-2deg); opacity: 1; }
}
/* La segunda llegada de la visita (el paso al panel): el sello ya está puesto, no cae ni golpea */
.telon.puesto .telon-sello, .telon.puesto .telon-hojas { animation: none; }
/* El sello viaja a la cabecera y se vuelve el logotipo */
.telon.viaja .telon-sello { --escena: "el sello viaja a la cabecera, con las hojas"; animation: none; transition: transform 700ms var(--apertura), opacity 220ms ease-in 560ms; }

/* Mientras el telón está, el logotipo de la cabecera espera: el sello va a ocupar su lugar */
html.telon-activo .logo, html.telon-activo a.marca { opacity: 0; }
.logo, a.marca { transition: opacity 120ms ease-out; }

/* La causa del error del 02/10: antes de que corra pelicula.js se veían las seis escenas encimadas.
   Los títulos esperan a que el motor esté listo (sólo con JavaScript), con un seguro a los 6 s. */
html.js:not(.telon-listo) main.rotulos { visibility: hidden; animation: rotulos-seguro 0s 6s forwards; }
@keyframes rotulos-seguro { to { visibility: visible; } }

/* El paso entre portada y panel: el navegador funde las dos páginas (Chrome y Safari; en Firefox,
   cambio normal). El panel llega bajo el velo con el sello ya puesto. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 450ms; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }

/* Movimiento reducido: un fundido de 200 ms, sin caída, sin golpe, sin viaje */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .telon-hoja, .telon .telon-sello { transition: opacity 200ms ease-in !important; animation: none !important; }
  .telon .telon-hojas { animation: none !important; }
  .telon .telon-sello { transform: translate(-50%, -50%) rotate(-2deg) !important; }
  .telon.abierto .telon-hoja { transform: none !important; opacity: 0; }
  .telon.abierto .telon-sello { opacity: 0; }
}