/* =========================================================
   TUSSEN TOSTI & TECHNO — editie 12 maart 2027
   Aanvulling op style.css. Zelfde kleuren en lettertypes;
   hier staat alleen wat de aankondigingspagina extra nodig heeft.
   ========================================================= */

/* =========================================================
   ONTHULLING — de hero van de aankondigingspagina
   ========================================================= */
.onthul {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--nav-h) + 40px) clamp(38px, 6vw, 78px);
  overflow: hidden;
}

.onthul__bg { position: absolute; inset: 0; z-index: 0; }

.onthul__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  transform: scale(1.06);
  animation: langzaamIn 26s var(--ease) forwards;
}

@keyframes langzaamIn { to { transform: scale(1); } }

/* donker naar boven toe, zodat de tekst onderin altijd leesbaar blijft */
.onthul__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.72) 34%, rgba(0,0,0,0.28) 62%, rgba(0,0,0,0.55) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(231,126,9,0.20), transparent 62%);
}

.onthul__inner { position: relative; z-index: 1; width: 100%; }

.onthul__boven {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(16px, 2.4vw, 26px);
}

.vlag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  background: var(--orange);
  color: #180b02;
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.5vw, 0.86rem);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  line-height: 1;
}

.vlag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #180b02;
  animation: kloppen 1.9s ease-in-out infinite;
}

@keyframes kloppen {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.72); }
}

.vlag--leeg {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--line-strong);
}
.vlag--leeg::before { background: var(--orange); }

.onthul__presenteert {
  font-size: clamp(0.86rem, 2vw, 1.1rem);
  color: var(--cream-soft);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

/* De naam. Groot, en met een licht dat er één keer overheen trekt. */
.naam {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.005em;
  font-size: clamp(3.4rem, 15.5vw, 13rem);
  margin: 0;
  color: var(--cream);
  background-image: linear-gradient(100deg,
      var(--cream) 0%, var(--cream) 38%,
      var(--orange-hot) 48%, #fff5e6 52%, var(--orange-hot) 56%,
      var(--cream) 66%, var(--cream) 100%);
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: glansOver 3.4s 0.5s var(--ease) both;
}

@keyframes glansOver { to { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .naam { animation: none; -webkit-text-fill-color: var(--cream); }
  .onthul__bg img { animation: none; transform: none; }
}

.onthul__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: clamp(20px, 3vw, 30px);
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.3vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.onthul__facts .sep { color: var(--orange); }
.onthul__facts .nieuw { color: var(--orange); }

.onthul__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3.4vw, 36px);
}

.onthul__voet {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(30px, 5vw, 54px);
  padding-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--line);
}

/* =========================================================
   NAAMBAND — de namen die eindeloos langsschuiven
   ========================================================= */
.naamband {
  position: relative;
  padding-block: clamp(26px, 4vw, 46px);
  background: var(--ink);
  border-block: 1px solid var(--line);
  overflow: hidden;
}

.naamband__track {
  display: flex;
  width: max-content;
  animation: naambandLoop 54s linear infinite;
}

.naamband:hover .naamband__track { animation-play-state: paused; }

@keyframes naambandLoop { to { transform: translate3d(-50%, 0, 0); } }

.naamband__groep { display: flex; flex: none; align-items: center; }

.naamband__groep span {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8vw, 6.5rem);
  text-transform: uppercase;
  line-height: 1;
  padding-inline: clamp(16px, 2.4vw, 34px);
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
}

.naamband__groep .is-vol {
  color: var(--orange);
  -webkit-text-stroke: 0;
}

.naamband__groep .ster {
  font-size: clamp(1rem, 2.4vw, 1.9rem);
  color: var(--orange);
  -webkit-text-stroke: 0;
}

/* =========================================================
   LINE-UP — badge bij de nieuwe naam
   ========================================================= */
.lineup__row--ster { background: linear-gradient(90deg, rgba(231,126,9,0.10), transparent 62%); }

