/* ============================================= */
/* === HOME (home.html) — taal-app-herontwerp  === */
/* ============================================= */
/* Donker thema is de basis (#101115); oranje is
   gereserveerd voor het moment van interactie.    */

/* Typografie: Fraunces is de stem van het woord,
   de UI eromheen blijft het systeemlettertype.    */
.hp-woord { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; }

/* Inline logo ter vervanging van de tekst "Zeg 't" */
.logo-inline { height: 2em; width: auto; display: inline-block; vertical-align: -0.12em; }

/* Logo iets naar beneden, voor regels waar het naast tekst staat */
.logo-inline--omlaag { position: relative; top: 0.35em; }

/* ---------- Header ---------- */
.hp-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; padding: 14px clamp(16px, 5vw, 48px);
    border-bottom: 1px solid transparent;
    background: transparent;
    transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}
.hp-nav--vast {
    background: rgba(16, 17, 21, 0.72);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom-color: var(--rand);
}
html[data-thema="licht"] .hp-nav--vast { background: rgba(250, 250, 250, 0.8); }
.hp-nav-logo { display: inline-flex; align-items: center; }
.hp-nav-logo .logo { height: 32px; width: auto; display: block; }
.hp-nav-logo:hover { opacity: 0.85; }
.hp-nav-links { display: flex; align-items: center; gap: 4px; }
.hp-nav-link {
    color: var(--grijs-500); text-decoration: none; font-size: 0.92rem;
    padding: 8px 12px; border-radius: 999px; opacity: 0.62;
    transition: color 0.15s, background 0.15s, opacity 0.25s;
}
.hp-nav--vast .hp-nav-link, .hp-nav:hover .hp-nav-link { opacity: 1; }
.hp-nav-link:hover { color: var(--grijs-900); background: var(--vlak-2); }
.hp-nav-inloggen {
    border: 1px solid var(--rand-sterk); color: var(--grijs-700); margin-left: 8px;
}
.hp-nav-inloggen:hover { color: var(--grijs-900); border-color: var(--grijs-400); }

/* ---------- Hero ---------- */
.hp-hero {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: 100svh;
    padding: clamp(80px, 11vh, 112px) clamp(16px, 4vw, 40px) clamp(48px, 8vh, 80px);
    overflow: hidden;
}
.hp-hero-inner {
    width: 100%; max-width: 860px; text-align: center;
}
.hp-hero-logo {
    display: block; width: auto; height: 98px; margin: -60px auto 16px;
}

.hp-kop {
    font-size: clamp(2.05rem, 4.8vw, 3.7rem);
    line-height: 1.02; letter-spacing: -0.045em; font-weight: 800;
    color: var(--grijs-900);
}
.hp-kop-1, .hp-kop-2 { display: block; }
.hp-kop-2 { color: var(--grijs-500); }

/* --- Voortgang: drie stille punten --- */
.hp-route {
    position: relative; list-style: none; display: flex; align-items: center; justify-content: space-between;
    width: 104px; margin: clamp(30px, 5vh, 42px) auto 0;
}
.hp-route::before {
    content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px;
    background: var(--rand-sterk); transform: translateY(-50%);
}
.hp-stap {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
}
.hp-stap-knop {
    display: flex; align-items: center; justify-content: center;
    width: 10px; height: 10px; border-radius: 50%; font-size: 0;
    background: var(--vlak-2); border: 1px solid var(--rand-sterk);
    transition: width 0.25s, height 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.hp-stap-woord { display: none; }

.hp-stap.hp-actief .hp-stap-knop {
    width: 16px; height: 16px; background: var(--oranje); border-color: var(--oranje);
    box-shadow: 0 0 0 5px var(--oranje-licht);
}
.hp-stap.hp-klaar .hp-stap-knop {
    background: var(--oranje-licht); border-color: var(--oranje-licht);
}

/* --- De stage (woord + microfoon in één blok) --- */
.hp-stage {
    position: relative; isolation: isolate;
    margin-top: clamp(26px, 4vh, 42px);
    --hp-warmte: #F2F3F5;
}
.hp-stage[data-niveau="1"] { --hp-warmte: #F4E4D3; }
.hp-stage[data-niveau="2"] { --hp-warmte: #F6C99A; }
html[data-thema="licht"] .hp-stage { --hp-warmte: #212121; }

/* De gloed is een flits: één korte lichtstoot als een nieuw woord
   verschijnt, daarna helemaal weg — geen permanente achtergrondgloed. */
.hp-gloed {
    position: absolute; inset: -12% -24%; z-index: 0;
    background: radial-gradient(closest-side, rgba(232, 106, 23, 0.5), transparent 72%);
    filter: blur(28px); opacity: 0; pointer-events: none;
}
.hp-gloed.hp-flits { animation: hp-flits 1.1s ease-out forwards; }
@keyframes hp-flits {
    0% { opacity: 0; transform: scale(0.88); }
    20% { opacity: 0.85; }
    100% { opacity: 0; transform: scale(1.12); }
}

.hp-woord-blok { position: relative; z-index: 1; }
.hp-woord-label {
    display: inline-block; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--grijs-500);
}
.hp-woord-rij {
    display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 24px);
    margin-top: 8px;
}
.hp-woord {
    display: inline-block; color: var(--hp-warmte);
    font-size: clamp(3rem, 15vw, 220px); line-height: 0.95; letter-spacing: -0.02em; font-weight: 600;
    font-variation-settings: 'opsz' 144; 
    transition: color 0.5s ease;
    animation: hp-adem 6s ease-in-out infinite;
}
@keyframes hp-adem {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.018); }
}
.hp-stage[data-status="opnemen"] .hp-woord { animation: hp-adem-live 0.55s ease-in-out infinite; }
@keyframes hp-adem-live {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.022); }
}

