:root {
    --primary-bg: #05070A;
    --secondary-bg: #0B0F14;
    --dark-charcoal: #151A20;
    --metallic-silver: #C9CDD2;
    --white: #FFFFFF;
    --primary-orange: #FF6A00;
    --bright-orange: #FF8A00;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    font-family: 'Outfit', sans-serif;
    background-color: var(--primary-bg);
    color: var(--white);
    overflow: hidden; 
    width: 100vw;
    height: 100vh;
}

/* Intro Overlay */
#intro-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: #000;
    z-index: 9999;
}

/* Background Effects */
#ambient-background {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 65%, var(--secondary-bg) 0%, var(--primary-bg) 100%);
}

.city-skyline {
    position: absolute;
    bottom: 30%; left: 0; width: 100%; height: 40%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="200"><path d="M0 200 L0 150 L20 150 L20 180 L40 180 L40 120 L60 120 L60 140 L80 140 L80 90 L100 90 L100 160 L120 160 L120 110 L150 110 L150 170 L180 170 L180 80 L220 80 L220 130 L250 130 L250 100 L280 100 L280 150 L310 150 L310 120 L350 120 L350 160 L380 160 L380 70 L420 70 L420 140 L450 140 L450 110 L480 110 L480 170 L510 170 L510 90 L550 90 L550 150 L580 150 L580 130 L610 130 L610 180 L640 180 L640 100 L680 100 L680 160 L710 160 L710 120 L750 120 L750 150 L780 150 L780 190 L800 190 L800 200 Z" fill="%230B0F14" opacity="0.5"/></svg>') repeat-x;
    background-size: contain; z-index: 0;
}

.road-grid {
    position: absolute;
    bottom: -30%; left: -50%; width: 200%; height: 70%;
    background-image: 
        linear-gradient(rgba(255, 106, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 106, 0, 0.05) 1px, transparent 1px);
    background-size: 80px 40px;
    transform: perspective(600px) rotateX(78deg);
    z-index: 1;
}

.road-wet-reflection {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 35%;
    background: linear-gradient(to top, var(--dark-charcoal) 0%, transparent 100%);
    z-index: 2;
}

.vignette {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    box-shadow: inset 0 0 250px rgba(5,7,10,0.95); z-index: 10;
}

.occasional-light-streak {
    position: absolute; top: 40%; left: -20%; width: 250px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--bright-orange), transparent);
    box-shadow: 0 0 25px 5px var(--primary-orange);
    opacity: 0; transform: skewX(-45deg); z-index: 3;
}

/* Particles */
.sparks-container, .embers-container {
    position: absolute; width: 100%; height: 100%; z-index: 2; pointer-events: none;
}

/* Smoke/Fog */
.fog {
    position: absolute; width: 200%; height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><filter id="f"><feTurbulence type="fractalNoise" baseFrequency="0.006" numOctaves="3" result="noise"/><feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.3 0" in="noise" result="coloredNoise"/></filter><rect width="100%" height="100%" filter="url(%23f)"/></svg>') repeat-x;
    opacity: 0.25; mix-blend-mode: screen; z-index: 1; pointer-events: none;
}
.fog.layer-1 { bottom: -15%; animation: fogMove 100s linear infinite; }
.fog.layer-2 { bottom: -5%; opacity: 0.15; transform: scale(1.8); animation: fogMove 70s linear infinite reverse; }

@keyframes fogMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Main Layout */
.poster-layout {
    position: relative; width: 100%; height: 100%; z-index: 2;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 3vh 4vw;
}

/* Header */
.poster-header { text-align: center; z-index: 5; flex-shrink: 0; margin-top: -2vh; }
.logo-box { 
    height: 120px; display: inline-flex; justify-content: center; align-items: center; 
    margin-bottom: 10px; padding: 10px 30px;
    background: rgba(255, 255, 255, 0.7); border-radius: 15px;
    backdrop-filter: blur(8px); box-shadow: 0 5px 20px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
}
.brand-logo { 
    max-height: 100%; max-width: 350px; object-fit: contain; 
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.6)) brightness(1.2);
}

.company-name { font-size: 1.5rem; font-weight: 800; letter-spacing: 10px; color: var(--white); text-transform: uppercase; margin-top: 10px; }
.tagline { font-size: 0.75rem; font-weight: 300; letter-spacing: 6px; color: var(--metallic-silver); margin-top: 5px; }

