/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    /* Color Palette */
    --bg-dark: #0a0e27;       /* Deep Navy */
    --bg-darker: #050714;     /* Darker shade for depth */
    
    --primary: #8b5cf6;       /* Purple */
    --secondary: #ec4899;     /* Pink */
    --accent: #06b6d4;        /* Cyan */
    
    --text-main: #ffffff;
    --text-muted: #e5e7eb;
    
    /* Gradients */
    --grad-main: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --grad-glow: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(236, 72, 153, 0.5) 100%);
    
    /* Glassmorphism Tokens */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(16px);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    /* Typography */
    --font-head: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* Base Settings */
body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    overflow-x: hidden; /* Prevent horizontal scroll from 3D effects */
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    font-weight: 700;
}

/* Global Background Gradient Mesh (Fixed) */
.bg-global-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: 
        radial-gradient(circle at 15% 50%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(6, 182, 212, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

/* Utility: Gradient Text */
.text-gradient {
    background: var(--grad-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Utility: Glass Card Base */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}


/*============================================================================================================== */



/* =========================================
   2. HERO SECTION (UPDATED)
   ========================================= */

#hero {
    overflow: hidden;
    padding-top: 120px;     /* Increased from 80px to push content down slightly */
    padding-bottom: 150px;  /* NEW: Adds space at the bottom for the scroll arrow */
    min-height: 100vh;      /* Ensures it takes full screen height */
    display: flex;          /* Keeps centering logic working */
    align-items: center;    /* Vertically centers the content block */
}

/* 2.1 Background Shapes */
.shape-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}

.shape {
    position: absolute; border-radius: 50%;
    filter: blur(80px); opacity: 0.4;
    animation: float 10s infinite ease-in-out alternate;
}

.shape-1 {
    width: 400px; height: 400px; background: var(--primary);
    top: -100px; left: -100px;
}

.shape-2 {
    width: 300px; height: 300px; background: var(--accent);
    bottom: 10%; right: -50px; animation-delay: -5s;
}

/* 2.2 Super Glow Text */
.glow-text {
    text-shadow: 0 0 30px rgba(6, 182, 212, 0.5); /* Cyan Glow */
}

/* 2.3 Glass Input Field */
.input-box-wrapper {
    border-radius: 20px;
    transition: transform 0.3s ease;
    background: rgba(255, 255, 255, 0.03); /* Subtle background */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.input-box-wrapper:focus-within {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
    transform: scale(1.02);
}

.glass-input {
    background: rgba(0, 0, 0, 0.2) !important; /* Darker input bg */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white !important;
    height: 60px;
    border-radius: 12px;
    font-size: 1.1rem;
    padding-right: 90px !important; /* Space for Paste button */
}

.glass-input:focus {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: var(--primary);
    box-shadow: none;
}

.glass-input::placeholder { color: rgba(255, 255, 255, 0.4); }

/* 2.4 Paste Button (Inside Input) */
.paste-btn {
    font-size: 0.9rem;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.paste-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white !important;
}

/* 2.5 Gradient Button */
.btn-gradient {
    background: var(--grad-main);
    border: none; color: white;
    height: 60px; border-radius: 12px;
    font-weight: 600; font-family: var(--font-head);
    position: relative; overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

.btn-gradient:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.6);
}

.btn-gradient::after {
    content: ''; position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: 0.5s;
}

.btn-gradient:hover::after { left: 100%; }

/* 2.6 Platform Icons */
.platform-icons i {
    transition: all 0.3s ease;
    cursor: default;
}

.platform-icons:hover { opacity: 1 !important; }

.platform-icons i:hover {
    transform: translateY(-5px);
    color: white; /* Brighten on hover */
    text-shadow: 0 0 15px currentColor; /* Glow with icon color */
}
/* Specific Brand Colors on Hover */
.platform-icons .fa-youtube:hover { color: #ff0000; }
.platform-icons .fa-tiktok:hover { color: #00f2ea; }
.platform-icons .fa-instagram:hover { color: #e1306c; }
.platform-icons .fa-facebook:hover { color: #1877f2; }
.platform-icons .fa-twitter:hover { color: #1da1f2; }


/* Animations */
@keyframes float { 0% { transform: translate(0, 0); } 100% { transform: translate(30px, 50px); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
.animate-bounce { animation: bounce 2s infinite; }

/* Scroll Indicator */
.scroll-indicator {
    position: absolute; bottom: 40px; left: 50%;
    transform: translateX(-50%); text-decoration: none; z-index: 5;
}

/* Utility Animations */
.fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }


/* =========================================
   2.7 DASHBOARD GRID (SKELETON)
   ========================================= */

/* Smoothly animate width changes when we activate the dashboard */
.center-panel, .side-panel {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Initially, Side Panels have 0 width/opacity even if HTML exists */
.side-panel {
    opacity: 0;
    pointer-events: none;
    /* We use Bootstrap classes (col-lg-2) for width, 
       but opacity 0 keeps them invisible for now */
}



/* ====================================================================================================================== */



/* =========================================
   2.8 LEFT PANEL - VERTICAL ARC
   ========================================= */

/* Wrapper aligns the arc to the right side of the Left Column */
.arc-menu-wrapper {
    height: 100%;
    display: flex;
    align-items: center;       /* Vertically centers the menu */
    justify-content: flex-end; /* Pushes menu close to the input box */
    padding-right: 15px;       /* Small gap between menu and center panel */
}

/* The Vertical "Pill" Container */
.vertical-arc {
    width: 85px;               /* Fixed width for consistency */
    padding: 25px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;                 /* Space between buttons */
    align-items: center;
    
    /* Shape & Glass Style */
    border-radius: 50px;       /* Pill shape */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    
    /* Animation: Slides in from left when activated */
    transform: translateX(-30px);
    opacity: 0; 
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy effect */
}

/* We will toggle this class later with JS to show the menu */
.dashboard-active .vertical-arc {
    transform: translateX(0);
    opacity: 1;
}

/* --- The Buttons inside --- */
.arc-item {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5); /* Dimmed default state */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

/* Small Circle behind the icon */
.arc-item .icon-box-sm {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1rem;
    margin-bottom: 5px;
}

/* Hover Effects */
.arc-item:hover {
    color: white;
    transform: translateY(-2px);
}
.arc-item:hover .icon-box-sm {
    background: rgba(255, 255, 255, 0.15);
}

/* --- Active/Selected State --- */
.arc-item.active {
    color: var(--accent); /* Cyan Text */
}

.arc-item.active .icon-box-sm {
    background: var(--grad-main); /* Gradient Purple background */
    color: white;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5); /* Glow */
    transform: scale(1.1);
}



/*=============================================================================================================*/


/* =========================================
   2.9 DASHBOARD ACTIVE STATES
   ========================================= */

/* When Dashboard is Active... */
.dashboard-active .side-panel {
    opacity: 1;
    pointer-events: all;
    /* The width is handled by Bootstrap classes (col-lg-2), 
       but we ensure visibility here */
}

/* Adjust Input Box when in Dashboard Mode */
.dashboard-active .input-box-wrapper {
    border-color: var(--primary); /* Highlight the workspace */
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

/* Hide the large title on mobile when active (optional, to save space) */
@media (max-width: 991px) {
    .dashboard-active h1 {
        font-size: 2rem; /* Make text smaller */
    }
}

/* ====================================================================================================================== */


/* =========================================
   2.10 RESULTS AREA (FORMAT LIST)
   ========================================= */

/* Format Badges (The colored boxes like "MP4", "MP3") */
.format-badge {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    width: 50px;
    text-align: center;
}

.format-badge.mp4 {
    background: rgba(139, 92, 246, 0.2); /* Purple Bg */
    color: #a78bfa; /* Purple Text */
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.format-badge.mp3 {
    background: rgba(245, 158, 11, 0.2); /* Orange Bg */
    color: #fbbf24; /* Orange Text */
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Hover Effect on List Items */
.format-item {
    transition: background 0.2s;
    cursor: pointer;
}
.format-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* The Download Icon Button */
.btn-icon-glass {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--grad-main);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-icon-glass:hover {
    transform: scale(1.1);
    color: white;
}

/* Scrollbar Styling for the list */
.format-list-scroll::-webkit-scrollbar {
    width: 6px;
}
.format-list-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}
.format-list-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* ====================================================================================================================== */



/* =========================================
   3. FEATURES SECTION
   ========================================= */

#features {
    /* Subtle separation from hero */
    background: linear-gradient(to bottom, var(--bg-dark), var(--bg-darker));
}

.feature-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
    transition: transform 0.1s ease-out; /* Smooth movement for JS tilt */
    transform-style: preserve-3d; /* CRITICAL for 3D effect */
    perspective: 1000px;
    position: relative;
    overflow: hidden;
}

/* Icon Styling */
.icon-box {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--accent);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: 0.3s;
    /* Lift icon slightly off the card in 3D space */
    transform: translateZ(20px); 
}

/* Hover State */
.feature-card:hover .icon-box {
    background: var(--grad-main);
    color: white;
    transform: translateZ(30px) scale(1.1);
    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
}

.feature-card h4 {
    transform: translateZ(10px); /* Text floats slightly above bg */
}
/* FIX: Force light text inside feature cards */
.feature-card p {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Optional: Make the title slightly brighter too */
.feature-card h4 {
    color: #fff;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .feature-card {
        transform: none !important; /* Disable 3D tilt on mobile for performance */
    }
}



/* ====================================================================================================================== */

/* =========================================
   4. HOW IT WORKS SECTION
   ========================================= */

.step-card {
    position: relative;
    border-radius: 20px;
    transition: transform 0.3s ease;
    /* Create a glowing effect behind the card */
    box-shadow: 0 0 40px rgba(0,0,0,0.2); 
}

.step-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.2);
}

.step-number {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 50px;
    height: 50px;
    background: var(--grad-main); /* Purple/Pink Gradient */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 5px 15px rgba(236, 72, 153, 0.4);
}

/* Ensure Icons use the gradient text effect */
.fa-4x.text-gradient {
    display: inline-block; /* Required for transform */
    background: var(--grad-main);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Animation State Classes */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}



/* ====================================================================================================================== */

/* =========================================
   5. NAVIGATION BAR
   ========================================= */

.custom-navbar {
    background: rgba(10, 14, 39, 0.7); /* Semi-transparent dark base */
    backdrop-filter: blur(20px); /* Heavy blur for readability */
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px 0;
    transition: all 0.3s ease;
}

/* Logo Sizing */
.nav-logo {
    height: 40px; /* Adjust based on your actual image aspect ratio */
    width: auto;
    filter: drop-shadow(0 0 5px rgba(139, 92, 246, 0.3)); /* Subtle glow behind logo */
}

/* Brand Text */
.brand-text {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
    color: white;
}

/* Nav Links */
.navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500;
    font-size: 0.95rem;
    margin: 0 10px;
    transition: color 0.3s;
    position: relative;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: white !important;
}

/* Hover underline animation */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background: var(--grad-main);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
}

/* About Button */
.btn-outline-light {
    border-color: rgba(255,255,255,0.2);
    color: white;
}

.btn-outline-light:hover {
    background: var(--grad-main);
    border-color: transparent;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

/* =========================================
   LOGO GLOW & ANIMATION (UPDATED)
   ========================================= */

/* 1. The Container */
.logo-btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid var(--primary);
    cursor: pointer;
    
    /* Default: Only the Neon Glow runs forever */
    animation: neon-pulse 2s infinite alternate ease-in-out;
    
    /* Ensure smooth transform rendering */
    transform-origin: center;
    will-change: transform;
}

/* 2. HOVER STATE: Run BOTH animations on the container */
.logo-btn-container:hover {
    animation: 
        neon-pulse 2s infinite alternate ease-in-out, /* Keep glowing */
        cheek-pull 0.8s both; /* Add the stretch effect */
}

/* 3. The Image (Just needs sizing, no animation here anymore) */
.nav-logo {
    height: 30px;
    width: auto;
    display: block;
    pointer-events: none; /* Prevents flickering if mouse hits image */
}

/* --- KEYFRAMES --- */

/* Animation 1: The Eternal Glow */
@keyframes neon-pulse {
    0% {
        border-color: var(--primary); /* Purple */
        box-shadow: 0 0 5px var(--primary), inset 0 0 2px var(--primary);
    }
    100% {
        border-color: var(--secondary); /* Pink */
        box-shadow: 0 0 15px var(--secondary), inset 0 0 8px var(--secondary);
    }
}

/* Animation 2: The Cheek Pull (Rubber Band) */
@keyframes cheek-pull {
    0% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(1.35, 0.75, 1); } /* Squish Flat & Wide */
    40% { transform: scale3d(0.75, 1.25, 1); } /* Snap Tall & Thin */
    50% { transform: scale3d(1.15, 0.85, 1); } /* Rebound Wide */
    65% { transform: scale3d(0.95, 1.05, 1); } /* Rebound Tall */
    75% { transform: scale3d(1.05, 0.95, 1); } /* Settle */
    100% { transform: scale3d(1, 1, 1); }      /* Normal */
}


/* ====================================================================================================================== */


/* =========================================
   6. FAQ & GORILLA RIG
   ========================================= */

/* --- Glass Accordion Styling --- */
.custom-accordion .accordion-item {
    background: var(--glass-bg); /* Use our glass variable */
    backdrop-filter: blur(10px);
}

.custom-accordion .accordion-button {
    background: transparent;
    color: white;
    font-weight: 600;
    box-shadow: none; /* Remove blue glow */
}

/* When the item is OPEN */
.custom-accordion .accordion-button:not(.collapsed) {
    background: rgba(139, 92, 246, 0.1); /* Slight purple tint */
    color: var(--primary);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
}

/* The Arrow Icon color */
.custom-accordion .accordion-button::after {
    filter: invert(1); /* Make default black arrow white */
}

/* =========================================
   6. FAQ MASCOT (IMAGE SWAP)
   ========================================= */

.mascot-wrapper {
    width: 450px; /* Much larger size */
    max-width: 100%; /* Ensures it doesn't break on tablet screens */
    margin: 0 auto;
    position: relative;
    /* Optional: Add a glow behind the image */
    filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.2)); 
    transition: filter 0.3s;
}

