/* Subpagina's (Voordelen, Systeem, Prijzen, Contact): gedeelde opbouw,
   koppen, scroll-reveal, FAQ-accordeon, 3D-tilt. Bouwt op tokens.css + global.css. */

.subpage {
  position: relative;
  background: var(--dj-scene-bg);
}

/* Filmkorrel over de hele pagina (zelfde sfeer als de homepagina), heel subtiel */
.subpage::before {
  content: "";
  position: fixed;
  inset: -128px;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain, none);
  background-size: 256px 256px;
  opacity: 0.8;
  animation: dj-page-grain 0.9s steps(1, end) infinite;
}
@keyframes dj-page-grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-48px, 22px); }
  40%  { transform: translate(30px, -60px); }
  60%  { transform: translate(-90px, -18px); }
  80%  { transform: translate(64px, 40px); }
  100% { transform: translate(0, 0); }
}
.subpage > * { position: relative; z-index: 1; }

/* Header: logo links, nav vast rechtsboven (zoals op de homepagina) */
.subpage__header {
  z-index: 40; /* vaste nav blijft boven de footer */
  padding: var(--page-top) var(--gutter) 0;
}

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-8);
}

.section { padding: clamp(48px, 8vw, 96px) 0; }

/* ---------- Koppen ---------- */

.section-head {
  max-width: 720px;
  margin: 0 auto clamp(32px, 5vw, 56px);
  text-align: center;
}
.section-head--left { margin-left: 0; text-align: left; }

.eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--dj-amber);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.page-title,
.section-title {
  margin: 0;
  color: var(--dj-ink);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  text-wrap: balance;
}
.page-title { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); }
.section-title { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
.page-title em,
.section-title em {
  font-style: italic;
  color: var(--dj-blue);
}
.lead {
  margin: var(--space-4) 0 0;
  color: var(--dj-text-muted);
  font-size: 1.0625rem;
}

/* Scheidingslijn die zich "tekent" bij het in beeld komen */
.divider {
  width: min(560px, 60%);
  height: 1px;
  margin: 0 auto;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(30, 30, 30, 0.22), transparent);
}
.js .divider[data-reveal] { transform: scaleX(0); opacity: 1; }
.js .divider[data-reveal].is-in { transform: scaleX(1); }

/* Kleine warme notitie ("binnenkort", "voorstel") */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--dj-amber-soft);
  color: var(--dj-amber);
  font-size: var(--fs-small);
  font-weight: 500;
}
.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Scroll-reveal (alleen met JS; zonder JS is alles zichtbaar) ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms var(--ease-out),
    transform 900ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- FAQ-accordeon ---------- */

.faq__list {
  display: grid;
  gap: var(--space-3);
}
.faq__item {
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(30, 30, 30, 0.04);
  transition: background-color var(--dur-fast) ease, box-shadow var(--dur-med) var(--ease-out);
}
.faq__item:hover { background: rgba(255, 255, 255, 0.62); }
.faq__item[open] {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 10px 30px -12px rgba(30, 30, 30, 0.18);
}
.faq__item summary {
  position: relative;
  display: block;
  padding: 20px 56px 20px 24px;
  color: var(--dj-ink);
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { outline-offset: -3px; border-radius: var(--radius-md); }
/* Plus dat een min wordt */
.faq__item summary::before,
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--dj-blue);
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast) ease;
}
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); opacity: 0; }
.faq__answer {
  padding: 0 24px 22px;
  color: var(--dj-text);
  max-width: 72ch;
}
.faq__answer p { margin: 0 0 var(--space-3); }
.faq__answer p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .subpage::before { animation: none; }
  .js [data-reveal] { transform: none; transition: opacity 200ms linear; }
  .js .divider[data-reveal] { transform: none; }
}

/* ---------- 3D-tilt met glans: kaarten met [data-tilt] (Prijzen, Voordelen) ---------- */
/* De kaart kantelt licht mee met de muis en een lichtvlek volgt de cursor (pages.js). */
[data-tilt] {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 0%;
  position: relative;
  transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
/* Reveal (translateY) en tilt delen `transform`: tilt pas na het in beeld komen */
.js [data-tilt][data-reveal]:not(.is-in) { transform: translateY(18px); }
.js [data-tilt][data-reveal].is-in { transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); }
/* Na de reveal: tilt en schaduw zonder vertraging volgen */
.js [data-tilt].is-settled {
  transition: transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out);
  transition-delay: 0s;
}
[data-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
@media (hover: hover) and (pointer: fine) {
  [data-tilt]:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(110, 100, 90, 0.14),
      0 2px 4px rgba(30, 30, 30, 0.05),
      0 22px 44px -12px rgba(30, 30, 30, 0.24),
      0 48px 90px -30px rgba(30, 30, 30, 0.28);
  }
  [data-tilt]:hover::after { opacity: 1; }
}
[data-tilt] > * { position: relative; z-index: 2; }