/* ═══════════════════════════════════════════════════════════════
   Home · HERO + marquee — "Zacht-tactiel toy-craft"
   Lichte, warme premium-speelse hero op crème canvas. Links tekst +
   CTA's, rechts een speelse collage van échte productfoto's in zachte
   witte foto-wells op zwevende blobs. Tokens uit style.css; alleen
   sectie-specifieke .hero-* classes. Gedeeld (.btn, .eyebrow, .blob,
   .marquee) niet herdefiniëren.
   ═══════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    max-width: var(--wrap);
    margin-inline: auto;
    padding: clamp(36px, 6vw, 84px) var(--pad-x) clamp(56px, 8vw, 104px);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    isolation: isolate;
}

/* ── Zwevende decorvormen achter de hele hero ─────────────────── */
.hero-decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}
.hero-blob { position: absolute; }
.hero-blob-grape {
    width: clamp(220px, 32vw, 420px); aspect-ratio: 1;
    top: -6%; right: 4%;
    background: radial-gradient(circle at 32% 30%, var(--grape-100), #C7D2EC);
    opacity: .85;
}
.hero-blob-coral {
    width: clamp(160px, 22vw, 300px); aspect-ratio: 1;
    bottom: 2%; right: 30%;
    background: radial-gradient(circle at 35% 32%, #FFD9C9, var(--coral-100));
    opacity: .8;
}
.hero-blob-teal {
    width: clamp(120px, 16vw, 210px); aspect-ratio: 1;
    top: 18%; left: -5%;
    background: radial-gradient(circle at 34% 32%, #E4F6F8, var(--teal-100));
    opacity: .7;
    animation: hero-drijf 9s var(--vloei) infinite;
}
.hero-blob-sun {
    width: clamp(90px, 12vw, 150px); aspect-ratio: 1;
    bottom: 22%; left: 16%;
    background: radial-gradient(circle at 35% 32%, #FFF3D2, var(--sun-100));
    opacity: .75;
    animation: hero-drijf 7.5s var(--vloei) infinite .8s;
}

/* ── Tekstkolom ───────────────────────────────────────────────── */
.hero-tekst { position: relative; z-index: 2; max-width: 38rem; }

.hero-eyebrow {
    margin-bottom: clamp(18px, 2.5vw, 26px);
    box-shadow: var(--sh-sm);
}
.hero-eyebrow .icoon { color: var(--grape); }

.hero-titel {
    font-size: var(--t-4xl);
    line-height: 1.02;
    letter-spacing: -.02em;
    margin-bottom: clamp(16px, 2.4vw, 24px);
}
.hero-accent {
    color: var(--grape);
    position: relative;
    white-space: nowrap;
}
/* Speels handgetekend onderstreepje onder het accentwoord */
.hero-accent::after {
    content: '';
    position: absolute;
    left: -.04em; right: -.04em; bottom: .04em;
    height: .28em;
    background: var(--sun);
    border-radius: var(--r-pill);
    z-index: -1;
    transform: rotate(-1.2deg);
    opacity: .9;
}

.hero-intro {
    font-size: var(--t-lg);
    color: var(--ink-soft);
    max-width: 46ch;
    margin-bottom: clamp(26px, 3.5vw, 38px);
}

.hero-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: clamp(22px, 3vw, 30px);
}

.hero-subnoot {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-sm);
    color: var(--ink-soft);
}
.hero-subnoot .icoon { color: var(--teal); flex: none; }

/* ── Visuele kolom: speelse fotocollage ───────────────────────── */
.hero-visual {
    position: relative;
    z-index: 1;
    align-self: stretch;
    min-height: clamp(360px, 42vw, 520px);
}
.hero-collage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

/* Foto-well = zacht wit kaartje onder een speelse hoek.
   data-parallax (op de figure) zet transform via JS → de RUSTHOEK +
   float-animatie staan daarom op .hero-well-binnen, niet op de figure. */
.hero-well {
    position: absolute;
    margin: 0;
    z-index: 2;
}
.hero-well-binnen {
    display: block;
    background:
        radial-gradient(120% 120% at 30% 16%, #fff 0%, transparent 58%),
        linear-gradient(160deg, var(--surface), var(--surface-2));
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-md);
    padding: clamp(12px, 1.6vw, 20px);
    transition: transform .4s var(--veer), box-shadow .4s var(--vloei);
    will-change: transform;
}
.hero-well-binnen img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(20, 32, 74, .18));
}
.hero-well:hover .hero-well-binnen {
    transform: translateY(-6px) rotate(0deg) scale(1.03);
    box-shadow: var(--sh-lg);
}