.mascot-img {
    transition: transform 0.2s;
}

/* RAGE STATE (Added via JS) */
.mascot-wrapper.is-raging {
    /* Change glow to RED when angry */
    filter: drop-shadow(0 0 30px rgba(255, 50, 50, 0.6));
}

.mascot-wrapper.is-raging .mascot-img {
    /* Slight shake effect */
    animation: rage-shake 0.2s infinite; 
}

@keyframes rage-shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-2deg); }
    75% { transform: rotate(2deg); }
    100% { transform: rotate(0deg); }
}



/* ====================================================================================================================== */

/* =========================================
   7. CONTACT & CINEMA MODAL
   ========================================= */

/* Form Floating Labels Override */
.form-floating > label {
    color: rgba(255,255,255,0.5) !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--accent) !important;
    opacity: 1;
}

/* Icon Circle for Info Cards */
.icon-circle {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 1.2rem;
}

/* --- THE CINEMA OVERLAY --- */
.cinema-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black; /* Pure black for cinema feel */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Hidden State */
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

/* Active State (Shown via JS) */
.cinema-overlay.active {
    opacity: 1;
    visibility: visible;
}

.door-animation-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    overflow: hidden;
}

/* Success Message Animation */
.fade-in-message {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.fade-in-message.visible {
    opacity: 1;
    transform: translateY(0);
}

/*=========================================================================================*/

/* =========================================
   8. CINEMA MODAL & NEON SCENE (UPDATED)
   ========================================= */

/* 1. The Screen Overlay (Glass Effect) */
.cinema-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Semi-transparent dark bg */
    background: rgba(5, 7, 20, 0.8); 
    /* The Blur Effect (See website behind) */
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

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

/* 2. The Unified Neon Card (Container) */
.cinema-card {
    width: 350px; /* Card Width */
    background: #0f132a; /* Deep Navy Interior */
    border: 1px solid rgba(139, 92, 246, 0.3); /* Purple Border */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); /* Deep Shadow */
    border-radius: 20px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s;
}