.badge {
  display: inline-block;
  margin-left: 14px;
  padding: 5px 11px;
  background: var(--orange);
  color: #180b02;
  font-family: var(--font-display);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
  vertical-align: middle;
  transform: translateY(-3px);
}

.lineup__tijd {
  margin-left: auto;
  padding-left: 14px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
  white-space: nowrap;
}

@media (max-width: 560px) {
  /* De tijd stond hier op display:none. Nu er echte speeltijden staan, mag hij
     niet verdwijnen: de rij breekt af en de tijd komt onder de naam te staan. */
  .lineup__row { flex-wrap: wrap; }

  .lineup__tijd {
    flex-basis: 100%;
    margin-left: 0;
    padding-left: 0;
    margin-top: 4px;
    color: var(--orange);
  }

  .badge { margin-left: 10px; font-size: 0.6rem; padding: 4px 8px; }
}


/* =========================================================
   HET VERHAAL — Youri x Funkerman
   ========================================================= */
.duo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(30px, 5vw, 74px);
  align-items: start;
}

@media (max-width: 900px) { .duo__grid { grid-template-columns: 1fr; } }

.duo__tekst p + p { margin-top: 16px; }

.duo__pic { position: relative; }

.duo__pic img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

.duo__pic figcaption {
  margin-top: 12px;
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* platenlijst */
.platen { margin-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }

.platen li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.platen__titel {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--cream);
}

.platen__wat { font-size: 0.93rem; color: var(--cream-dim); }
.platen__label { margin-left: auto; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); white-space: nowrap; }

/* =========================================================
   LOCATIE — de nieuwe zaal
   ========================================================= */
.locatie { position: relative; overflow: hidden; }

.locatie__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
}

@media (max-width: 880px) { .locatie__grid { grid-template-columns: 1fr; } }

.locatie__adres {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  text-transform: uppercase;
  line-height: 1.25;
  letter-spacing: 0.03em;
}

.stap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin-top: clamp(26px, 4vw, 38px);
  background: var(--line);
  border: 1px solid var(--line);
}

.stap div { padding: 22px 20px; background: var(--ink); }

.stap dt {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--orange);
  line-height: 1;
}

.stap dd { margin-top: 8px; font-size: 0.9rem; color: var(--cream-dim); }

/* =========================================================
   TICKETS
   ========================================================= */
.tickets { background: var(--ink); }

.tickets__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 62px);
  align-items: start;
}

@media (max-width: 900px) { .tickets__grid { grid-template-columns: 1fr; } }

.tickets__widget {
  padding: clamp(16px, 2.4vw, 26px);
  background: var(--panel);
  border: 1px solid var(--line-strong);
  min-height: 320px;
}

/* De Weeztix-widget erft niet van onze stijl; dit houdt hem binnen de kaders. */
.tickets__widget iframe { width: 100% !important; border: 0; display: block; }

.tickets__nb { margin-top: 16px; font-size: 0.88rem; color: var(--cream-dim); }

/* =========================================================
   AANKONDIGING OP DE HOMEPAGE
   ========================================================= */
.volgende {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-block: 1px solid var(--line-strong);
}

.volgende__bg { position: absolute; inset: 0; z-index: 0; }

.volgende__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; opacity: 0.42; }

.volgende__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,6,6,0.96) 0%, rgba(7,6,6,0.82) 46%, rgba(7,6,6,0.4) 100%),
    radial-gradient(90% 100% at 0% 50%, rgba(231,126,9,0.16), transparent 60%);
}

.volgende__inner { position: relative; z-index: 1; padding-block: clamp(52px, 7vw, 96px); }

.volgende h2 {
  font-size: clamp(2.6rem, 9vw, 6rem);
  margin-top: 14px;
  color: var(--cream);
}

.volgende h2 .accent { display: block; color: var(--orange); }

.volgende__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 2.2vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.volgende__meta .sep { color: var(--orange); }

