/* =============================================================================
   SKYLINE AFBOUW — ANIMATIES
   -----------------------------------------------------------------------------
   Alle keyframes en scroll-onthulling op één plek.
   Zet in config.php 'thema' => 'animaties' => false om alles uit te schakelen.
   ============================================================================= */

/* ==========================================================================
   SCROLL REVEALS
   Gebruik: <div data-reveal>…</div>
            data-reveal="left" | "right" | "scale" | "blur" | "clip"
            data-reveal-delay="120"   (in milliseconden)
   ========================================================================== */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity   .62s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
        transform .62s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
        filter    .62s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms),
        clip-path .7s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="scale"] { transform: scale(.97); }
[data-reveal="blur"]  { transform: translateY(24px); filter: blur(12px); }
[data-reveal="clip"]  { transform: none; clip-path: inset(0 0 100% 0); opacity: 1; }
[data-reveal="fade"]  { transform: none; }

[data-reveal].revealed {
    opacity: 1;
    transform: none;
    filter: none;
}
/* Alleen de variant "clip" schuift open met een uitsnede. Die uitsnede mag
   niet op álle onthulde blokken staan: inset(0 0 0 0) knipt namelijk alles af
   wat buiten het blok uitsteekt — schaduwen, tooltips, en bijvoorbeeld de
   kaart van Nederland die bewust over de sectierand heen loopt. */
[data-reveal="clip"].revealed { clip-path: inset(0 0 0 0); }

/* Kinderen na elkaar laten verschijnen: <div data-stagger>…</div> */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
[data-stagger].revealed > * { opacity: 1; transform: none; }
[data-stagger].revealed > *:nth-child(1)  { transition-delay: .00s; }
[data-stagger].revealed > *:nth-child(2)  { transition-delay: .07s; }
[data-stagger].revealed > *:nth-child(3)  { transition-delay: .14s; }
[data-stagger].revealed > *:nth-child(4)  { transition-delay: .21s; }
[data-stagger].revealed > *:nth-child(5)  { transition-delay: .28s; }
[data-stagger].revealed > *:nth-child(6)  { transition-delay: .35s; }
[data-stagger].revealed > *:nth-child(7)  { transition-delay: .42s; }
[data-stagger].revealed > *:nth-child(8)  { transition-delay: .49s; }
[data-stagger].revealed > *:nth-child(9)  { transition-delay: .56s; }
[data-stagger].revealed > *:nth-child(n+10) { transition-delay: .63s; }

/* Tekst per woord laten binnenkomen (JS splitst de woorden) */
.split-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.35em);
    transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
.revealed .split-word { opacity: 1; transform: none; }

/* Onderstreping die meegroeit */
.underline-grow {
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 0% 3px;
    transition: background-size .9s cubic-bezier(.16,1,.3,1) .25s;
    padding-bottom: 2px;
}
.revealed .underline-grow, .underline-grow.revealed { background-size: 100% 3px; }

/* ==========================================================================
   KEYFRAMES — BLOBS
   ========================================================================== */
@keyframes blobMorphA {
    0%, 100% { border-radius: 58% 42% 54% 46% / 52% 54% 46% 48%; }
    50%      { border-radius: 50% 50% 47% 53% / 55% 47% 53% 45%; }
}
@keyframes blobMorphB {
    0%, 100% { border-radius: 46% 54% 50% 50% / 54% 46% 50% 50%; }
    50%      { border-radius: 52% 48% 46% 54% / 47% 53% 47% 53%; }
}
@keyframes blobFloatA {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50%      { transform: translateY(-52%) scale(1.012); }
}
@keyframes blobFloatB {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50%      { transform: translateY(-48%) scale(.99); }
}
@keyframes blobMorphMiniA {
    0%, 100% { border-radius: 58% 42% 54% 46% / 52% 54% 46% 48%; }
    50%      { border-radius: 50% 50% 48% 52% / 54% 48% 52% 46%; }
}
@keyframes blobMorphMiniB {
    0%, 100% { border-radius: 48% 52% 46% 54% / 46% 55% 45% 54%; }
    50%      { border-radius: 54% 46% 50% 50% / 50% 51% 49% 50%; }
}
@keyframes blobFloatMiniA {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -52%) scale(1.01); }
}
@keyframes blobFloatMiniB {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -48%) scale(.99); }
}

/* ==========================================================================
   KEYFRAMES — ALGEMEEN
   ========================================================================== */