.cinema-overlay.active .cinema-card {
    transform: scale(1);
}

/* Floor Line (Bottom of the card) */
.cinema-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: var(--primary); /* Neon Purple Floor */
    box-shadow: 0 -2px 10px var(--primary);
}

/* 3. The Animation Stage (Transparent) */
.animation-scene {
    width: 100%;
    height: 180px; /* Height for the Stickman */
    position: relative;
    /* No borders/bg here anymore */
    margin-bottom: 20px; 
}

/* --- THE DOOR --- */
.door-container {
    position: absolute;
    bottom: 0; /* Sit on the imaginary floor */
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 100px;
    z-index: 1;
}

.door-frame {
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    border: 3px solid #333;
    border-radius: 4px;
    position: relative;
}

.door-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #2a2a2a, #333);
    border-right: 2px solid #000;
    transform-origin: left;
    transition: transform 0.5s;
    z-index: 3;
}

.door-panel::after { /* Handle */
    content: '';
    position: absolute;
    top: 50%;
    right: 6px;
    width: 6px;
    height: 6px;
    background: #555;
    border-radius: 50%;
}

.door-light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #fff 0%, #ec4899 40%, #8b5cf6 100%);
    opacity: 0;
    z-index: 1;
    filter: blur(2px);
}

/* Animation State */
.cinema-overlay.active .door-panel { animation: open-close-door 4s forwards; }
.cinema-overlay.active .door-light { animation: flash-light 4s forwards; }

