/* Digital Jukebox — globale stijlen */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* vangnet: nooit horizontaal scrollen */
  color-scheme: light; /* geen donkere modus: de scene is licht */
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--dj-scene-bg);
  color: var(--dj-text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--dj-blue);
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* Paginalayout: UI-overlay boven de scene                             */
/* ------------------------------------------------------------------ */

/* De scene ligt als laag achter .page en scrollt mee met de pagina (de
   footer duwt alles omhoog). Alleen de nav blijft vast staan.
   .page laat klikken door naar de scene, behalve op eigen UI. */
.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto; /* header, tagline, stage, switcher, acties */
  padding: var(--page-top) var(--gutter) var(--space-6);
  pointer-events: none;
}
.page > * > *,
.site-header > * { pointer-events: auto; }

@media (min-width: 900px) {
  .page {
    padding-bottom: clamp(var(--space-7), 11vh, 120px);
  }
}

/* Header: logo linksboven, op een lijn met de nav (die vast rechtsboven staat) */
.site-header {
  display: flex;
  align-items: center;
  min-height: var(--nav-h);
  padding-right: calc(var(--nav-ball) + var(--space-4)); /* niet onder de nav-bol */
}
.site-header__nav {
  position: fixed;
  z-index: 30;
  top: var(--page-top);
  right: var(--gutter);
}

/* Logo */
.logo {
  display: block;
  border-radius: var(--radius-md);
}
.logo picture,
.site-footer__logo picture { display: block; }
.logo img {
  height: clamp(36px, 28px + 1.2vw, 46px);
  width: auto;
}

/* Tagline */
.tagline {
  margin: var(--space-7) auto 0;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-tagline);
  line-height: var(--lh-tight);
  color: var(--dj-ink);
  text-align: center;
  text-wrap: balance;
}
.tagline__title { margin: 0; font: inherit; color: inherit; }
/* Ondertitel: ingetogen hint van wat we aanbieden */
.tagline__sub {
  max-width: 34rem;
  margin: 0.9em auto 0;
  color: var(--dj-text-muted);
  font-family: var(--font-ui);
  font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  font-weight: 400;
  line-height: 1.5;
  text-wrap: balance;
}
/* Zelfde accent als de koppen op de andere pagina's, maar in het bruin */
.tagline em {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-style: italic;
  color: var(--dj-amber);
}
/* Laadanimatie (js/tagline.js): verborgen tot de animatie start. Vangnet: na 2,5 s
   wordt de tagline sowieso zichtbaar, ook als het script niet loopt. */
.js .tagline:not(.is-in) { opacity: 0; animation: dj-tagline-failsafe 0s 2.5s forwards; }
@keyframes dj-tagline-failsafe { to { opacity: 1; } }
.tagline__word { display: inline-block; }
/* Smal: "voor elk volkscafé." op een eigen regel, zodat de titel mooi breekt */
@media (max-width: 899px) {
  .tagline em { display: block; width: fit-content; margin: 0 auto; }
}
.tagline__swash {
  position: absolute;
  left: 2%;
  bottom: -0.08em;
  width: 96%;
  height: 0.2em;
  overflow: visible;
  pointer-events: none;
}
.tagline__swash path {
  fill: none;
  stroke: var(--dj-amber);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  opacity: 0.55;
}
@media (prefers-reduced-motion: reduce) {
  .js .tagline:not(.is-in) { opacity: 1; animation: none; }
}
/* Desktop: de tagline hangt in de kamer, midden tussen logo en muurmodel.
   scene.js zet `top` elke camera-update (zie placeTagline). */
@media (min-width: 900px) {
  .page .tagline { /* .page: wint van de grid-rij-regel verderop */
    position: absolute;
    grid-row: auto; /* anders is de grid-rij het referentiekader i.p.v. de pagina */
    left: var(--gutter);
    right: var(--gutter);
    top: 25vh;
    max-width: none;
    margin: 0;
  }
}

/* Vaste rijen: de switcher is op desktop verborgen, de rest mag niet opschuiven.
   Mobiel: switcher net boven de CTA. */
.site-header   { grid-row: 1; }
.tagline       { grid-row: 2; }
.stage-spacer  { grid-row: 3; }
.switcher      { grid-row: 4; }