/* Center Typography */
.poster-center { text-align: center; z-index: 4; flex-shrink: 0; margin-top: 1vh; pointer-events: none;}
.coming-soon-title {
    font-size: 9vw; font-weight: 900; line-height: 0.85; text-transform: uppercase; position: relative; z-index: 2;
}
.maintenance-mode-title {
    font-size: 3vw; line-height: 1.1; margin-top: 2vh;
}
.maintenance-mode-title .coming { font-size: 2.2vw; }
.coming {
    background: linear-gradient(110deg, #FFFFFF 10%, var(--metallic-silver) 40%, #ffffff 50%, var(--metallic-silver) 60%, #555 90%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 40px rgba(0,0,0,0.8);
    animation: shineText 5s linear infinite;
}
.soon {
    background: linear-gradient(110deg, var(--bright-orange) 10%, var(--primary-orange) 40%, #ffffff 50%, var(--primary-orange) 60%, var(--bright-orange) 90%);
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    text-shadow: 0 0 50px rgba(255,106,0,0.5);
    animation: shineText 5s linear infinite;
    animation-delay: 2.5s;
}

@keyframes shineText {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.sub-headline-box {
    display: inline-block; background: rgba(11,15,20,0.7);
    border: 1px solid rgba(255,106,0,0.3); border-radius: 4px; padding: 15px 30px;
    margin-top: 3vh; box-shadow: 0 0 20px rgba(255,106,0,0.1); backdrop-filter: blur(5px);
}
.big-news { font-size: 1.1rem; font-weight: 600; letter-spacing: 6px; color: var(--white); }
.sub-news { font-size: 0.85rem; color: var(--metallic-silver); line-height: 1.6; margin-top: 8px; font-weight: 400; letter-spacing: 2px; }

/* Category Row */
.category-line {
    margin-top: 3vh; font-size: 0.9rem; font-weight: 600; letter-spacing: 4px; color: var(--metallic-silver);
    display: flex; justify-content: center; align-items: center; gap: 25px; flex-wrap: wrap; z-index: 5; position: relative;
}
.cat-item { display: flex; align-items: center; gap: 8px; }
.cat-item .icon { width: 20px; height: 20px; color: var(--primary-orange); }
.category-line .divider { width: 1px; height: 15px; background: var(--primary-orange); opacity: 0.4; }

/* Vehicle Stage */
.vehicle-stage {
    flex-grow: 1; position: relative; width: 100%; display: flex; justify-content: center; align-items: flex-end;
    z-index: 3; perspective: 1200px; padding-bottom: 2vh;
}
.vehicle-lineup {
    display: flex; justify-content: center; align-items: flex-end; width: 100%; max-width: 1600px; position: relative;
    transform-style: preserve-3d; height: 100%;
}

.vehicle-item {
    position: absolute; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
    transform-style: preserve-3d; cursor: pointer;
}

.vehicle-body {
    position: relative; width: 100%; display: flex; justify-content: center; align-items: flex-end; z-index: 2;
    overflow: hidden; /* For light sweep */
    transform-style: preserve-3d;
}

/* Magic Blending - FIXED TO REMOVE JPEG BOXES */
.blend-mode-lighten {
    width: 100%; height: auto; object-fit: contain; transform-origin: bottom center;
    mix-blend-mode: screen; 
    filter: contrast(1.4) brightness(0.85); /* Crush near-blacks to pure black to remove box artifact */
    /* Add a radial mask to feather out the edges smoothly */
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 75%);
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 75%);
}

/* Ground shadow */
.ground-shadow {
    position: absolute; bottom: -5px; width: 80%; height: 15px; background: rgba(0,0,0,0.9); border-radius: 50%; filter: blur(8px); z-index: 1;
}

/* ==== COMPOSITION TWEAKS (PERFECT BALANCE) ==== */
/* Scooty: Foreground, Left-Center */
.v-scooty { width: 18%; left: 16%; bottom: -4%; z-index: 3; }
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none;
}
.vehicle-item { position: absolute; display: flex; flex-direction: column; align-items: center; pointer-events: auto; transform-origin: bottom center; }
.vehicle-body { position: relative; width: 100%; }
.vehicle-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.8)); transform-origin: bottom center; }
.blend-mode-lighten { mix-blend-mode: lighten; }

/* Far-Left: Motorbike */
.v-motorbike { width: 20%; left: 0%; bottom: 4%; z-index: 2; }
.v-motorbike .blend-mode-lighten { filter: contrast(1.3) brightness(0.9); -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 80%); }
.v-motorbike .ground-shadow { width: 85%; height: 20px; bottom: -5px; filter: blur(10px); }

/* Mid-Left: Scooty */
.v-scooty { width: 22%; left: 14%; bottom: 0%; z-index: 3; }
.v-scooty .blend-mode-lighten { filter: contrast(1.3) brightness(1.1); -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 80%); }
.v-scooty .ground-shadow { width: 90%; height: 20px; bottom: -8px; filter: blur(12px); }

/* Center: Hero Car */
.v-car { width: 46%; left: 50%; transform: translateX(-50%); bottom: -6%; z-index: 4; }
.v-car .blend-mode-lighten { -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 90%); }
.v-car .ground-shadow { width: 90%; height: 25px; bottom: -10px; filter: blur(12px); }

