/* Titus Retro motion: het gedeelde veer-vel (Ben, 2026-10-18: "Bij moderne UI is er een soort van bounce en een squishiness, een
   bepaalde elasticiteit. Dat mis ik ... En ik wil ook dat gewoon voor heel de site goed in zit.").
   Standaard AAN op de hele site; prefers-reduced-motion zet de veer uit (geen veer, geen indrukken, alleen de eindstand).
   Geluid blijft uit. Referentie is Kabarza (flowing.to, elastic toggles); de getallen hieronder en in spring.js zijn onze eigen en
   staan daar zodat Ben ze op de kandidaat kan beoordelen. Herkomst van het ontwerp: motion-spec.md (18 oktober 2026).
   Regels: alleen transform en opacity (en de losse eigenschappen scale en translate) animeren; nooit width, height, top, left,
   margin, box-shadow, filter of backdrop-filter; geen transition:all. Glas blijft op ::before en .lq-backdrop; het element zelf
   krijgt geen backdrop-filter (F01). Laadt na surfaces.css. */
:root{
  /* indrukken: voorover in 150 ms, los: veer */
  --tr-press-dur:150ms; --tr-press-scale:.96;
  /* Firm: geen overshoot, 220 ms (chips, filters, kleine toggles, lijsten, speler dicht) */
  --tr-spring-firm-dur:220ms; --tr-spring-firm:var(--tr-ease-out);
  /* Balanced: bounce 0,2, 720 ms (knop, tab, dock, wieloptie, menu, dialoog, matchbalk). Gedempte veer, 32 stappen, overshoot 1,5% */
  --tr-spring-bal-dur:720ms;
  --tr-spring-bal:linear(0, 0.0226, 0.0799, 0.159, 0.2499, 0.3452, 0.4394, 0.529, 0.6115, 0.6855, 0.7504, 0.8063, 0.8535, 0.8927, 0.9245, 0.9499, 0.9697, 0.9849, 0.996, 1.004, 1.0094, 1.0127, 1.0145, 1.0151, 1.0149, 1.0142, 1.013, 1.0117, 1.0102, 1.0088, 1.0074, 1.0061, 1);
  /* Elastic: bounce 0,4, 1100 ms (hero-cta's en speler open: een per scherm). 40 stappen, overshoot 9,5% */
  --tr-spring-ela-dur:1100ms;
  --tr-spring-ela:linear(0, 0.0236, 0.0856, 0.174, 0.2785, 0.3906, 0.5034, 0.6117, 0.7116, 0.8006, 0.8774, 0.9413, 0.9926, 1.032, 1.0606, 1.0796, 1.0904, 1.0946, 1.0935, 1.0885, 1.0807, 1.0711, 1.0606, 1.0498, 1.0394, 1.0297, 1.021, 1.0134, 1.007, 1.0019, 0.9978, 0.9949, 0.9929, 0.9916, 0.9911, 0.9911, 0.9915, 0.9921, 0.993, 0.994, 1);
  /* zonder linear(): zachte overshoot met een kromme */
  --tr-spring:var(--tr-spring-bal); --tr-spring-dur:var(--tr-spring-bal-dur);
}
@supports not (transition-timing-function:linear(0,1)){
  :root{--tr-spring-bal:cubic-bezier(.34,1.4,.64,1);--tr-spring-ela:cubic-bezier(.34,1.56,.64,1)}
}

/* knoppen: Balanced; chips en filters Firm; hero-cta Elastic. Alleen transform beweegt (de JS-veer gebruikt scale en translate). */
html .tr-btn{--tr-press-dur:85ms;--tr-press-scale:.98;--tr-spring-bal-dur:280ms;--tr-spring-ela-dur:360ms;--tr-spring-firm-dur:150ms;transition:transform var(--tr-spring-dur) var(--tr-spring)!important}
html .tr-btn:is([data-variant="chip"],[data-variant="wheel"],.chip,.filter){transition-duration:var(--tr-spring-firm-dur)!important;transition-timing-function:var(--tr-spring-firm)!important}
html .tr-btn[data-variant="cta"]{transition-duration:var(--tr-spring-ela-dur)!important;transition-timing-function:var(--tr-spring-ela)!important}
/* indrukken zonder JS: scale .96 in 150 ms; met spring.js (html.tr-motion) doet de JS het en blijft CSS van het element af */
html .tr-btn:not(:disabled):not([aria-disabled="true"]):active{transform:scale(var(--tr-press-scale));transition-duration:var(--tr-press-dur)!important;transition-timing-function:var(--tr-ease-out)!important}
html.tr-motion .tr-btn:not(:disabled):not([aria-disabled="true"]):active{transform:none}
/* hover alleen met een muis, hooguit 2 px omhoog */
@media(hover:hover) and (pointer:fine){html .tr-btn:not(:disabled):not([aria-disabled="true"]):not(:active):hover{translate:0 -1px}}

/* balken, matchbalk en speler: de kamer stuurt zijn beweging met --balk-duur en --balk-curve; die krijgen hier de veer, geen nieuwe beweging.
   Balken en matchbalk Balanced; de speler Elastic bij openen en Firm bij sluiten. */
html .titus-room,html .titus-room.x-bars{--balk-duur:var(--tr-spring-bal-dur);--balk-curve:var(--tr-spring-bal)}
html .titus-room .room-transport,html .titus-room.x-bars>.room-transport{--balk-duur:var(--tr-spring-firm-dur);--balk-curve:var(--tr-spring-firm)}
html .titus-room.player-open .room-transport,html .titus-room.x-bars.player-open>.room-transport{--balk-duur:var(--tr-spring-ela-dur);--balk-curve:var(--tr-spring-ela)}
/* de referentiespeler (data-reference-player) heeft zijn eigen vaste duur; dezelfde veer */
html:root[data-polish] .titus-room[data-reference-player]>.room-transport,html .titus-room[data-reference-player] .room-transport{transition:transform var(--tr-spring-firm-dur) var(--tr-spring-firm),opacity var(--tr-spring-firm-dur) var(--tr-spring-firm)}
html:root[data-polish] .titus-room[data-reference-player].player-open>.room-transport,html .titus-room[data-reference-player].player-open .room-transport{transition:transform var(--tr-spring-ela-dur) var(--tr-spring-ela),opacity var(--tr-spring-firm-dur) var(--tr-spring-firm)}

/* geen veer waar de gebruiker minder beweging wil: alles direct */
@media(prefers-reduced-motion:reduce){
  html .tr-btn,html .titus-room[data-reference-player] .room-transport,html:root[data-polish] .titus-room[data-reference-player]>.room-transport{transition:none!important}
  html .titus-room,html .titus-room .room-transport{--balk-duur:0s}
  html .tr-btn:not(:disabled):not([aria-disabled="true"]):active{transform:none;transition-duration:0s!important}
  html .tr-btn:not(:disabled):not(:active):hover{translate:none}
}