/* ============================================
   DARK THEME
   ============================================ */

body[data-theme="dark"] {
    --primary-color: #ef4444;
    --secondary-color: #b91c1c;
    --accent-color: #f97316;
    --text-dark: #fafafa;
    --text-light: #d4d4d4;
    --text-muted: #a3a3a3;
    --light-bg: #141010;
    --white: #050505;
    --border-color: #3f1d1d;
}

body[data-theme="dark"] .navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .theme-toggle .sun-icon {
    display: none;
}

body[data-theme="dark"] .theme-toggle .moon-icon {
    display: block;
}

body[data-theme="dark"] .hero {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(249, 115, 22, 0.05));
}

body[data-theme="dark"] .who-its-for,
body[data-theme="dark"] .about-sean,
body[data-theme="dark"] .contact {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(185, 28, 28, 0.04));
}

body[data-theme="dark"] .how-sessions-work,
body[data-theme="dark"] .faq {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(239, 68, 68, 0.04));
}

body[data-theme="dark"] .card:hover {
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.22);
}

body[data-theme="dark"] .faq-item.active {
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.22);
}

body[data-theme="dark"] .avatar-placeholder {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(249, 115, 22, 0.12));
}

/* ============================================
   DARK THEME BACKDROP
   ============================================ */

body[data-theme="dark"] .theme-backdrop {
    opacity: 1;
}

body[data-theme="dark"] .theme-layer-atmosphere {
    inset: auto 0 0;
    height: min(38vh, 360px);
    background:
        radial-gradient(ellipse at 7% 86%, rgba(0, 0, 0, 0.9) 0 24%, transparent 55%),
        radial-gradient(ellipse at 24% 72%, rgba(0, 0, 0, 0.72) 0 18%, transparent 42%),
        radial-gradient(ellipse at 48% 82%, rgba(0, 0, 0, 0.96) 0 38%, transparent 68%),
        radial-gradient(ellipse at 74% 73%, rgba(0, 0, 0, 0.78) 0 20%, transparent 46%),
        radial-gradient(ellipse at 94% 88%, rgba(0, 0, 0, 0.92) 0 26%, transparent 56%),
        linear-gradient(to top, rgba(0, 0, 0, 0.98), rgba(0, 0, 0, 0.56) 58%, transparent);
    filter: blur(4px);
}

body[data-theme="dark"] .theme-layer-bottom,
body[data-theme="dark"] .theme-layer-edge {
    background: #020407;
    filter: drop-shadow(0 0 22px rgba(239, 68, 68, 0.12));
}

body[data-theme="dark"] .theme-layer-bottom {
    left: -8vw;
    right: -8vw;
    bottom: -16vh;
    height: min(42vh, 410px);
    border-radius: 48% 52% 0 0 / 36% 42% 0 0;
    box-shadow:
        0 -30px 70px rgba(0, 0, 0, 0.55),
        13vw -7vh 0 1vw #020407,
        28vw -12vh 0 2vw #020407,
        43vw -8vh 0 2.5vw #020407,
        62vw -13vh 0 1.5vw #020407,
        78vw -8vh 0 2vw #020407;
    animation: bottomBreath 10s ease-in-out infinite;
}

body[data-theme="dark"] .theme-layer-edge {
    top: 16vh;
    bottom: -7vh;
    width: min(26vw, 300px);
    opacity: 0.92;
}

body[data-theme="dark"] .theme-layer-edge-left {
    left: max(-170px, -13vw);
    border-radius: 0 64% 54% 0 / 0 24% 76% 0;
    box-shadow:
        5vw 7vh 0 -1.5vw #020407,
        7vw 25vh 0 -0.5vw #020407,
        3vw 47vh 0 1vw #020407,
        inset -28px 0 34px rgba(9, 13, 18, 0.8);
    animation: leftCreep 13s ease-in-out infinite;
}

body[data-theme="dark"] .theme-layer-edge-right {
    right: max(-170px, -13vw);
    border-radius: 64% 0 0 54% / 24% 0 0 76%;
    box-shadow:
        -5vw 8vh 0 -1.5vw #020407,
        -7vw 26vh 0 -0.5vw #020407,
        -3vw 49vh 0 1vw #020407,
        inset 28px 0 34px rgba(9, 13, 18, 0.8);
    animation: rightCreep 14s ease-in-out infinite;
}

body[data-theme="dark"] .theme-layer-edge::before,
body[data-theme="dark"] .theme-layer-edge::after,
body[data-theme="dark"] .theme-layer-bottom::before,
body[data-theme="dark"] .theme-layer-bottom::after {
    content: "";
    position: absolute;
    background: #020407;
}