@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
@keyframes cardFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-13px) rotate(-1.2deg); }
}
@keyframes floatShape {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33%      { transform: translate(24px, -34px) rotate(120deg); }
    66%      { transform: translate(-18px, 24px) rotate(240deg); }
}
@keyframes ctaGlow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-6%, 6%) scale(1.12); }
}
@keyframes gradientSlide {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes pulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(15,157,110,.5); }
    70%  { box-shadow: 0 0 0 9px rgba(15,157,110,0); }
    100% { box-shadow: 0 0 0 0 rgba(15,157,110,0); }
}
@keyframes pulseRing {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow), var(--shadow-md); }
    50%      { box-shadow: 0 0 0 16px rgba(26,86,219,0), var(--shadow-md); }
}
@keyframes mapPulse {
    0%   { opacity: .8; transform: scale(.4); }
    100% { opacity: 0;  transform: scale(2.4); }
}
/* Radarpuls op de kaart: dijt vanuit de standplaats uit en dooft rustig weg. */
@keyframes mapRadar {
    0%   { opacity: 0;   transform: scale(.25); stroke-width: 2.6; }
    10%  { opacity: .85; }
    60%  { opacity: .30; }
    100% { opacity: 0;   transform: scale(3.6); stroke-width: .5; }
}
@keyframes scrollWheel {
    0%   { opacity: 0; transform: translate(-50%, 0); }
    35%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, 12px); }
}
@keyframes navDot {
    from { transform: translateX(-50%) scaleX(0); }
    to   { transform: translateX(-50%) scaleX(1); }
}
@keyframes rippleOut {
    to { transform: scale(3.2); opacity: 0; }
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(-24px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes stepIn {
    from { opacity: 0; transform: translateX(22px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes msgIn {
    from { opacity: 0; transform: translateY(12px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .4; }
    30%           { transform: translateY(-6px); opacity: 1; }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
    0%   { opacity: 0; transform: scale(.4); }
    60%  { transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes shakeX {
    0%, 100%    { transform: translateX(0); }
    20%, 60%    { transform: translateX(-5px); }
    40%, 80%    { transform: translateX(5px); }
}
@keyframes countFlash {
    0%   { color: var(--blue-blob-3); }
    100% { color: var(--accent); }
}

/* ==========================================================================
   MICRO-INTERACTIES
   ========================================================================== */

/* Kaart die licht meekantelt met de muis (JS zet --tx/--ty) */
[data-tilt] {
    transform: perspective(1000px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translateZ(0);
    transition: transform .45s cubic-bezier(.16,1,.3,1);
    transform-style: preserve-3d;
}
[data-tilt]:hover { transition: transform .12s linear; }

/* Magnetische knop (JS zet --mx-move/--my-move) */
[data-magnetic] {
    transform: translate(var(--mx-move, 0px), var(--my-move, 0px));
    transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}

/* Lichtvlek die de muis volgt (op .usp-card via --mx/--my) */
[data-spotlight] { position: relative; overflow: hidden; }

/* Tellers */
.counter { font-variant-numeric: tabular-nums; }
.counter.counting { animation: countFlash .4s var(--ease); }

/* Zachte lijn die van links naar rechts groeit */
.line-grow {
    position: relative;
}
.line-grow::after {
    content: ''; position: absolute; left: 0; bottom: -10px; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--accent), transparent);
    border-radius: 3px; transition: width 1.1s cubic-bezier(.16,1,.3,1) .2s;
}
.line-grow.revealed::after { width: 84px; }

/* Zwevende pijl in links */
.arrow-link {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--accent); font-weight: 700; text-decoration: none; font-size: .93rem;
    transition: gap .3s cubic-bezier(.34,1.56,.64,1);
}
.arrow-link:hover { gap: 15px; }
.arrow-link i { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.arrow-link:hover i { transform: translateX(3px); }

/* Glans die over een element schuift */
.shine { position: relative; overflow: hidden; }
.shine::after {
    content: ''; position: absolute; top: 0; left: -140%; width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
    transform: skewX(-22deg); transition: left .85s cubic-bezier(.16,1,.3,1);
    pointer-events: none;
}
.shine:hover::after { left: 140%; }

/* Zachte pagina-overgang bij het laden */
.page-in { animation: fadeUp .7s cubic-bezier(.16,1,.3,1) both; }

/* ==========================================================================
   TOEGANKELIJKHEID — respecteer de systeemvoorkeur
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal], [data-stagger] > *, .split-word {
        opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
    }
    .underline-grow { background-size: 100% 3px !important; }
}

/* Handmatig uitgeschakeld via config.php */
body.no-anim *, body.no-anim *::before, body.no-anim *::after {
    animation: none !important;
    transition-duration: .12s !important;
}
body.no-anim [data-reveal], body.no-anim [data-stagger] > * {
    opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
}


/* ==========================================================================
   LAVALAMP
   --------------------------------------------------------------------------
   Elke bel heeft zijn eigen baan en zijn eigen tijd, en die tijden zijn
   priemachtig verschillend (15, 17, 19, 21, 23, 24, 26 seconden). Daardoor
   herhaalt het geheel zich pas na minuten en ziet niemand er een lus in.

   De schaal is telkens ongelijk in x en y: een bel die stijgt wordt even
   langgerekt en zakt daarna weer breeduit, zoals warme was in een echte lamp.
   ========================================================================== */
@keyframes lavaA {
    0%,100% { transform: translate(0, 0) scale(1, 1); }
    28%     { transform: translate(-9px, -14px) scale(.96, 1.05); }
    55%     { transform: translate(7px, 12px) scale(1.05, .95); }
    78%     { transform: translate(11px, -6px) scale(.99, 1.02); }
}
@keyframes lavaB {
    0%,100% { transform: translate(0, 0) scale(1, 1); }
    26%     { transform: translate(14px, 24px) scale(1.07, .92); }
    54%     { transform: translate(26px, -18px) scale(.9, 1.11); }
    78%     { transform: translate(10px, 14px) scale(1.03, .97); }
}
@keyframes lavaC {
    0%,100% { transform: translate(0, 0) scale(1, 1); }
    26%     { transform: translate(-16px, -22px) scale(.92, 1.09); }
    54%     { transform: translate(-28px, 20px) scale(1.1, .9); }
    80%     { transform: translate(-11px, -10px) scale(.97, 1.03); }
}
@keyframes lavaD {
    0%,100% { transform: translate(0, 0) scale(1, 1); }
    30%     { transform: translate(11px, -20px) scale(.93, 1.09); }
    58%     { transform: translate(-6px, 16px) scale(1.09, .92); }
    82%     { transform: translate(8px, -9px) scale(.97, 1.04); }
}
/* De losse bellen. Elke bel maakt dezelfde reis: eerst los van de massa (dan
   zie je hem als aparte bel met een dunne hals), daarna er middenin (dan is hij
   even helemaal verdwenen) en weer terug. De looptijden (15 t/m 26 s) delen
   niet op elkaar, dus het geheel herhaalt zich pas na minuten. */
@keyframes lavaE {
    0%,100% { transform: translate(0, 0) scale(1, 1); }
    32%     { transform: translate(-28px, -20px) scale(.88, 1.14); }
    64%     { transform: translate(16px, 24px) scale(1.16, .87); }
}
@keyframes lavaF {
    0%,100% { transform: translate(0, 0) scale(1, 1); }
    34%     { transform: translate(26px, -24px) scale(1.14, .88); }
    68%     { transform: translate(-14px, 20px) scale(.87, 1.15); }
}
@keyframes lavaG {
    0%,100% { transform: translate(0, 0) scale(1, 1); }
    30%     { transform: translate(-12px, -64px) scale(.85, 1.17); }
    62%     { transform: translate(8px, 14px) scale(1.18, .85); }
    84%     { transform: translate(16px, -22px) scale(.95, 1.05); }
}
@keyframes lavaH {
    0%,100% { transform: translate(0, 0) scale(1, 1); }
    34%     { transform: translate(16px, -58px) scale(1.14, .87); }
    66%     { transform: translate(-10px, 18px) scale(.86, 1.17); }
    88%     { transform: translate(6px, -14px) scale(1.04, .96); }
}
@keyframes lavaI {
    0%,100% { transform: translate(0, 0) scale(1, 1); }
    40%     { transform: translate(-20px, -62px) scale(.86, 1.16); }
    72%     { transform: translate(12px, 22px) scale(1.2, .84); }
}
/* De twee satellieten opzij rollen eerst naar buiten en daarna dwars door de
   massa heen. */
@keyframes lavaJ {
    0%,100% { transform: translate(0, 0) scale(1, 1); }
    26%     { transform: translate(54px, -16px) scale(1.1, .9); }
    58%     { transform: translate(-48px, 12px) scale(.86, 1.16); }
    84%     { transform: translate(18px, -8px) scale(1.1, .91); }
}
@keyframes lavaK {
    0%,100% { transform: translate(0, 0) scale(1, 1); }
    28%     { transform: translate(-52px, 20px) scale(1.12, .89); }
    60%     { transform: translate(50px, -14px) scale(.85, 1.17); }
    84%     { transform: translate(-16px, 10px) scale(1.08, .93); }
}

/* De figuur zelf ademt mee, maar heel licht — hij mag niet gaan dobberen. */
@keyframes heroZweef {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

/* De gloed achter de lamp ademt heel langzaam mee. */
@keyframes gloedAdem {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: .80; }
    50%      { transform: translate(-50%, -52%) scale(1.07); opacity: .62; }
}

/* De fotoband schuift precies één rij op. De tweede rij staat op dat moment
   op exact dezelfde plek als de eerste bij het begin, dus de sprong terug
   naar nul is onzichtbaar. */
@keyframes bandSchuif {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 7px)); }   /* halve rij + halve gap */
}


/* Het streepje onder een sectiekop groeit open zodra de kop in beeld komt. */
@keyframes streepGroei {
    from { transform: translateX(-50%) scaleX(0); }
    to   { transform: translateX(-50%) scaleX(1); }
}
@keyframes streepGroeiLinks {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* De provincie die uit de postcodecheck komt, licht twee keer rustig op. Geen
   beweging: een provincie die verschuift leest als een storing. */
@keyframes provLicht {
    0%, 100% { filter: none; }
    35%      { filter: brightness(1.1) drop-shadow(0 0 9px var(--treffer-gloed, transparent)); }
}