/**
 * Background Animations
 * Driven by --scroll-progress (0 to 1) set by JS
 */

/* Base setup for all animated sections */
.section {
    /* Ensure variables have defaults */
    --scroll-progress: 0;
    position: relative;
    z-index: 0; /* Create stacking context */
    overflow: hidden;
}

/* Ensure content stays on top of animations */
.section-container {
    position: relative;
    z-index: 2;
}

.section::before,
.section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Behind content (z-index 2), above background (z-index 0) */
    transition: opacity 0.3s ease;
}

/* 1. Hypnose - "Tiefe & Fokus" */
.section--hypnose:not(.no-bg-animation)::before {
    background: radial-gradient(
        circle at 50% 50%, 
        rgba(194, 71, 159, 0.18) 0%, 
        transparent 70%
    );
    opacity: 0.9;
    transform: scale(calc(1 + var(--scroll-progress) * 2));
    transform-origin: center;
    will-change: transform;
    mix-blend-mode: multiply;
}

.section--hypnose:not(.no-bg-animation)::after {
    background: radial-gradient(
        circle at 80% 20%, 
        rgba(44, 26, 61, 0.14) 0%, 
        transparent 50%
    );
    transform: translate(
        calc(var(--scroll-progress) * -100px),
        calc(var(--scroll-progress) * 100px)
    );
    will-change: transform;
    opacity: 0.8;
    mix-blend-mode: multiply;
}

/* 2. Mentalcoaching - "Klarheit & Ordnung" */
.section--mentalcoaching {
    position: relative;
}

.section--mentalcoaching::before {
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(194, 71, 159, 0.14) 0%, transparent 22%),
        radial-gradient(circle at 80% 80%, rgba(194, 71, 159, 0.14) 0%, transparent 22%);
    background-size: 100% 100%;
    opacity: 0.7;
    transform: translateY(calc(var(--scroll-progress) * 150px));
    will-change: transform;
    mix-blend-mode: multiply;
}

.section--mentalcoaching::after {
    background-image: 
        linear-gradient(rgba(44, 26, 61, 0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44, 26, 61, 0.10) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: calc(0.25 + var(--scroll-progress) * 0.35);
    transform: scale(calc(1 + var(--scroll-progress) * 0.15));
    will-change: transform, opacity;
    mix-blend-mode: multiply;
}

/* Sea Lion Animation for Mentalcoaching */
.sea-lion-animation {
    position: absolute;
    right: 5%;
    bottom: 0;
    width: 200px;
    height: 250px;
    z-index: 1;
    pointer-events: none;
}

.water-surface {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(
        to bottom,
        rgba(100, 180, 220, 0) 0%,
        rgba(100, 180, 220, 0.3) 30%,
        rgba(70, 150, 200, 0.5) 70%,
        rgba(50, 120, 180, 0.7) 100%
    );
    overflow: hidden;
    animation: waterWaves 3s ease-in-out infinite;
}

.water-surface::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 300%;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.3) 0px,
        rgba(255, 255, 255, 0.5) 20px,
        rgba(255, 255, 255, 0.3) 40px
    );
    animation: waveMove 4s linear infinite;
}

.sea-lion {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(120px);
    animation: seaLionEmerge 6s ease-in-out infinite;
}

.sea-lion-body {
    transform-origin: center bottom;
    animation: seaLionBob 2s ease-in-out infinite;
}

@keyframes seaLionEmerge {
    0%, 100% {
        transform: translateY(120px);
    }
    30%, 70% {
        transform: translateY(0px);
    }
}

@keyframes seaLionBob {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(2deg);
    }
}

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

@keyframes waveMove {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(40px);
    }
}

/* Responsive adjustments for sea lion */
@media (max-width: 768px) {
    .sea-lion-animation {
        right: 50%;
        transform: translateX(50%);
        width: 150px;
        height: 200px;
    }
}

@media (max-width: 480px) {
    .sea-lion-animation {
        width: 120px;
        height: 160px;
    }
}

/* 3. Spirituelle Mentorin - Helles Blau (statisch, ohne Animation) */
.section--spirituelle {
    background: linear-gradient(
        180deg,
        rgba(235, 249, 255, 1) 0%,
        rgba(206, 238, 255, 1) 55%,
        rgba(178, 227, 255, 1) 100%
    ) !important;
}

/* Disable overlays for a clean, light-blue background */
.section--spirituelle::before,
.section--spirituelle::after {
    opacity: 0;
    background: none;
}

/* 4. Trauerbegleitung - "Regen" */
.section--trauerbegleitung {
    position: relative;
    overflow: hidden;
}

.section--trauerbegleitung .rain {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.drop {
    position: absolute;
    top: -180px;
    width: 2px;
    height: 80px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(80, 90, 120, 0),
        rgba(80, 90, 120, 0.85),
        rgba(80, 90, 120, 0.45)
    );
    animation-name: rainFall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    will-change: transform;
    z-index: 1;
}

@keyframes rainFall {
    0% {
        opacity: 0;
        transform: translateY(-240px);
    }
    12% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(120vh);
    }
}


/* 5. Über mich - "Wachstum" */
.section--about::before {
    background: radial-gradient(
        ellipse at bottom right, 
        rgba(194, 71, 159, 0.22) 0%, 
        transparent 70%
    );
    transform: scale(calc(0.8 + var(--scroll-progress) * 0.5));
    transform-origin: bottom right;
    will-change: transform;
    mix-blend-mode: multiply;
}

/* 6. Preise - "Struktur & Wert" */
.section--pricing::before {
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(212, 175, 55, 0.28) 50%,
        transparent 60%
    );
    background-size: 200% 200%;
    background-position: calc(var(--scroll-progress) * 100%) center;
    will-change: background-position;
    opacity: 0.65;
    mix-blend-mode: multiply;
}

/* 7. Kontakt - "Verbindung" */
.section--contact::before {
    background-image: radial-gradient(circle, var(--color-primary) 2px, transparent 2px);
    background-size: 50px 50px;
    opacity: 0.15;
    mask-image: linear-gradient(to bottom, transparent, black, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black, transparent);
    transform: translateY(calc(var(--scroll-progress) * -80px));
    mix-blend-mode: multiply;
}