.hp-luister {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--vlak-2); border: 1px solid var(--rand-sterk);
    color: var(--grijs-500); cursor: pointer; flex-shrink: 0;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}
.hp-luister:hover { color: var(--grijs-900); transform: scale(1.05); }
.hp-luister.hp-speelt {
    background: var(--oranje-licht); color: var(--oranje-zacht);
    animation: hp-speelt 0.9s ease-in-out infinite;
}
@keyframes hp-speelt {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* --- Golfvorm --- */
.hp-golf {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    gap: 4px; height: 44px; margin-top: clamp(18px, 4vh, 28px);
}
.hp-golf span {
    width: 3px; height: 100%; border-radius: 2px;
    background: var(--grijs-300);
    transform: scaleY(0.14); transform-origin: center;
    transition: background 0.2s ease;
    animation: hp-golf-rust 2.6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.09s);
}
@keyframes hp-golf-rust {
    0%, 100% { transform: scaleY(0.14); }
    50% { transform: scaleY(0.32); }
}
.hp-golf.hp-golf--live span {
    background: var(--oranje);
    animation: none;
}

/* --- Microfoon --- */
.hp-mic-rij {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    margin-top: clamp(16px, 3vh, 24px);
}
.hp-mic {
    position: relative; width: 88px; height: 88px; border-radius: 50%;
    background: var(--oranje-knop); color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;
    box-shadow: 0 10px 30px rgba(232, 106, 23, 0.35);
    transition: background 0.15s, transform 0.1s, box-shadow 0.2s;
}
.hp-mic:hover { background: var(--oranje-knop-hover); }
.hp-mic:active { transform: scale(0.96); }
.hp-mic.hp-aan {
    background: var(--oranje-knop-actief);
    box-shadow: 0 0 0 0 rgba(232, 106, 23, 0.5), 0 12px 36px rgba(232, 106, 23, 0.5);
}
.hp-mic.hp-aan::before, .hp-mic.hp-aan::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(232, 106, 23, 0.6); animation: hp-puls 1.2s ease-out infinite;
}
.hp-mic.hp-aan::after { animation-delay: 0.6s; }
@keyframes hp-puls { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(1.9); opacity: 0; } }
.hp-hint { font-size: 0.88rem; color: var(--grijs-500); min-height: 1.3em; transition: color 0.2s; }

/* --- Score-onthulling --- */
.hp-score {
    position: relative; z-index: 1;
    display: none; margin-top: clamp(16px, 3vh, 24px);
    max-width: 440px; margin-left: auto; margin-right: auto;
}
.hp-score-rij { display: flex; align-items: center; gap: 20px; text-align: left; }
.hp-ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.hp-ring svg { transform: rotate(-90deg); width: 92px; height: 92px; }
.hp-ring-spoor { fill: none; stroke: var(--rand); stroke-width: 8; }
.hp-ring-vul {
    fill: none; stroke: var(--oranje); stroke-width: 8; stroke-linecap: round;
    stroke-dasharray: 226.2; stroke-dashoffset: 226.2;
    transform-box: fill-box; transform-origin: center;
    transition: stroke-dashoffset 1s cubic-bezier(0.33, 1, 0.68, 1);
}
.hp-ring-waarde {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 800; color: var(--grijs-900);
}
.hp-score-tekst { flex: 1; min-width: 0; }
.hp-feedback { font-size: 1.05rem; font-weight: 700; color: var(--grijs-900); line-height: 1.4; }
.hp-herkend { font-size: 0.8rem; color: var(--grijs-500); margin-top: 4px; }

