/* Sectie 2 — Leer-modus (teal): jij doet voor, hij kijkt mee. Motion #6 teal-spoor. */

.duo{display:grid;grid-template-columns:minmax(280px,1fr) minmax(300px,1.2fr);gap:clamp(2rem,4vw,4rem);align-items:center}
@media (max-width:840px){.duo{grid-template-columns:1fr}}

.bullets{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.55rem}
.bullets li{display:flex;gap:.6rem;align-items:baseline;font-size:.9rem;color:var(--ink-2)}
.bullets .bdot{width:8px;height:8px;border-radius:50%;flex:none;transform:translateY(1px)}
.bullets .bdot.teal{background:var(--teal)}
.bullets .bdot.blue{background:var(--neon)}
.bullets .bdot.grey{background:var(--ink-3)}

.learn-card{padding:clamp(.9rem,1.6vw,1.4rem)}
.learn-frame{position:relative;border-radius:14px}
.learn-frame::before{content:"";position:absolute;inset:-3px;border:2px solid var(--teal);border-radius:17px;opacity:.8;pointer-events:none;box-shadow:0 0 24px -4px rgba(63,182,190,.4)}
.learn-bar{display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--ink-2);margin:0 .2rem .8rem}
.learn-bar .dot{background:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}

/* teal-spoor: stippen waar "jij" klikte + lijn die zichzelf tekent */
.trace{position:absolute;inset:0;z-index:4;pointer-events:none}
.trace polyline{fill:none;stroke:var(--teal);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round}
.trace circle{fill:var(--teal);opacity:0;transition:opacity .3s var(--ease)}
.learn-card.play .trace polyline{transition:stroke-dashoffset 1.6s var(--ease) .3s;stroke-dashoffset:0}
.learn-card.play .trace circle{opacity:1}
.learn-card.play .trace circle:nth-of-type(1){transition-delay:.35s}
.learn-card.play .trace circle:nth-of-type(2){transition-delay:.95s}
.learn-card.play .trace circle:nth-of-type(3){transition-delay:1.75s}

@media (prefers-reduced-motion:reduce){
  .learn-card .trace polyline{transition:none;stroke-dashoffset:0}
  .learn-card .trace circle{transition:none;opacity:1}
}