/* BHV Meester · interactive blocks: "Voel het ritme" (.ritme) and "Wat zou jij doen?" (.scen) */
.ritme [hidden],.scen [hidden]{display:none!important}

/* ============================================================
   1. Voel het ritme
   ============================================================ */
.ritme__panel{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(28px,4vw,56px);border-radius:var(--r-lg);background:var(--aub);color:#fff;overflow:hidden;isolation:isolate}
.ritme__panel::before{content:"";position:absolute;z-index:-1;right:-120px;bottom:-160px;width:420px;height:420px;border-radius:999px;background:radial-gradient(closest-side,rgba(97,206,112,.22),transparent)}
.ritme__copy{display:flex;flex-direction:column;min-width:0}
.ritme__copy .h2{color:#fff;margin-bottom:18px}
.ritme__lead{font-size:clamp(17px,1.4vw,19px);color:rgba(255,255,255,.82);max-width:30em}
.ritme__zones{display:flex;flex-direction:column;gap:8px;margin-top:26px;font-size:15px;font-weight:500;color:rgba(255,255,255,.85)}
.ritme__zones li{display:flex;align-items:center;gap:10px}
.ritme__dot{width:12px;height:12px;border-radius:999px;flex:none}
.ritme__dot--slow{background:#F2B33D}
.ritme__dot--ok{background:var(--green)}
.ritme__dot--fast{background:#FF6B61}
.ritme__note{margin-top:26px;font-size:14px;color:rgba(255,255,255,.6);max-width:32em}

/* The "device" */
.ritme__device{position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;padding:clamp(20px,2.6vw,30px);border-radius:var(--r);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.ritme__ecg{width:100%;height:clamp(64px,8vw,96px);overflow:visible}
.ritme__ecg path{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ritme__ecg-base{stroke:#fff;stroke-opacity:.15}
.ritme__ecg-beat{stroke:var(--green);stroke-dasharray:1100;stroke-dashoffset:1100;opacity:.9;filter:drop-shadow(0 0 6px rgba(97,206,112,.6))}
.ritme__ecg-beat.is-live{animation:ritmeDraw .5s cubic-bezier(.2,.7,.2,1) forwards}
.ritme__ecg.is-idle .ritme__ecg-beat{animation:ritmeIdle 2.8s linear infinite;opacity:.45}
@keyframes ritmeDraw{0%{stroke-dashoffset:1100;opacity:1}90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.6}}
@keyframes ritmeIdle{0%{stroke-dashoffset:1100}70%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}

.ritme__read{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ritme__bpm{display:flex;align-items:baseline;gap:10px;line-height:1}
.ritme__num{font-family:var(--display);font-weight:800;font-size:clamp(56px,7vw,88px);letter-spacing:-.045em;font-variant-numeric:tabular-nums;min-width:2.1ch;color:#fff;transition:color .2s}
.ritme__unit{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ritme__state{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);font-size:14px;font-weight:600;color:rgba(255,255,255,.85);transition:background .2s,color .2s}
.ritme__device[data-zone="ok"] .ritme__num{color:var(--green)}
.ritme__device[data-zone="ok"] .ritme__state{background:rgba(97,206,112,.18);color:var(--green)}
.ritme__device[data-zone="slow"] .ritme__num{color:#F2B33D}
.ritme__device[data-zone="slow"] .ritme__state{background:rgba(242,179,61,.16);color:#F7C66A}
.ritme__device[data-zone="fast"] .ritme__num{color:#FF6B61}
.ritme__device[data-zone="fast"] .ritme__state{background:rgba(255,107,97,.16);color:#FF8F87}

/* Gauge: 60–160 per minute, green zone 100–120 */
.ritme__gauge{display:flex;flex-direction:column;gap:6px}
.ritme__track{position:relative;height:12px;border-radius:999px;background:rgba(255,255,255,.12)}
.ritme__zone{position:absolute;top:0;bottom:0;left:40%;width:20%;border-radius:999px;background:var(--green);opacity:.85}
.ritme__marker{position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:999px;background:#fff;border:4px solid var(--aub);box-shadow:0 0 0 2px rgba(255,255,255,.35);opacity:.35;transition:left .25s ease,opacity .25s}
.ritme__device.is-active .ritme__marker{opacity:1}
.ritme__ticks{position:relative;height:16px;font-size:12px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.ritme__ticks span{position:absolute;top:0;transform:translateX(-50%)}
.ritme__ticks span:nth-child(1){left:0;transform:none}
.ritme__ticks span:nth-child(2){left:40%}
.ritme__ticks span:nth-child(3){left:60%}
.ritme__ticks span:nth-child(4){right:0;transform:none}

/* Tap target */
.ritme__controls{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"tap hint" "tap tools";gap:6px 22px;align-items:center;margin-top:4px}
.ritme__tap{grid-area:tap;position:relative;width:clamp(112px,12vw,136px);height:clamp(112px,12vw,136px);border:0;padding:0;border-radius:999px;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.ritme__tap-face{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:100%;height:100%;border-radius:999px;background:var(--red);color:#fff;font:700 18px/1 var(--display);letter-spacing:-.01em;box-shadow:0 14px 34px rgba(217,7,0,.35),inset 0 -4px 0 rgba(0,0,0,.15);transition:transform .08s ease,background .15s}
.ritme__tap-face .ico{width:30px;height:30px;stroke-width:2.2}
.ritme__tap:hover .ritme__tap-face{background:#E51C15}
.ritme__tap:active .ritme__tap-face,.ritme__tap.is-down .ritme__tap-face{transform:scale(.93)}
.ritme__tap-ring{position:absolute;inset:0;border-radius:999px;border:3px solid var(--green);opacity:0;transform:scale(1)}
.ritme__tap.is-beat .ritme__tap-ring{animation:ritmeRing .5s ease-out}
@keyframes ritmeRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
.ritme__tap:focus-visible{outline:3px solid #fff;outline-offset:4px}
.ritme__hint{grid-area:hint;align-self:end;font-size:14px;color:rgba(255,255,255,.65)}
.ritme__hint [data-ritme-count]{display:inline-block;margin-left:6px;padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.1);font-weight:700;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85)}
.ritme__tools{grid-area:tools;align-self:start;display:flex;flex-wrap:wrap;gap:8px}
.ritme__tool{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:600 14px/1 var(--body);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.ritme__tool .ico{width:18px;height:18px}
.ritme__tool:hover{background:rgba(255,255,255,.1)}
.ritme__tool[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:var(--aub)}
.ritme__tool:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Result */
.ritme__result{display:flex;flex-direction:column;gap:8px;padding:22px 24px;border-radius:var(--r);background:#fff;color:var(--text);animation:ritmeIn .35s ease}
.ritme__result[hidden]{display:none}
@keyframes ritmeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ritme__result-title{font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.025em;line-height:1.1;color:var(--aub)}
.ritme__result-title[data-tone="ok"]{color:var(--green-text)}
.ritme__result-text{color:var(--muted);font-size:16px}
.ritme__result .btns{margin-top:10px;align-items:center}
.ritme__result .btn--ghost-light{border-color:var(--aub);color:var(--aub)}
.ritme__result .btn--ghost-light:hover{background:var(--aub);color:#fff}
.ritme__again{border:0;background:none;padding:0 6px;font:600 15px/1 var(--body);color:var(--red);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ritme__device.is-done .ritme__controls{display:none}

/* ============================================================
   2. Wat zou jij doen?
   ============================================================ */
.scen__card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);padding:clamp(22px,3.5vw,48px);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow)}
.scen__side{display:flex;flex-direction:column;min-width:0}
.scen__side .h2{margin-bottom:14px}
.scen__lead{color:var(--muted);font-size:16px;max-width:28em}
.scen__progress{display:flex;flex-direction:column;gap:4px;margin-top:26px;counter-reset:scen}
.scen__progress li{position:relative;display:flex;align-items:center;gap:12px;padding:8px 0;font-size:15px;font-weight:500;color:var(--muted)}
.scen__progress li::before{counter-increment:scen;content:counter(scen);display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:var(--paper-2);font:700 13px/1 var(--display);color:var(--muted);flex:none;transition:background .2s,color .2s}
.scen__progress li.is-active{color:var(--aub);font-weight:600}
.scen__progress li.is-active::before{background:var(--red);color:#fff}
.scen__progress li.is-done::before{background:var(--green-soft);color:var(--green-text)}
.scen__status{margin-top:18px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.scen__main{min-width:0;display:flex;flex-direction:column;gap:32px}
.scen.is-ready .scen__main{gap:0}
.scen.is-ready .scen__step:not(.is-active){display:none}
.scen__step{display:flex;flex-direction:column;gap:18px;min-width:0}
.scen.is-ready .scen__step.is-active{animation:scenIn .3s ease}
@keyframes scenIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.scen__label{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.scen__q{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;line-height:1.2;color:var(--aub);max-width:24em}
.scen__opts{display:flex;flex-direction:column;gap:10px}
.scen__opt{position:relative;display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:16px 18px;border-radius:18px;border:1.5px solid var(--line);background:var(--paper);color:var(--text);font:500 16px/1.4 var(--body);cursor:pointer;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.scen__opt:hover{border-color:var(--aub);background:#fff;transform:translateY(-1px)}
.scen__opt:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:18px}
.scen__opt-letter{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;background:#fff;border:1.5px solid var(--line);font:700 14px/1 var(--display);color:var(--aub);flex:none;transition:all .15s}
.scen__opt-text{flex:1;min-width:0}
.scen__opt-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--blush);color:var(--red);flex:none}
.scen__opt--who{font-weight:600;font-size:17px}
.scen__opt--who > .ico{color:var(--red);transition:transform .15s}
.scen__opt--who:hover > .ico{transform:translateX(3px)}
.scen__opt-mark{display:none;width:28px;height:28px;align-items:center;justify-content:center;border-radius:999px;flex:none}
.scen__opt-mark .ico{width:16px;height:16px;stroke-width:3}
.scen__opt-mark .ico:last-child{display:none}
.scen__opts.is-answered .scen__opt{cursor:default;transform:none;pointer-events:none}
.scen__opts.is-answered .scen__opt:not(.is-correct):not(.is-wrong){opacity:.5}
.scen__opt.is-correct{border-color:var(--green-dark);background:var(--green-soft);color:#0b4a1d}
.scen__opt.is-correct .scen__opt-letter{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.scen__opt.is-correct .scen__opt-mark{display:inline-flex;background:var(--green-dark);color:#fff}
.scen__opt.is-wrong{border-color:var(--red);background:var(--blush);color:var(--red-dark)}
.scen__opt.is-wrong .scen__opt-letter{background:var(--red);border-color:var(--red);color:#fff}
.scen__opt.is-wrong .scen__opt-mark{display:inline-flex;background:var(--red);color:#fff}
.scen__opt.is-wrong .scen__opt-mark .ico:first-child{display:none}
.scen__opt.is-wrong .scen__opt-mark .ico:last-child{display:block}
.scen__feedback{display:flex;flex-direction:column;gap:10px;padding:20px 22px;border-radius:18px;background:var(--paper-2);border-left:4px solid var(--green-dark);animation:scenIn .3s ease}
.scen__feedback[hidden]{display:none}
.scen__feedback[data-tone="wrong"]{border-left-color:var(--red)}
.scen__verdict{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.015em;color:var(--green-text)}
.scen__feedback[data-tone="wrong"] .scen__verdict{color:var(--red)}
.scen__explain{color:var(--text);font-size:16px}
.scen__next{align-self:flex-start;margin-top:6px}
.scen__next[hidden]{display:none}

/* Result: the one bold moment */
.scen__step--result{position:relative;gap:14px;padding:clamp(24px,3vw,40px);border-radius:var(--r);background:var(--aub);color:#fff;overflow:hidden;isolation:isolate}
.scen__step--result::after{content:"";position:absolute;z-index:-1;right:-90px;top:-90px;width:300px;height:300px;border-radius:999px;background:radial-gradient(closest-side,rgba(97,206,112,.25),transparent)}
.scen__score{font-size:16px;color:rgba(255,255,255,.75);margin-top:-6px}
.scen__score:empty{display:none}
.scen__rec{display:flex;flex-direction:column;gap:10px}
.scen.is-ready .scen__rec:not(.is-active){display:none}
.scen__rec+.scen__rec{margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15)}
.scen.is-ready .scen__rec+.scen__rec{margin-top:0;padding-top:0;border-top:0}
.scen__rec-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,52px);letter-spacing:-.035em;line-height:1}
.scen__rec-price{font-family:var(--body);font-size:15px;font-weight:600;letter-spacing:0;color:var(--green)}
.scen__rec-text{color:rgba(255,255,255,.82);max-width:34em;font-size:16px}
.scen__rec .btns{margin-top:8px}
.scen__rec-note{font-size:13px;color:rgba(255,255,255,.5)}
.scen__restart{align-self:flex-start;border:0;background:none;padding:0;font:600 15px/1 var(--body);color:var(--green);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.scen__restart[hidden]{display:none}
.scen__restart:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ============================================================
   Responsive + motion
   ============================================================ */
@media (max-width:960px){
	.ritme__panel,.scen__card{grid-template-columns:minmax(0,1fr)}
	.scen__progress{flex-direction:row;flex-wrap:wrap;gap:4px 18px}
	.scen__progress li{padding:4px 0}
}
@media (max-width:640px){
	.ritme__panel{padding:22px 18px}
	.ritme__device{padding:18px 16px}
	.ritme__controls{grid-template-columns:minmax(0,1fr);grid-template-areas:"tap" "hint" "tools";justify-items:center;text-align:center;gap:12px}
	.ritme__tools{justify-content:center}
	.ritme__read{gap:10px}
	.ritme__bpm{gap:8px}
	.ritme__num{font-size:52px}
	.ritme__result .btns .btn{flex:1 1 100%}
	.scen__card{padding:20px 16px}
	.scen__opt{padding:14px 14px;gap:12px;font-size:15px}
	.scen__progress li{font-size:14px}
	.scen__step--result{padding:22px 18px;margin:0 -2px}
}
@media (prefers-reduced-motion:reduce){
	.ritme__ecg-beat,.ritme__ecg.is-idle .ritme__ecg-beat{animation:none!important;stroke-dashoffset:0;opacity:.6}
	.ritme__ecg-beat.is-live{opacity:1}
	.ritme__tap.is-beat .ritme__tap-ring{animation:none;opacity:.8}
	.ritme__marker{transition:none}
}
.ritme__device:not([data-zone]) .ritme__num,.ritme__device[data-zone=""] .ritme__num{opacity:.35}