/* --- THE STICK MAN --- */
.stickman {
    position: absolute;
    bottom: 0;
    left: -30px; /* Start off screen */
    width: 40px;
    height: 70px;
    z-index: 10;
    transform-origin: bottom center;
}

.cinema-overlay.active .stickman { animation: walk-and-enter 4s forwards linear; }

/* Neon Cyan Body Parts */
.stickman .head {
    width: 10px; height: 10px; background: #06b6d4; border-radius: 50%; margin: 0 auto;
    box-shadow: 0 0 8px #06b6d4;
}
.stickman .torso {
    width: 2px; height: 30px; background: #06b6d4; margin: 0 auto;
    box-shadow: 0 0 4px #06b6d4;
}
.stickman .arm, .stickman .leg {
    width: 2px; height: 22px; background: #06b6d4; position: absolute;
    top: 10px; left: 50%; transform-origin: top; border-radius: 2px;
    box-shadow: 0 0 4px #06b6d4;
}
.stickman .leg { top: 40px; height: 25px; }

/* Limb Animations */
.cinema-overlay.active .stickman .leg-left { animation: walk-leg 0.4s infinite alternate; }
.cinema-overlay.active .stickman .leg-right { animation: walk-leg 0.4s infinite alternate-reverse; }
.cinema-overlay.active .stickman .arm-left { animation: walk-arm 0.4s infinite alternate; }
.cinema-overlay.active .stickman .arm-right { animation: walk-arm 0.4s infinite alternate-reverse; }

