/* Song of the Heart · app-pagina's buiten de speelkamer (F14 inloggen, F15 welkom). Palet Navy & sintel (D21).
   Uitnodigen = as-wit, werken (formulieren) = steen (F01-C / D32). Playfair voor gevoel, Inter voor informatie.
   Het verloop alleen op het accentwoord: hooguit één per scherm (D43). Mobiel eerst (390 px), 16 px marge. */
:root{
  --navy:#0F2B3C; --aswit:#F6F3F2; --steen:#EDE7E2; --randen:#DFD5CD; --roest:#6E3F2C; --kleintekst:#64564F;
  --oranje:#E8834A; --oranje-d:#C9672F;
  --zon:linear-gradient(135deg,#7BB8D0,#9B8EC4,#D4827A,#E8834A);
  --serif:'Playfair Display',Georgia,serif; --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--aswit);color:var(--navy);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
body.steen{background:var(--steen)}
.pagina{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:18px 16px 32px;padding-top:max(18px,env(safe-area-inset-top))}
.logo{width:30px;height:30px;display:block;margin:0 auto}
.teken line{stroke-dasharray:180;stroke-dashoffset:180;opacity:0;animation:teken 1.5s cubic-bezier(.5,0,.25,1) forwards;animation-delay:calc(var(--i)*.22s)}
@keyframes teken{0%{opacity:0;stroke-dashoffset:180}12%{opacity:1}100%{opacity:1;stroke-dashoffset:0}}
.kaart{width:100%;max-width:420px;text-align:center;margin-top:112px}
.kaart.welkom{margin-top:min(22vh,160px);max-width:640px}
h1{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.2;margin:0 0 14px;letter-spacing:-.01em;text-wrap:balance}
h1.groot{font-size:clamp(38px,9vw,56px)}
.woord{font-family:var(--serif);font-style:italic;font-weight:600;background:var(--zon);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:zon 8s ease-in-out infinite alternate;padding-right:.08em}
@keyframes zon{from{background-position:0% 0%}to{background-position:100% 100%}}
.tekst{font-size:15.5px;line-height:1.45;color:var(--kleintekst);margin:0 0 28px}
.klein{font-size:13.5px;line-height:1.45;color:var(--kleintekst);margin:14px 0 0}
.klein a,.tekst a{color:var(--roest)}
.onder{margin-top:auto;padding-top:48px}
.formulier{text-align:left}
label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--kleintekst);margin:0 0 8px 2px}
input{width:100%;height:50px;border:1.5px solid var(--randen);border-radius:14px;padding:0 14px;font:inherit;font-size:17px;color:var(--navy);background:#fff;outline:none}
input:focus-visible{border-color:var(--oranje);box-shadow:0 0 0 3px rgba(232,131,74,.18)}
::placeholder{color:#968379}
.knop{display:block;width:100%;margin-top:22px;background:var(--oranje);color:#fff;border:0;border-radius:999px;padding:15px 24px;font:600 17px var(--sans);text-decoration:none;text-align:center;cursor:pointer;transition:background .2s,transform .15s}
.knop:hover{background:var(--oranje-d)}
.knop:active{transform:translateY(1px)}
.knop:focus-visible{outline:2px solid var(--oranje);outline-offset:3px}
.knop.smal{display:inline-block;width:auto;min-width:220px;padding:14px 32px}
.label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--oranje);margin:0 0 12px}
.stappen{font-size:17px;line-height:1.5;color:var(--kleintekst);margin:0 0 30px}
.stappen .punt{margin:0 .35em;color:var(--randen)}
.mailrond{width:96px;height:96px;border-radius:50%;background:#fff;display:grid;place-items:center;margin:0 auto 30px;box-shadow:0 10px 30px rgba(15,43,60,.08)}
/* 'Kijk in je mail' (feedback Seb 6 okt: het icoontje mag leuker): een envelop waar een brief met het hart uit omhoog schuift, daarna zweeft hij zacht. */
.brief{overflow:visible}
.brief .env-achter{fill:#F3DCCB}
.brief .vel rect{fill:#fff;stroke:var(--randen);stroke-width:1.2}
.brief .vel{animation:brief-uit 1s cubic-bezier(.3,.7,.3,1) .5s both,brief-zweef 4.5s ease-in-out 1.5s infinite}
.brief .env-voor{fill:#FBEBDF;stroke:var(--oranje);stroke-width:1.6;stroke-linejoin:round}
@keyframes brief-uit{from{transform:translateY(16px)}to{transform:translateY(0)}}
@keyframes brief-zweef{50%{transform:translateY(-2.5px)}}
.lijst{margin:0 0 22px;padding:0;list-style:none;text-align:left}
.lijst li{padding:12px 0;border-bottom:1px solid var(--randen);font-size:15.5px;line-height:1.45}
.lijst li .n{display:block;font-size:13.5px;color:var(--kleintekst)}
@media(min-width:700px){
  .kaart{margin-top:140px}
  .stappen{font-size:19px}
  .stappen .punt{margin:0 .6em}
}
@media(prefers-reduced-motion:reduce){.woord,.teken line,.brief .vel{animation:none}.teken line{opacity:1;stroke-dashoffset:0}}