/* css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
    --bg-dark: #070708;
    --bg-card: #121214;
    --accent-orange: #f59e0b;
    --accent-cyan: #06b6d4;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    overflow-x: hidden;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, .font-display {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: -0.02em;
}

/* Glassmorphism Styles */
.glass-nav {
    background: rgba(10, 10, 12, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card {
    background: rgba(18, 18, 20, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
    border-color: rgba(245, 158, 11, 0.3);
    box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.15);
    transform: translateY(-4px);
}

/* Carbon Fiber Pattern Background */
.carbon-bg {
    background-color: #0c0c0e;
    background-image: 
        linear-gradient(45deg, #111 25%, transparent 25%), 
        linear-gradient(-45deg, #111 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #111 75%), 
        linear-gradient(-45deg, transparent 75%, #111 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Speedometer Gauge Preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #050507;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s cubic-bezier(0.85, 0, 0.15, 1), visibility 0.8s;
}

.speedometer {
    position: relative;
    width: 260px;
    height: 260px;
}

.gauge-circle {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
}

.gauge-bg {
    stroke: #1e293b;
}

.gauge-fill {
    stroke: url(#gauge-gradient);
    stroke-dasharray: 565.48;
    stroke-dashoffset: 565.48;
    transition: stroke-dashoffset 2.5s cubic-bezier(0.1, 0.8, 0.2, 1);
}

.speedometer-needle {
    position: absolute;
    width: 3px;
    height: 50px;
    background: linear-gradient(to top, var(--accent-orange), #f97316);
    bottom: 50%;
    left: calc(50% - 1.5px);
    transform-origin: bottom center;
    transform: rotate(-120deg);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
    transition: transform 2.5s cubic-bezier(0.1, 0.8, 0.2, 1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: #1f2937;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-orange);
}

/* Before / After Image Comparison Slider */
.ba-slider-container {
    position: relative;
    width: 100%;
    height: 480px;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ba-slider-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
}

.ba-slider-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ba-slider-after {
    z-index: 2;
    width: 50%;
    overflow: hidden;
}

.ba-slider-after img {
    max-width: none;
}

.ba-slider-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background-color: var(--accent-orange);
    z-index: 10;
    cursor: ew-resize;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
}

.ba-slider-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: var(--bg-dark);
    border: 2px solid var(--accent-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-orange);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
    pointer-events: none;
}

.text-glow-orange {
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.text-glow-cyan {
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

.border-glow-orange {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}

.shutter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f59e0b;
    z-index: 9999;
    transform: translateY(100%);
    pointer-events: none;
}

/* Cinematic Video Showcase Styles */
.video-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.video-thumbnail-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-thumbnail-container::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7, 7, 8, 0.9) 0%, rgba(7, 7, 8, 0.2) 60%, rgba(7, 7, 8, 0) 100%);
    z-index: 1;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 64px;
    height: 64px;
    background-color: rgba(245, 158, 11, 0.9);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 2;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.video-card:hover .video-play-btn {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    background-color: rgb(245, 158, 11);
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.6);
}

/* Video Modal Styles */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background-color: rgba(5, 5, 7, 0.95);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-modal.active {
    display: flex;
    opacity: 1;
}

.video-modal-content-wrapper {
    position: relative;
    width: 90%;
    max-width: 960px;
}

.video-modal-content {
    position: relative;
    width: 100%;
    background-color: #121214;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.video-modal.active .video-modal-content {
    transform: scale(1);
}

.video-aspect-ratio {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
}

.video-aspect-ratio iframe,
.video-aspect-ratio video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: #94a3b8;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.video-modal-close:hover {
    color: var(--accent-orange);
}

/* Light Theme Variables & Overrides */
.light-mode {
    --bg-dark: #f8fafc;
    --bg-card: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
}

.light-mode body {
    background-color: var(--bg-dark) !important;
    color: var(--text-primary) !important;
}

/* Override background colors of sections */
.light-mode section,
.light-mode .carbon-bg,
.light-mode section.bg-neutral-950,
.light-mode section.bg-brand-dark {
    background-color: var(--bg-dark) !important;
    border-color: #e2e8f0 !important;
}

.light-mode .carbon-bg {
    background-image: 
        linear-gradient(45deg, #f1f5f9 25%, transparent 25%), 
        linear-gradient(-45deg, #f1f5f9 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #f1f5f9 75%), 
        linear-gradient(-45deg, transparent 75%, #f1f5f9 75%) !important;
    background-size: 20px 20px;
}

/* Glassmorphism light versions */
.light-mode .glass-nav {
    background: rgba(255, 255, 255, 0.8) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.light-mode .glass-card {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04) !important;
    transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.light-mode .glass-card:hover {
    border-color: rgba(245, 158, 11, 0.4) !important;
    box-shadow: 0 10px 30px -10px rgba(245, 158, 11, 0.15) !important;
}

/* Light mode card content container background overrides */
.light-mode .glass-card .bg-neutral-900\/30,
.light-mode .glass-card.bg-neutral-900\/40,
.light-mode .glass-card.bg-neutral-900\/60,
.light-mode .glass-card .bg-neutral-900\/40,
.light-mode .glass-card .bg-neutral-900\/60 {
    background-color: transparent !important;
}

/* Light mode general border color overrides */
.light-mode .border-neutral-900,
.light-mode .border-neutral-800,
.light-mode .border-neutral-850,
.light-mode .border-t,
.light-mode .border-y {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Navigation Links */
.light-mode nav a,
.light-mode header a:not(.bg-brand-orange) {
    color: #334155 !important;
}

.light-mode nav a:hover,
.light-mode header a:not(.bg-brand-orange):hover {
    color: var(--accent-orange) !important;
}

.light-mode nav a.text-brand-orange {
    color: var(--accent-orange) !important;
}

/* Force Text Colors */
.light-mode .text-white,
.light-mode h1,
.light-mode h2,
.light-mode h3,
.light-mode h4,
.light-mode .font-display {
    color: #0f172a !important;
}

.light-mode .text-slate-400,
.light-mode .text-slate-300,
.light-mode .text-slate-500,
.light-mode p {
    color: #475569 !important;
}

/* Brand glows visibility on light background */
.light-mode .text-glow-orange {
    text-shadow: none !important;
    color: #d97706 !important;
}

.light-mode .text-glow-cyan {
    text-shadow: none !important;
    color: #0891b2 !important;
}

.light-mode .border-glow-orange {
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.08) !important;
}

/* Interactive slider container border */
.light-mode .ba-slider-container {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Preloader styling in light mode */
.light-mode #preloader {
    background-color: #050507 !important;
}
.light-mode #preloader #speed-value {
    color: #ffffff !important;
}
.light-mode #preloader h3 {
    color: var(--accent-orange) !important;
}

/* Footer Contrast (Keeping footer dark matches luxury brand designs perfectly) */
.light-mode footer {
    background-color: #0c0c0e !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.light-mode footer .text-white,
.light-mode footer h3,
.light-mode footer span,
.light-mode footer a {
    color: #f8fafc !important;
}

.light-mode footer p,
.light-mode footer li a {
    color: #94a3b8 !important;
}

/* Forms & Inputs in Light Mode */
.light-mode input,
.light-mode select,
.light-mode textarea {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Theme Toggle Button Icon toggling */
.light-mode .light-icon {
    display: none;
}
.light-mode .dark-icon {
    display: inline-block !important;
}
html:not(.light-mode) .dark-icon {
    display: none;
}
html:not(.light-mode) .light-icon {
    display: inline-block !important;
}

/* Custom Aiming Reticle Cursor Follower */
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--accent-orange);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
    transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                height 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}

/* Reticle crosshair tick marks */
#custom-cursor::before,
#custom-cursor::after {
    content: '';
    position: absolute;
    background-color: var(--accent-orange);
    transition: background-color 0.3s;
}
#custom-cursor::before {
    width: 6px;
    height: 1px;
}
#custom-cursor::after {
    width: 1px;
    height: 6px;
}

#custom-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: var(--accent-orange);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px var(--accent-orange);
}

/* Expand state on link hover */
#custom-cursor.cursor-expand {
    width: 54px;
    height: 54px;
    border-color: var(--accent-cyan);
    background-color: rgba(6, 182, 212, 0.05);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
}
#custom-cursor.cursor-expand::before,
#custom-cursor.cursor-expand::after {
    background-color: var(--accent-cyan);
}

