/**
 * Proaspăt — Homepage dark theme (motion graphic hero)
 * Se încarcă doar pe index.php prin $extraCss.
 */

/* ===== Bază temă întunecată ===== */
body.cd-theme-dark {
    background-color: #04101e;
    color: #f8fafc;
    overflow-x: hidden;
}

.font-display {
    font-family: "Armin Grotesk", sans-serif;
}

.glass-pill {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ===== Navbar comun, variantă întunecată ===== */
.cd-theme-dark .cd-navbar {
    background: rgba(2, 6, 23, 0.72);
    border-bottom-color: rgba(51, 189, 228, 0.12);
}

.cd-theme-dark .cd-nav-link { color: #cbd5e1; }
.cd-theme-dark .cd-nav-link:hover,
.cd-theme-dark .cd-nav-link.active { color: #5bd1ef; }
.cd-theme-dark .cd-nav-link.active::after { background: #5bd1ef; }

.cd-theme-dark .cd-dropdown-menu {
    background: rgba(15, 23, 42, 0.97);
    border-color: rgba(51, 189, 228, 0.2);
    box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.5);
}
.cd-theme-dark .cd-dropdown-item:hover { background: rgba(255, 255, 255, 0.06); }
.cd-theme-dark .cd-dropdown-menu .text-slate-900 { color: #fff; }

.cd-theme-dark #cd-lang-switcher {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}
.cd-theme-dark #cd-lang-switcher .bg-white { background: #0f74a6; color: #fff; }
.cd-theme-dark #cd-lang-switcher .text-slate-500 { color: #94a3b8; }
.cd-theme-dark #cd-lang-switcher .text-slate-300 { color: #475569; }

.cd-theme-dark .cd-nav-actions .text-slate-600,
.cd-theme-dark .cd-nav-actions .text-slate-400,
.cd-theme-dark .cd-mobile-btn { color: #cbd5e1; }
.cd-theme-dark .cd-nav-actions a:hover,
.cd-theme-dark .cd-mobile-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.cd-theme-dark .cd-nav-actions .cd-btn-primary {
    background: linear-gradient(90deg, #33bde4, #33bde4, #2dd4bf);
    color: #00327a;
    border: 0;
    box-shadow: 0 10px 25px -8px rgba(51, 189, 228, 0.45);
}

.cd-theme-dark #cd-mobile-menu {
    background: #0b1628;
    border-color: rgba(51, 189, 228, 0.15);
}
.cd-theme-dark #cd-mobile-menu .bg-white,
.cd-theme-dark #cd-mobile-menu .bg-slate-50 { background: rgba(255, 255, 255, 0.05); }
.cd-theme-dark #cd-mobile-menu .border-slate-100,
.cd-theme-dark #cd-mobile-menu .border-slate-200,
.cd-theme-dark #cd-mobile-menu .border-slate-200\/80 { border-color: rgba(255, 255, 255, 0.08); }
.cd-theme-dark #cd-mobile-menu .text-slate-700 { color: #e2e8f0; }
.cd-theme-dark #cd-mobile-menu .bg-sky-50,
.cd-theme-dark #cd-mobile-menu .bg-emerald-50,
.cd-theme-dark #cd-mobile-menu .bg-purple-50 { background: rgba(51, 189, 228, 0.12); }

/* ===== Homepage: fundal în culoarea primară (#33BDE4), text închis pentru contrast ===== */
body.cd-theme-sky {
    background-color: #33bde4;
    color: #00327a;
    overflow-x: hidden;
}

.cd-theme-sky .cd-nav-link { color: #00327a; }
.cd-theme-sky .cd-nav-link:hover,
.cd-theme-sky .cd-nav-link.active { color: #06528f; }
.cd-theme-sky .cd-nav-link.active::after { background: #06528f; }

.sky-mesh-bg {
    background: radial-gradient(circle at 80% 15%, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
        radial-gradient(circle at 15% 80%, rgba(15, 116, 166, 0.35) 0%, transparent 50%),
        #33bde4;
}

.sky-pill {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.85);
}

.sky-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #fff;
    box-shadow: 0 10px 30px -12px rgba(0, 34, 90, 0.35);
}

.cd-theme-sky .washer-outer-casing {
    box-shadow: 0 30px 60px -18px rgba(0, 34, 90, 0.65),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -12px 25px rgba(0, 0, 0, 0.8);
}

/* ===== Hero ===== */
.mesh-gradient-bg {
    background: radial-gradient(circle at 80% 20%, rgba(51, 189, 228, 0.22) 0%, transparent 45%),
        radial-gradient(circle at 20% 75%, rgba(15, 116, 166, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(31, 154, 201, 0.15) 0%, transparent 60%),
        #051329;
}

.washer-outer-casing {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    box-shadow: 0 25px 60px -15px rgba(51, 189, 228, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -12px 25px rgba(0, 0, 0, 0.8);
}

.washer-porthole-ring {
    background: conic-gradient(from 180deg at 50% 50%, #5bd1ef 0deg, #1f9ac9 90deg, #87e4f9 180deg, #0f74a6 270deg, #5bd1ef 360deg);
    border-radius: 9999px;
    box-shadow: 0 0 35px rgba(91, 209, 239, 0.35);
}

.drum-inner-shadow {
    box-shadow: inset 0 0 45px rgba(3, 10, 24, 0.95),
        inset 0 15px 30px rgba(0, 0, 0, 0.85);
}

.glass-door-reflection {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 35%, transparent 55%);
    pointer-events: none;
}

/* Tambur și haine: mișcarea e simulată în home.js; aici doar poziția de repaus (fără JS / reduced motion) */
.drum-rotator, .cd-cloth { will-change: transform; }
.tumble-1 { transform: translate(-38px, 60px) rotate(-18deg); }
.tumble-2 { transform: translate(34px, 64px) rotate(24deg); }
.tumble-3 { transform: translate(4px, 80px) rotate(-6deg); }
.tumble-4 { transform: translate(-64px, 38px) rotate(32deg); }
.tumble-5 { transform: translate(60px, 36px) rotate(-28deg); }
.tumble-6 { transform: translate(-14px, 58px) rotate(40deg); }
.tumble-7 { transform: translate(24px, 84px) rotate(-12deg); }
.tumble-8 { transform: translate(-48px, 76px) rotate(14deg); }
.tumble-9 { transform: translate(52px, 70px) rotate(8deg); }
.tumble-10 { transform: translate(-22px, 90px) rotate(-30deg); }
.tumble-11 { transform: translate(76px, 50px) rotate(22deg); }
.tumble-12 { transform: translate(-76px, 56px) rotate(-16deg); }
.tumble-13 { transform: translate(12px, 48px) rotate(18deg); }
.tumble-14 { transform: translate(-30px, 44px) rotate(-8deg); }

/* ===== Animații ===== */
.animate-spin-slow { animation: cdSpin 18s linear infinite; }
.animate-float-slow { animation: cdFloat 6s ease-in-out infinite; }
.animate-float-delayed { animation: cdFloat 7s ease-in-out 2s infinite; }
.animate-pulse-glow { animation: cdPulseGlow 3s ease-in-out infinite; }

@keyframes cdSpin {
    to { transform: rotate(360deg); }
}

@keyframes cdFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes cdPulseGlow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.06); }
}

/* ===== Ticker servicii ===== */
.marquee-track {
    display: flex;
    width: max-content;
    animation: cdMarqueeScroll 28s linear infinite;
}

.marquee-track:hover { animation-play-state: paused; }

@keyframes cdMarqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ===== FAQ dark ===== */
.cd-faq-dark details[open] summary i { transform: rotate(180deg); }
.cd-faq-dark summary { list-style: none; }
.cd-faq-dark summary::-webkit-details-marker { display: none; }

@media (prefers-reduced-motion: reduce) {
    .animate-spin-slow, .animate-float-slow, .animate-float-delayed, .animate-pulse-glow,
    .marquee-track,
    .cd-theme-dark .animate-ping, .cd-theme-dark .animate-bounce,
    .cd-theme-sky .animate-ping, .cd-theme-sky .animate-bounce {
        animation: none !important;
    }
    #bubblesCanvas { display: none; }
}