/* CINEMATIC LOADER — FULL TESTING VERSION */
html.cinematic-active {
    overflow-y: scroll;
}

body, html {
    background: black;
}

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

:root {
    --bgImg: url("../loading/background.jpg");
    --relayImg: url("../loading/relaybig.png");
}

/* Wrapper */
#cinematic-loader {
    position: fixed;
    inset: 0;
    z-index: 99999990;
    opacity: 0.0001;
    visibility: visible;
    pointer-events: auto;
    background: black !important;
    transition: opacity 0.4s ease;
}

#cinematic-loader.fade-in {
    opacity: 1;
}

#cinematic-loader .c-bg {
    position: absolute;
}

/* Background */
.c-bg {
    position: absolute;
    width: 1920px;
    height: 1080px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: var(--bgImg);
    background-size: 1920px 1080px;
    background-repeat: no-repeat;
    background-position: center;
    will-change: opacity, transform;
    z-index: 1;
}

/* Relay */
.c-relay {
    width: 900px;
    height: 900px;
    background-image: var(--relayImg);
    background-repeat: no-repeat;
    background-size: 900px 900px;
    background-position: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* Orb */
.c-orb {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255,255,255,1) 0%,
        rgba(200,240,255,1) 22%,
        rgba(150,220,255,0.55) 45%,
        rgba(120,200,255,0.25) 65%,
        rgba(0,0,0,0) 85%
    );
    animation: orbPulse 2.2s ease-in-out infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

/* Electric FX */
.c-electric {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 4;

    background:
        radial-gradient(circle at 20% 30%, rgba(0,180,255,1) 0%, transparent 18%),
        radial-gradient(circle at 75% 25%, rgba(0,220,255,1) 0%, transparent 20%),
        radial-gradient(circle at 30% 80%, rgba(0,200,255,1) 0%, transparent 15%),
        radial-gradient(circle at 70% 75%, rgba(0,240,255,1) 0%, transparent 17%);

    mix-blend-mode: screen;
    opacity: 0.9;
    animation: electricFlicker 0.07s infinite steps(2);
}

/* Ring */
.c-ring {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid #4a4a4a;
    background:
        conic-gradient(
            from 0deg,
            #8a8a8a 0deg,   #b0b0b0 12deg,
            #707070 12deg,  #9a9a9a 24deg,
            #7c7c7c 24deg,  #b8b8b8 36deg,
            #686868 36deg,  #a2a2a2 48deg,
            #8a8a8a 48deg,  #b0b0b0 60deg,
            #707070 60deg,  #9a9a9a 72deg,
            #7c7c7c 72deg,  #b8b8b8 84deg,
            #686868 84deg,  #a2a2a2 96deg,
            #8a8a8a 96deg,  #b0b0b0 108deg,
            #707070 108deg, #9a9a9a 120deg,
            #7c7c7c 120deg, #b8b8b8 132deg,
            #686868 132deg, #a2a2a2 144deg,
            #8a8a8a 144deg, #b0b0b0 156deg,
            #707070 156deg, #9a9a9a 168deg,
            #7c7c7c 168deg, #b8b8b8 180deg,
            #686868 180deg, #a2a2a2 192deg,
            #8a8a8a 192deg, #b0b0b0 204deg,
            #707070 204deg, #9a9a9a 216deg,
            #7c7c7c 216deg, #b8b8b8 228deg,
            #686868 228deg, #a2a2a2 240deg,
            #8a8a8a 240deg, #b0b0b0 252deg,
            #707070 252deg, #9a9a9a 264deg,
            #7c7c7c 264deg, #b8b8b8 276deg,
            #686868 276deg, #a2a2a2 288deg,
            #8a8a8a 288deg, #b0b0b0 300deg,
            #707070 300deg, #9a9a9a 312deg,
            #7c7c7c 312deg, #b8b8b8 324deg,
            #686868 324deg, #a2a2a2 336deg,
            #8a8a8a 336deg, #b0b0b0 348deg,
            #707070 348deg, #9a9a9a 360deg
        );
    mask: radial-gradient(circle, transparent 55%, black 56%);
    animation: spinring 1.8s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

/* Text */
.c-text {
    position: fixed;
    top: calc(50% + 110px);
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', Impact, 'Segoe UI', sans-serif;
    font-size: 38px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #c8e8ff;
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         0 0 8px rgba(80,140,200,0.4);
    z-index: 6;
    pointer-events: none;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.c-text.fade-out {
    opacity: 0;
}

/* Launch button */
#cinematic-launch-btn {
    position: fixed;
    top: calc(50% + 180px);
    left: 50%;
    transform: translateX(-50%) scale(1);
    padding: 14px 40px;
    font-family: 'Orbitron', Impact, 'Segoe UI', sans-serif;
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: 700;
    color: #c8e8ff;
    background: rgba(10, 40, 80, 0.9);
    border: 2px solid #4aa8ff;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 7;
    opacity: 1;
    transition:
        opacity 0.6s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#cinematic-launch-btn:hover {
    transform: translateX(-50%) scale(1.06);
    box-shadow: 0 0 12px rgba(0, 180, 255, 0.6);
}

#cinematic-launch-btn:active {
    transform: translateX(-50%) scale(0.94);
    box-shadow: 0 0 18px rgba(0, 220, 255, 0.9);
}

