/* =========================================================================
   H2 Centre for FID — Globals
   Basis, achtergrondsfeer (mesh + ambient blobs), reveal-animaties,
   SPA-secties en de footer-divider. Componenten staan in components.css,
   design tokens in assets/js/tailwind-config.js.
   ========================================================================= */

/* --- Base --- */
body {
    background-color: #F1EFE8;
    color: #2C2C2A;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Animated Mesh Gradient Background --- */
.mesh-bg {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -2;
    background-color: #F1EFE8;
    background-image:
        radial-gradient(at 80% 0%, hsla(161,72%,85%,0.4) 0px, transparent 50%),
        radial-gradient(at 0% 50%, hsla(161,69%,36%,0.1) 0px, transparent 50%),
        radial-gradient(at 80% 100%, hsla(161,82%,73%,0.3) 0px, transparent 50%);
    animation: moveGradient 20s ease-in-out infinite alternate;
}

@keyframes moveGradient {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* --- Infinite Looping SVG Shape --- */
.ambient-shape {
    position: fixed;
    z-index: -1;
    border: 1px solid rgba(29, 158, 117, 0.2);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morphRotate 15s linear infinite;
    pointer-events: none;
    mix-blend-mode: multiply;
}
.shape-1 { top: -10%; right: -5%; width: 50vw; height: 50vw; max-width: 600px; max-height: 600px; animation-duration: 25s; }
.shape-2 { bottom: -20%; left: -10%; width: 60vw; height: 60vw; max-width: 800px; max-height: 800px; border-color: rgba(8, 80, 65, 0.1); animation-direction: reverse; }

@keyframes morphRotate {
    0% { transform: rotate(0deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    33% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
    66% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
    100% { transform: rotate(360deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
}

/* --- Intersection Observer Animation Classes --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform;
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal.active, .reveal-scale.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* Stagger-delays UITGESCHAKELD: animaties worden instant getriggerd maar blijven
   smooth (de transition-duur/easing hierboven blijft staan). Dit overschrijft ook
   Tailwind's delay-* utilities en voorkomt vertraagde hover op reveal-elementen. */
.reveal, .reveal-scale { transition-delay: 0s !important; }

/* --- SPA Section Handling --- */
.app-section {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.app-section.active-section {
    display: block;
    opacity: 1;
}

/* --- Slanted Divider (footer) --- */
.slant-divider {
    clip-path: polygon(0 0, 100% 5vw, 100% 100%, 0 100%);
    margin-top: -5vw;
    padding-top: 8vw;
}