/* ============================================
   TUNNEL.CSS - WARP SPEED NAVIGATION EFFECT
   "I Am Everywhere" - Alicia Mae Foundation
   Star Wars hyperspace style star streaks
   ============================================ */

/* ===== WARP TUNNEL OVERLAY ===== */
.warp-tunnel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    overflow: hidden;
    background: var(--cosmos-deep);
}

    .warp-tunnel-overlay.active {
        opacity: 1;
        visibility: visible;
    }

/* ===== PARTICLE STREAM (STAR LINES) ===== */
.warp-particle-stream {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    transform-origin: center center;
    transform: translate(-50%, -50%) rotate(var(--angle));
}

/* ===== INDIVIDUAL STAR STREAK ===== */
.warp-particle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px;
    height: 80px;
    transform: translateX(-50%);
    background: linear-gradient( to bottom, transparent 0%, var(--holo-pink-bright) 20%, var(--holo-pink-soft) 50%, var(--holo-cyan) 80%, transparent 100% );
    border-radius: 50%;
    box-shadow: 0 0 10px var(--holo-pink-glow), 0 0 20px var(--holo-pink-bright), 0 0 30px rgba(255, 110, 199, 0.3);
    opacity: 0;
    filter: blur(0.5px);
    animation: star-streak-fly 2s linear forwards;
    animation-delay: var(--delay);
}

@keyframes star-streak-fly {
    0% {
        transform: translateX(-50%) translateY(0) scaleY(0.1);
        opacity: 0;
    }

    5% {
        opacity: 0.3;
    }

    10% {
        transform: translateX(-50%) translateY(-20vh) scaleY(1);
        opacity: 0.8;
    }

    85% {
        opacity: 0.8;
    }

    100% {
        transform: translateX(-50%) translateY(-200vh) scaleY(2.5);
        opacity: 0;
    }
}

/* Color variations for depth */
.warp-particle-stream:nth-child(3n+1) .warp-particle {
    width: 2px;
    height: 60px;
    background: linear-gradient( to bottom, transparent 0%, var(--holo-pink-mid) 30%, var(--holo-pink-soft) 60%, transparent 100% );
    animation-duration: 2.2s;
}

.warp-particle-stream:nth-child(3n+2) .warp-particle {
    width: 4px;
    height: 100px;
    background: linear-gradient( to bottom, transparent 0%, var(--holo-cyan) 20%, var(--holo-purple) 50%, var(--holo-pink-bright) 80%, transparent 100% );
    animation-duration: 1.8s;
    filter: blur(1px);
}

.warp-particle-stream:nth-child(3n) .warp-particle {
    width: 2.5px;
    height: 70px;
    background: linear-gradient( to bottom, transparent 0%, var(--holo-purple) 30%, var(--holo-cyan) 60%, transparent 100% );
    animation-duration: 2s;
}

/* ===== STREAM LAUNCH ANIMATION ===== */
.warp-particle-stream {
    animation: stream-accelerate 2s ease-out forwards;
    animation-delay: var(--delay);
}

@keyframes stream-accelerate {
    0% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scale(1);
    }

    100% {
        transform: translate(-50%, -50%) rotate(var(--angle)) scale(1.5);
    }
}

/* ===== CENTRAL VANISHING POINT GLOW ===== */
.warp-tunnel-overlay::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient( circle, var(--holo-pink-bright) 0%, var(--holo-purple) 40%, transparent 70% );
    box-shadow: 0 0 60px var(--holo-pink-bright), 0 0 120px var(--holo-pink-glow), 0 0 180px rgba(255, 110, 199, 0.3);
    opacity: 0;
}

.warp-tunnel-overlay.active::before {
    animation: vanishing-point-glow 2s ease-out forwards;
}

@keyframes vanishing-point-glow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

/* ===== TUNNEL RING EFFECT ===== */
.warp-tunnel-overlay::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--holo-pink-bright);
    box-shadow: 0 0 20px var(--holo-pink-glow), inset 0 0 20px var(--holo-pink-glow);
    opacity: 0;
}

.warp-tunnel-overlay.active::after {
    animation: tunnel-ring-expand 2s ease-out infinite;
}

@keyframes tunnel-ring-expand {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    30% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(20);
    }
}