/* "beoordelen" — spanning vóór de vulling */
.hp-score.hp-score--bezig .hp-ring-vul {
    stroke-dasharray: 60 166; stroke-dashoffset: 0;
    animation: hp-draai 0.9s linear infinite;
}
@keyframes hp-draai { to { transform: rotate(360deg); } }
.hp-score.hp-score--bezig .hp-ring-waarde { opacity: 0; }
.hp-score.hp-score--bezig .hp-feedback::before { content: "Beoordelen"; }
.hp-score.hp-score--bezig .hp-feedback {
    color: var(--grijs-500); font-weight: 600;
}
.hp-score.hp-score--bezig .hp-feedback::after {
    content: ""; display: inline-block; width: 1.2em; text-align: left;
    animation: hp-puntjes 1.2s steps(4, end) infinite;
}
@keyframes hp-puntjes {
    0% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75% { content: "..."; }
}

.hp-volgende {
    display: none; margin-top: 20px; width: 100%;
    padding: 13px 26px; border-radius: 999px; border: 1px solid var(--rand-sterk);
    background: var(--vlak-2); color: var(--grijs-900);
    font-weight: 700; font-size: 0.98rem; cursor: pointer;
    transition: background 0.15s, transform 0.15s, border-color 0.15s;
}
.hp-volgende:hover { background: var(--grijs-200); transform: translateY(-1px); }

/* status-wissels */
.hp-stage[data-status="klaar"] .hp-mic-rij { display: flex; }
.hp-stage[data-status="klaar"] .hp-score { display: none; }

.hp-stage[data-status="opnemen"] .hp-mic-rij { display: flex; }
.hp-stage[data-status="opnemen"] .hp-score { display: none; }

.hp-stage[data-status="beoordelen"] .hp-mic-rij { display: none; }
.hp-stage[data-status="beoordelen"] .hp-score { display: block; animation: hp-in 0.25s ease; }

.hp-stage[data-status="score"] .hp-mic-rij { display: none; }
.hp-stage[data-status="score"] .hp-score { display: block; }
.hp-stage[data-status="score"] .hp-volgende { display: block; }

@keyframes hp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- Conversieblok --- */
.hp-conversie {
    margin-top: clamp(30px, 6vh, 52px);
    animation: hp-conversie-in 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes hp-conversie-in { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.hp-conversie-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--oranje-zacht);
}
.hp-conversie-kop {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 700; letter-spacing: -0.02em;
    color: var(--grijs-900); margin-top: 8px; line-height: 1.05;
}
.hp-conversie-sub {
    color: var(--grijs-500); font-size: 1.02rem; line-height: 1.6;
    max-width: 520px; margin: 14px auto 0;
}
.hp-recap {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
    margin: 24px auto 0; max-width: 560px;
}
.hp-recap-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px;
    background: var(--vlak-2); border: 1px solid var(--rand-sterk);
    font-size: 0.9rem; color: var(--grijs-700);
}
.hp-recap-item .hp-recap-woord { font-weight: 700; color: var(--grijs-900); }
.hp-recap-item .hp-recap-score { font-weight: 800; color: var(--oranje-zacht); }
.hp-recap-item.hp-recap-goed .hp-recap-score { color: var(--groen); }

.hp-conversie-cta {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: 28px; flex-wrap: wrap;
}

