/* Extra plezier: intro (naar de leader), zwevende hartjes, rinkelende telefoon, snoer, envelop,
   ideeënknop, live-scherm en kleine beweging bij het scrollen. Alles stopt bij "minder beweging". */

/* ---------- Intro-wachtstand: pagina even verborgen tot de intro klaarstaat ---------- */
.intro-pending body { overflow: hidden; }
.intro-pending main, .intro-pending footer, .intro-pending .fab { visibility: hidden; }
.intro-pending main { animation: introFailsafe 0s 4s forwards; }
@keyframes introFailsafe { to { visibility: visible; } }

/* ---------- Hero: regenboog tekent zichzelf, hartjes zweven ---------- */
@property --rv { syntax: "<angle>"; inherits: false; initial-value: 181deg; }
@media (prefers-reduced-motion: no-preference) {
  .hero__logo.is-drawing {
    --rv: 0deg;
    animation: draw 2.4s cubic-bezier(.35, .1, .25, 1) .15s forwards;
    -webkit-mask-image: conic-gradient(from 270deg at 50% 118%, #000 var(--rv), transparent calc(var(--rv) + 0.5deg)), linear-gradient(#000 78%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: conic-gradient(from 270deg at 50% 118%, #000 var(--rv), transparent calc(var(--rv) + 0.5deg)), linear-gradient(#000 78%, transparent);
            mask-composite: intersect;
  }
}
@keyframes draw { to { --rv: 181deg; } }
.hero__logo { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero__logo.is-tapped { animation: logoPop .35s ease-out; }
@keyframes logoPop { 40% { transform: scale(1.025) rotate(-.6deg); } 70% { transform: scale(.995) rotate(.3deg); } }

.heart--hover {
  bottom: auto; opacity: 1; animation: hover var(--d, 7s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes hover {
  0%   { transform: translate(0, 0) rotate(-7deg) scale(1); }
  50%  { transform: translate(calc(var(--dx, 8px) * .4), -9px) rotate(2deg) scale(1.05); }
  100% { transform: translate(var(--dx, 8px), -16px) rotate(8deg) scale(.97); }
}

/* ---------- Rinkelende telefoon bij het belnummer ---------- */
.live__call { position: relative; }
.ringer { position: absolute; z-index: 3; right: -4px; top: -26px; width: 74px; pointer-events: none; transform-origin: 50% 85%; animation: ringring 5.5s ease-in-out infinite; filter: drop-shadow(0 3px 0 rgba(43, 24, 96, .25)); }
.ringer svg { display: block; width: 100%; height: auto; }
.ringer .wave { opacity: 0; transform-origin: 0 50%; animation: wave 5.5s ease-out infinite; }
.ringer .wave:nth-of-type(2) { animation-delay: .12s; }
.ringer .wave:nth-of-type(3) { animation-delay: .24s; }
@keyframes ringring {
  0%, 62%, 100% { transform: rotate(0); }
  4% { transform: rotate(-14deg); } 8% { transform: rotate(12deg); } 12% { transform: rotate(-12deg); } 16% { transform: rotate(10deg); }
  20% { transform: rotate(-9deg); } 24% { transform: rotate(7deg); } 28% { transform: rotate(-5deg); } 32% { transform: rotate(3deg); } 36% { transform: rotate(0); }
}
@keyframes wave { 0%, 3% { opacity: 0; } 8% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; } }
.live.is-live .ringer, html.is-live-now .ringer { animation-duration: 1.6s; }
html.is-live-now .ringer .wave { animation-duration: 1.6s; }

/* ---------- Snoer dat meegolft met je stem ---------- */
.cord { display: block; width: min(100%, 300px); height: 54px; margin: 6px auto 0; }

/* ---------- Ideeënknop ---------- */
.idea { text-align: center; margin: 14px 0 4px; }
.idea__btn { gap: .5em; }
.idea__btn.is-shake { animation: shake .45s ease-in-out; }
@keyframes shake { 20% { transform: rotate(-4deg) scale(1.04); } 50% { transform: rotate(4deg) scale(1.04); } 80% { transform: rotate(-2deg); } }
.idea__text {
  margin: 12px auto 0; max-width: 34ch; padding: 12px 16px; border-radius: 20px; background: #fff; border: 3px solid var(--line);
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; color: var(--indigo);
  box-shadow: 0 4px 0 var(--indigo); transform-origin: 50% 0;
}
.idea__text.pop { animation: ideaPop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ideaPop { 0% { transform: scale(.6) rotate(-3deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- Envelop bij het versturen ---------- */
.mail { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none; background: rgba(155, 140, 225, .0); animation: mailBg 2.2s ease forwards; }
@keyframes mailBg { 0% { background: rgba(155, 140, 225, 0); } 15% { background: rgba(155, 140, 225, .55); } 80% { background: rgba(155, 140, 225, .55); } 100% { background: rgba(155, 140, 225, 0); } }
.mail__wrap { text-align: center; }
.mail__env { width: min(62vw, 240px); margin: 0 auto; animation: envIn .45s cubic-bezier(.3, 1.5, .5, 1) both, envOut .8s cubic-bezier(.5, 0, .9, .4) 1.3s forwards; }
.mail__env svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 0 rgba(43, 24, 96, .25)); }
.mail__flap { transform-box: fill-box; transform-origin: 50% 0; animation: flap .5s ease-in-out .55s both; }
@keyframes flap { from { transform: scaleY(-1); } to { transform: scaleY(1); } }
@keyframes envIn { from { transform: translateY(40px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes envOut { to { transform: translateY(-85vh) rotate(-10deg) scale(.5); opacity: 0; } }
.mail__txt { margin: 14px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: #fff; text-shadow: 0 3px 0 var(--indigo); animation: envIn .4s ease-out .2s both, fadeOut .3s ease 1.2s forwards; }
@keyframes fadeOut { to { opacity: 0; } }

/* ---------- Kleine beweging bij het scrollen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-rv .rv { opacity: 0; transform: translateY(26px) scale(.97); }
  .js-rv .rv.in { opacity: 1; transform: none; transition: opacity .55s ease, transform .6s cubic-bezier(.3, 1.35, .5, 1); transition-delay: var(--rvd, 0s); }
}

/* ---------- UFO (verrassing) ---------- */
.ufo { position: fixed; z-index: 95; top: 22vh; left: -160px; width: 130px; pointer-events: none; animation: ufoFly 5.5s ease-in-out forwards; }
.ufo svg { display: block; width: 100%; height: auto; animation: ufoBob .6s ease-in-out infinite alternate; }
.ufo__say { position: absolute; left: 50%; top: -52px; translate: -50% 0; white-space: nowrap; padding: 6px 14px; border-radius: 99px; background: #fff; border: 3px solid var(--line); font-family: var(--font-display); font-weight: 800; color: var(--indigo); }
@keyframes ufoFly { 0% { left: -160px; top: 30vh; } 30% { top: 18vh; } 60% { top: 34vh; } 100% { left: calc(100vw + 40px); top: 16vh; } }
@keyframes ufoBob { from { transform: translateY(-5px) rotate(-3deg); } to { transform: translateY(5px) rotate(3deg); } }

/* ---------- Intro (naar de leader) ---------- */
.intro { position: fixed; inset: 0; z-index: 200; overflow: hidden; background: #f3ffc7; color: var(--ink); font-family: var(--font-display); font-weight: 800; touch-action: manipulation; cursor: pointer; }
.intro.is-out { animation: introOut .6s ease forwards; pointer-events: none; }
@keyframes introOut { to { opacity: 0; transform: scale(1.04); } }
.intro__skip { position: absolute; z-index: 5; top: calc(14px + env(safe-area-inset-top)); right: 14px; padding: 8px 16px; border-radius: 99px; border: 3px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 1rem; cursor: pointer; }
.sc { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .35s ease; }
.sc.on { opacity: 1; visibility: visible; }
.sc--a { background: #f3ffc7; }
.sc--b { background: #97fbfb; }
.sc--c { background: #8fa8fb; }
.sc--d { background: #9170dc; }
.sc--e { background: var(--turq); }

/* scène A: regenboog + titel */
.sc--a .rb { position: absolute; left: 50%; bottom: -2%; width: min(150vw, 1100px); translate: -50% 0; overflow: visible; }
.rb path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sc--a.on .rb path { animation: rbDraw 1.5s cubic-bezier(.45, .05, .3, 1) forwards; animation-delay: calc(var(--i) * .13s); }
@keyframes rbDraw { to { stroke-dashoffset: 0; } }
.ttl { position: relative; z-index: 2; text-align: center; margin-top: -8vh; line-height: .82; }
.ttl small { display: block; text-align: left; margin: 0 0 -2.2vw 3vw; font-size: clamp(1.6rem, 7vw, 3.4rem); color: #f3a6f5; -webkit-text-stroke: 4px #a78ae0; paint-order: stroke fill; opacity: 0; }
.ttl b { display: block; font-size: clamp(3.4rem, 17vw, 9.5rem); letter-spacing: -.01em; color: #fbffe9; -webkit-text-stroke: clamp(5px, 1.2vw, 12px) #4a4ad0; paint-order: stroke fill;
  text-shadow: 0 .05em 0 #e5554a, 0 .09em 0 #f3ec82, 0 .13em 0 #7ee3e3; }
.ttl b i { display: inline-block; font-style: normal; opacity: 0; transform: translateY(40px) scale(.6) rotate(-6deg); }
.ttl em { display: block; margin: -1vw 3vw 0 0; text-align: right; font-style: normal; font-size: clamp(1.4rem, 6.4vw, 3.2rem); color: #fff; -webkit-text-stroke: 3px #8aa0ff; paint-order: stroke fill; opacity: 0; }
.sc--a.on .ttl b i { animation: letterPop .55s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(1.0s + var(--i) * .09s); }
.sc--a.on .ttl small { animation: fadeUp .5s ease .8s forwards; }
.sc--a.on .ttl em { animation: fadeUp .5s ease 1.9s forwards; }
@keyframes letterPop { to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* scène B/C: woorden */
.words { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .35em; max-width: 92vw; padding: 0 4vw; text-align: center; line-height: .95; }
.words span { display: inline-block; font-size: clamp(2.8rem, 15vw, 6.4rem); color: #fdd4fb; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; text-shadow: 0 .06em 0 #f6a6ee; text-transform: uppercase; opacity: 0; transform: scale(.4) rotate(var(--r, -4deg)); }
.words span.sm { font-size: clamp(1.6rem, 8vw, 3.2rem); align-self: flex-start; }
.sc.on .words span { animation: wordPop .5s cubic-bezier(.3, 1.7, .5, 1) forwards; animation-delay: calc(.15s + var(--i) * .17s); }
@keyframes wordPop { to { opacity: 1; transform: scale(1) rotate(var(--r2, 2deg)); } }
.sc--c { display: flex; align-items: center; justify-content: center; gap: 5vw; padding: 0 5vw; }
.sc--c .handset { width: min(30vw, 150px); flex: none; transform-origin: 50% 80%; animation: ringring 1.2s ease-in-out infinite; }
.sc--c .handset svg { width: 100%; height: auto; display: block; }
.sc--c .words { justify-content: flex-start; text-align: left; flex: 0 1 auto; }

/* scène D: nummer */
.sc--d { gap: 3vh; align-content: center; }
.num { display: block; text-align: center; font-size: clamp(3.4rem, 17vw, 8.6rem); line-height: .95; letter-spacing: .01em; }
.num span { display: inline-block; opacity: 0; transform: translateY(30px) scale(.6); color: var(--c); -webkit-text-stroke: 3px #fff; paint-order: stroke fill; text-shadow: 0 .05em 0 rgba(43, 24, 96, .35); }
.sc--d.on .num span { animation: letterPop .5s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(.2s + var(--i) * .06s); }
.sc--d p { margin: 0; color: #fff; font-size: clamp(1.2rem, 5vw, 2rem); text-shadow: 0 3px 0 rgba(43, 24, 96, .4); opacity: 0; }
.sc--d.on p { animation: fadeUp .5s ease 1.1s forwards; }
.sc--d .ufo-s { position: absolute; top: 12%; width: 120px; left: -140px; }
.sc--d.on .ufo-s { animation: ufoCross 2.2s ease-in-out .1s forwards; }
@keyframes ufoCross { to { left: calc(100% + 20px); } }
.sc--d .ufo-s svg { width: 100%; height: auto; display: block; animation: ufoBob .5s ease-in-out infinite alternate; }

/* scène E: logo */
.sc--e img { width: min(100%, 980px); height: auto; display: block; }

.intro__hearts { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

/* ---------- Live-scherm ---------- */
.livescreen { position: fixed; inset: 0; z-index: 150; display: none; overflow-y: auto; background: var(--lilac); color: var(--ink); text-align: center; padding: calc(24px + env(safe-area-inset-top)) 18px 40px; }
.livescreen.open { display: block; animation: liveIn .5s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes liveIn { from { transform: translateY(20px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
html.live-open { overflow: hidden; }
.livescreen::before { content: ""; position: fixed; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 30%, #c9bcff 0, rgba(155, 140, 225, 0) 60%); animation: livePulse 3s ease-in-out infinite alternate; pointer-events: none; }
@keyframes livePulse { to { opacity: .35; } }
.livescreen__in { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; display: grid; gap: 14px; justify-items: center; }
.livebadge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px; border-radius: 99px; background: #e5342b; color: #fff; border: 3px solid #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 5px 0 rgba(43, 24, 96, .35); }
.livebadge i { width: 14px; height: 14px; border-radius: 50%; background: #fff; animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.livetitle { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(3.2rem, 17vw, 6.4rem); line-height: .86; color: #fff; -webkit-text-stroke: clamp(5px, 1.3vw, 10px) var(--line); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--indigo), 0 .12em 0 var(--magenta-bright); }
.livetitle span { display: inline-block; animation: wiggle 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * .08s); }
@keyframes wiggle { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-.06em) rotate(-3deg); } 75% { transform: translateY(.03em) rotate(3deg); } }
.livesub { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; color: #fff; text-shadow: 0 3px 0 var(--indigo); }
.livecount { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: #fff; text-shadow: 0 3px 0 var(--indigo); font-variant-numeric: tabular-nums; }
.livecall { position: relative; display: grid; gap: 6px; justify-items: center; width: 100%; padding: 18px 14px 20px; border-radius: 28px; background: #fffff6; border: 4px solid var(--line); box-shadow: 0 6px 0 var(--indigo); text-decoration: none; color: var(--ink); }
.livecall .num { font-size: clamp(2.6rem, 13vw, 4.4rem); }
.livecall .num span { opacity: 1; transform: none; animation: numBob 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .07s); }
@keyframes numBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.07em); } }
.livecall small { font-weight: 800; font-size: 1.05rem; }
.livecall .ringer { right: 8px; top: -34px; width: 66px; animation-duration: 1.6s; }
.livecall .ringer .wave { animation-duration: 1.6s; }
.liveway { display: grid; gap: 8px; width: 100%; }
.liveway .btn { width: 100%; }
.liveprov { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.liveprov li { padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .9); border: 3px solid var(--line); font-weight: 800; }
.liveclose { margin-top: 6px; }
.livepill { position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60; display: none; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; background: #e5342b; color: #fff; border: 3px solid #fff; font-family: var(--font-display); font-weight: 800; box-shadow: 0 4px 0 rgba(43, 24, 96, .35); cursor: pointer; }
.livepill.show { display: inline-flex; animation: ideaPop .5s cubic-bezier(.3, 1.6, .5, 1); }
.livepill i { width: 11px; height: 11px; border-radius: 50%; background: #fff; animation: blink 1s steps(2, jump-none) infinite; }

/* Footer: intro opnieuw */
.footer__intro { margin-top: 12px; background: none; border: 0; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .ringer, .ringer .wave, .heart--hover, .livetitle span, .livebadge i, .livepill i, .livecall .num span, .livescreen::before { animation: none !important; }
  .ringer .wave { opacity: .9; }
}

/* ---------- Tik op het logo: hartjes spatten uit elkaar ---------- */
.hero { position: relative; }
.tapburst { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.heart--tap { bottom: auto; opacity: 0; animation: tapUp 1.6s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes tapUp {
  0%   { transform: translate(-50%, -50%) scale(.3) rotate(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--rot)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .tapburst { display: none; } }

/* Live-scherm op smalle telefoons: nummer past op één regel, telefoontje boven de kaart */
.livecall .num { white-space: nowrap; font-size: clamp(1.7rem, 8.4vw, 4.4rem); }
.livecall { padding-top: 26px; }
.livecall .ringer { top: -40px; right: 14px; width: 58px; }
.livecall .ringer { top: -36px; right: 4px; width: 48px; }
.livesub { margin-bottom: 14px; }

/* Live-speler in het live-scherm */
.liveplayer { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--indigo); border: 4px solid var(--line); box-shadow: 0 6px 0 var(--indigo); }
.liveplayer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.liveplayer__poster { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.liveplayer__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.liveplayer__poster .player__play { position: absolute; top: 46%; left: 50%; translate: -50% -50%; }
.liveplayer__label { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; white-space: nowrap; padding: 6px 16px; border-radius: 999px; background: #fff; border: 3px solid var(--line); font-family: var(--font-display); font-weight: 800; font-size: .98rem; color: var(--ink); }
.livealt { font-weight: 800; font-size: .92rem; color: var(--indigo); }
.hero__logo.wait { animation-play-state: paused !important; }

/* Herinner mij: meldingen */
.remind__list { margin: 4px 0 10px; padding-left: 1.2em; font-weight: 800; }
.remind__alt { margin-top: 10px; }
.remind__alt summary { cursor: pointer; font-weight: 800; font-size: .92rem; }
.remind__alt .remind__actions { margin-top: 8px; }
#pushMsg.is-error { color: #a3281d; font-weight: 800; }