/* ===== MOTION BLUR OVERLAY ===== */
.warp-tunnel-overlay.active {
    animation: tunnel-motion-blur 2s ease-in-out forwards;
}

@keyframes tunnel-motion-blur {
    0% {
        filter: blur(0px) brightness(1);
    }

    20% {
        filter: blur(1px) brightness(1.1);
    }

    50% {
        filter: blur(2px) brightness(1.2);
    }

    80% {
        filter: blur(3px) brightness(1.3);
    }

    100% {
        filter: blur(4px) brightness(1.4);
    }
}

/* ===== EDGE VIGNETTE ===== */
.warp-particle-stream::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient( ellipse at center, transparent 30%, rgba(10, 14, 39, 0.3) 60%, rgba(10, 14, 39, 0.8) 100% );
    pointer-events: none;
    opacity: 0;
}

.warp-tunnel-overlay.active .warp-particle-stream:first-child::before {
    animation: vignette-fade 2s ease-out forwards;
}

@keyframes vignette-fade {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* ===== SPEED VARIATION FOR DEPTH ===== */
.warp-particle-stream:nth-child(5n+1) .warp-particle {
    animation-duration: 2.4s;
    opacity: 0.6;
}

.warp-particle-stream:nth-child(5n+2) .warp-particle {
    animation-duration: 1.9s;
    opacity: 0.8;
}

.warp-particle-stream:nth-child(5n+3) .warp-particle {
    animation-duration: 2.1s;
    opacity: 0.7;
}

.warp-particle-stream:nth-child(5n+4) .warp-particle {
    animation-duration: 1.7s;
    opacity: 0.9;
}

.warp-particle-stream:nth-child(5n) .warp-particle {
    animation-duration: 2.3s;
    opacity: 0.65;
}

/* ===== RANDOM OFFSET FOR NATURAL LOOK ===== */
.warp-particle-stream:nth-child(7n+1) {
    animation-delay: calc(var(--delay) + 0.05s);
}

.warp-particle-stream:nth-child(7n+2) {
    animation-delay: calc(var(--delay) + 0.02s);
}

.warp-particle-stream:nth-child(7n+3) {
    animation-delay: calc(var(--delay) + 0.08s);
}

.warp-particle-stream:nth-child(7n+4) {
    animation-delay: calc(var(--delay) + 0.01s);
}

.warp-particle-stream:nth-child(7n+5) {
    animation-delay: calc(var(--delay) + 0.04s);
}

.warp-particle-stream:nth-child(7n+6) {
    animation-delay: calc(var(--delay) + 0.06s);
}

.warp-particle-stream:nth-child(7n) {
    animation-delay: calc(var(--delay) + 0.03s);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    .warp-particle {
        height: 60px;
    }

    .warp-particle-stream:nth-child(3n+1) .warp-particle {
        height: 40px;
    }

    .warp-particle-stream:nth-child(3n+2) .warp-particle {
        height: 80px;
    }

    @keyframes star-streak-fly {
        0% {
            transform: translateX(-50%) translateY(0) scaleY(0.1);
            opacity: 0;
        }

        5% {
            opacity: 0.3;
        }

        10% {
            transform: translateX(-50%) translateY(-15vh) scaleY(1);
            opacity: 0.8;
        }

        85% {
            opacity: 0.8;
        }

        100% {
            transform: translateX(-50%) translateY(-150vh) scaleY(2);
            opacity: 0;
        }
    }
}

@media (max-width: 480px) {
    .warp-particle {
        height: 50px;
        width: 2px;
    }

    .warp-particle-stream:nth-child(3n+2) .warp-particle {
        height: 70px;
        width: 3px;
    }
}

/* ===== REDUCED MOTION ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    .warp-tunnel-overlay,
    .warp-particle-stream,
    .warp-particle,
    .warp-tunnel-overlay::before,
    .warp-tunnel-overlay::after {
        animation: warp-simple-fade 1s ease-out forwards !important;
    }

    @keyframes warp-simple-fade {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 0.8;
        }

        100% {
            opacity: 0;
        }
    }
}

/* ===== PRINT (disable entirely) ===== */
@media print {
    .warp-tunnel-overlay {
        display: none !important;
    }
}