/* --- CTA's --- */
.hp-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 30px; border-radius: 999px;
    background: var(--oranje-knop); color: #fff; text-decoration: none;
    font-weight: 700; font-size: 1rem;
    box-shadow: 0 10px 30px rgba(232, 106, 23, 0.35);
    transition: background 0.15s, transform 0.15s, box-shadow 0.2s;
}
.hp-cta:hover { background: var(--oranje-knop-hover); transform: translateY(-2px); box-shadow: 0 14px 36px rgba(232, 106, 23, 0.45); }
.hp-cta-secundair {
    color: var(--grijs-500); text-decoration: none; font-size: 0.95rem; font-weight: 600;
}
.hp-cta-secundair:hover { color: var(--grijs-900); }
.hp-cta-rand {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 30px; border-radius: 999px;
    background: transparent; color: var(--oranje-zacht); text-decoration: none;
    font-weight: 700; font-size: 1rem; border: 1px solid var(--rand-sterk);
    transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.hp-cta-rand:hover { border-color: var(--oranje); color: var(--oranje); transform: translateY(-2px); }

/* ---------- Secties ---------- */
.hp-sectie {
    max-width: 900px; margin: 0 auto;
    padding: clamp(56px, 8vw, 104px) clamp(20px, 5vw, 40px);
}
.hp-sectie h2 {
    font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em;
    color: var(--grijs-900); text-align: center; margin-bottom: 8px;
}
.hp-sectie .hp-sectie-sub { color: var(--grijs-500); text-align: center; font-size: 1.05rem; max-width: 480px; margin: 0 auto; line-height: 1.6; }
.hp-stappen { list-style: none; display: flex; flex-direction: column; gap: 24px; max-width: 520px; margin: 40px auto 0; }
.hp-stappen li { display: flex; gap: 16px; align-items: flex-start; }
.hp-stap-nr {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
    color: var(--oranje-zacht);
    font-weight: 800; font-size: clamp(1.5rem, 4.4vw, 2rem); line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.hp-stappen strong { color: var(--grijs-900); display: block; font-size: 1.02rem; }
.hp-stappen li div span { color: var(--grijs-500); font-size: 0.94rem; line-height: 1.5; display: block; margin-top: 3px; }

.hp-voorwie-tekst { text-align: center; color: var(--grijs-500); max-width: 520px; margin: 0 auto 26px; line-height: 1.6; }
.hp-voorwie-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hp-gerust { text-align: center; color: var(--grijs-500); font-size: 0.85rem; margin-top: 30px; }
.hp-gerust a { color: var(--oranje-zacht); }

/* ---------- Zorgvuldig met je stem ---------- */
.hp-eyebrow {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--oranje-zacht); text-align: center;
}
.hp-stem-kop {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(1.9rem, 4.6vw, 2.6rem); font-weight: 700;
    line-height: 1.08; letter-spacing: -0.02em; color: var(--grijs-900);
    text-align: center; max-width: 760px; margin: 10px auto 0;
}
.hp-stem-sub {
    color: var(--grijs-500); font-size: 1rem; line-height: 1.65;
    text-align: center; max-width: 640px; margin: 14px auto 0;
}

.hp-belofte {
    list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(28px, 5vw, 56px); max-width: 820px; margin: 44px auto 0;
}
.hp-belofte li {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 22px 0;
}
.hp-belofte-icoon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 11px;
    display: grid; place-items: center;
    color: var(--oranje-zacht);
}
.hp-belofte-icoon svg { width: 26px; height: 26px; }
.hp-belofte strong { display: block; color: var(--grijs-900); font-size: 0.98rem; margin-bottom: 5px; }
.hp-belofte li > div > span { display: block; color: var(--grijs-500); font-size: 0.9rem; line-height: 1.55; }

.hp-zorg-links {
    text-align: center; color: var(--grijs-500); font-size: 0.85rem;
    line-height: 1.7; margin: 36px auto 0; max-width: 620px;
}
.hp-zorg-links a { color: var(--oranje-zacht); }
.hp-t { height: 1.15em; width: auto; margin: 0 0.04em; vertical-align: -0.14em; }
.hp-zorg-links a.hp-t-link {
    text-decoration: none; display: inline-block;
    border-bottom: 2px solid currentColor;
}
.hp-zorg-links a.hp-t-link .hp-t { vertical-align: -0.05em; }

/* ---------- Footer ---------- */
.hp-footer {
    border-top: 1px solid var(--rand);
    padding: 30px clamp(20px, 5vw, 48px) 40px;
    text-align: center; color: var(--grijs-500); font-size: 0.85rem; line-height: 1.9;
}
.hp-footer a { color: var(--grijs-500); text-decoration: none; }
.hp-footer a:hover { color: var(--oranje-zacht); }

/* ---------- Responsief ---------- */
@media (max-width: 820px) {
    .hp-belofte { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .hp-nav-link { display: none; }
    .hp-nav-inloggen { display: inline-block; }
    .hp-luister { width: 44px; height: 44px; }
    .hp-mic { width: 78px; height: 78px; }
}

/* Verminderde beweging */
@media (prefers-reduced-motion: reduce) {
    .hp-woord { animation: none; }
    .hp-gloed.hp-flits { animation: none; }
    .hp-golf span, .hp-mic.hp-aan::before, .hp-mic.hp-aan::after,
    .hp-luister.hp-speelt, .hp-score.hp-score--bezig .hp-ring-vul { animation: none; }
}