@charset "utf-8";

/* ==========================================================
   BASE
   ========================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; transition: all .25s ease; }
html { -webkit-text-size-adjust: none; }
body { font-family: 'Poppins', sans-serif; color: #fff; overflow-x: hidden; background: #000; }
h1, h2 { font-family: 'Jost', sans-serif; color: #fff; }
a { color: inherit; text-decoration: none; }

/* ==========================================================
   ESKO PAGINA (gescope'd zodat footer/menu elders niet breken)
   ========================================================== */
.esko header {
  position: relative;
  width: 100%;
  height: auto; /* geen 100vh zodat niets naar beneden wordt geduwd */
}

.esko header .thumb {
  display: none; /* geen achtergrondfoto meer */
}

body.esko {
  background: #000; /* zelfde zwarte achtergrond als footer */
}


/* --------------------------
   LOGO (bovenaan, klikbaar)
   -------------------------- */
.esko header .title {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0 20px;
  position: relative;
  z-index: 2;
}

/* ▶▶ HIER stel je de LOGO-grootte (desktop) in */
.esko .logo {
  max-width: 860px;          /* ← pas deze waarde aan voor desktop */
  display: block;
  transition: transform .3s ease;
  margin: 0 auto;
}

.esko .logo-link { display: inline-block; animation: logoEffect 4s ease forwards; }
.esko .logo:hover { transform: scale(1.05); }

@keyframes logoEffect {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

/* --------------------------
   Socials (linker middenrand)
   -------------------------- */
.esko #socials {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  list-style: none;
}
.esko #socials li {
  margin: 10px 0;
  width: 45px; height: 45px;
  border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  background: #fff; color: #000;
  font-size: 1.2rem;
  transition: all .3s ease;
}
.esko #socials li a {
  color: #000;
  display: inline-flex; width: 100%; height: 100%;
  align-items: center; justify-content: center;
}
.esko #socials li:hover { transform: scale(1.1); }
.esko #socials .instagram:hover { color: #cd486b; }
.esko #socials .facebook:hover  { color: #3B5998; }
.esko #socials .twitter:hover   { color: #1da1f2; }
.esko #socials .spotify:hover   { color: #1db954; }
.esko #socials .youtube:hover   { color: red; }
.esko #socials .mail:hover      { color: #2297C5; }

/* --------------------------
   Tourdata blok
   -------------------------- */
.esko .speellijst {
  position: relative;
  padding: 20px;
  margin: 20px auto;
  max-width: 900px;
  background: rgba(0,0,0,.3); /* transparant zodat bg zichtbaar blijft */
  border-radius: 10px;
  z-index: 2;
}
.esko .speellijst h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.esko .list { list-style: none; padding: 0; }
.esko .speellijst li {
  display: grid;
  grid-template-columns: 180px 140px 180px 1fr auto; /* datum | tijd | plaats | zaal | knop */
  align-items: center;
  gap: 15px;
  padding: 12px;
  border-bottom: 1px dotted rgba(255,255,255,.3);
  opacity: 0;
  transform: translateX(100px);
  color: #fff;
}
.esko .speellijst li:hover  { background: rgba(255,255,255,.1); }

/* Slide-in (na JS .come class) */
.esko .speellijst li.come {
  opacity: 1;
  transform: translateX(0);
  animation: slideInRight 1.2s ease-out forwards;
}
@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(100px); }
  100% { opacity: 1; transform: translateX(0); }
}
/* Stapsgewijze vertraging */
.esko .speellijst li:nth-child(1).come { animation-delay: .2s; }
.esko .speellijst li:nth-child(2).come { animation-delay: .5s; }
.esko .speellijst li:nth-child(3).come { animation-delay: .8s; }
.esko .speellijst li:nth-child(4).come { animation-delay: 1.1s; }
.esko .speellijst li:nth-child(5).come { animation-delay: 1.4s; }
.esko .speellijst li:nth-child(6).come { animation-delay: 1.7s; }

