/* ==========================================================================
   Architectural surface lighting — body sections only
   Layer stack per section:  surface tint (::after, z0)
                          →  body wallpaper (site-body z1)
                          →  section content (z2)
   ========================================================================== */

:root {
    --surface-base: #f4f4f1;
    --surface-light: #f7f7f4;
    --surface-mid: #f0f1ef;
    --surface-rest: #f3f4f2;
    --surface-shadow: #eceeea;
    --surface-stone: #eeefec;

    --surface-junction-mission-contact: #f5f5f2;
    --surface-junction-contact-credibility: #f2f3f1;
    --surface-junction-credibility-showcase: #f3f4f2;

    --surface-cool-glow: rgba(172, 186, 192, 0.15);
    --surface-cool-glow-soft: rgba(160, 175, 181, 0.11);
    --surface-cool-glow-strong: rgba(175, 190, 198, 0.18);

    --surface-ambient-duration: 32s;
}

/* --------------------------------------------------------------------------
   Section shell — transparent so wallpaper can sit between tint and content
   -------------------------------------------------------------------------- */

.site-body .mission-section,
.site-body .why-section,
.site-body .contact-section,
.site-body .credibility-section,
.site-body .showcase-section,
.site-body .subpage-section {
    background: transparent !important;
    border-block: none;
}

.site-body .section-light-diagonal::after,
.site-body .section-light-rest::after,
.site-body .section-light-radial-right::after,
.site-body .section-light-neutral::after,
.site-body .section-light-diagonal-reverse::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Lighting patterns (on ::after — below wallpaper, above page base)
   -------------------------------------------------------------------------- */

.site-body .section-light-diagonal::after {
    background-color: var(--surface-junction-mission-contact);
    background-image: linear-gradient(
        135deg,
        var(--surface-light) 0%,
        var(--surface-stone) 52%,
        var(--surface-junction-mission-contact) 100%
    );
}

.site-body .section-light-rest::after {
    background-color: var(--surface-junction-mission-contact);
    background-image: linear-gradient(
        180deg,
        var(--surface-junction-mission-contact) 0%,
        var(--surface-rest) 50%,
        var(--surface-junction-mission-contact) 100%
    );
}

.site-body .section-light-radial-right::after {
    background-color: var(--surface-junction-contact-credibility);
    background-image:
        radial-gradient(
            circle at 85% 18%,
            var(--surface-cool-glow-strong) 0%,
            transparent 46%
        ),
        linear-gradient(
            180deg,
            var(--surface-junction-mission-contact) 0%,
            var(--surface-junction-contact-credibility) 100%
        );
}

.site-body .section-light-neutral::after {
    background-color: var(--surface-junction-credibility-showcase);
    background-image: linear-gradient(
        180deg,
        var(--surface-junction-contact-credibility) 0%,
        var(--surface-rest) 50%,
        var(--surface-junction-credibility-showcase) 100%
    );
}

.site-body .section-light-diagonal-reverse::after {
    background-color: var(--surface-light);
    background-image:
        radial-gradient(
            circle at 10% 72%,
            var(--surface-cool-glow-soft) 0%,
            transparent 42%
        ),
        linear-gradient(
            315deg,
            var(--surface-junction-credibility-showcase) 0%,
            var(--surface-base) 46%,
            var(--surface-light) 100%
        );
}

/* Optional ambient shift — contact radial only */
@media (prefers-reduced-motion: no-preference) {
    .site-body .section-light-radial-right::after {
        animation: surface-ambient-radial var(--surface-ambient-duration) ease-in-out infinite alternate;
    }
}

@keyframes surface-ambient-radial {
    0% {
        opacity: 0.88;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.03);
    }
}

/* Mobile — keep radial light on-screen */
@media (max-width: 768px) {
    .site-body .section-light-radial-right::after {
        background-image:
            radial-gradient(
                circle at 72% 14%,
                var(--surface-cool-glow-strong) 0%,
                transparent 50%
            ),
            linear-gradient(
                180deg,
                var(--surface-junction-mission-contact) 0%,
                var(--surface-junction-contact-credibility) 100%
            );
    }

    .site-body .section-light-diagonal-reverse::after {
        background-image:
            radial-gradient(
                circle at 22% 68%,
                var(--surface-cool-glow-soft) 0%,
                transparent 46%
            ),
            linear-gradient(
                315deg,
                var(--surface-junction-credibility-showcase) 0%,
                var(--surface-base) 46%,
                var(--surface-light) 100%
            );
    }
}

@media (max-width: 480px) {
    .site-body .section-light-radial-right::after {
        background-image:
            radial-gradient(
                circle at 68% 10%,
                var(--surface-cool-glow) 0%,
                transparent 52%
            ),
            linear-gradient(
                180deg,
                var(--surface-junction-mission-contact) 0%,
                var(--surface-junction-contact-credibility) 100%
            );
    }

    .site-body .section-light-diagonal-reverse::after {
        background-image:
            radial-gradient(
                circle at 28% 62%,
                var(--surface-cool-glow-soft) 0%,
                transparent 48%
            ),
            linear-gradient(
                315deg,
                var(--surface-junction-credibility-showcase) 0%,
                var(--surface-base) 46%,
                var(--surface-light) 100%
            );
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-body .section-light-radial-right::after {
        animation: none;
    }
}