/* ==========================================================================
   UNIVERSAL DOWNLOADER - ULTRA-PREMIUM 3D MATRIX LUXURY DESIGN SYSTEM
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;800;900&family=Outfit:wght@400;500;600;700;800;900&family=Syne:wght@700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600;800&display=swap');

:root {
    --primary-glow: rgba(168, 85, 247, 0.45);
    --secondary-glow: rgba(99, 102, 241, 0.4);
    --cyan-glow: rgba(56, 189, 248, 0.4);
    --emerald-glow: rgba(16, 185, 129, 0.45);
    --mouse-x: 50vw;
    --mouse-y: 30vh;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow-x: hidden;
    background: radial-gradient(circle at 50% 0%, #0d1222 0%, #05070c 55%, #020306 100%);
    color: #f1f5f9;
}

/* Luxury Font Utility Classes */
.font-luxury {
    font-family: 'Syne', sans-serif;
}

.font-display {
    font-family: 'Outfit', sans-serif;
}

.font-cinzel {
    font-family: 'Cinzel', serif;
}

/* Custom Luxury Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #05070c;
}

::-webkit-scrollbar-thumb {
    background: #1c2336;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

::-webkit-scrollbar-thumb:hover {
    background: #3b4261;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ================= REALISTIC 3D VOLUMETRIC SMOKE & NEBULA FOG ================= */
#smokeCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0.88;
    mix-blend-mode: screen;
}

@keyframes smokeRoll1 {
    0% { transform: translateX(-20%) translateY(0) scale(1) rotate(0deg); }
    50% { transform: translateX(20%) translateY(-40px) scale(1.18) rotate(1.5deg); }
    100% { transform: translateX(-20%) translateY(0) scale(1) rotate(0deg); }
}

@keyframes smokeRoll2 {
    0% { transform: translateX(25%) translateY(0) scale(1.1) rotate(0deg); }
    50% { transform: translateX(-20%) translateY(-55px) scale(0.92) rotate(-2deg); }
    100% { transform: translateX(25%) translateY(0) scale(1.1) rotate(0deg); }
}

@keyframes smokeRoll3 {
    0% { transform: translateX(-15%) translateY(-20px) scale(0.95); }
    50% { transform: translateX(15%) translateY(-65px) scale(1.12); }
    100% { transform: translateX(-15%) translateY(-20px) scale(0.95); }
}

.smoke-layer {
    position: fixed;
    bottom: -160px;
    left: -25%;
    width: 150%;
    height: 520px;
    pointer-events: none;
    z-index: 1;
    filter: blur(75px);
    opacity: 0.38;
    mix-blend-mode: screen;
}

.smoke-layer-1 {
    background: radial-gradient(ellipse 75% 55% at 45% 85%, rgba(147, 51, 234, 0.45), rgba(79, 70, 229, 0.28), transparent 75%);
    animation: smokeRoll1 24s ease-in-out infinite;
}

.smoke-layer-2 {
    background: radial-gradient(ellipse 85% 60% at 55% 92%, rgba(56, 189, 248, 0.35), rgba(236, 72, 153, 0.25), transparent 75%);
    animation: smokeRoll2 30s ease-in-out infinite;
}

.smoke-layer-3 {
    background: radial-gradient(ellipse 70% 50% at 50% 90%, rgba(129, 140, 248, 0.3), rgba(168, 85, 247, 0.2), transparent 70%);
    animation: smokeRoll3 36s ease-in-out infinite;
}



/* ================= AMBIENT DRIFTING ORBS ================= */
@keyframes floatOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    33% { transform: translate(80px, -100px) scale(1.2) rotate(120deg); }
    66% { transform: translate(-60px, 60px) scale(0.85) rotate(240deg); }
}

@keyframes floatOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    33% { transform: translate(-90px, 80px) scale(1.25) rotate(-120deg); }
    66% { transform: translate(70px, -70px) scale(0.8) rotate(-240deg); }
}

@keyframes floatOrb3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(100px, 80px) scale(1.35); }
}

.orb-1 {
    animation: floatOrb1 20s ease-in-out infinite;
}

.orb-2 {
    animation: floatOrb2 24s ease-in-out infinite;
}

.orb-3 {
    animation: floatOrb3 22s ease-in-out infinite;
}