body[data-theme="dark"] .theme-layer-edge-left::before {
    width: 94%;
    height: 21%;
    right: -50%;
    top: 18%;
    border-radius: 48% 52% 42% 58% / 68% 36% 64% 32%;
    transform: rotate(-16deg);
    box-shadow: 34px 24px 0 -18px #020407;
    animation: reachLeftHigh 7s ease-in-out infinite;
}

body[data-theme="dark"] .theme-layer-edge-left::after {
    width: 78%;
    height: 17%;
    right: -36%;
    top: 52%;
    border-radius: 48% 52% 58% 42%;
    transform: rotate(14deg);
    box-shadow: 28px -19px 0 -16px #020407;
    animation: reachLeftLow 8.5s ease-in-out infinite;
}

body[data-theme="dark"] .theme-layer-edge-right::before {
    width: 96%;
    height: 21%;
    left: -52%;
    top: 22%;
    border-radius: 52% 48% 58% 42% / 36% 68% 32% 64%;
    transform: rotate(16deg);
    box-shadow: -34px 24px 0 -18px #020407;
    animation: reachRightHigh 7.8s ease-in-out infinite;
}

body[data-theme="dark"] .theme-layer-edge-right::after {
    width: 80%;
    height: 17%;
    left: -38%;
    top: 58%;
    border-radius: 52% 48% 42% 58%;
    transform: rotate(-14deg);
    box-shadow: -28px -19px 0 -16px #020407;
    animation: reachRightLow 9s ease-in-out infinite;
}

body[data-theme="dark"] .theme-layer-bottom::before {
    width: min(34vw, 370px);
    height: min(14vh, 135px);
    left: 3vw;
    top: 8%;
    border-radius: 52% 48% 44% 56% / 62% 40% 60% 38%;
    transform: rotate(-9deg);
    box-shadow: 30px 17px 0 -18px #020407;
    animation: bottomArmLeft 9s ease-in-out infinite;
}

body[data-theme="dark"] .theme-layer-bottom::after {
    width: min(36vw, 390px);
    height: min(15vh, 145px);
    right: 2vw;
    top: 3%;
    border-radius: 48% 52% 56% 44% / 40% 62% 38% 60%;
    transform: rotate(8deg);
    box-shadow: -30px 17px 0 -18px #020407;
    animation: bottomArmRight 9.6s ease-in-out infinite;
}

body[data-theme="dark"] .theme-reach {
    height: clamp(26px, 3.4vw, 46px);
    width: clamp(108px, 16vw, 230px);
    background: transparent;
    border-top: clamp(10px, 1.25vw, 17px) solid #020407;
    border-radius: 70% 32% 38% 74% / 100% 46% 54% 0;
    transform-origin: left center;
}

body[data-theme="dark"] .theme-reach::before,
body[data-theme="dark"] .theme-reach::after {
    content: "";
    position: absolute;
    right: -1px;
    width: clamp(26px, 3vw, 42px);
    height: clamp(7px, 0.8vw, 12px);
    background: #020407;
    border-radius: 999px 70% 70% 999px;
    transform-origin: left center;
}

body[data-theme="dark"] .theme-reach::before {
    top: -22px;
    transform: rotate(-42deg);
}

body[data-theme="dark"] .theme-reach::after {
    top: -4px;
    transform: rotate(34deg);
}

body[data-theme="dark"] .theme-layer-edge-right .theme-reach {
    transform-origin: right center;
    border-radius: 32% 70% 74% 38% / 46% 100% 0 54%;
}

body[data-theme="dark"] .theme-layer-edge-right .theme-reach::before,
body[data-theme="dark"] .theme-layer-edge-right .theme-reach::after {
    left: -3px;
    right: auto;
    transform-origin: right center;
}

body[data-theme="dark"] .reach-left-1 {
    left: 48%;
    top: 30%;
    transform: rotate(-14deg);
    animation: fingerLeft 6s ease-in-out infinite;
}

body[data-theme="dark"] .reach-left-2 {
    left: 44%;
    top: 45%;
    width: clamp(88px, 13vw, 185px);
    transform: rotate(23deg) scaleY(0.92);
    animation: fingerLeft 7.5s ease-in-out infinite 0.6s;
}

body[data-theme="dark"] .reach-left-3 {
    left: 50%;
    top: 69%;
    width: clamp(76px, 11vw, 160px);
    transform: rotate(-4deg) scaleY(0.8);
    animation: fingerLeft 8s ease-in-out infinite 1s;
}

