/* ============================================================
   TRACK RECORD — MAIN's past events, as a free-scroll reel.
   The same reel and popup as mainmaastricht.com, turned dark:
   cards sit on deep violet instead of white, and the popup is
   a panel on the summit's black stage.
   ============================================================ */
.track{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(4rem,12vh,8rem) 0;
  border-top:1px solid var(--rule); background:var(--black);
}
.track > *:not(.aura){ position:relative; z-index:2; }
.track > .tag, .track > .display, .track > .lede{ padding-inline:var(--pad); }
.track .display{ margin-left:auto; margin-right:auto; }

/* ---------- the reel ---------- */
.track-reel-outer{ margin-top:clamp(2.4rem,6vh,4rem); }
.track-reel{
  display:flex; gap:20px; overflow-x:auto;
  padding:8px var(--pad) 12px; scroll-padding-inline:var(--pad);
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.track-reel::-webkit-scrollbar{ display:none; }

.track-frame{
  appearance:none; border:1px solid rgba(122,108,255,.22); padding:0; margin:0;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  position:relative; flex:0 0 auto; overflow:hidden;
  width:min(62vw,420px); aspect-ratio:16 / 11; border-radius:20px;
  scroll-snap-align:start;
  background:linear-gradient(160deg,#1A1447,#0D0A22);
  transition:border-color .35s ease, box-shadow .35s ease;
}
.track-frame:hover, .track-frame:focus-visible{
  border-color:rgba(122,108,255,.6);
  box-shadow:0 24px 60px -22px rgba(122,108,255,.9), 0 0 0 1px rgba(122,108,255,.25);
}
.track-frame-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* a poster letterboxes on deep violet instead of being cropped */
.track-frame.is-poster .track-frame-img{ object-fit:contain; background:#0D0A22; }

/* the photo sits under a violet wash; hovering lifts it so the photo reads */
.track-frame-tint{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(122,108,255,.50), rgba(122,108,255,.40) 45%, rgba(8,6,24,.2));
  mix-blend-mode:multiply; transition:opacity .4s ease;
}
.track-frame:hover .track-frame-tint,
.track-frame:focus-visible .track-frame-tint{ opacity:0; }

.track-frame-meta{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  gap:.35rem; padding:1.4rem 1.5rem;
  background:linear-gradient(180deg, transparent 30%, rgba(6,4,18,.88));
}
.track-frame-type{
  font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#B9B1FF;
}
.track-frame-title{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(.82rem,1.3vw,1rem); line-height:1.3; letter-spacing:.02em; color:#fff;
}
.track-x{ font-family:var(--font); font-weight:500; }
.track-frame-date{ font-size:.8rem; color:rgba(236,235,245,.72); }
.track-frame-more{
  position:absolute; top:14px; right:14px;
  font-size:.7rem; font-weight:600; color:#fff;
  padding:.4rem .75rem; border-radius:999px;
  background:rgba(122,108,255,.72); border:1px solid rgba(178,168,255,.35);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* arrival: the frames slide in one after another once the stage is live */
html.js .track-frame{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1),
             border-color .35s ease, box-shadow .35s ease;
  transition-delay:calc(var(--i,0) * 90ms + 150ms), calc(var(--i,0) * 90ms + 150ms), 0s, 0s;
}
html.js .track.live .track-frame{ opacity:1; transform:none; }

/* the proportional scrollbar */
.track-bar{
  position:relative; width:380px; max-width:calc(100% - 2 * var(--pad));
  height:3px; margin:1.8rem auto 0; border-radius:2px; overflow:hidden;
  background:rgba(122,108,255,.16);
}
.track-bar[hidden]{ display:none; }
.track-bar i{
  position:absolute; top:0; height:100%; min-width:24px; border-radius:2px;
  background:var(--primary); box-shadow:0 0 12px rgba(122,108,255,.8);
}

/* ---------- the popup ---------- */
html.track-locked, html.track-locked body{ overflow:hidden; }
.track-pop{
  position:fixed; inset:0; z-index:130;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(4,3,12,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.track-pop.is-open{ opacity:1; visibility:visible; transition:opacity .35s ease; }
.track-modal{
  position:relative; width:100%; max-width:640px;
  max-height:85vh; max-height:85dvh; overflow-y:auto;
  text-align:left; border-radius:24px;
  background:linear-gradient(180deg,#120E2E,#0A0819);
  border:1px solid rgba(122,108,255,.28);
  box-shadow:0 40px 120px -30px rgba(122,108,255,.8);
  transform:translateY(24px) scale(.96); filter:blur(6px);
  transition:transform .5s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.track-pop.is-open .track-modal{ transform:none; filter:none; }
.track-modal-media{ aspect-ratio:16 / 9; background:#0D0A22; }
.track-modal-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.track-modal-media.is-poster img{ object-fit:contain; }
.track-close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  font:400 1.2rem/1 var(--font); color:#fff;
  background:rgba(8,6,24,.66); border:1px solid rgba(178,168,255,.3);
}
.track-close:hover{ background:var(--primary); }
.track-modal-body{ padding:1.8rem 2rem 2.1rem; }
.track-pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.track-pill{
  font-size:.72rem; font-weight:600; padding:.38rem .8rem; border-radius:999px;
  color:#fff; background:var(--primary); border:1px solid rgba(178,168,255,.3);
}
.track-modal h3{
  margin:0 0 .9rem; font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.05rem,2.4vw,1.35rem); line-height:1.25; letter-spacing:.02em; color:#fff;
}
.track-modal p{ margin:0; font-size:.95rem; line-height:1.7; color:rgba(236,235,245,.8); }
.track-speakers:not(:empty){ margin-top:1.5rem; }
.track-speakers-label{
  display:block; margin-bottom:.8rem;
  font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--primary);
}
.track-speaker{ display:flex; align-items:center; gap:.8rem; }
.track-speaker + .track-speaker{ margin-top:.7rem; }
.track-avatar{
  flex:none; width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--primary));
}
.track-speaker-who b{ display:block; font-weight:600; font-size:.92rem; color:#fff; }
.track-speaker-who span{ display:block; font-size:.8rem; color:var(--muted); }

@media(max-width:760px){
  .track-frame{ width:78vw; }
  .track-modal-body{ padding:1.5rem 1.4rem 1.7rem; }
}
@media (prefers-reduced-motion: reduce){
  html.js .track-frame{ opacity:1; transform:none; transition:none; }
  .track-pop, .track-modal{ transition:none; }
  .track-modal{ transform:none; filter:none; }
}