.esko .speellijst li span {
  display: flex; align-items: center; gap: 5px;
}

/* ==========================================================
   TICKETS-KNOPPEN (Tickets / Laatste / Uitverkocht)
   ========================================================== */

/* Basisknop (werkt voor <button> en <a>) */
.esko .speellijst li button,
.esko .speellijst li a.tickets,
.esko .speellijst li a.laatste,
.esko .speellijst li a.uitverkocht {
  display: inline-block;
  padding: 6px 14px;
  border: none;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  line-height: 1;
  text-align: center;
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}

/* Normale Tickets (geel) */
.esko .speellijst li button.tickets,
.esko .speellijst li a.tickets {
  background-color: #FFCB00 !important;
  color: #000 !important;
}
.esko .speellijst li button.tickets:hover,
.esko .speellijst li a.tickets:hover {
  background-color: #ffe600 !important;
}

/* Laatste Tickets (oranje + subtiele onderstreep + puls na 2.2s) */
.esko .speellijst li button.laatste,
.esko .speellijst li a.laatste {
  background-color: #FFCB00 !important;
  color: #fff !important;
  position: relative;
  animation: btnPulse 1.2s ease-in-out 2.2s infinite alternate; /* start na 2.2s */
  box-shadow: 0 0 0 0 rgba(255,102,0,0.45);
}
.esko .speellijst li button.laatste::after,
.esko .speellijst li a.laatste::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff6600, transparent);
  border-radius: 2px;
}

/* Uitverkocht (rood + streep door tekst) */
.esko .speellijst li button.uitverkocht,
.esko .speellijst li a.uitverkocht {
  background-color: #C81717 !important;
  color: #fff !important;
  position: relative;
  text-decoration: line-through;   /* streep door de tekst */
  text-decoration-thickness: 2px;
  text-decoration-color: #fff;
  opacity: 0.85;                   /* “inactief” gevoel */
}

/* Hover micro-interactie voor alle varianten */
.esko .speellijst li button:hover,
.esko .speellijst li a.tickets:hover,
.esko .speellijst li a.laatste:hover,
.esko .speellijst li a.uitverkocht:hover {
  transform: translateY(-1px);
}

/* Puls-animatie voor 'laatste' */
@keyframes btnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,102,0,0.45); }
  100% { box-shadow: 0 0 12px 4px rgba(255,102,0,0.35); }
}

/* ==========================================================
   FOOTER – alléén socials + copyright zichtbaar (menu ongemoeid)
   ========================================================== */
footer { position: relative; z-index: 5; }

footer .footer-socials ul,
footer section.footer-socials ul,
footer .social ul,
footer section.social.footer-socials ul {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0 !important;
  margin: 15px 0 0 !important;
  list-style: none !important;
}

footer .footer-socials ul li,
footer section.footer-socials ul li,
footer .social ul li {
  list-style: none !important;
  display: inline-block !important;
}

footer .footer-socials ul li a,
footer section.footer-socials ul li a,
footer .social ul li a {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  background: #fff !important;    /* witte bolletjes */
  color: #000 !important;         /* icon zwart */
  font-size: 1.2rem !important;
  line-height: 1 !important; text-align: center !important;
  transition: transform .25s ease, color .25s ease !important;
}
footer .footer-socials ul li a i,
footer section.footer-socials ul li a i,
footer .social ul li a i {
  width: auto !important; height: auto !important; margin: 0 !important;
}