/* --- TEXT ANIMATION --- */
.fade-in-message {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in-message.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- KEYFRAMES --- */
@keyframes walk-and-enter {
    0% { left: 0px; opacity: 0; }
    10% { opacity: 1; }
    40% { left: 50%; transform: translateX(-50%) scale(1); opacity: 1; }
    50% { left: 50%; transform: translateX(-50%) scale(1); opacity: 1; }
    70% { left: 50%; transform: translateX(-50%) scale(0.6); opacity: 0; }
    100% { left: 50%; transform: translateX(-50%) scale(0); opacity: 0; }
}
@keyframes walk-leg { from { transform: rotate(-35deg); } to { transform: rotate(35deg); } }
@keyframes walk-arm { from { transform: rotate(25deg); } to { transform: rotate(-25deg); } }
@keyframes open-close-door {
    0%, 35% { transform: perspective(300px) rotateY(0deg); }
    45%, 70% { transform: perspective(300px) rotateY(-90deg); }
    85%, 100% { transform: perspective(300px) rotateY(0deg); }
}
@keyframes flash-light {
    0%, 40% { opacity: 0; }
    45%, 70% { opacity: 1; }
    80%, 100% { opacity: 0; }
}


/*=========================================================================================*/

/* =========================================
   9. ABOUT SECTION (FINAL FIXED VERSION)
   ========================================= */

#about {
    background: radial-gradient(circle at center, #1a1f3a 0%, var(--bg-dark) 70%);
    perspective: 1200px;
    overflow: visible; 
}

/* The Container Stage */
.solar-system {
    width: 320px;
    height: 320px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.1);
    transform-style: preserve-3d;
}

