/* Liedje aanvragen: formulier + "goed om te weten". Bouwt op pages.css + forms.css. */

.rq .section-head { max-width: 680px; }
.rq .lead { text-wrap: balance; }

.rq__grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .rq__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}

/* ---------- Formulier ---------- */
.rq__form { gap: var(--space-6); }
.form input::placeholder { color: rgba(30, 30, 30, 0.32); }
.field__hint { margin: 0; color: var(--dj-text-muted); font-size: 0.8125rem; }

/* Optioneel blok: e-mail + opt-in, zachtjes afgescheiden */
.rq__notify {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(30, 30, 30, 0.08);
}
.rq__optin { max-width: none; }
.field__error--optin { margin-top: calc(var(--space-2) * -1); }

.rq__privacy { margin: 0; max-width: 34ch; color: var(--dj-text-muted); font-size: 0.8125rem; }
.rq__privacy a { color: var(--dj-blue); }

/* Verzenden: de noot springt omhoog en weg */
.rq__form.is-sending .form__submit-icon { animation: rq-hop 650ms var(--ease-out) forwards; }
@keyframes rq-hop {
  40% { transform: translateY(-10px) rotate(-12deg); }
  to  { transform: translate(28px, -48px) rotate(18deg); opacity: 0; }
}

/* ---------- Bedankt ---------- */
.rq__done { gap: var(--space-3); padding: var(--space-5) var(--space-3) var(--space-4); }
.rq__done p { max-width: 42ch; color: var(--dj-text); }
.rq__ticket {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(0, 128, 255, 0.08);
  color: var(--dj-ink) !important;
  font-weight: 600;
  animation: rq-pop 500ms 700ms var(--ease-out) both;
}
.rq__ticket span { color: var(--dj-text-muted); font-weight: 400; }
.rq__done .form__done-title { animation: rq-pop 500ms 550ms var(--ease-out) both; }
.rq__again {
  margin-top: var(--space-3);
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(30, 30, 30, 0.06);
  color: var(--dj-blue);
  font: 500 var(--fs-body) / 1 var(--font-ui);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.rq__again:hover { background: rgba(0, 128, 255, 0.1); transform: translateY(-1px); }
.rq__again:focus-visible { outline: 2px solid var(--dj-blue); outline-offset: 2px; }

/* Plaat: schuift binnen, begint te draaien, vinkje springt op het label, noten vliegen */
.rq__record { position: relative; width: 132px; height: 132px; margin-bottom: var(--space-2); }
.rq__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 31%, rgba(255, 255, 255, 0.07) 31.5% 32%, transparent 32.5%),
    repeating-radial-gradient(circle, #1E1E1E 0 2px, #2A2A2A 2px 3.5px),
    #222;
  box-shadow: 0 16px 30px -12px rgba(30, 24, 18, 0.55);
  animation:
    rq-disc-in 650ms var(--ease-out) both,
    rq-spin 1.6s 500ms linear infinite;
}
.rq__disc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, 0.16) 13%, transparent 20% 58%, rgba(255, 255, 255, 0.1) 63%, transparent 70%);
}
.rq__disc i { position: absolute; inset: 33%; border-radius: 50%; background: var(--dj-blue); }
.rq__check {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--dj-blue);
  color: var(--dj-white);
  animation: rq-check 480ms 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.rq__check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: rq-draw 350ms 700ms ease-out forwards; }
.rq__note {
  position: absolute;
  left: calc(30% + var(--n) * 14%);
  top: 20%;
  color: var(--dj-blue);
  font-size: calc(20px + var(--n) * 2px);
  opacity: 0;
  animation: rq-note 2.4s calc(900ms + var(--n) * 380ms) ease-out infinite;
}
.rq__note:nth-child(even) { color: var(--dj-amber); }

@keyframes rq-disc-in { from { transform: translateX(-60px) rotate(-120deg) scale(0.6); opacity: 0; } }
@keyframes rq-spin { to { transform: rotate(360deg); } }
@keyframes rq-check { from { transform: scale(0); } }
@keyframes rq-draw { to { stroke-dashoffset: 0; } }
@keyframes rq-pop { from { transform: translateY(8px); opacity: 0; } }
@keyframes rq-note {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(calc((var(--n) - 1.5) * 18px), -70px) rotate(calc((var(--n) - 1.5) * 14deg)); opacity: 0; }
}

/* ---------- Goed om te weten ---------- */
.rq__info { padding: clamp(4px, 1vw, 12px) 0; }
.rq__info-title {
  margin: 0 0 var(--space-5);
  color: var(--dj-ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);
  line-height: 1.1;
}
.rq__facts { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.rq__facts li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.rq__facts h3 { margin: 0 0 4px; color: var(--dj-ink); font-size: var(--fs-body); font-weight: 600; }
.rq__facts p { margin: 0; color: var(--dj-text); font-size: var(--fs-small); line-height: 1.5; }
.rq__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--dj-surface-glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--shadow-pill);
}
.rq__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--dj-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .rq__disc, .rq__check, .rq__check path, .rq__ticket, .rq__done .form__done-title { animation: none; }
  .rq__check path { stroke-dashoffset: 0; }
  .rq__note { display: none; }
}