/* Plaatsing + rusthoek per well (4-foto layout = standaard).
   Bovenste twee zweven zachtjes. */
.hero-collage-4 .hero-well-1 { width: 46%; top: 0;    left: 4%; }
.hero-collage-4 .hero-well-1 .hero-well-binnen { transform: rotate(-5deg); animation: hero-zweef 6s var(--vloei) infinite; }
.hero-collage-4 .hero-well-2 { width: 42%; top: 8%;   right: 0; }
.hero-collage-4 .hero-well-2 .hero-well-binnen { transform: rotate(4deg);  animation: hero-zweef 7s var(--vloei) infinite 1.1s; }
.hero-collage-4 .hero-well-3 { width: 40%; bottom: 0; left: 0; }
.hero-collage-4 .hero-well-3 .hero-well-binnen { transform: rotate(3.5deg); }
.hero-collage-4 .hero-well-4 { width: 38%; bottom: 6%; right: 6%; }
.hero-collage-4 .hero-well-4 .hero-well-binnen { transform: rotate(-4deg); }

/* 3-foto layout: driehoek-scatter */
.hero-collage-3 .hero-well-1 { width: 50%; top: 0;     left: 2%; }
.hero-collage-3 .hero-well-1 .hero-well-binnen { transform: rotate(-5deg); animation: hero-zweef 6s var(--vloei) infinite; }
.hero-collage-3 .hero-well-2 { width: 44%; top: 14%;   right: 0; }
.hero-collage-3 .hero-well-2 .hero-well-binnen { transform: rotate(4.5deg); animation: hero-zweef 7s var(--vloei) infinite 1.1s; }
.hero-collage-3 .hero-well-3 { width: 46%; bottom: 0;  left: 16%; }
.hero-collage-3 .hero-well-3 .hero-well-binnen { transform: rotate(2.5deg); }

/* 2-foto layout: naast/onder elkaar, speels */
.hero-collage-2 .hero-well-1 { width: 54%; top: 4%;     left: 2%; }
.hero-collage-2 .hero-well-1 .hero-well-binnen { transform: rotate(-5deg); animation: hero-zweef 6s var(--vloei) infinite; }
.hero-collage-2 .hero-well-2 { width: 50%; bottom: 4%;  right: 2%; }
.hero-collage-2 .hero-well-2 .hero-well-binnen { transform: rotate(4.5deg); animation: hero-zweef 7s var(--vloei) infinite 1.1s; }

/* 1-foto layout: groot, gecentreerd, lichte tilt */
.hero-collage-1 .hero-well-1 { width: 66%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hero-collage-1 .hero-well-1 .hero-well-binnen { transform: rotate(-3deg); animation: hero-zweef 6s var(--vloei) infinite; }

/* ── Sticker-prijslabel (speels accent op de collage) ─────────── */
.hero-prijssticker {
    position: absolute;
    z-index: 4;
    top: auto; bottom: 8%; right: 3%; left: auto;
    pointer-events: none;
}
.hero-prijssticker-binnen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: clamp(78px, 9vw, 104px); aspect-ratio: 1;
    border-radius: 50%;
    background: var(--sun);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-xs);
    line-height: 1;
    text-transform: lowercase;
    box-shadow: 0 14px 30px rgba(255, 194, 74, .45);
    border: 3px solid var(--surface);
    transform: rotate(-12deg);
    animation: hero-zweef 5.5s var(--vloei) infinite .4s;
}
.hero-prijssticker-binnen b { font-size: var(--t-lg); font-weight: 700; margin-top: 2px; }