/* Luxury Shifting Text Aurora */
@keyframes textAurora {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animated-gradient-text {
    background: linear-gradient(270deg, #ec4899, #c084fc, #6366f1, #38bdf8, #34d399, #ec4899);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textAurora 7s ease infinite;
    text-shadow: 0 0 40px rgba(168, 85, 247, 0.4);
}

/* ================= ROTATING LASER BORDER HERO CARD ================= */
@keyframes rotateLaser {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.laser-border-wrapper {
    position: relative;
    border-radius: 2rem;
    overflow: hidden;
    padding: 2.5px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 50px -10px rgba(168, 85, 247, 0.35);
}

.laser-border-wrapper::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(99, 102, 241, 0.1) 60deg,
        rgba(168, 85, 247, 1) 120deg,
        rgba(236, 72, 153, 1) 180deg,
        rgba(56, 189, 248, 1) 240deg,
        rgba(99, 102, 241, 0.1) 300deg,
        transparent 360deg
    );
    animation: rotateLaser 7s linear infinite;
    pointer-events: none;
}

.laser-border-inner {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #0e1424 0%, #070a14 100%);
    border-radius: calc(2rem - 2.5px);
}

/* ================= 3D PERSPECTIVE & SPECULAR GLARE ================= */
.perspective-container {
    perspective: 1200px;
    transform-style: preserve-3d;
}

.card-3d {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.card-3d:hover {
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.8), 0 0 35px rgba(168, 85, 247, 0.4);
}

.card-glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(350px circle at var(--card-x, 50%) var(--card-y, 50%), rgba(255, 255, 255, 0.18), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.card-3d:hover .card-glare {
    opacity: 1;
}

/* ================= ULTRA-DYNAMIC ENTRANCE ANIMATIONS ================= */
@keyframes popSlideUp {
    0% {
        opacity: 0;
        transform: translateY(32px) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-pop-in {
    animation: popSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Elastic Tab Navigation */
.nav-tab {
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-tab:hover {
    transform: translateY(-3px) scale(1.04);
}

.nav-tab:active {
    transform: translateY(1px) scale(0.95);
}

.nav-tab.active-tab {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.45), rgba(168, 85, 247, 0.45));
    border: 1.5px solid rgba(192, 132, 252, 0.9);
    color: #ffffff;
    box-shadow: 0 6px 30px rgba(147, 51, 234, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Elastic Badges */
.badge-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    background-color: rgba(22, 30, 49, 0.8);
    border: 1px solid rgba(75, 85, 99, 0.5);
    color: #cbd5e1;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.badge-tag:hover {
    border-color: rgba(168, 85, 247, 0.85);
    background-color: rgba(99, 102, 241, 0.45);
    transform: translateY(-4px) scale(1.12);
    box-shadow: 0 8px 22px rgba(147, 51, 234, 0.4);
}

/* ================= 3D TACTILE GLOSSY & BOUNCY BUTTONS ================= */
.glossy-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 8px 24px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    user-select: none;
    transform-style: preserve-3d;
}

.glossy-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -140%;
    width: 65%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.glossy-btn:hover::before {
    left: 220%;
}

.glossy-btn:hover {
    transform: translateY(-4px) scale(1.05) translateZ(10px);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.75), 0 16px 36px -4px rgba(124, 58, 237, 0.65);
}

.glossy-btn:active {
    transform: translateY(2px) scale(0.92) translateZ(0px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.glossy-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #c026d3 100%);
    border: 1px solid rgba(232, 121, 249, 0.6);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 10px 28px rgba(124, 58, 237, 0.55);
}

.glossy-primary:hover {
    background: linear-gradient(135deg, #6366f1 0%, #9333ea 50%, #d946ef 100%);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.85), 0 18px 42px rgba(168, 85, 247, 0.75);
}

.glossy-emerald {
    background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
    border: 1px solid rgba(167, 243, 208, 0.6);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55), 0 10px 28px rgba(16, 185, 129, 0.5);
}

.glossy-emerald:hover {
    background: linear-gradient(135deg, #10b981 0%, #34d399 50%, #6ee7b7 100%);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 18px 42px rgba(52, 211, 153, 0.75);
}

.glossy-dark {
    background: linear-gradient(135deg, #1e2638 0%, #111726 100%);
    border: 1px solid rgba(75, 85, 99, 0.7);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 8px 20px rgba(0, 0, 0, 0.45);
}

.glossy-dark:hover {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    border-color: rgba(168, 85, 247, 0.8);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.45), 0 14px 32px rgba(0, 0, 0, 0.65);
}

/* ================= HYPER-DYNAMIC FORMAT CARDS & FILTERS ================= */
.format-filter-btn {
    padding: 0.5rem 1.15rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 800;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(75, 85, 99, 0.45);
    background: rgba(17, 24, 39, 0.85);
    color: #9ca3af;
    cursor: pointer;
}

.format-filter-btn:hover {
    color: #ffffff;
    border-color: rgba(168, 85, 247, 0.8);
    transform: translateY(-2px) scale(1.06);
}

.format-filter-btn.active-filter {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.45), rgba(168, 85, 247, 0.45));
    border-color: #c084fc;
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
}

.format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 1rem;
}

.format-card {
    position: relative;
    padding: 1.15rem 1.2rem;
    background: linear-gradient(145deg, rgba(23, 31, 52, 0.95), rgba(11, 16, 28, 0.98));
    border: 1.5px solid rgba(55, 65, 81, 0.75);
    border-radius: 1.35rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.35);
    user-select: none;
    overflow: hidden;
    transform-style: preserve-3d;
}

.format-card:hover {
    transform: translateY(-6px) scale(1.035);
    border-color: rgba(192, 132, 252, 0.9);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 16px 35px rgba(147, 51, 234, 0.45);
}

.format-card:active {
    transform: translateY(1px) scale(0.95);
}

.format-card.selected {
    background: linear-gradient(145deg, rgba(79, 70, 229, 0.8), rgba(147, 51, 234, 0.88));
    border: 2px solid #e879f9;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.5), 0 0 40px rgba(168, 85, 247, 0.7);
    transform: translateY(-5px) scale(1.04);
}

.format-card .check-circle {
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    border: 1.5px solid rgba(156, 163, 175, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.format-card.selected .check-circle {
    background-color: #f0abfc;
    border-color: #f0abfc;
    color: #1e1b4b;
    box-shadow: 0 0 16px rgba(240, 171, 252, 1);
    transform: scale(1.2);
}

/* Audio Soundwave Equalizer Animation */
.sound-wave {
    display: inline-flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 15px;
}

.sound-wave span {
    width: 2.5px;
    background: #f43f5e;
    border-radius: 2px;
    animation: bounceBar 1.1s ease-in-out infinite;
}

.sound-wave span:nth-child(1) { height: 40%; animation-delay: 0.1s; }
.sound-wave span:nth-child(2) { height: 100%; animation-delay: 0.3s; }
.sound-wave span:nth-child(3) { height: 60%; animation-delay: 0.2s; }

@keyframes bounceBar {
    0%, 100% { height: 25%; }
    50% { height: 100%; }
}

/* Heart Beat Animation */
@keyframes heartBeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.35); }
    28% { transform: scale(1); }
    42% { transform: scale(1.35); }
    70% { transform: scale(1); }
}