#cinematic-launch-btn.fade-out {
    opacity: 0;
}

/* Ship */
#cinematic-ship {
    position: fixed;
    width: auto;
    height: auto;
    right: -350px;
    bottom: -200px;
    z-index: 50;
    opacity: 1;
    transform: rotate(30deg) scale(1.7);
}

/* Ship animation */
@keyframes shipArc {
    0% {
        right: -300px;
        bottom: 0px;
        opacity: 1;
    }
    40% {
        right: 25%;
        bottom: 40%;
        opacity: 1;
    }
    55% {
        right: 48%;
        bottom: 50%;
        opacity: 1;
    }
    65% {
        right: 48%;
        bottom: 50%;
        opacity: 1;
    }
    70% {
        right: 48%;
        bottom: 50%;
        opacity: 1;
    }
    80% {
        right: 48%;
        bottom: 50%;
        transform: rotate(45deg) scale(1.7);
        opacity: 1;
    }
    100% {
        right: 120%;
        bottom: 110%;
        opacity: 1;
    }
}

/* Flash */
#cinematic-flash {
    position: fixed;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    pointer-events: none;
    z-index: 100000000;
}

/* Warp tunnel */
#warp-tunnel {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center,
        rgba(0,150,255,0.4) 0%,
        rgba(0,80,180,0.6) 40%,
        rgba(0,20,60,1) 100%
    );
    opacity: 0;
    z-index: 999999999;
    pointer-events: none;
    transform: scale(1.4);
}

@keyframes warpExpand {
    0%   { opacity: 0; transform: scale(1.4); }
    100% { opacity: 1; transform: scale(3.5); }
}

/* Relay charge */
@keyframes relayCharge {
    0%   { filter: brightness(1) saturate(1); }
    50%  { filter: brightness(1.6) saturate(1.8); }
    100% { filter: brightness(2.2) saturate(2.4); }
}

.c-orb.charge,
.c-electric.charge {
    animation: relayCharge 0.6s ease-in-out forwards;
}

/* Camera shake */
@keyframes camShake {
    0%   { transform: translate(0px, 0px); }
    20%  { transform: translate(2px, -2px); }
    40%  { transform: translate(-3px, 1px); }
    60%  { transform: translate(3px, 2px); }
    80%  { transform: translate(-2px, -1px); }
    100% { transform: translate(0px, 0px); }
}

#cinematic-loader.shake {
    animation: camShake 0.12s infinite;
}

/* Orb pulse */
@keyframes orbPulse {
    0%   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
    12%  { transform: translate(-50%, -50%) scale(1.18); opacity: 0.85; }
    25%  { transform: translate(-50%, -50%) scale(1.05); opacity: 0.95; }
    38%  { transform: translate(-50%, -50%) scale(1.22); opacity: 0.75; }
    52%  { transform: translate(-50%, -50%) scale(1.10); opacity: 0.9; }
    67%  { transform: translate(-50%, -50%) scale(1.25); opacity: 0.7; }
    82%  { transform: translate(-50%, -50%) scale(1.08); opacity: 0.92; }
    100% { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}

/* Electric flicker */
@keyframes electricFlicker {
    0%   { transform: translate(-50%, -50%) scale(1.05) rotate(0deg);   opacity: 0.55; }
    25%  { transform: translate(-50%, -50%) scale(1.22) rotate(18deg);  opacity: 1; }
    50%  { transform: translate(-50%, -50%) scale(0.97) rotate(-12deg); opacity: 0.7; }
    75%  { transform: translate(-50%, -50%) scale(1.18) rotate(32deg);  opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.00) rotate(-20deg); opacity: 0.6; }
}

/* Ring spin */
@keyframes spinring {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

#cinematic-ship.glow {
    filter: drop-shadow(0 0 22px rgba(0,200,255,1))
            drop-shadow(0 0 40px rgba(0,200,255,0.6));
    transition: filter 0.25s ease;
}

/* Engine particle */
.engine-particle {
    position: fixed;
    width: 26px;
    height: 26px;
    border-radius: 50%;

    background: radial-gradient(circle,
        rgba(255,255,255,1) 0%,
        rgba(180,240,255,1) 25%,
        rgba(0,200,255,0.95) 55%,
        rgba(0,160,255,0.55) 75%,
        rgba(0,120,255,0) 100%
    );

    filter: blur(18px);
    pointer-events: none;
    z-index: 100000200;
    opacity: 1;
}