/* Los umbrales de Evernoth (js/transito.js): cierre → la bóveda celeste girando mientras carga → abrir.
   Fase 1 (.cubre): las hojas se cierran y aparece la bóveda. Fase 2 (.revela): se abre la sección nueva.
   Cada elemento lleva como mucho una animación por fase (la otra va en su envoltorio), para que una fase no
   pise a la otra. --espera retrasa la fase 2: en la app vale 0 (la pone revelar() a su hora); en las piezas
   de vídeo, que llevan las dos fases a la vez, vale el mínimo (1,75 s). */
.transito{position:fixed;inset:0;z-index:9000;overflow:hidden;pointer-events:auto;
  --t-cielo:min(96vmin,760px);--t-curva:cubic-bezier(.2,.7,.3,1);--espera:0s}
.transito.revela{pointer-events:none}
.transito :is(.t-luz,.t-hoja,.t-hoja i){position:absolute;display:block}
.transito svg{width:100%;height:100%;display:block;overflow:visible}

/* las dos hojas: la noche partida, cada una con su filo de oro que se desvanece en los extremos */
.t-hoja{left:0;right:0;height:50%}
.t-arriba{top:0} .t-abajo{bottom:0}
.t-hoja i{inset:0}
.t-arriba i{background:linear-gradient(180deg,#07070A 0%,#120E0A 62%,#1E1711 100%)}
.t-abajo i{background:linear-gradient(0deg,#07070A 0%,#120E0A 62%,#1E1711 100%)}
.t-hoja i::after{content:"";position:absolute;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,#C9A35F 18%,#E8C874 50%,#C9A35F 82%,transparent);
  box-shadow:0 0 14px rgba(232,200,116,.45)}
.t-arriba i::after{bottom:0}
.t-abajo i::after{top:0}
.t-vara{position:absolute;left:50%;top:50%;width:min(80vw,700px);height:3px;margin:-1.5px 0 0 calc(min(80vw,700px) / -2)}
.t-vara i{display:block;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,#C9A35F 16%,#F6E5B4 50%,#C9A35F 84%,transparent);
  box-shadow:0 0 18px rgba(232,200,116,.6)}
.t-luz{inset:0;opacity:0;
  background:radial-gradient(62% 52% at 50% 50%,#F0E6CE 0%,#E7DABD 42%,rgba(203,183,148,.35) 75%,rgba(203,183,148,0) 100%)}

/* la bóveda celeste: el reloj astral de Evernoth, grande, girando despacio */
.t-cielo{position:absolute;left:50%;top:50%;width:var(--t-cielo);height:var(--t-cielo);
  margin:calc(var(--t-cielo) / -2) 0 0 calc(var(--t-cielo) / -2)}
.t-cielo>div{width:100%;height:100%}
.t-cielo svg{animation:t-gira 48s linear infinite}
.t-cielo .casas{animation:t-gira-al 31s linear infinite}
.t-cielo .nucleo{animation:t-gira 13s linear infinite}
.t-cielo .titila{animation:t-titila 4s ease-in-out infinite alternate}
.t-cielo .halo{animation:t-late 2.6s ease-in-out infinite alternate}
.t-logo{position:absolute;left:50%;top:50%;width:min(64vmin,500px);transform:translate(-50%,-50%)}
.t-logo span{display:block;position:relative;opacity:0}
.t-logo span::before{content:"";position:absolute;inset:-35% -12%;z-index:-1;
  background:radial-gradient(closest-side,rgba(7,7,10,.8),rgba(7,7,10,0))}
.t-logo img{display:block;width:100%;filter:drop-shadow(0 0 18px rgba(232,200,116,.4))}

@keyframes t-gira{to{transform:rotate(360deg)}}
@keyframes t-gira-al{to{transform:rotate(-360deg)}}
@keyframes t-titila{from{opacity:.15}to{opacity:.85}}
@keyframes t-late{from{opacity:.55}to{opacity:1}}
@keyframes t-aparece{from{opacity:0}to{opacity:1}}
@keyframes t-desaparece{from{opacity:1}to{opacity:0}}

/* ── 1 · cierre y carga ── */
.cubre .t-arriba i{animation:t-cierra-arriba .52s cubic-bezier(.5,0,.2,1) both}
.cubre .t-abajo i{animation:t-cierra-abajo .52s cubic-bezier(.5,0,.2,1) both}
@keyframes t-cierra-arriba{from{transform:translateY(-100%)}to{transform:none}}
@keyframes t-cierra-abajo{from{transform:translateY(100%)}to{transform:none}}
/* la vara se enciende al juntarse las hojas y, cuando llega la bóveda, se queda en un brillo tenue (no la parte) */
.cubre .t-vara i{animation:t-enciende-vara 1.3s ease-out .44s both}
@keyframes t-enciende-vara{from{opacity:0;transform:scaleX(.2)}14%{opacity:1;transform:none;filter:brightness(1.7)}
  40%{opacity:.9;filter:none}to{opacity:.16}}
.cubre .t-hoja i::after{animation:t-filo 1.2s ease .5s both}
@keyframes t-filo{from{opacity:1}30%{opacity:1}to{opacity:.14}}
.cubre .t-cielo>div{animation:t-llega 1.05s var(--t-curva) .36s both}
@keyframes t-llega{from{opacity:0;transform:scale(.8) rotate(-26deg)}to{opacity:1;transform:none}}
.cubre .t-cielo .aro{animation:t-dibuja 1.1s var(--t-curva) .4s both}
@keyframes t-dibuja{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* la aguja busca su signo: ease-out con un pequeño rebote, nunca lineal */
.cubre .t-cielo .aguja{animation:t-busca 1.25s cubic-bezier(.22,.8,.26,1) .62s both}
@keyframes t-busca{from{opacity:0;transform:rotate(-70deg)}12%{opacity:1}75%{transform:rotate(214deg)}to{opacity:1;transform:rotate(210deg)}}

/* ── 3 · abrir ── */
.revela .t-arriba{animation:t-abre-arriba .62s cubic-bezier(.6,0,.3,1) var(--espera) both}
.revela .t-abajo{animation:t-abre-abajo .62s cubic-bezier(.6,0,.3,1) var(--espera) both}
@keyframes t-abre-arriba{to{transform:translateY(-100%)}}
@keyframes t-abre-abajo{to{transform:translateY(100%)}}
.revela .t-vara{animation:t-apaga .4s ease-in var(--espera) both}
@keyframes t-apaga{60%{opacity:1}to{opacity:0;transform:scaleX(0)}}
/* al salir, el reloj se recoge hacia dentro */
.revela .t-cielo{animation:t-recoge .58s cubic-bezier(.5,0,.75,0) var(--espera) both}
@keyframes t-recoge{to{opacity:0;transform:scale(.55) rotate(-22deg)}}

/* entrar en Evernoth: se enciende el logo en el corazón del reloj y lo atraviesas */
[data-tipo=entra-evernoth].revela .t-logo span{animation:t-logo-paso 1s var(--t-curva) var(--espera) both}
@keyframes t-logo-paso{0%{opacity:0;filter:blur(10px) brightness(.6)}35%{opacity:1;filter:blur(0) brightness(1)}
  72%{opacity:1;transform:none}to{opacity:0;transform:scale(1.14)}}
[data-tipo=entra-evernoth].revela .t-cielo{animation:t-atraviesa .7s cubic-bezier(.55,0,.7,.4) calc(var(--espera) + .34s) both}
@keyframes t-atraviesa{to{opacity:0;transform:scale(2.9)}}
[data-tipo=entra-evernoth].revela :is(.t-arriba,.t-abajo){animation-delay:calc(var(--espera) + .4s)}
[data-tipo=entra-evernoth].revela .t-vara{animation-delay:calc(var(--espera) + .34s)}

/* entrar en un libro: la vara destella, las hojas se abren y la luz del pergamino se posa */
[data-tipo=entra-libro].revela .t-cielo{animation:t-desaparece .36s ease var(--espera) both}
[data-tipo=entra-libro].revela .t-vara{animation:t-destella .34s ease-out var(--espera) both}
@keyframes t-destella{40%{opacity:1;transform:scaleY(3);filter:brightness(1.6)}to{opacity:0;transform:scaleY(8)}}
[data-tipo=entra-libro].revela .t-luz{animation:t-pergamino .88s ease-out var(--espera) both}
@keyframes t-pergamino{from{opacity:0}25%{opacity:.88}to{opacity:0}}

@media (prefers-reduced-motion:reduce){.transito{display:none}}