/* ══════════════════════════════════════
   HYPERSPACE TUNNEL — Ready Player One
   Todo ocurre en el overlay fixed.
   El body NUNCA se mueve ni escala.
══════════════════════════════════════ */

/* ── Contenedor principal ── */
#hyperspace {
    position: fixed;
    inset: 0;
    z-index: 99998;
    pointer-events: none;
    visibility: hidden;
    /* overflow oculto para que NADA se salga de pantalla */
    overflow: hidden;
}
#hyperspace.active {
    visibility: visible;
    pointer-events: all;
}

/* ── Canvas de líneas de velocidad ── */
#hyperCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Snapshot del viewport que hace el zoom ──
   Es un div fixed que captura visualmente la página
   mediante una copia escalada, sin tocar el DOM real. */
#hyperPage {
    position: absolute;
    inset: 0;
    /* La imagen de la página se inyecta como background desde JS */
    background-size: cover;
    background-position: top center;
    transform-origin: 50% 50%;
    will-change: transform, filter, opacity;
    opacity: 0;
}
#hyperPage.zoom-out {
    animation: portalZoomOut 0.72s cubic-bezier(0.22, 0, 0.9, 0.6) forwards;
}
@keyframes portalZoomOut {
    0%   { opacity:1; transform: scale(1);   filter: blur(0px)  brightness(1);   }
    25%  { opacity:1; transform: scale(1.8); filter: blur(0px)  brightness(1.05);}
    55%  { opacity:1; transform: scale(6);   filter: blur(3px)  brightness(1.4); }
    80%  { opacity:1; transform: scale(22);  filter: blur(10px) brightness(2.2); }
    100% { opacity:0; transform: scale(50);  filter: blur(24px) brightness(5);   }
}

/* ── Túnel de luz en el centro ── */
#hyperTunnel {
    position: absolute;
    inset: 0;
    /* anillo central que crece */
    background: radial-gradient(ellipse at 50% 50%,
        rgba(255,255,255,0)    0%,
        rgba(255,255,255,0)    12%,
        rgba(122,102,82,0.08) 30%,
        rgba(10,8,6,0.6)      60%,
        rgba(10,8,6,0.98)     100%
    );
    opacity: 0;
}
#hyperTunnel.active {
    animation: tunnelPulse 0.72s ease-in forwards;
}
@keyframes tunnelPulse {
    0%   { opacity: 0; }
    15%  { opacity: 0.4; }
    70%  { opacity: 1; }
    100% { opacity: 1; }
}

/* ── Flash blanco cegador ── */
#hyperFlash {
    position: absolute;
    inset: 0;
    background: #fdfcfa;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}
#hyperFlash.bang {
    animation: flashBang 0.38s ease-out forwards;
}
@keyframes flashBang {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ── Cortina negra de entrada ──
   Cubre todo y se retira revelando la página desde arriba */
#hyperCurtain {
    position: fixed;
    inset: 0;
    z-index: 99997;
    background: #0a0806;
    pointer-events: none;
    /* Oculta por defecto con clip-path */
    clip-path: inset(0 0 100% 0);
}
#hyperCurtain.cover {
    /* Cubre toda la pantalla instantáneamente */
    clip-path: inset(0 0 0 0);
    transition: none;
}
#hyperCurtain.reveal {
    animation: curtainReveal 0.65s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes curtainReveal {
    0%   { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 100% 0); }
}

/* ── Streak de velocidad sobre la cortina ── */
#hyperCurtain.reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(255,255,255,0.18) 0%,
        transparent 30%
    );
    animation: streakFade 0.65s ease-out forwards;
}
@keyframes streakFade {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}