/* 1. THE GLOBE */
.holo-sphere {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    z-index: 5; /* Stays in the middle layer */
    
    background-color: #0a0e27; 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Blue_Marble_2002.png/2560px-Blue_Marble_2002.png'); 
    background-size: 400px 200px;
    
    box-shadow: 
        inset -30px -30px 60px rgba(0,0,0,0.9),
        inset 10px 10px 30px rgba(6, 182, 212, 0.4),
        0 0 40px rgba(6, 182, 212, 0.2);

    animation: earth-rotate 20s linear infinite;
    transform: rotateZ(-15deg);
}

/* 2. THE TRACK */
.ufo-track {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    
    /* Tilt the orbit */
    transform: translate(-50%, -50%) rotateZ(-15deg) rotateX(75deg);
    transform-style: preserve-3d;
    
    border: 1px dashed rgba(255, 255, 255, 0.1);
    
    animation: orbit-spin 8s linear infinite;
}

/* 3. THE MOVING CONTAINER */
.ufo-container {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    
    /* Combined Animation: Rotate + Depth Sorting */
    animation: 
        ufo-counter-rotate 8s linear infinite,
        orbit-depth 8s linear infinite; 
}

/* 4. NEON UFO DESIGN */
.neon-ufo {
    position: relative;
    width: 50px;
    height: 30px;
    filter: drop-shadow(0 0 8px var(--accent));
}

.ufo-dome {
    position: absolute;
    top: 0; left: 10px; width: 30px; height: 15px;
    border: 2px solid #06b6d4;
    border-bottom: none;
    border-radius: 15px 15px 0 0;
    background: rgba(6, 182, 212, 0.2);
}

.ufo-disk {
    position: absolute;
    top: 12px; left: 0; width: 50px; height: 12px;
    border: 2px solid #8b5cf6;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.2);
    z-index: 2;
}

.ufo-lights {
    position: absolute; top: 16px; left: 0; width: 100%;
    text-align: center; z-index: 3;
    display: flex; justify-content: center; gap: 4px;
}

.ufo-lights span {
    width: 4px; height: 4px; background: white; border-radius: 50%;
    box-shadow: 0 0 5px white; animation: blink 1s infinite alternate;
}
.ufo-lights span:nth-child(2) { animation-delay: 0.2s; }
.ufo-lights span:nth-child(3) { animation-delay: 0.4s; }

/* --- KEYFRAMES --- */

@keyframes earth-rotate {
    0% { background-position: 0 0; }
    100% { background-position: 400px 0; }
}

@keyframes orbit-spin {
    from { transform: translate(-50%, -50%) rotateZ(-15deg) rotateX(75deg) rotateZ(0deg); }
    to { transform: translate(-50%, -50%) rotateZ(-15deg) rotateX(75deg) rotateZ(360deg); }
}

@keyframes ufo-counter-rotate {
    from { transform: translateX(-50%) rotateZ(-360deg) rotateX(-75deg) rotateZ(15deg); }
    to { transform: translateX(-50%) rotateZ(0deg) rotateX(-75deg) rotateZ(15deg); }
}

