/* ============================================================
   De tijdmachine — een kwart eeuw voorbij zien vliegen
   ============================================================ */
.tm-body{background:var(--blue-950)}

/* ---- aftrap ---- */
.tm-intro{position:relative;padding:clamp(8rem,16vh,11rem) 0 clamp(3rem,7vh,5rem);overflow:hidden}
.tm-intro h1{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2.2rem,6.4vw,5.4rem);line-height:1;margin:.9rem 0 1.2rem;
}
.tm-intro .lead{max-width:46ch}
.tm-hint{
  margin-top:2.4rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.tm-hint span{display:inline-block;animation:tmWijs 1.8s ease-in-out infinite}
@keyframes tmWijs{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---- de rit zelf ---- */
.tm{position:relative}
.tm-stage{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;place-items:center;
}

/* het jaartal */
.tm-jaar{
  position:relative;z-index:3;
  font-family:var(--font-display);font-size:clamp(4.5rem,17vw,15rem);line-height:.9;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.5);
  text-shadow:0 0 60px rgba(27,58,245,.55);
  letter-spacing:.02em;pointer-events:none;
  transition:color .4s ease;
}
.tm-stage.vol .tm-jaar{color:rgba(255,224,27,.14);-webkit-text-stroke-color:rgba(255,224,27,.75)}

/* de foto's die voorbijvliegen */
.tm-fotos{position:absolute;inset:0;z-index:2}
.tm-foto{
  position:absolute;width:clamp(150px,20vw,300px);aspect-ratio:4/3;
  border-radius:14px;overflow:hidden;opacity:0;
  box-shadow:0 30px 70px rgba(3,5,28,.6);
  outline:3px solid rgba(255,255,255,.9);outline-offset:-3px;
  will-change:transform,opacity,filter;
}
.tm-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* onderin: waar zijn we en hoeveel is het al */
.tm-onder{
  position:absolute;left:0;right:0;bottom:clamp(1.2rem,4vh,2.6rem);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:1rem;padding:0 1.2rem;
  text-align:center;pointer-events:none;
}
.tm-titel{
  margin:0;max-width:36ch;min-height:2.4em;
  font-size:clamp(.95rem,1.4vw,1.15rem);color:rgba(255,255,255,.82);
}
.tm-cijfers{display:flex;gap:clamp(1.4rem,5vw,3.4rem)}
.tm-cijfers b{
  display:block;font-family:var(--font-display);font-size:clamp(1.5rem,3.4vw,2.4rem);
  color:var(--yellow);line-height:1;
}
.tm-cijfers span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* het spoor met jaartallen */
.tm-rail{
  position:absolute;right:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;gap:.18rem;max-height:76vh;overflow:hidden;
}
.tm-rail button{
  display:flex;align-items:center;gap:.5rem;justify-content:flex-end;
  background:none;border:0;padding:.12rem .2rem;cursor:pointer;
  font-size:.62rem;letter-spacing:.1em;color:rgba(255,255,255,.35);
}
.tm-rail button i{display:block;width:14px;height:2px;background:rgba(255,255,255,.35);border-radius:2px;transition:width .25s,background .25s}
.tm-rail button.nu{color:var(--yellow)}
.tm-rail button.nu i{width:30px;background:var(--yellow)}
.tm-rail button:hover i{width:24px}

/* ---- afsluiter ---- */
.tm-eind{text-align:center}
.tm-eind h2{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2rem,5.6vw,4.4rem);line-height:1;margin:.8rem 0 1.1rem;
}
.tm-eind .lead{margin-inline:auto;max-width:46ch}
.tm-knoppen{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.8rem}

/* zonder javascript of met minder beweging: gewoon een nette lijst */
.tm-body.geen-beweging .tm{height:auto !important}
.tm-body.geen-beweging .tm-stage{position:static;height:auto;padding:3rem 0}
.tm-body.geen-beweging .tm-fotos{position:static;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.tm-body.geen-beweging .tm-foto{position:static;opacity:1 !important;transform:none !important;filter:none !important}
.tm-body.geen-beweging .tm-rail{display:none}

@media (max-width:640px){
  .tm-foto{width:clamp(130px,42vw,220px)}
  .tm-rail{font-size:.56rem}
}

/* de knop waarmee de kapel meereist */
.tm-geluid{
  position:absolute;left:clamp(.8rem,3vw,2.2rem);bottom:clamp(.8rem,3vh,2rem);z-index:6;
  padding:.55rem 1rem;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-size:.8rem;font-weight:700;color:#fff;
  background:rgba(6,10,43,.72);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.tm-geluid[aria-pressed="true"]{background:var(--yellow);color:var(--ink);box-shadow:0 8px 24px rgba(255,224,27,.3)}
.tm-geluid:hover{background:rgba(255,224,27,.24)}
.tm-geluid[aria-pressed="true"]:hover{background:var(--yellow)}
.tm-geluid:disabled{opacity:.5;cursor:default}