body[data-theme="dark"] .reach-right-1 {
    right: 48%;
    top: 33%;
    transform: rotate(14deg);
    animation: fingerRight 6.6s ease-in-out infinite 0.2s;
}

body[data-theme="dark"] .reach-right-2 {
    right: 42%;
    top: 50%;
    width: clamp(92px, 13vw, 190px);
    transform: rotate(-23deg) scaleY(0.92);
    animation: fingerRight 7.7s ease-in-out infinite 0.7s;
}

body[data-theme="dark"] .reach-right-3 {
    right: 50%;
    top: 72%;
    width: clamp(74px, 10vw, 155px);
    transform: rotate(3deg) scaleY(0.8);
    animation: fingerRight 8.4s ease-in-out infinite 1.2s;
}

body[data-theme="dark"] .theme-eye {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.78);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.78);
    animation: shadowBlink 5.2s ease-in-out infinite;
}

body[data-theme="dark"] .eye-left-1 {
    right: 26%;
    top: 24%;
}

body[data-theme="dark"] .eye-left-2 {
    right: 18%;
    top: 29%;
    animation-delay: 1.2s;
}

body[data-theme="dark"] .eye-right-1 {
    left: 24%;
    top: 27%;
    animation-delay: 0.5s;
}

body[data-theme="dark"] .eye-right-2 {
    left: 15%;
    top: 34%;
    animation-delay: 1.6s;
}

body[data-theme="dark"] .eye-bottom-1 {
    left: 17%;
    top: 31%;
    animation-delay: 0.9s;
}

body[data-theme="dark"] .eye-bottom-2 {
    left: 50%;
    top: 24%;
    animation-delay: 2s;
}

body[data-theme="dark"] .eye-bottom-3 {
    right: 16%;
    top: 28%;
    animation-delay: 1.4s;
}

@keyframes bottomBreath {
    0%, 100% { transform: translateY(0) scaleX(1); }
    50% { transform: translateY(-10px) scaleX(1.025); }
}

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

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

@keyframes reachLeftHigh {
    0%, 100% { transform: rotate(-18deg) translateX(0); }
    50% { transform: rotate(-10deg) translateX(16px); }
}

@keyframes reachLeftLow {
    0%, 100% { transform: rotate(14deg) translateX(0); }
    50% { transform: rotate(21deg) translateX(12px); }
}

@keyframes reachRightHigh {
    0%, 100% { transform: rotate(18deg) translateX(0); }
    50% { transform: rotate(10deg) translateX(-16px); }
}

@keyframes reachRightLow {
    0%, 100% { transform: rotate(-14deg) translateX(0); }
    50% { transform: rotate(-21deg) translateX(-12px); }
}

@keyframes bottomArmLeft {
    0%, 100% { transform: rotate(-9deg) translateX(0); }
    50% { transform: rotate(-14deg) translateX(18px); }
}

@keyframes bottomArmRight {
    0%, 100% { transform: rotate(8deg) translateX(0); }
    50% { transform: rotate(13deg) translateX(-18px); }
}

@keyframes fingerLeft {
    0%, 100% { margin-left: 0; }
    50% { margin-left: 11px; }
}

@keyframes fingerRight {
    0%, 100% { margin-right: 0; }
    50% { margin-right: 11px; }
}

@keyframes shadowBlink {
    0%, 84%, 100% { opacity: 0.72; transform: scaleY(1); }
    88%, 92% { opacity: 0.16; transform: scaleY(0.2); }
}

@media (max-width: 768px) {
    body[data-theme="dark"] .theme-layer-edge {
        top: 24vh;
        width: 34vw;
        opacity: 0.78;
    }

    body[data-theme="dark"] .theme-layer-edge-left {
        left: -25vw;
    }

    body[data-theme="dark"] .theme-layer-edge-right {
        right: -25vw;
    }

    body[data-theme="dark"] .theme-layer-bottom {
        height: 32vh;
        bottom: -13vh;
    }

    body[data-theme="dark"] .theme-reach {
        width: clamp(62px, 17vw, 112px);
        height: 22px;
        border-top-width: 8px;
    }

    body[data-theme="dark"] .theme-reach::before,
    body[data-theme="dark"] .theme-reach::after {
        width: 20px;
        height: 6px;
    }

    body[data-theme="dark"] .theme-reach::before {
        top: -17px;
    }

    body[data-theme="dark"] .theme-reach::after {
        top: -3px;
    }

    body[data-theme="dark"] .theme-eye {
        width: 6px;
        height: 6px;
    }

    body[data-theme="dark"] .nav-menu {
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.3);
    }
}