/* ── Sterretjes / sparkles ────────────────────────────────────── */
.hero-ster {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    color: var(--coral);
    filter: drop-shadow(0 4px 8px rgba(18, 174, 224, .3));
}
.hero-ster-1 { top: -3%;  right: 14%; color: var(--grape); animation: hero-twinkel 3.4s ease-in-out infinite; }
.hero-ster-2 { bottom: 12%; right: -2%; color: var(--sun);  animation: hero-twinkel 4.2s ease-in-out infinite .6s; }
.hero-ster-3 { top: 46%;  right: 40%; color: var(--teal); animation: hero-twinkel 3.8s ease-in-out infinite 1.2s; }

/* ── Fallback (geen foto's): vrolijke sticker op blobs ────────── */
.hero-leeg {
    display: grid;
    place-items: center;
    min-height: inherit;
}
.hero-leeg-sticker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: clamp(200px, 26vw, 280px); aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(120% 120% at 30% 22%, #fff 0%, transparent 60%),
        var(--grape-100);
    color: var(--grape);
    border: 4px solid var(--surface);
    box-shadow: var(--sh-lg);
    transform: rotate(-4deg);
    animation: hero-zweef 6s var(--vloei) infinite;
    text-align: center;
    padding: 1rem;
}
.hero-leeg-sticker strong { font-family: var(--font-display); font-size: var(--t-lg); color: var(--ink); margin-top: 6px; }
.hero-leeg-sticker em { font-family: var(--font-display); font-style: normal; font-weight: 600; color: var(--coral-ink); font-size: var(--t-base); }

/* ── Scroll-cue (decoratief) ──────────────────────────────────── */
.hero-scroll {
    position: absolute;
    left: var(--pad-x);
    bottom: clamp(12px, 2vw, 22px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--t-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.hero-scroll-muis {
    display: inline-flex;
    justify-content: center;
    width: 24px; height: 38px;
    border: 2px solid var(--border-sterk);
    border-radius: var(--r-pill);
    padding-top: 6px;
}
.hero-scroll-muis span {
    width: 4px; height: 8px;
    border-radius: var(--r-pill);
    background: var(--grape);
    animation: hero-muis 1.8s var(--vloei) infinite;
}

/* ── Animaties ────────────────────────────────────────────────── */
@keyframes hero-zweef {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -12px; }
}
@keyframes hero-drijf {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 14px; }
}
@keyframes hero-twinkel {
    0%, 100% { opacity: .35; scale: .8; }
    50%      { opacity: 1;   scale: 1.12; }
}
@keyframes hero-muis {
    0%   { opacity: 0; translate: 0 -4px; }
    35%  { opacity: 1; }
    70%  { opacity: 1; translate: 0 8px; }
    100% { opacity: 0; translate: 0 8px; }
}

/* ── Responsief ───────────────────────────────────────────────── */
@media (max-width: 980px) {
    .hero { gap: clamp(20px, 4vw, 40px); }
    .hero-visual { min-height: clamp(320px, 50vw, 460px); }
}