footer .footer-socials a .fa-instagram:hover,
footer .social a .fa-instagram:hover { color:#cd486b !important; }
footer .footer-socials a .fa-tiktok:hover,
footer .social a .fa-tiktok:hover   { color:#000 !important; }
footer .footer-socials a .fa-spotify:hover,
footer .social a .fa-spotify:hover  { color:#1db954 !important; }
footer .footer-socials a .fa-youtube:hover,
footer .social a .fa-youtube:hover  { color:red !important; }
footer .footer-socials a .fa-facebook-f:hover,
footer .social a .fa-facebook-f:hover { color:#3B5998 !important; }
footer .footer-socials a .fa-linkedin:hover,
footer .social a .fa-linkedin:hover { color:#0077b5 !important; }

footer .footer-socials ul li a:hover,
footer .social ul li a:hover { transform: scale(1.1) !important; }

/* Copyright */
footer #copyright{
  display:block !important;
  margin:25px auto 0 !important;
  padding:10px 15px !important;
  text-align:center !important;
  color:#ddd !important;
  font-family:'Poppins',sans-serif !important;
  font-size:.85rem !important;
  letter-spacing:.3px !important;
}
footer #copyright a{
  color:#fff !important;
  text-decoration:none !important;
  font-weight:600 !important;
}
footer #copyright a:hover{ text-decoration:underline !important; }
footer #copyright i{
  display:inline-block !important;
  margin:0 4px !important;
  opacity:.8 !important;
  transform:translateY(1px) scale(.95) !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media screen and (max-width: 768px){
  .esko .speellijst li { grid-template-columns: 1fr 1fr; text-align: center; }

  /* ▶▶ HIER stel je de LOGO-grootte (mobiel) in */
  .esko .logo {
    max-width: 390px; /* ← pas deze waarde aan voor mobiel */
  }

  .esko #socials { left: 10px; }
}

footer {
  margin-top: 60px;     /* extra ruimte voor de footer */
}
@media (max-width: 600px){
  footer .footer-socials ul,
  footer .social ul { gap: 8px !important; }
  footer .footer-socials ul li a,
  footer .social ul li a { width: 38px !important; height: 38px !important; font-size: 1.1rem !important; }
  footer #copyright { font-size:.8rem !important; line-height:1.4 !important; }
}
/* ——— Tourdata: stabiele, vloeiende binnenkomst ——— */

/* 1) Icoontjes: vaste breedte zodat niets verspringt */
.esko .speellijst li i {
  display: inline-block;
  width: 1.25em;          /* reserveer ruimte (zoals fa-fw) */
  text-align: center;
  flex: 0 0 1.25em;
}

/* 2) Zorg dat de hoogte van een rij niet ineens wijzigt */
.esko .speellijst li {
  min-height: 48px;       /* klein minimum voorkomt “inzakken” bij load */
  opacity: 0;
  transform: translateX(40px); /* alleen translate, geen scale */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* 3) De eigenlijke binnenkomst */
@keyframes slideInRightStable {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.esko .speellijst li.come {
  animation: slideInRightStable 650ms ease-out both; /* both = behoud eindtoestand */
}

/* 4) Stagger (vertraging per item) – laat zo staan of pas tijden aan */
.esko .speellijst li:nth-child(1).come { animation-delay: 0.20s; }
.esko .speellijst li:nth-child(2).come { animation-delay: 0.45s; }
.esko .speellijst li:nth-child(3).come { animation-delay: 0.70s; }
.esko .speellijst li:nth-child(4).come { animation-delay: 0.95s; }
.esko .speellijst li:nth-child(5).come { animation-delay: 1.20s; }
.esko .speellijst li:nth-child(6).come { animation-delay: 1.45s; }
.esko .speellijst li:nth-child(7).come { animation-delay: 1.70s; }
.esko .speellijst li:nth-child(8).come { animation-delay: 1.95s; }

/* 5) (Optioneel) geen grote hover-layoutverschuiving: gebruik subtiele glow i.p.v. achtergrondkleur */
.esko .speellijst li:hover {
  background: rgba(255,255,255,0.06);
  outline: 0;
}


/* Onderconstructie pagina styling */
.speellijst h2,
.speellijst p {
  text-align: center;
}

.speellijst p {
  max-width: 700px;
  margin: 15px auto;
  line-height: 1.6;
}