/* ============================================
   SHARED THEME STYLES
   Used across homepage, auth pages, and other public pages
   ============================================ */

/* ============================================
   THEME BACKGROUNDS
   ============================================ */

/* ☁️ Cloud Theme */
.theme-cloud,
body.theme-cloud {
    background: linear-gradient(180deg, 
        #87CEEB 0%,
        #B8E0F6 15%,
        #E8D5F2 35%,
        #FFE4EC 55%,
        #FFF5E6 75%,
        #FFECD2 100%
    ) !important;
}

/* ✨ Space Theme */
.theme-space,
body.theme-space {
    background: linear-gradient(180deg, 
        #0f0c29 0%,
        #1a1a3e 20%,
        #24243e 40%,
        #302b63 60%,
        #1a1a3e 80%,
        #0f0c29 100%
    ) !important;
}

/* ❄️ Winter Theme */
.theme-winter,
body.theme-winter {
    background: linear-gradient(180deg, 
        #1e3a5f 0%,
        #2d4a6f 20%,
        #3d5a7f 40%,
        #4d6a8f 60%,
        #5d7a9f 80%,
        #6d8aaf 100%
    ) !important;
}

/* 🌿 Nature Theme */
.theme-nature,
body.theme-nature {
    background: linear-gradient(180deg, 
        #134e2a 0%,
        #166534 15%,
        #15803d 35%,
        #22c55e 60%,
        #86efac 85%,
        #bbf7d0 100%
    ) !important;
}

/* 🌊 Ocean Theme */
.theme-ocean,
body.theme-ocean {
    background: linear-gradient(180deg, 
        #0c4a6e 0%,
        #0369a1 15%,
        #0ea5e9 35%,
        #38bdf8 55%,
        #7dd3fc 75%,
        #e0f2fe 100%
    ) !important;
}

/* ============================================
   VIDEO EDITOR PAGE THEMES
   ============================================ */
.video-editor-page {
    min-height: calc(100vh - 56px);
    position: relative;
    overflow-y: auto;
    transition: background 0.5s ease;
    padding: 1rem 2rem 2rem 2rem;
    box-sizing: border-box;
}

.video-editor-page.theme-cloud {
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 30%, #7dd3fc 70%, #38bdf8 100%) !important;
}