/* Light Theme Adjustments for Cursor */
.light-mode #custom-cursor {
    border-color: #d97706;
    box-shadow: 0 0 8px rgba(217, 119, 6, 0.3);
}
.light-mode #custom-cursor::before,
.light-mode #custom-cursor::after,
.light-mode #custom-cursor-dot {
    background-color: #d97706;
}
.light-mode #custom-cursor.cursor-expand {
    border-color: #0891b2;
    background-color: rgba(8, 145, 178, 0.05);
    box-shadow: 0 0 15px rgba(8, 145, 178, 0.3);
}
.light-mode #custom-cursor.cursor-expand::before,
.light-mode #custom-cursor.cursor-expand::after {
    background-color: #0891b2;
}

/* Interactive Car Diagnostics SVG Styling */
#car-diagnostics-svg path.car-schematic-path {
    stroke: #334155;
    fill: rgba(30, 41, 59, 0.2);
    cursor: pointer;
    transition: fill 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                stroke 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 0.5s;
}

#car-diagnostics-svg path.car-schematic-path.highlight-cyan {
    fill: rgba(6, 182, 212, 0.35) !important;
    stroke: #06b6d4 !important;
    filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.6));
}

#car-diagnostics-svg path.car-schematic-path.highlight-orange {
    fill: rgba(245, 158, 11, 0.35) !important;
    stroke: #f59e0b !important;
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}