.volgende__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

@media (max-width: 640px) {
  .volgende__bg img { opacity: 0.3; }
}

/* op smalle schermen past titel + label niet naast elkaar */
@media (max-width: 560px) {
  .platen li { gap: 4px 12px; }
  .platen__label { margin-left: 0; flex-basis: 100%; }
}

/* =========================================================
   HERO OP DE HOMEPAGE
   Dezelfde langzame zoom als op de aankondigingspagina: het beeld
   staat net te groot en ontspant in 26 seconden naar zijn ware maat.
   Staat hier en niet in style.css, zodat de oorspronkelijke stijl
   ongemoeid blijft en dit in één handeling terug te draaien is.
   ========================================================= */
.hero__bg img {
  transform: scale(1.06);
  animation: langzaamIn 26s var(--ease) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; transform: none; }
}

/* =========================================================
   PERSFOTO'S — raster van staande beelden
   Eigen klasse en niet .gallery, omdat die per plek een andere
   verhouding en kolombreedte voorschrijft. Hier is alles gelijk.
   ========================================================= */
.persfotos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}

.persfotos figure {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  aspect-ratio: 2 / 3;
}

.persfotos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), filter 0.8s var(--ease);
}

.persfotos figure:hover img { transform: scale(1.05); filter: saturate(1.1); }

@media (max-width: 860px) {
  .persfotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   EDITIEKAARTEN OP DE HOMEPAGE
   Twee gelijkwaardige blokken: de eerstvolgende avond en de
   volgende daarna. Elke kaart is in zijn geheel aanklikbaar.
   ========================================================= */
.edities__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 34px);
}

@media (max-width: 820px) { .edities__grid { grid-template-columns: 1fr; } }

.editie {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  border: 1px solid var(--line);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}

.editie:hover { border-color: var(--orange); transform: translateY(-4px); }

.editie__pic { position: relative; overflow: hidden; aspect-ratio: 3 / 2; }

.editie__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  transition: transform 0.8s var(--ease);
}

.editie:hover .editie__pic img { transform: scale(1.06); }

/* van onderaf verdonkeren, zodat het label leesbaar blijft */
.editie__pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,6,6,0.92) 2%, rgba(7,6,6,0.28) 46%, transparent 78%);
}

.editie__merk {
  position: absolute;
  z-index: 1;
  left: clamp(16px, 2vw, 24px);
  bottom: clamp(14px, 1.8vw, 20px);
  right: clamp(16px, 2vw, 24px);
}

.editie__naam {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  text-transform: uppercase;
  line-height: 0.9;
  color: var(--cream);
}

.editie:hover .editie__naam { color: var(--orange); }

.editie__body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 12px; flex: 1; }

.editie__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.editie__datum {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cream);
}

.merk {
  padding: 5px 11px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1;
}

.merk--vol   { background: #2a2520; color: var(--cream-dim); border: 1px solid var(--line); }
.merk--tickets { background: var(--orange); color: #180b02; }

.editie__plek { font-size: 0.95rem; color: var(--cream-dim); }
.editie__wie  { font-size: 0.95rem; color: var(--cream-soft); }

.editie__link {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--orange);
}

.editie__link::after { content: " →"; }

/* klein kopje boven de aftelklok in de hero */
.countdown__kop {
  margin-bottom: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* =========================================================
   HOE HET BEGON — kort stuk geschiedenis in de verhaalsectie
   ========================================================= */
.begin {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 4vw, 60px);
  margin-top: clamp(40px, 6vw, 76px);
  padding-top: clamp(30px, 4vw, 48px);
  border-top: 1px solid var(--line);
}

@media (max-width: 820px) { .begin { grid-template-columns: 1fr; } }

.begin__kop {
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  margin-top: 12px;
  color: var(--cream);
}

.begin__tekst p + p { margin-top: 14px; }
.begin__tekst strong { color: var(--orange); font-weight: 600; }