/* Mid-Right: Truck */
.v-truck1 { width: 23%; right: 14%; bottom: 3%; z-index: 2; }
.v-truck1 .blend-mode-lighten { filter: contrast(1.4) brightness(0.9); -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 80%); }
.v-truck1 .ground-shadow { width: 95%; height: 20px; bottom: -8px; filter: blur(12px); }

/* Far-Right: Bus */
.v-bus { width: 26%; right: -2%; bottom: -2%; z-index: 3; }
.v-bus .blend-mode-lighten { filter: contrast(1.4) brightness(1.1); -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 85%); }
.v-bus .ground-shadow { width: 95%; height: 25px; bottom: -12px; filter: blur(15px); }


/* ==== LIGHT SWEEPS ==== */
.light-sweep {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg); z-index: 3; pointer-events: none; mix-blend-mode: overlay; opacity: 0;
}
.car-light-sweep { background: linear-gradient(to right, transparent, rgba(255,106,0,0.5), transparent); }

/* ==== HEADLIGHTS & REFLECTIONS ==== */
.headlight-glow {
    position: absolute; background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, transparent 65%);
    opacity: 0; mix-blend-mode: screen; filter: blur(10px); z-index: 4; pointer-events: none;
}
.v-car .left { width: 180px; height: 180px; left: 18%; top: 48%; }
.v-car .right { width: 180px; height: 180px; right: 18%; top: 48%; }
.v-scooty .center { width: 120px; height: 120px; left: 50%; transform: translateX(-50%); top: 30%; background: radial-gradient(circle, rgba(255,106,0,0.8) 0%, transparent 65%); }
.v-motorbike .small { width: 100px; height: 100px; left: 60%; top: 30%; }
.v-truck1 .center { width: 250px; height: 250px; left: 50%; transform: translateX(-50%); top: 60%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 65%); }
.v-bus .left { width: 150px; height: 150px; left: 20%; top: 60%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 65%); }
.v-bus .right { width: 150px; height: 150px; right: 20%; top: 60%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 65%); }

.marker-lights {
    position: absolute; top: 12%; left: 50%; transform: translateX(-50%); width: 45%; height: 20px;
    display: flex; justify-content: space-between; align-items: center; z-index: 4; pointer-events: none;
}
.marker-lights .dot {
    width: 12px; height: 12px; background: var(--bright-orange); border-radius: 50%;
    box-shadow: 0 0 15px var(--primary-orange); opacity: 0;
}

/* Floor Reflections - Responsive to hover */
.floor-reflection {
    position: absolute; bottom: -12%; width: 80%; height: 25%;
    background: radial-gradient(ellipse at center, rgba(255,106,0,0.4) 0%, transparent 70%);
    opacity: 0.4; filter: blur(15px); z-index: 0; pointer-events: none; transform: scaleY(0.8);
}
.floor-reflection.intense { background: radial-gradient(ellipse at center, rgba(255,255,255,0.2) 0%, transparent 80%); width: 100%; bottom: -15%; }
.floor-reflection.massive { background: radial-gradient(ellipse at center, rgba(255,106,0,0.2) 0%, transparent 80%); width: 110%; bottom: -10%; }


/* ==== FOOTER ==== */
.poster-footer {
    display: flex; justify-content: space-between; align-items: flex-end; z-index: 5; flex-shrink: 0; padding-bottom: 10vh; pointer-events: none;
}
.footer-left, .footer-center, .footer-right { pointer-events: auto; }
.footer-center { display: flex; justify-content: center; align-items: flex-end; flex-grow: 1; padding-bottom: 5px; }
.countdown-container {
    background: rgba(11,15,20,0.7); border: 1px solid rgba(255,106,0,0.3); border-radius: 8px; padding: 15px 25px; box-shadow: 0 0 20px rgba(255,106,0,0.05); backdrop-filter: blur(5px);
}
.time-label { font-size: 0.75rem; letter-spacing: 5px; color: var(--primary-orange); margin-bottom: 8px; font-weight: 600; text-transform: uppercase;}
.countdown { display: flex; gap: 12px; align-items: center; }
.time-box { display: flex; flex-direction: column; align-items: center; }
.time-box span:first-child { font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--white); }
.time-box .label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 2px; color: var(--primary-orange); margin-top: 4px; }
.time-box.separator { font-size: 1.5rem; font-weight: 800; color: var(--metallic-silver); padding: 0 2px; }