.video-editor-page.theme-space {
    background: linear-gradient(180deg, #0f0a1e 0%, #1a1040 30%, #2d1b69 70%, #1e1b4b 100%) !important;
}

.video-editor-page.theme-winter {
    background: linear-gradient(180deg, #164e63 0%, #155e75 30%, #0e7490 70%, #0891b2 100%) !important;
}

.video-editor-page.theme-nature {
    background: linear-gradient(180deg, #14532d 0%, #166534 30%, #15803d 70%, #16a34a 100%) !important;
}

.video-editor-page.theme-ocean {
    background: linear-gradient(180deg, #0c4a6e 0%, #0369a1 30%, #0284c7 70%, #0ea5e9 100%) !important;
}

/* Theme text adjustments for dark themes */
.video-editor-page.theme-space,
.video-editor-page.theme-winter,
.video-editor-page.theme-nature,
.video-editor-page.theme-ocean {
    color: #ffffff;
}

/* Video Editor Header text for dark themes */
.video-editor-page.theme-space .ve-title,
.video-editor-page.theme-winter .ve-title,
.video-editor-page.theme-nature .ve-title,
.video-editor-page.theme-ocean .ve-title {
    color: #ffffff !important;
}

.video-editor-page.theme-space .ve-title-icon,
.video-editor-page.theme-winter .ve-title-icon,
.video-editor-page.theme-nature .ve-title-icon,
.video-editor-page.theme-ocean .ve-title-icon {
    color: #a78bfa !important;
}

.video-editor-page.theme-space .ve-project-name,
.video-editor-page.theme-winter .ve-project-name,
.video-editor-page.theme-nature .ve-project-name,
.video-editor-page.theme-ocean .ve-project-name {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Video Editor action links for dark themes */
.video-editor-page.theme-space .ve-action-link,
.video-editor-page.theme-winter .ve-action-link,
.video-editor-page.theme-nature .ve-action-link,
.video-editor-page.theme-ocean .ve-action-link {
    color: #a78bfa !important;
}

/* ============================================
   THEME EFFECTS CONTAINER
   ============================================ */
.theme-effects {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Hide all theme effects by default */
.snowflake,
.star,
.particle,
.sparkle,
.cloud {
    display: none !important;
}

/* Only show effects for the active theme */
.theme-winter .snowflake,
body.theme-winter .snowflake {
    display: block !important;
}

.theme-space .star,
body.theme-space .star {
    display: block !important;
}

.theme-nature .particle,
body.theme-nature .particle {
    display: block !important;
}

.theme-ocean .sparkle,
body.theme-ocean .sparkle {
    display: block !important;
}

.theme-cloud .cloud,
body.theme-cloud .cloud {
    display: block !important;
}

/* ============================================
   ❄️ SNOWFLAKES (Winter Theme)
   ============================================ */
.snowflake {
    position: absolute;
    top: -5vh;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2rem;
    animation: snowflake-fall linear infinite;
    display: none;
}

.theme-winter .snowflake,
body.theme-winter .snowflake {
    display: block;
}

.snowflake:nth-child(1) { left: 5%; animation-duration: 15s; animation-delay: 0s; font-size: 1rem; }
.snowflake:nth-child(2) { left: 12%; animation-duration: 20s; animation-delay: 2s; font-size: 1.4rem; }
.snowflake:nth-child(3) { left: 22%; animation-duration: 17s; animation-delay: 4s; font-size: 1.1rem; }
.snowflake:nth-child(4) { left: 32%; animation-duration: 22s; animation-delay: 1s; font-size: 1.3rem; }
.snowflake:nth-child(5) { left: 42%; animation-duration: 16s; animation-delay: 3s; font-size: 1rem; }
.snowflake:nth-child(6) { left: 52%; animation-duration: 19s; animation-delay: 5s; font-size: 1.5rem; }
.snowflake:nth-child(7) { left: 62%; animation-duration: 14s; animation-delay: 2.5s; font-size: 1.2rem; }
.snowflake:nth-child(8) { left: 72%; animation-duration: 21s; animation-delay: 0.5s; font-size: 1.1rem; }
.snowflake:nth-child(9) { left: 82%; animation-duration: 18s; animation-delay: 3.5s; font-size: 1.4rem; }
.snowflake:nth-child(10) { left: 92%; animation-duration: 16s; animation-delay: 1.5s; font-size: 1rem; }
.snowflake:nth-child(11) { left: 8%; animation-duration: 23s; animation-delay: 6s; font-size: 1.3rem; }
.snowflake:nth-child(12) { left: 88%; animation-duration: 19s; animation-delay: 4.5s; font-size: 1.2rem; }

@keyframes snowflake-fall {
    0% {
        transform: translateY(-5vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(105vh) translateX(40px) rotate(360deg);
        opacity: 0;
    }
}

/* ============================================
   ✨ STARS (Space Theme)
   ============================================ */
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle 2s ease-in-out infinite;
    display: none;
}

.theme-space .star,
body.theme-space .star {
    display: block;
}

.star:nth-child(13) { width: 2px; height: 2px; left: 10%; top: 15%; animation-delay: 0s; }
.star:nth-child(14) { width: 3px; height: 3px; left: 25%; top: 10%; animation-delay: 0.5s; }
.star:nth-child(15) { width: 2px; height: 2px; left: 40%; top: 25%; animation-delay: 1s; }
.star:nth-child(16) { width: 2px; height: 2px; left: 55%; top: 8%; animation-delay: 1.5s; }
.star:nth-child(17) { width: 3px; height: 3px; left: 70%; top: 20%; animation-delay: 0.3s; }
.star:nth-child(18) { width: 2px; height: 2px; left: 85%; top: 30%; animation-delay: 0.8s; }
.star:nth-child(19) { width: 2px; height: 2px; left: 15%; top: 45%; animation-delay: 1.2s; }
.star:nth-child(20) { width: 3px; height: 3px; left: 50%; top: 35%; animation-delay: 0.6s; }
.star:nth-child(21) { width: 2px; height: 2px; left: 90%; top: 50%; animation-delay: 1.8s; }
.star:nth-child(22) { width: 2px; height: 2px; left: 30%; top: 60%; animation-delay: 0.4s; }
.star:nth-child(23) { width: 3px; height: 3px; left: 65%; top: 55%; animation-delay: 1.1s; }
.star:nth-child(24) { width: 2px; height: 2px; left: 5%; top: 70%; animation-delay: 0.9s; }

@keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* ============================================
   🌿 PARTICLES (Nature Theme)
   ============================================ */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(253, 224, 71, 0.6);
    border-radius: 50%;
    animation: particle-float 6s ease-in-out infinite;
    display: none;
}

.theme-nature .particle,
body.theme-nature .particle {
    display: block;
}

.particle:nth-child(25) { left: 15%; top: 25%; animation-delay: 0s; }
.particle:nth-child(26) { left: 35%; top: 45%; animation-delay: 1s; }
.particle:nth-child(27) { left: 55%; top: 20%; animation-delay: 2s; }
.particle:nth-child(28) { left: 75%; top: 55%; animation-delay: 0.5s; }
.particle:nth-child(29) { left: 85%; top: 35%; animation-delay: 1.5s; }
.particle:nth-child(30) { left: 25%; top: 70%; animation-delay: 2.5s; }
.particle:nth-child(31) { left: 65%; top: 75%; animation-delay: 3s; }
.particle:nth-child(32) { left: 45%; top: 85%; animation-delay: 0.8s; }

@keyframes particle-float {
    0%, 100% { 
        transform: translateY(0) translateX(0); 
        opacity: 0.6;
    }
    50% { 
        transform: translateY(-15px) translateX(8px); 
        opacity: 1;
    }
}

/* ============================================
   🌊 SPARKLES (Ocean Theme)
   ============================================ */
.sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: water-sparkle 3s ease-in-out infinite;
    display: none;
}

.theme-ocean .sparkle,
body.theme-ocean .sparkle {
    display: block;
}

.sparkle:nth-child(33) { left: 20%; top: 30%; animation-delay: 0s; }
.sparkle:nth-child(34) { left: 40%; top: 25%; animation-delay: 0.5s; }
.sparkle:nth-child(35) { left: 60%; top: 35%; animation-delay: 1s; }
.sparkle:nth-child(36) { left: 80%; top: 28%; animation-delay: 1.5s; }
.sparkle:nth-child(37) { left: 15%; top: 45%; animation-delay: 0.3s; }
.sparkle:nth-child(38) { left: 50%; top: 40%; animation-delay: 0.8s; }
.sparkle:nth-child(39) { left: 85%; top: 50%; animation-delay: 1.2s; }
.sparkle:nth-child(40) { left: 30%; top: 55%; animation-delay: 0.6s; }

@keyframes water-sparkle {
    0%, 100% { 
        opacity: 0.4;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.5);
    }
}

/* ============================================
   ☁️ CLOUDS (Cloud Theme)
   ============================================ */
.cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    filter: blur(20px);
    animation: cloud-drift 30s ease-in-out infinite;
    display: none;
}

.theme-cloud .cloud,
body.theme-cloud .cloud {
    display: block;
}

.cloud:nth-child(41) { width: 200px; height: 80px; left: 5%; top: 15%; animation-delay: 0s; }
.cloud:nth-child(42) { width: 150px; height: 60px; left: 80%; top: 10%; animation-delay: 5s; animation-direction: reverse; }
.cloud:nth-child(43) { width: 180px; height: 70px; left: 60%; top: 30%; animation-delay: 10s; }
.cloud:nth-child(44) { width: 120px; height: 50px; left: 20%; top: 40%; animation-delay: 15s; animation-direction: reverse; }

@keyframes cloud-drift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(30px); }
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .snowflake {
        font-size: 0.9rem !important;
    }
    
    .cloud {
        opacity: 0.5;
    }
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle {
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.theme-toggle-btn.cloud {
    background: rgba(30, 58, 95, 0.85);
    color: #7dd3fc;
    box-shadow: 0 2px 12px rgba(30, 58, 95, 0.3);
}

.theme-toggle-btn.cloud:hover {
    background: rgba(30, 58, 95, 0.95);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(30, 58, 95, 0.4);
}

.theme-toggle-btn.space {
    background: rgba(30, 27, 75, 0.8);
    color: #a855f7;
    box-shadow: 0 2px 12px rgba(168, 85, 247, 0.3);
}

.theme-toggle-btn.space:hover {
    background: rgba(50, 45, 100, 0.9);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
}

.theme-toggle-btn.winter {
    background: rgba(255, 255, 255, 0.85);
    color: #0891b2;
    box-shadow: 0 2px 12px rgba(8, 145, 178, 0.2);
}

.theme-toggle-btn.winter:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(8, 145, 178, 0.3);
}

.theme-toggle-btn.nature {
    background: rgba(34, 83, 52, 0.85);
    color: #86efac;
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.25);
}

.theme-toggle-btn.nature:hover {
    background: rgba(34, 83, 52, 0.95);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
}

.theme-toggle-btn.ocean {
    background: rgba(6, 78, 108, 0.85);
    color: #67e8f9;
    box-shadow: 0 2px 12px rgba(14, 165, 233, 0.3);
}

.theme-toggle-btn.ocean:hover {
    background: rgba(6, 78, 108, 0.95);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4);
}

.theme-toggle .theme-label {
    white-space: nowrap;
}

.theme-toggle .theme-icon {
    font-size: 1rem;
    line-height: 1;
}