@media (max-width: 780px) {
    .hero {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
        padding-bottom: clamp(40px, 9vw, 64px);
    }
    .hero-tekst { max-width: none; margin-inline: auto; min-width: 0; }
    /* Accent-frase mag afbreken op mobiel (voorkomt horizontale overflow) */
    .hero-accent { white-space: normal; }
    .hero-intro { margin-inline: auto; }
    .hero-knoppen { justify-content: center; }

    /* Collage wordt een vrolijke, compacte rij i.p.v. absolute scatter */
    .hero-visual {
        order: -1;            /* foto's eerst op mobiel: meteen de helden */
        min-height: 0;
        margin-bottom: clamp(6px, 2vw, 14px);
    }
    .hero-collage,
    .hero-collage-1, .hero-collage-2, .hero-collage-3, .hero-collage-4 {
        display: flex;
        position: static;
        justify-content: center;
        align-items: center;
        gap: clamp(10px, 3vw, 18px);
        flex-wrap: wrap;
        min-height: 0;
        height: auto;
    }
    .hero-collage .hero-well {
        position: static;
        width: clamp(112px, 30vw, 168px) !important;
        inset: auto !important;
        transform: none !important;   /* parallax-transform uit op mobiel */
    }
    .hero-collage .hero-well-binnen {
        animation: none;
        transform: rotate(var(--tilt, -4deg));
    }
    .hero-well-1 { --tilt: -6deg; }
    .hero-well-2 { --tilt: 5deg; }
    .hero-well-3 { --tilt: -3deg; margin-top: clamp(4px, 2vw, 12px); }
    .hero-well-4 { --tilt: 4deg;  margin-top: clamp(4px, 2vw, 12px); }

    /* Decor-accenten ingetogen op klein scherm */
    .hero-prijssticker { position: absolute; top: auto; bottom: -6%; left: 6%; right: auto; }
    .hero-ster-2, .hero-ster-3 { display: none; }
    .hero-ster-1 { top: -8%; right: 8%; }

    .hero-subnoot { justify-content: center; }
    .hero-scroll { display: none; }
}

@media (max-width: 460px) {
    .hero-collage .hero-well { width: clamp(104px, 38vw, 140px) !important; }
    .hero-collage .hero-well-4 { display: none; }   /* houd de rij netjes 3-breed */
}

/* ── Reduced motion: zwevende/twinkelende accenten tot rust ───── */
@media (prefers-reduced-motion: reduce) {
    .hero-blob-teal, .hero-blob-sun,
    .hero-well-binnen, .hero-prijssticker-binnen,
    .hero-ster, .hero-leeg-sticker, .hero-scroll-muis span {
        animation: none !important;
    }
}

/* ═══ Navy zonnestraal-hero (verpakking-look) — overrides binnen de band ═══ */
.hero-band { position: relative; isolation: isolate; width: 100vw; margin-inline: calc(50% - 50vw); }
.hero-band .hero { padding-bottom: clamp(72px, 9vw, 124px); }   /* ruimte voor de swoosh */
.hero-band .hero-eyebrow .icoon { color: var(--sun); }
.hero-band .hero-titel { color: #fff; text-shadow: 0 2px 18px rgba(6, 14, 40, .35); }
.hero-band .hero-accent { color: var(--coral); -webkit-text-stroke: 2px #fff; paint-order: stroke fill; }
.hero-band .hero-accent::after { background: var(--sun); height: .2em; opacity: .95; }
.hero-band .hero-intro { color: #DCE6F8; }
.hero-band .hero-subnoot { color: #C6D4F0; }
.hero-band .hero-subnoot .icoon { color: var(--sun); }
.hero-band .hero-ster-1 { color: #fff; }
.hero-band .hero-scroll { color: #AEC0E6; }
.hero-band .hero-scroll-muis { border-color: rgba(255, 255, 255, .55); }
.hero-band .hero-scroll-muis span { background: #fff; }
/* Decor-blobs → zachte gekleurde gloed op de navy */
.hero-band .hero-blob { filter: blur(20px); opacity: .34; }
.hero-band .hero-blob-grape { background: radial-gradient(circle, #3E77DE, transparent 68%); }
.hero-band .hero-blob-coral { background: radial-gradient(circle, #F5901E, transparent 68%); }
.hero-band .hero-blob-teal  { background: radial-gradient(circle, #12AEE0, transparent 68%); }
.hero-band .hero-blob-sun   { background: radial-gradient(circle, #FFC020, transparent 68%); }
/* Swoosh sluit de band naadloos af richting de gouden marquee */
.hero-band .swoosh { margin-bottom: -1px; }