/* Voordelen: hero met chatgesprekjes (vraag → antwoord), momenten, live cijfers,
   overstappen in 3 stappen, afsluitende CTA. Mobiel eerst. */

/* ---------- 0 + 1. Hero met vraag → antwoord als chatgesprekjes ---------- */
.oc-hero .section-head { max-width: 760px; }
.oc-hero .lead { text-wrap: balance; }

.swaps { display: grid; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 900px) { .swaps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Kaart met wat meer ademruimte: klein label, gesprek, lijntje, uitleg */
.swap {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: clamp(24px, 3vw, 32px) clamp(20px, 2.6vw, 28px) clamp(28px, 3.4vw, 36px);
}
/* Link onder de kaarten, naar de demo op de Systeem-pagina */
.oc-more { margin: clamp(28px, 4vw, 40px) 0 0; color: var(--dj-text-muted); text-align: center; }
.swap__label {
  margin: 0;
  color: var(--dj-amber);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chat { display: grid; gap: 14px; }
.chat__rule { width: 100%; height: 1px; margin: var(--space-3) 0 var(--space-1); border: 0; background: rgba(30, 30, 30, 0.1); }
.msg { display: flex; align-items: flex-end; gap: 10px; }
.msg--a { position: relative; justify-content: flex-end; }
.msg__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #d9d4cd;
  color: #fff;
}
.msg__avatar svg { width: 20px; height: 20px; fill: currentColor; }
/* DJ-logo als profielfoto: blauw rondje met de witte letters */
.msg__avatar--dj { background: var(--dj-blue); box-shadow: 0 4px 10px -4px rgba(0, 128, 255, 0.7); }
.msg__avatar--dj i {
  width: 22px;
  height: 17px;
  background: #fff;
  -webkit-mask: url("../assets/brand/dj-letters.svg") center / contain no-repeat;
  mask: url("../assets/brand/dj-letters.svg") center / contain no-repeat;
}
.msg__bubble {
  max-width: 84%;
  margin: 0;
  padding: 11px 15px;
  border-radius: 18px;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.msg--q .msg__bubble {
  border-bottom-left-radius: 6px;
  background: #e9e5df;
  color: var(--dj-ink);
  font-weight: 500;
}
.msg--a .msg__bubble {
  border-bottom-right-radius: 6px;
  background: var(--dj-blue);
  color: var(--dj-white);
}
.msg__bubble p { margin: 0; }
/* Uitleg onder het gesprek: gewone tekst */
.chat__detail { margin: 0 2px; color: var(--dj-text); font-size: 0.9375rem; line-height: 1.55; }
.chat .text-link { justify-self: start; margin: 0 2px; font-size: 0.9375rem; }
.msg__title { margin: 0; font-size: inherit; font-weight: 600; }

/* "Aan het typen…": drie bolletjes in een kleine blauwe ballon, rechts onderaan */
.msg__typing {
  position: absolute;
  right: 44px;
  bottom: 0;
  display: none;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  border-bottom-right-radius: 6px;
  background: var(--dj-blue);
}
.msg__typing i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); animation: oc-typing 1s ease-in-out infinite; }
.msg__typing i:nth-child(2) { animation-delay: 150ms; }
.msg__typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes oc-typing {
  0%, 60%, 100% { transform: none; opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Met JS: vraag verschijnt, dan "typen", dan het antwoord (plaats blijft gereserveerd) */
.js .chat .msg--q { opacity: 0; transform: translateY(8px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
.js .chat .msg--a .msg__bubble,
.js .chat .msg--a .msg__avatar { opacity: 0; transform: translateY(8px) scale(0.98); transform-origin: bottom right; transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out); }
.js .chat.is-asked .msg--q { opacity: 1; transform: none; }
.js .chat.is-typing .msg__typing { display: inline-flex; }
.js .chat.is-typing .msg--a .msg__avatar { opacity: 1; transform: none; }
.js .chat.is-answered .msg--a .msg__bubble,
.js .chat.is-answered .msg--a .msg__avatar { opacity: 1; transform: none; }
.js .chat .chat__rule,
.js .chat .chat__detail,
.js .chat .text-link { opacity: 0; transition: opacity 400ms ease 200ms; }
.js .chat.is-answered .chat__rule,
.js .chat.is-answered .chat__detail,
.js .chat.is-answered .text-link { opacity: 1; }

/* ---------- 2. Momenten ---------- */
.moments { display: grid; gap: clamp(28px, 3vw, 36px); }
@media (min-width: 900px) { .moments { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.moment { display: grid; align-content: start; gap: var(--space-3); }
.moment h3 { margin: var(--space-2) 0 0; color: var(--dj-ink); font-size: 1.25rem; font-weight: 600; }
.moment p { margin: 0; color: var(--dj-text); }

/* Sfeerkaart (tot er foto's zijn): avondkleuren, lichtvlekken, icoon en een equalizer */
.moment__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 18px 36px -18px rgba(30, 30, 30, 0.45);
  color: rgba(255, 255, 255, 0.92);
}
.moment__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 214, 150, 0.55) 0 3px, transparent 26px),
    radial-gradient(circle at 80% 18%, rgba(255, 214, 150, 0.45) 0 3px, transparent 30px),
    radial-gradient(circle at 64% 70%, rgba(255, 255, 255, 0.22) 0 2px, transparent 20px),
    radial-gradient(120% 70% at 50% 115%, rgba(255, 190, 110, 0.35), transparent 60%);
}
.moment__media--vrijdag { background: linear-gradient(170deg, #2b1c14, #6b3a14 60%, #B26A00); }
.moment__media--match { background: linear-gradient(170deg, #14241d, #245238 60%, #3f8a5a); }
.moment__media--feest { background: linear-gradient(170deg, #1d1030, #4b2474 55%, #b24a8a); }
.moment__icon {
  position: relative;
  width: 34%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
  transition: transform 600ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .moment:hover .moment__icon { transform: translateY(-4px) rotate(-4deg) scale(1.04); }
}
.moment__time {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Kleine equalizer rechtsonder: er speelt muziek */
.moment__eq {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
}
.moment__eq i {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.8);
  transform-origin: bottom;
  animation: oc-eq 1.1s ease-in-out infinite;
}
.moment__eq i:nth-child(2) { animation-delay: -0.3s; animation-duration: 0.9s; }
.moment__eq i:nth-child(3) { animation-delay: -0.6s; animation-duration: 1.3s; }
.moment__eq i:nth-child(4) { animation-delay: -0.15s; animation-duration: 1s; }
.moment__eq i:nth-child(5) { animation-delay: -0.45s; animation-duration: 1.2s; }
@keyframes oc-eq {
  0%, 100% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
}

/* ---------- 3. Live cijfers ---------- */
.stats__live {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #2FA84F;
  vertical-align: 0.05em;
  animation: oc-live 1.8s ease-out infinite;
}
@keyframes oc-live {
  0% { box-shadow: 0 0 0 0 rgba(47, 168, 79, 0.5); }
  100% { box-shadow: 0 0 0 10px rgba(47, 168, 79, 0); }
}
.stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
/* Smal: de twee cijfers naast elkaar, de top 25 eronder over de volle breedte */
.stat--tracks, .stat--skeleton:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat--tracks, .stat--skeleton:last-child { grid-column: auto; }
  .stat { min-height: 190px; }
  /* Minder tegels (drempel niet gehaald): netjes gecentreerd */
  .stats__grid[data-tiles="2"] { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
  .stats__grid[data-tiles="1"] { grid-template-columns: minmax(0, 420px); justify-content: center; }
}
.stat {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-height: 130px;
  padding: clamp(18px, 3vw, 32px);
  text-align: center;
}
.stat__value {
  margin: 0;
  color: var(--dj-blue);
  font-family: var(--font-label);
  font-size: clamp(2.5rem, 1.9rem + 3vw, 4.75rem);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.stat__unit { margin-left: 2px; color: var(--dj-amber); }
.stat__label { margin: 0; color: var(--dj-ink); font-size: 1rem; font-weight: 600; }
/* Cijfertegels: inhoud verticaal gecentreerd; de top 25 begint bovenaan */
.stat:not(.stat--tracks) { align-content: center; }
.stat--tracks { text-align: left; }
.stat--tracks .stat__label { text-align: center; }
.stat__tracks { display: grid; gap: 10px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.stat__tracks li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
}
/* Mini-plaatje voor elk nummer */
.stat__tracks li::before {
  content: "";
  grid-row: span 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 0 2px, var(--dj-amber) 2.5px 6px, transparent 6.5px),
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 3px),
    #1e1e1e;
}
.stat__tracks b { overflow: hidden; color: var(--dj-ink); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.stat__tracks span { overflow: hidden; color: var(--dj-text-muted); font-size: var(--fs-small); white-space: nowrap; text-overflow: ellipsis; }

/* Laadstatus: rustig pulserende placeholders */
.stat--skeleton { position: relative; overflow: hidden; }
.stat--skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: oc-shimmer 1.4s ease-in-out infinite;
}
@keyframes oc-shimmer { to { transform: translateX(100%); } }


/* ---------- 6. Overstappen in 3 stappen ---------- */
.steps {
  position: relative;
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
  /* Stippellijn die de drie stappen verbindt */
  .steps::before {
    content: "";
    position: absolute;
    top: 28px;
    left: calc(100% / 6);
    right: calc(100% / 6);
    border-top: 2px dashed rgba(0, 128, 255, 0.3);
  }
}
.step { position: relative; display: grid; align-content: start; justify-items: center; gap: var(--space-2); text-align: center; }
.step__num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: var(--dj-blue);
  box-shadow: 0 0 0 6px var(--dj-scene-bg), 0 10px 22px -8px rgba(0, 128, 255, 0.7);
  color: var(--dj-white);
  font-family: var(--font-label);
  font-size: 1.75rem;
  line-height: 1;
}
.step h3 { margin: 0; color: var(--dj-ink); font-size: 1.125rem; font-weight: 600; }
.step p { max-width: 32ch; margin: 0; color: var(--dj-text); }
.steps__note {
  display: table;
  margin: clamp(32px, 4vw, 48px) auto 0;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--dj-amber-soft);
  color: var(--dj-amber);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: center;
}

/* ---------- 7. Afsluitende CTA ---------- */
.oc-cta {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px);
  text-align: center;
}
.oc-cta p { max-width: 40ch; margin: 0; color: var(--dj-text); }
.oc-cta .cta { margin-top: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .stats__live, .stat--skeleton::after, .msg__typing i, .moment__eq i { animation: none; }
  .moment__icon { transition: none; }
}