/* Notify Section */
.notify-section { display: flex; flex-direction: column; align-items: flex-end; text-align: right;}
.notify-section p { font-size: 1rem; letter-spacing: 4px; color: var(--white); margin-bottom: 5px; }
.notify-section .highlight { color: var(--primary-orange); }
.notify-sub { font-size: 0.8rem !important; color: var(--metallic-silver) !important; letter-spacing: 1px !important; margin-bottom: 15px !important;}
.input-group { display: flex; background: rgba(5,7,10,0.8); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 4px; pointer-events: auto;}
#email-input { background: transparent; border: none; color: var(--white); padding: 12px 20px; font-family: inherit; font-size: 0.95rem; outline: none; width: 250px; }
.btn-notify { background: var(--primary-orange); color: var(--white); border: none; border-radius: 4px; padding: 12px 25px; font-weight: 600; cursor: pointer; transition: 0.3s; letter-spacing: 1.5px; }
.btn-notify:hover { background: var(--bright-orange); box-shadow: 0 0 20px var(--primary-orange); }

/* Footer Bottom */
.footer-bottom {
    position: absolute; bottom: 2vh; left: 4vw; right: 4vw;
    display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 15px; pointer-events: auto;
}
.company-contact-info {
    font-size: 0.75rem; color: var(--metallic-silver); line-height: 1.8; letter-spacing: 1px; text-align: left;
}
.company-contact-info a { color: var(--bright-orange); text-decoration: none; transition: color 0.3s; }
.company-contact-info a:hover { color: var(--white); }

.socials { display: flex; align-items: center; gap: 15px; font-size: 0.75rem; letter-spacing: 2px; color: var(--metallic-silver); }
.social-icon { width: 16px; height: 16px; transition: 0.3s; color: var(--metallic-silver); }
.socials a:hover .social-icon { color: var(--primary-orange); filter: drop-shadow(0 0 5px var(--primary-orange)); }

/* Responsive */
@media (max-width: 1200px) {
    .coming-soon-title { font-size: 10vw; }
    .v-motorbike { width: 20%; left: 2%; }
    .v-scooty { width: 22%; left: 18%; }
    .v-car { width: 45%; left: 55%; }
    .v-truck1 { width: 25%; right: 20%; }
    .v-bus { width: 33%; right: -2%; }
}

@media (max-width: 900px) {
    .poster-footer { flex-direction: column; align-items: center; gap: 30px; padding-bottom: 6vh; }
    .footer-left, .footer-center, .footer-right { width: 100%; display: flex; justify-content: center; text-align: center; }
    .notify-section { align-items: center; text-align: center; }
    .footer-bottom { flex-direction: column; gap: 10px; }
}

@media (max-width: 768px) {
    /* Enable Scrolling */
    html, body { overflow-y: auto !important; height: auto !important; }
    .main-container { height: auto !important; min-height: 100vh; overflow-y: auto; overflow-x: hidden; }
    .poster-layout { height: auto; min-height: 100vh; justify-content: flex-start; gap: 40px; padding-bottom: 40px; }
    
    /* Header & Logo */
    .logo-box { height: 100px; padding: 10px 20px; margin-bottom: 15px; }
    .brand-logo { max-width: 250px; }
    .company-name { font-size: 1.2rem; letter-spacing: 6px; }
    .tagline { font-size: 0.6rem; letter-spacing: 4px; }
    
    /* Center Typography */
    .poster-center { margin-top: 0; pointer-events: auto; }
    .coming-soon-title { font-size: 18vw; line-height: 0.9; }
    .maintenance-mode-title { font-size: 6vw; line-height: 1.2; margin-top: 10px; }
    .maintenance-mode-title .coming { font-size: 4.5vw; }
    
    /* Convert Absolute Vehicles to Relative Block for Stacking */
    .vehicle-stage { position: relative; height: 350px; width: 100%; top: auto; left: auto; z-index: 1; pointer-events: none; margin-top: -20px; margin-bottom: -20px; }
    .v-motorbike { width: 30%; left: 0%; bottom: 5%; }
    .v-scooty { width: 35%; left: 20%; bottom: 0%; }
    .v-car { width: 75%; left: 50%; bottom: -5%; }
    .v-truck1 { width: 35%; right: 18%; bottom: 12%; }
    .v-bus { width: 50%; right: -15%; bottom: 5%; }
    
    /* Footer Stacking */
    .poster-footer { position: relative; padding-bottom: 0; gap: 30px; z-index: 10; margin-top: 20px; }
    .countdown-timer { justify-content: center; gap: 15px; }
    .time-unit { min-width: 50px; }
    .category-line { flex-wrap: wrap; justify-content: center; gap: 15px; line-height: 1.8; margin-bottom: 10px; }
    
    /* Footer Bottom (Address) */
    .footer-bottom { 
        position: relative; bottom: auto; left: auto; right: auto; 
        flex-direction: column; align-items: center; text-align: center; gap: 20px; 
        padding-top: 20px; margin-top: 10px; 
    }
    .company-contact-info { text-align: center; font-size: 0.7rem; line-height: 1.6; }
    .socials { justify-content: center; width: 100%; }
}