/* =====================================================================
   GTA / LAB LOADER — COMPLETE SCENE (polished rewrite)
   ===================================================================== */

/* ---- Base loader ---- */
.gta-lab-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #07080f;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.9s cubic-bezier(0.8, 0, 0.2, 1), visibility 0.9s;
}
.gta-lab-loader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Hide main header while loading to prevent overlap */
.main-header {
    transition: background-color 0.25s ease-in-out, padding 0.25s ease-in-out, backdrop-filter 0.25s ease-in-out, -webkit-backdrop-filter 0.25s ease-in-out, border-bottom-color 0.25s ease-in-out, opacity 0.25s ease, visibility 0.25s ease !important;
}

body:not(.loaded) .main-header {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ---- Tips Layout ---- */
.loader-tips-container {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 15px;
    pointer-events: none;
    max-width: 400px;
}

.tip-box {
    background: rgba(0, 0, 0, 0.85);
    border-left: 4px solid var(--brand-cyan);
    padding: 15px 20px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-transform: uppercase;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    animation: tipFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

.skip-tip {
    border-left-color: #ffcc00; /* Amber for instructions */
    font-size: 0.8rem;
    padding: 10px 15px;
    animation-delay: 0.5s;
}

.device-tip {
    animation-delay: 1.2s;
}

.tip-box b {
    color: var(--brand-cyan);
}

.tip-box i {
    font-size: 1.2rem;
    color: var(--brand-cyan);
}

.skip-tip i {
    color: #ffcc00;
}

@keyframes tipFadeIn {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 991px) {
    .loader-tips-container {
        top: 20px;
        left: 20px;
        max-width: 85%;
    }
    .tip-box {
        font-size: 0.8rem;
        padding: 10px 15px;
    }
}

/* ---- Siren sweeps — neon pastels ---- */
.siren-light {
    position: absolute;
    width: 200%; height: 200%;
    top: -50%; left: -50%;
    mix-blend-mode: screen;
    animation: sirenSpin 3s linear infinite;
}
.red-siren {
    opacity: 0.1;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255, 80, 120, 0.85) 80deg,
        transparent 160deg
    );
}
.blue-siren {
    opacity: 0.08;
    background: conic-gradient(
        from 180deg at 50% 50%,
        transparent 0deg,
        rgba(80, 180, 255, 0.85) 80deg,
        transparent 160deg
    );
    animation-direction: reverse;
    animation-duration: 4s;
}
@keyframes sirenSpin { to { transform: rotate(360deg); } }

/* ---- Grid overlay ---- */
.gta-lab-loader .grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
}

/* ---- Center logo ---- */
.loader-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-bottom: 160px;
}
.loader-logo {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 2px;
    text-shadow: 0 0 24px rgba(0, 224, 255, 0.35);
    animation: pulseGlow 2s ease-in-out infinite alternate;
}
.loader-flask-img {
    width: 60px; height: 60px;
    filter: drop-shadow(0 0 14px rgba(139, 92, 255, 0.65));
}
/* fallback for old class name */
.loader-flask { width: 60px; height: 60px; filter: drop-shadow(0 0 14px rgba(139, 92, 255, 0.65)); }
.loader-logo b { color: var(--brand-cyan); }

@keyframes pulseGlow {
    0%   { opacity: 0.82; transform: scale(0.98); }
    100% { opacity: 1;    transform: scale(1.02); }
}