/* CRITICAL: This makes the UFO go BEHIND (z-1) and IN FRONT (z-10) */
@keyframes orbit-depth {
    0% { z-index: 1; }    /* Top of circle (Back) */
    20% { z-index: 1; }   /* Still Back */
    25% { z-index: 10; }  /* Crossing to Front */
    75% { z-index: 10; }  /* Still Front */
    80% { z-index: 1; }   /* Crossing to Back */
    100% { z-index: 1; }  /* Back */
}

@keyframes blink { from { opacity: 0.2; } to { opacity: 1; } }


/* ====================================================================================================================== */


/* =========================================
   10. FOOTER
   ========================================= */

.footer-section {
    background: #02040a; /* Ultra dark navy/black */
    padding-top: 20px;
}

/* 1. Neon Separator Line */
.footer-neon-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--accent) 50%, 
        transparent 100%);
    box-shadow: 0 0 15px var(--accent);
    opacity: 0.5;
}

/* 2. Link Hover Animation (Slide Right) */
.footer-link {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.footer-link:hover {
    color: var(--accent); /* Cyan glow */
    transform: translateX(5px); /* Slide effect */
}

/* 3. Social Buttons */
.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.social-btn:hover {
    background: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
    color: white;
}

/* Border utility */
.border-white-10 {
    border-color: rgba(255, 255, 255, 0.05) !important;
}



/* ====================================================================================================================== */


/* =========================================
   11. PRIVACY POLICY PAGE
   ========================================= */

/* The Sidebar that stays on screen */
.sticky-sidebar {
    position: sticky;
    top: 100px; /* Distance from top of screen */
    z-index: 10;
}

/* Legal Navigation Links */
.legal-link {
    color: rgba(255, 255, 255, 0.5);
    padding: 10px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    border-left: 2px solid transparent;
}

.legal-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

/* Active State (When scrolling) */
.legal-link.active {
    background: rgba(6, 182, 212, 0.1); /* Cyan Tint */
    color: var(--accent);
    border-left: 2px solid var(--accent);
}

/* Typography for Reading */
.legal-content p, .legal-content li {
    font-size: 1rem;
    line-height: 1.8; /* More breathing room */
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}

.legal-content h3 {
    font-weight: 600;
    margin-top: 1rem;
}

/* Alert Box */
.glass-alert {
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    color: #fff;
    border-radius: 8px;
    padding: 15px;
}


/* ====================================================================================================================== */


/* QUICK FIX: Force Elements to Appear */
.input-box-wrapper, 
.platform-icons {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: none !important;
}

/* =========================================================================================================================*/


/* =========================================
   3.0 MOBILE ADAPTATION (ARC MENU)
   ========================================= */

@media (max-width: 991px) {
    /* 1. Reset the Left Panel layout for mobile */
    .side-panel.left-panel {
        width: 100%;           /* Full width */
        margin-bottom: 20px;   /* Space below menu */
        height: auto;
        opacity: 0;            /* Hidden until dashboard activates */
        transition: opacity 0.3s;
        pointer-events: none;
    }
    
    /* 2. Show panel when dashboard is active */
    .dashboard-active .side-panel.left-panel {
        opacity: 1;
        pointer-events: all;
    }

    /* 3. Turn Vertical Arc into Horizontal Bar */
    .arc-menu-wrapper {
        justify-content: center; /* Center align */
        padding-right: 0;
    }

    .vertical-arc {
        flex-direction: row;     /* Horizontal Layout */
        width: auto;             
        height: 60px;            /* Fixed height bar */
        padding: 0 20px;
        border-radius: 30px;     /* Pill shape */
        transform: translateY(-20px); /* Slide down animation start */
    }

    .dashboard-active .vertical-arc {
        transform: translateY(0); /* Slide to final position */
    }

    /* 4. Fix the Buttons inside */
    .arc-item {
        width: auto;
        padding: 0 15px;
        flex-direction: row; /* Icon next to text */
    }

    .arc-item .icon-box-sm {
        margin-bottom: 0;
        margin-right: 8px;   /* Gap between icon and text */
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
}


/*=========================================================================================================*/