/* ═══════════════════════════════════════════════════════════════
   MorphiToys — Home: verhaal-band (de onderste 3 secties)
   mystery (dramatische donkere banner) → proces (tactiele stappen)
   → verhaal (warm gecentreerd citaat). Eén samenhangende premium-
   speelse verhaal-band. Alle classes hier zijn sectie-eigen.
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   1 · MYSTERY — donkere grape-banner, het dramatische moment
   ════════════════════════════════════════════════════════════════ */
.mystery {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Volle-breedte band die uit de pagina-flow "breekt" */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding: clamp(56px, 8vw, 104px) var(--pad-x);
    color: #fff;
    background:
        radial-gradient(120% 130% at 12% 0%, #4A8CF0 0%, transparent 55%),
        radial-gradient(120% 130% at 100% 100%, #1544A0 0%, transparent 50%),
        linear-gradient(155deg, #2A6AD6 0%, #1C55BE 48%, #1544A0 100%);
}
/* Zacht "korrel/gloed"-laagje voor diepte bovenop het verloop */
.mystery::before {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(60% 90% at 78% 18%, rgba(255,194,74,.18) 0%, transparent 60%),
        radial-gradient(50% 80% at 8% 92%, rgba(18,174,224,.16) 0%, transparent 60%);
    pointer-events: none;
}

.mystery-binnen {
    position: relative;
    max-width: var(--wrap);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

/* — Tekstkolom — */
.mystery-tekst { position: relative; z-index: 2; }
.mystery-eyebrow { margin-bottom: 18px; }
.mystery h2 {
    color: #fff;
    font-size: var(--t-3xl);
    line-height: 1.04;
    margin-bottom: .55em;
}
.mystery-accent {
    color: var(--sun);
    position: relative;
    white-space: nowrap;
}
/* Vrolijke onderstreep-veeg onder "durf jij het aan?" */
.mystery-accent::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -.12em;
    height: .14em; border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--coral), var(--sun));
    opacity: .85;
}
.mystery p {
    color: rgba(255,255,255,.9);
    font-size: var(--t-lg);
    max-width: 46ch;
    margin-bottom: 30px;
}
.mystery-knoppen { display: flex; flex-wrap: wrap; gap: 14px; }

/* — Visual: de "unbox"-doos met vraagteken — */
.mystery-visual {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    min-height: 260px;
}
.mystery-box {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(180px, 26vw, 248px);
    aspect-ratio: 1;
    border-radius: var(--r-xl);
    background:
        radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.22) 0%, transparent 55%),
        linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    border: 2px solid rgba(255,255,255,.28);
    box-shadow: 0 30px 60px rgba(20,8,60,.45), inset 0 1px 0 rgba(255,255,255,.3);
    backdrop-filter: blur(4px);
    animation: mystery-zweef 6s var(--vloei) infinite;
}
/* Pulserende gloed achter de doos */
.mystery-box-gloed {
    position: absolute; inset: -14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,179,36,.55) 0%, rgba(18,174,224,.25) 45%, transparent 70%);
    filter: blur(10px);
    z-index: -1;
    animation: mystery-puls 3.6s ease-in-out infinite;
}
.mystery-box-deksel { color: #fff; opacity: .92; }
/* Vraagteken-badge over de doos */
.mystery-box-vraag {
    position: absolute;
    right: -14px; bottom: -14px;
    display: grid; place-items: center;
    width: 84px; height: 84px;
    border-radius: 50%;
    color: var(--ink);
    background: var(--sun);
    box-shadow: 0 14px 30px rgba(255,194,74,.5);
    animation: mystery-tik 5s var(--veer) infinite;
}
/* Sticker-label rechtsboven */
.mystery-sticker {
    position: absolute;
    top: 4px; right: clamp(6px, 4vw, 28px);
    display: flex; flex-direction: column; align-items: center;
    gap: 1px;
    padding: 12px 16px;
    border-radius: var(--r-md) var(--r-md) var(--r-md) 4px;
    background: var(--coral);
    color: #fff;
    font-family: var(--font-display);
    box-shadow: var(--sh-coral);
    transform: rotate(7deg);
    animation: mystery-wiebel 4.5s ease-in-out infinite;
}
.mystery-sticker b { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.mystery-sticker em { font-style: normal; font-weight: 600; font-size: .72rem; opacity: .92; }

/* — Decor: blobs + zwevende sterren — */
.mystery-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mystery-blob { filter: blur(8px); opacity: .5; }
.mystery-blob-grape { width: 360px; height: 360px; top: -120px; left: -90px; background: #7B5BE0; }
.mystery-blob-coral { width: 240px; height: 240px; bottom: -110px; right: 16%; background: var(--coral); opacity: .35; }
.mystery-blob-berry { width: 180px; height: 180px; top: 18%; right: -60px; background: var(--berry); opacity: .3; }

.mystery-ster { position: absolute; color: var(--sun); opacity: .9;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.mystery-ster-1 { top: 14%; left: 46%; color: var(--sun); animation: mystery-fonkel 4s ease-in-out infinite; }
.mystery-ster-2 { top: 62%; left: 6%; color: #fff; opacity: .8; animation: mystery-fonkel 5.5s ease-in-out .4s infinite; }
.mystery-ster-3 { top: 24%; right: 7%; color: var(--coral); animation: mystery-fonkel 4.6s ease-in-out .9s infinite; }
.mystery-ster-4 { bottom: 16%; right: 40%; color: var(--sun); opacity: .85; animation: mystery-fonkel 5s ease-in-out 1.3s infinite; }
.mystery-ster-5 { bottom: 30%; left: 38%; color: var(--berry); animation: mystery-fonkel 4.3s ease-in-out .6s infinite; }

@keyframes mystery-zweef { 50% { transform: translateY(-12px) rotate(-2deg); } }
@keyframes mystery-puls  { 0%,100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes mystery-tik   { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes mystery-wiebel{ 0%,100% { transform: rotate(7deg); } 50% { transform: rotate(2deg) translateY(-4px); } }
@keyframes mystery-fonkel{ 0%,100% { transform: scale(.85); opacity: .45; } 50% { transform: scale(1.15); opacity: 1; } }

@media (max-width: 860px) {
    .mystery-binnen { grid-template-columns: 1fr; text-align: center; }
    .mystery p { margin-inline: auto; }
    .mystery-knoppen { justify-content: center; }
    .mystery-visual { order: -1; min-height: 0; margin-bottom: 8px; }
    .mystery h2 { font-size: var(--t-2xl); }
}
@media (max-width: 480px) {
    .mystery-knoppen .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   2 · PROCES — drie tactiele stappen, licht & verbonden
   ════════════════════════════════════════════════════════════════ */
.proces-sectie .centreer-kop {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.proces-sectie .centreer-kop > * { max-width: 60ch; }
.proces-sectie .eyebrow { margin-bottom: 14px; }

.proces {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(18px, 2.6vw, 30px);
    position: relative;
}
/* Verbindende stippellijn achter de kaarten (gevoel van een proces) */
.proces::before {
    content: '';
    position: absolute;
    top: 64px; left: 16%; right: 16%;
    height: 3px;
    background-image: linear-gradient(90deg, var(--border-sterk) 0 14px, transparent 14px 26px);
    background-size: 26px 3px;
    z-index: 0;
}

.stap {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 32px) clamp(24px, 3vw, 32px);
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: transform .35s var(--veer), box-shadow .35s var(--vloei), border-color .3s;
}
.stap:hover {
    transform: translateY(-6px);
    box-shadow: var(--sh-md);
    border-color: var(--border-sterk);
}
/* Groot outline-nummer, decoratief op de achtergrond */
.stap-nummer {
    position: absolute;
    top: -.18em; right: .12em;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(5rem, 11vw, 8.5rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--grape-100);
    text-stroke: 2px var(--grape-100);
    pointer-events: none;
    z-index: 0;
    transition: -webkit-text-stroke-color .3s;
}
.proces .stap:nth-child(1) .stap-nummer { -webkit-text-stroke-color: #FBC08A; text-stroke-color: #FBC08A; }  /* oranje */
.proces .stap:nth-child(2) .stap-nummer { -webkit-text-stroke-color: #93DBF1; text-stroke-color: #93DBF1; }  /* cyaan */
.proces .stap:nth-child(3) .stap-nummer { -webkit-text-stroke-color: #FFDB7A; text-stroke-color: #FFDB7A; }  /* goud */
.stap:hover .stap-nummer { -webkit-text-stroke-width: 3px; }

/* Tactiele icoon-chip met clay-diepte */
.stap-icoon {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 64px; height: 64px;
    margin-bottom: 18px;
    border-radius: var(--r-md);
    color: var(--grape);
    background: linear-gradient(160deg, var(--grape-100), #fff);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.9), var(--sh-sm);
    transition: transform .4s var(--veer);
}
.stap:hover .stap-icoon { transform: rotate(-6deg) scale(1.06); }

/* Per stap een eigen vrolijke accentkleur */
.stap:nth-child(1) .stap-icoon { color: var(--grape);    background: linear-gradient(160deg, var(--grape-100), #fff); }
.stap:nth-child(2) .stap-icoon { color: var(--teal);     background: linear-gradient(160deg, var(--teal-100), #fff); }
.stap:nth-child(3) .stap-icoon { color: var(--coral-ink); background: linear-gradient(160deg, var(--coral-100), #fff); }
.stap:nth-child(2) .stap-nummer { -webkit-text-stroke-color: var(--teal-100); text-stroke-color: var(--teal-100); }
.stap:nth-child(3) .stap-nummer { -webkit-text-stroke-color: var(--coral-100); text-stroke-color: var(--coral-100); }

.stap-titel {
    position: relative; z-index: 1;
    font-size: var(--t-xl);
    margin-bottom: 8px;
}
.stap p {
    position: relative; z-index: 1;
    color: var(--ink-soft);
    font-size: var(--t-base);
}

@media (max-width: 760px) {
    .proces { grid-template-columns: 1fr; gap: 16px; }
    .proces::before { display: none; }
    .stap { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: center;
        padding: 22px 24px; }
    .stap-icoon { margin-bottom: 0; grid-row: 1 / span 2; }
    .stap-titel { align-self: end; }
    .stap p { grid-column: 2; align-self: start; }
    .stap-nummer { font-size: 5.5rem; top: -.3em; }
}

/* ════════════════════════════════════════════════════════════════
   3 · VERHAAL — warm gecentreerd citaat, elegante afsluiter
   ════════════════════════════════════════════════════════════════ */
.verhaal {
    position: relative;
    isolation: isolate;
    text-align: center;
    margin-top: clamp(44px, 6vw, 84px);   /* lucht tussen proces-blokken en de blauwe band */
}
/* Zacht crème-paneel zodat het citaat als een rustpunt voelt */
.verhaal::before {
    content: '';
    position: absolute;
    top: calc(-1 * clamp(48px, 7vw, 92px));
    bottom: calc(-1 * clamp(48px, 7vw, 92px));
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    z-index: -1;
    border-radius: 0;
    background: radial-gradient(100% 135% at 50% 0%, #3E82E6 0%, #2A6AD6 38%, #1C55BE 74%, #1544A0 100%);
    border: 0;
}

.verhaal-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.verhaal-blob { filter: blur(10px); }
.verhaal-blob-grape { width: 200px; height: 200px; top: -40px; left: 4%; background: var(--grape-100); opacity: .8; }
.verhaal-blob-coral { width: 170px; height: 170px; bottom: -50px; right: 6%; background: var(--coral-100); opacity: .8; }
.verhaal-ster { position: absolute; color: var(--sun); opacity: .9; }
.verhaal-ster-1 { top: 16%; right: 12%; color: var(--coral); animation: verhaal-fonkel 5s ease-in-out infinite; }
.verhaal-ster-2 { bottom: 20%; left: 14%; color: var(--teal); animation: verhaal-fonkel 4.4s ease-in-out .7s infinite; }
@keyframes verhaal-fonkel { 0%,100% { transform: scale(.85) rotate(-4deg); opacity: .5; } 50% { transform: scale(1.12) rotate(4deg); opacity: 1; } }

/* Groot citaatteken */
.quote-teken {
    display: inline-grid;
    place-items: center;
    width: 84px; height: 84px;
    margin-bottom: 18px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    box-shadow: var(--sh-sm);
    border: 1.5px solid rgba(255, 255, 255, .28);
}

.quote { margin: 0; border: 0; }
.quote p {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--t-xl);
    line-height: 1.42;
    letter-spacing: -.01em;
    color: #fff;
    max-width: 36ch;
    margin: 0;
    text-wrap: pretty;
}
.quote-bron {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 26px;
    font-family: var(--font-display);
    font-weight: 600;
    font-style: normal;
    font-size: var(--t-base);
    color: var(--sun);
}
.quote-poot {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.verhaal-cta { margin-top: 34px; }
.verhaal .btn-ghost { border-color: rgba(255, 255, 255, .65); color: #fff; }
.verhaal .btn-ghost:hover { background: #fff; color: var(--ink); }
.verhaal-foto figcaption { color: #D3E0F7; }
.verhaal-blob-grape { background: radial-gradient(circle, #4A8CF0, transparent 70%); opacity: .5; filter: blur(20px); }
.verhaal-blob-coral { background: radial-gradient(circle, var(--coral), transparent 70%); opacity: .4; filter: blur(20px); }

/* ════════════════════════════════════════════════════════════════
   Reduced motion — zwevende/oneindige animaties tot rust
   (fundament zet duur al ~0; hier expliciet de eindstaat netjes)
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .mystery-box,
    .mystery-box-gloed,
    .mystery-box-vraag,
    .mystery-sticker,
    .mystery-ster,
    .verhaal-ster {
        animation: none !important;
    }
    .mystery-box { transform: none; }
    .mystery-box-vraag { transform: rotate(-4deg); }
    .mystery-sticker { transform: rotate(6deg); }
    .mystery-box-gloed { opacity: .85; transform: none; }
}

/* ── Verhaal met echte foto (stapel geprinte diertjes) ─────────── */
.verhaal-inhoud { display: grid; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; position: relative; z-index: 1; }
@media (min-width: 860px) { .verhaal-inhoud { grid-template-columns: .9fr 1.1fr; } }
/* Quote-kolom links uitgelijnd i.p.v. het gecentreerde sectie-default */
.verhaal-quote-kolom { text-align: left; }
@media (max-width: 859px) { .verhaal-quote-kolom { text-align: center; } .quote p { max-width: none; margin-inline: auto; } }
.verhaal-foto { margin: 0 auto; max-width: 430px; }
.verhaal-foto img {
    width: 100%; height: auto; border-radius: var(--r-xl);
    box-shadow: var(--sh-lg); transform: rotate(-1.5deg);
    border: 6px solid var(--surface);
}
.verhaal-foto figcaption {
    margin-top: .9rem; text-align: center;
    font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
    color: #CDDCF5;
}