.heart-pulse {
    animation: heartBeat 1.8s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    display: inline-block;
    filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.95));
}

/* Status Card Zoom Hover with 3D Depth */
.status-card {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
}

.status-card:hover {
    transform: translateY(-8px) scale(1.045);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.4);
    border-color: rgba(52, 211, 153, 0.8);
}

.status-card:hover .status-overlay {
    opacity: 1;
}

.status-overlay {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

/* Sweeping Light Beam on Progress Bar */
@keyframes sweepBeam {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.progress-beam {
    position: relative;
    overflow: hidden;
}

.progress-beam::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: sweepBeam 1.8s ease-in-out infinite;
}

/* Confetti Sparkles Canvas */
.confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* Luxury Toast Floating Notification */
.toast-notice {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    padding: 0.9rem 1.5rem;
    border-radius: 1.15rem;
    background: rgba(14, 20, 36, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(168, 85, 247, 0.6);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 25px rgba(147, 51, 234, 0.35);
    color: white;
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: popSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   MOBILE & RESPONSIVE RESOLUTION PERFECTION ENGINE (320px - 768px - 1440px)
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
    /* Prevent 3D transform shaking and cut-offs on mobile touch */
    .perspective-container {
        perspective: none !important;
        transform: none !important;
    }

    .card-3d {
        transform: none !important;
    }

    /* Ambient fog and particles optimization on mobile */
    .smoke-layer {
        height: 280px;
        filter: blur(45px);
        opacity: 0.25;
    }

    .orb-1, .orb-2, .orb-3 {
        width: 18rem !important;
        height: 18rem !important;
        filter: blur(80px) !important;
        opacity: 0.12 !important;
    }

    /* Dynamic responsive grid for format cards */
    .format-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .format-card {
        padding: 0.9rem 1rem !important;
        border-radius: 1.1rem !important;
    }

    /* Laser border padding fix for mobile */
    .laser-border-wrapper {
        border-radius: 1.4rem !important;
        padding: 2px !important;
    }

    .laser-border-inner {
        border-radius: calc(1.4rem - 2px) !important;
    }

    /* Toast notification alignment on mobile */
    .toast-notice {
        bottom: 1rem !important;
        right: 1rem !important;
        left: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
        justify-content: center !important;
        font-size: 0.8rem !important;
        padding: 0.75rem 1rem !important;
    }

    /* WhatsApp & carousel grids on small screens */
    #waGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    /* Status overlay always accessible on touch devices */
    .status-overlay {
        opacity: 1 !important;
        background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.85) 100%) !important;
        justify-content: flex-end !important;
        padding-bottom: 0.75rem !important;
    }

    /* Modal fitting for mobile screens */
    #playerModal .card-3d {
        max-height: 90vh;
        overflow-y: auto;
    }
}

@media (min-width: 640px) and (max-width: 1024px) {
    .format-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}