/* Onderste blok: CTA + tekstlinks */
.actions {
  grid-row: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
/* Desktop: CTA wat hoger in de scene, los van de tekstlinks */
@media (min-width: 900px) {
  .actions .cta { margin-bottom: clamp(var(--space-4), 3.5vh, var(--space-7)); }
}

/* ------------------------------------------------------------------ */
/* Primaire CTA                                                         */
/* ------------------------------------------------------------------ */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Eén vloeiende maat die meeschaalt met de vensterbreedte (geen sprongen) */
  width: clamp(220px, 140px + 18vw, 320px);
  min-height: clamp(46px, 40px + 0.8vw, 52px);
  padding: 0 var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--dj-blue);
  color: var(--dj-white);
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  font-weight: 500;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    transform var(--dur-fast) ease;
}
.cta:hover {
  background: var(--dj-blue-hover);
  box-shadow: var(--shadow-cta);
  transform: translateY(-1px);
}
.cta:active {
  background: var(--dj-blue-pressed);
  box-shadow: none;
  transform: translateY(0);
}

/* ------------------------------------------------------------------ */
/* Tekstlinks                                                           */
/* ------------------------------------------------------------------ */

.text-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.text-link {
  display: inline;
  color: var(--dj-blue);
  font-size: var(--fs-link);
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
}
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.text-link__chevron {
  display: inline-block;
  margin-left: 0.05em;
  transition: transform var(--dur-fast) var(--ease-out);
}
.text-link:hover .text-link__chevron { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .cta, .cta:hover { transform: none; }
  .text-link:hover .text-link__chevron { transform: none; }
}

/* ------------------------------------------------------------------ */
/* Footer: onder de scene, pas zichtbaar na scrollen                    */
/* ------------------------------------------------------------------ */

.site-footer {
  position: relative;
  z-index: 6; /* boven de vaste lagen (scene, labels, hints) */
  padding: var(--space-8) var(--gutter) var(--space-6);
  background: var(--dj-surface);
  box-shadow: 0 -12px 40px rgba(30, 30, 30, 0.08);
  color: var(--dj-text);
  font-size: var(--fs-small);
}
.site-footer__inner {
  display: grid;
  gap: var(--space-7) var(--space-6);
  max-width: 1120px;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.site-footer__brand { grid-column: 1 / -1; max-width: 32ch; }
.site-footer__logo img { height: 32px; width: auto; }
.site-footer__brand p { margin: var(--space-4) 0 0; color: var(--dj-text-muted); }
@media (min-width: 900px) {
  .site-footer__inner { grid-template-columns: 1.6fr repeat(3, 1fr); }
  .site-footer__brand { grid-column: auto; }
}
.site-footer h2 {
  margin: 0 0 var(--space-3);
  color: var(--dj-ink);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.site-footer ul {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}
.site-footer ul a { text-decoration: none; }
.site-footer ul a:hover { color: var(--dj-blue); }
.site-footer .text-link { font-size: var(--fs-small); }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  max-width: 1120px;
  margin: var(--space-7) auto 0;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(30, 30, 30, 0.08);
  color: var(--dj-text-muted);
  font-size: 0.8125rem;
}
.site-footer__legal a { text-decoration: none; }
.site-footer__legal a:hover { color: var(--dj-blue); }
/* Taalkeuze rechts in de onderste balk */
.lang { display: inline-flex; gap: 2px; margin-left: auto; padding: 2px; border-radius: var(--radius-pill); background: rgba(30, 30, 30, 0.05); }
.lang > * { padding: 2px 9px; border-radius: var(--radius-pill); font-weight: 600; letter-spacing: 0.04em; }
.lang [aria-current] { background: var(--dj-white); color: var(--dj-ink); box-shadow: 0 1px 3px rgba(30, 30, 30, 0.12); }
.lang [aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Mobiel: CTA en tekstlinks iets compacter */
@media (max-width: 899px) {
  .actions { gap: var(--space-4); }
  .text-link { font-size: 1rem; }
}

/* ------------------------------------------------------------------ */
/* Frosted glass kaart met 3D-rand: .glass (pagina's), desktop-kaart, sheet */
/* ------------------------------------------------------------------ */

.glass,
.device-info__glass,
.sheet {
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.74) 0%, rgba(248, 245, 241, 0.56) 50%, rgba(240, 236, 231, 0.66) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),      /* lichtrand bovenaan */
    inset 0 -1px 0 rgba(110, 100, 90, 0.14),      /* schaduwrand onderaan */
    0 1px 2px rgba(30, 30, 30, 0.05),
    0 12px 28px -8px rgba(30, 30, 30, 0.18),
    0 32px 64px -24px rgba(30, 30, 30, 0.24);
}
/* Rand met verloop: licht vangt de linkerboven-hoek, zachter onderaan */
.glass::before,
.device-info__glass::before,
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(155deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.4) 28%,
    rgba(255, 255, 255, 0.06) 62%,
    rgba(255, 255, 255, 0.6) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}