/* ---- Icon carousel ---- */
.icon-carousel {
    position: relative;
    height: 60px; width: 60px;
    display: flex; align-items: center; justify-content: center;
}
.icon-slide {
    position: absolute;
    font-size: 3rem;
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    animation: iconCycle 10s infinite;
}
.icon-slide:nth-child(1) { animation-delay: 0s;  color: #ff5586; }
.icon-slide:nth-child(2) { animation-delay: 2s;  color: #00e0ff; }
.icon-slide:nth-child(3) { animation-delay: 4s;  color: #ffe066; }
.icon-slide:nth-child(4) { animation-delay: 6s;  color: #a07aff; }
.icon-slide:nth-child(5) { animation-delay: 8s;  color: #ffffff; }
@keyframes iconCycle {
    0%, 15%  { opacity: 0; transform: scale(0.5) translateY(20px); }
    20%, 35% { opacity: 1; transform: scale(1)   translateY(0);    filter: drop-shadow(0 0 14px currentColor); }
    40%, 100%{ opacity: 0; transform: scale(1.2) translateY(-22px); }
}

/* ====================================================================
   HELICOPTER — direct child of .gta-lab-loader (NOT inside chase-scene)
   ==================================================================== */
.helicopter-wrapper {
    position: absolute;
    top: 18%;
    right: -220px;
    z-index: 9;
    animation: heliPass 8s 0.5s infinite linear;
}
.helicopter {
    font-size: 2.8rem;
    color: #ffaa44;
    filter: drop-shadow(0 0 12px rgba(255, 160, 60, 0.7));
    transform: scaleX(-1);
    display: block;
}
.heli-searchlight {
    position: absolute;
    bottom: -52px; left: 50%;
    width: 3px; height: 56px;
    background: linear-gradient(to bottom, rgba(255,255,200,0.55), transparent);
    border-radius: 2px;
    transform-origin: top center;
    transform: translateX(-50%);
    animation: searchSwing 1.4s ease-in-out infinite alternate;
}
@keyframes searchSwing {
    0%   { transform: translateX(-50%) rotate(-25deg); }
    100% { transform: translateX(-50%) rotate(25deg);  }
}
@keyframes heliPass {
    0%   { right: -220px; }
    45%  { right: calc(100vw + 220px); }
    100% { right: calc(100vw + 220px); }
}

/* ====================================================================
   CHASE SCENE — bottom band, overflow VISIBLE
   ==================================================================== */
.gta-chase-scene {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 220px;
    overflow: visible;
    z-index: 5;
    pointer-events: none;
}

/* ---- Cityscape ---- */
.cityscape {
    position: absolute;
    bottom: 60px; left: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding: 0 12px;
}
.building {
    flex-shrink: 0;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, #0d1018, #141e32);
    border: 1px solid rgba(0,224,255,0.04);
    position: relative;
}
.building::after {
    content: '';
    position: absolute;
    inset: 8px 6px;
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(255,230,100,0.1) 10px, rgba(255,230,100,0.1) 12px),
        repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(255,230,100,0.07) 8px, rgba(255,230,100,0.07) 10px);
}
.b1 { width:55px;  height:100px; }
.b2 { width:40px;  height:70px;  }
.b3 { width:70px;  height:155px; background: linear-gradient(to top, #0d1020, #162040); }
.b4 { width:48px;  height:90px;  }
.b5 { width:65px;  height:130px; }
.b6 { width:38px;  height:65px;  }
.b7 { width:80px;  height:115px; }

/* Blinking antenna on b3 */
.b3::before {
    content: '';
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    width: 3px; height: 12px;
    background: #ff4488;
    border-radius: 2px;
    box-shadow: 0 0 8px #ff4488;
    animation: antBlink 1.3s infinite;
}
@keyframes antBlink {
    0%, 48% { opacity: 1; }
    50%, 100%{ opacity: 0; }
}

/* ---- Lab Flask peeking from behind b3 ---- */
.lab-flask-wrapper {
    position: absolute;
    bottom: 148px;
    left: 220px;
    z-index: 4;
    animation: flaskBob 3s ease-in-out infinite;
}
.lab-flask-icon {
    font-size: 2.4rem;
    color: #9b6fff;
    filter: drop-shadow(0 0 12px rgba(155,111,255,0.75));
    display: block;
}
@keyframes flaskBob {
    0%,100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-14px) rotate(6deg); }
}

/* Chemical fumes */
.chem-elem {
    position: absolute;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 2px 5px;
    border-radius: 4px;
    opacity: 0;
    animation: floatChem 3.2s ease-out infinite;
}
.chem-1 { left: -22px; color: #00e0ff; border: 1px solid rgba(0,224,255,0.25);   animation-delay: 0.1s; }
.chem-2 { left: 12px;  color: #ffe066; border: 1px solid rgba(255,224,80,0.25);  animation-delay: 1s;   font-size: 1.1rem; }
.chem-3 { left: 34px;  color: #a07aff; border: 1px solid rgba(160,122,255,0.25); animation-delay: 1.9s; }
@keyframes floatChem {
    0%   { opacity:0; transform: translateY(0); }
    15%  { opacity:1; }
    80%  { opacity:0.6; transform: translateY(-58px); }
    100% { opacity:0;   transform: translateY(-72px); }
}

/* ---- Road horizon ---- */
.road {
    position: absolute;
    bottom: 58px; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,224,255,0.18) 20%, rgba(0,224,255,0.18) 80%, transparent);
}

/* ====================================================================
   CRIMINAL CAR + MONEY (decoupled so money stays on ground)
   ==================================================================== */
.criminal-wrapper {
    position: absolute;
    bottom: 63px; left: 0;
    transform: translateX(-150px); /* Start off-screen to avoid flicker */
    animation: driveBy 6s infinite cubic-bezier(0.35, 0, 0.9, 1);
}
.criminal-car {
    font-size: 3rem;
    color: #ff4466;
    filter: drop-shadow(0 0 10px rgba(255,60,90,0.45));
    display: block;
}

/* Money bills — now outside the wrapper in HTML, so they stay stationary */
.money {
    position: absolute;
    font-size: 1.3rem;
    color: #3ddc84;
    filter: drop-shadow(0 0 6px rgba(61,220,132,0.6));
    opacity: 0;
    bottom: 63px;
    animation: dropMoneyStationary 6s infinite;
}

/* We sync these to when the car passes: 
   At 6s duration, car reaches ~25% screen at ~1.2s, ~50% at ~1.8s, ~75% at ~2.5s
*/
.money-1 { left: 25vw; animation-delay: 1.1s; }
.money-2 { left: 50vw; animation-delay: 1.7s; }
.money-3 { left: 75vw; animation-delay: 2.4s; }

@keyframes driveBy {
    0%   { transform: translateX(-150px); }
    40%  { transform: translateX(calc(100vw + 150px)); }
    100% { transform: translateX(calc(100vw + 150px)); }
}

@keyframes dropMoneyStationary {
    0%   { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.6); }
    /* Trigger when car passes */
    1%   { opacity: 1; transform: translateY(-30px) rotate(180deg) scale(1.2); }
    10%  { opacity: 1; transform: translateY(0) rotate(360deg) scale(1); }
    30%  { opacity: 0; transform: translateY(0) rotate(360deg) scale(1); }
    100% { opacity: 0; }
}

/* ====================================================================
   POLICE CAR — brand cyan
   ==================================================================== */
.police-wrapper {
    position: absolute;
    bottom: 63px; left: 0;
    transform: translateX(-150px); /* Start off-screen to avoid flicker */
    animation: driveBy 6s 0.65s infinite cubic-bezier(0.35, 0, 0.9, 1);
}
.police-car {
    font-size: 3.2rem;
    color: var(--brand-cyan);
    filter: drop-shadow(0 0 14px rgba(0,224,255,0.5));
    display: block;
}
.police-siren-bar {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-bottom: 3px;
}
.siren-dot {
    width: 7px; height: 5px;
    border-radius: 3px;
}
.s1 { background: #ff5586; box-shadow: 0 0 8px #ff5586; animation: sirenDot 0.4s 0s    infinite alternate; }
.s2 { background: #ffffff; box-shadow: 0 0 6px #fff;    animation: sirenDot 0.4s 0.13s infinite alternate; }
.s3 { background: #50c8ff; box-shadow: 0 0 8px #50c8ff; animation: sirenDot 0.4s 0.26s infinite alternate; }
@keyframes sirenDot {
    0%   { opacity:1;   transform: scaleX(1);   }
    100% { opacity:0.2; transform: scaleX(0.6); }
}

/* ---- Loading text (bottom-right) ---- */
.gta-loading-text {
    position: absolute;
    bottom: 28px; right: 38px;
    display: flex; align-items: center; gap: 14px;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 3px;
    color: #fff;
    z-index: 10;
}
.gta-spinner {
    width: 22px; height: 22px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--brand-cyan);
    border-radius: 50%;
    animation: gtaSpin 1s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
}
@keyframes gtaSpin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .gta-loading-text { bottom: 18px; right: 18px; font-size: 0.95rem; }
    .loader-content { margin-bottom: 130px; }
}