/* Light Theme overrides for Car SVG Diagnostics */
.light-mode #car-diagnostics-svg path:not(.car-schematic-path) {
    stroke: #cbd5e1 !important;
}
.light-mode #car-diagnostics-svg path.car-schematic-path {
    stroke: #cbd5e1;
    fill: rgba(241, 245, 249, 0.6);
}
.light-mode #car-diagnostics-svg path.car-schematic-path.highlight-cyan {
    fill: rgba(6, 182, 212, 0.25) !important;
    stroke: #0891b2 !important;
    filter: drop-shadow(0 0 6px rgba(6, 182, 212, 0.4));
}
.light-mode #car-diagnostics-svg path.car-schematic-path.highlight-orange {
    fill: rgba(245, 158, 11, 0.25) !important;
    stroke: #d97706 !important;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.4));
}
.light-mode .car-base-glow {
    color: #e2e8f0 !important;
}

/* 3D Glass Card Perspective styling */
.glass-card {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Package tab active button styling */
.package-tab-btn {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.package-tab-btn.active {
    border-color: rgba(245, 158, 11, 0.6) !important;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.15) !important;
    background-color: rgba(18, 18, 20, 0.8) !important;
}
.light-mode .package-tab-btn.active {
    background-color: #ffffff !important;
    border-color: rgba(217, 119, 6, 0.6) !important;
    box-shadow: 0 4px 20px rgba(217, 119, 6, 0.1) !important;
}
.package-tab-btn.active span {
    color: var(--accent-orange) !important;
}
.light-mode .package-tab-btn.active span {
    color: #d97706 !important;
}
.package-tab-btn.active i {
    color: var(--accent-orange) !important;
    transform: scale(1.15);
}
.light-mode .package-tab-btn.active i {
    color: #d97706 !important;
}