/* Vertel- en toonkring: edelstenen */

/* Fredoka zelf gehost (SIL OFL, zie fonts/OFL.txt): geen verzoeken naar Google, werkt ook zonder internet. */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/fredoka-latin.woff2") format("woff2");
}

:root {
  --ink: #241a30;
  --ink-zacht: #54485f;
  --papier: #fffdf8;
  --nacht: #1a0f27;
  --goud: #ffd23f;
  --licht: #f3e9ff;
  --font: "Fredoka", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
  /* Ontwerp op 1280x720 = 16px; schaalt mee zodat een 16:9-slide altijd past (1920x1080 = 24px). */
  font-size: min(1.25vw, 2.2222vh);
}

/* Gsm, tablet rechtop of een laag venster: slides scrollen in plaats van schalen. */
@media (max-width: 700px), (max-height: 480px), (orientation: portrait) {
  :root { font-size: clamp(15px, 2.4vw, 20px); }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--nacht);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--goud);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--ink);
}

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

.noscript { color: #fff; font-size: 1.5rem; text-align: center; margin-top: 40vh; }

/* ---------- Slides ---------- */

.deck { position: fixed; inset: 0; overflow: hidden; }

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 3rem 5.25rem;
  font-size: calc(1rem * var(--fit, 1));
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(3rem);
}
.slide.is-voorbij { transform: translateX(-3rem); }
.slide.is-actief { opacity: 1; visibility: visible; transform: none; z-index: 1; }
.klaar .slide { transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
.klaar .slide.is-actief { transition-delay: 0s; }

.inhoud {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 74rem;
  margin: auto; /* centreert, maar laat te lange inhoud onderaan overlopen in plaats van bovenaan */
}

/* Nachtthema voor titel, quiz, slot en bronnen */
.slide--nacht {
  color: #fff;
  background:
    radial-gradient(50rem 32rem at 12% 12%, rgb(155 89 182 / .55), transparent 70%),
    radial-gradient(46rem 32rem at 90% 88%, rgb(46 134 171 / .5), transparent 70%),
    radial-gradient(36rem 26rem at 88% 8%, rgb(231 154 174 / .35), transparent 70%),
    var(--nacht);
}

/* Elke steen zijn eigen sfeer, op basis van zijn kleuren */
.slide--steen {
  background: var(--c2);
  background:
    radial-gradient(48rem 34rem at 18% 22%, rgb(255 255 255 / .42), transparent 65%),
    linear-gradient(135deg, var(--c1), var(--c2) 52%, var(--c3));
}

/* ---------- Glitter ---------- */

.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / .95) 0 .07rem, transparent .14rem),
    radial-gradient(circle, rgb(255 255 255 / .8) 0 .06rem, transparent .12rem),
    radial-gradient(circle, rgb(255 255 255 / .7) 0 .09rem, transparent .16rem);
  /* Drie roosters met "scheve" maten, zodat het geen regelmatig patroon lijkt */
  background-size: 9.7rem 8.3rem, 13.1rem 11.9rem, 17.3rem 19.1rem;
  background-position: 1.3rem 2.1rem, 5.9rem 6.7rem, 11.2rem 3.4rem;
  opacity: .5;
  animation: glinster 5s ease-in-out infinite alternate;
}
@keyframes glinster { from { opacity: .2; } to { opacity: .75; } }

.glitter { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.glitter i {
  position: absolute;
  width: calc(1.3rem * var(--s, 1));
  aspect-ratio: 1;
  background: #fff;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: .75;
  animation: twinkel 3.4s ease-in-out var(--d, 0s) infinite;
}
@keyframes twinkel {
  0%, 100% { transform: scale(.15) rotate(0deg); opacity: 0; }
  50% { transform: scale(1) rotate(45deg); opacity: .95; }
}

/* ---------- Titelslide ---------- */

.titel { text-align: center; }
.titel h1 { margin: 0; line-height: 1; font-weight: 700; }
.titel .kicker {
  display: block;
  font-size: 2.6em;
  font-weight: 500;
  color: var(--licht);
}
.titel .glans {
  display: block;
  font-size: min(8.5em, 15vw);
  letter-spacing: -.02em;
  padding: .05em 0 .12em;
  color: var(--goud);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .titel .glans {
    background: linear-gradient(100deg, #ffd56b, #ff9ec7 28%, #c9a7ff 52%, #8fe3ff 76%, #ffd56b);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: glans 9s linear infinite;
  }
}
@keyframes glans { to { background-position: -200% 0; } }

.ondertitel { font-size: 2em; margin: .3em 0 0; color: var(--licht); }
.ondertitel strong { color: var(--goud); font-weight: 600; }

.steentjes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4em;
  margin: 2.6em 0 0;
  padding: 0;
}
.rondje {
  width: 6.5em;
  height: 6.5em;
  border-radius: 50%;
  object-fit: cover;
  border: .3em solid #fff;
  box-shadow: 0 .8em 1.6em -.6em rgb(0 0 0 / .6);
  background: #fff;
}
.steentjes .rondje { animation: dobber 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.5s); }
@keyframes dobber { from { transform: translateY(-.4em); } to { transform: translateY(.4em); } }

/* ---------- Slidetitel ---------- */

.slide-titel { font-size: 3.2em; font-weight: 700; line-height: 1.05; margin: 0 0 .6em; text-align: center; }

/* ---------- Steenslide ---------- */

.steen {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* fotokolom zo breed als de foto, de rest is voor tekst */
  gap: 3em;
  align-items: center;
}
.steen--duo { grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: 2.5em; }

.fotos { display: flex; justify-content: center; align-items: center; }

.kader {
  --h: 31em; /* maximale fotohoogte */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  width: min(calc(var(--h) * var(--ar) + 1.3em), 31em);
  margin: 0;
  padding: .65em;
  background: #fff;
  border-radius: 1.3em;
  box-shadow: 0 1.6em 3em -1.2em rgb(20 10 30 / .55), 0 0 0 .45em rgb(255 255 255 / .35);
  transform: rotate(-2deg);
}
.kader img { width: 100%; border-radius: .75em; background: #eee; }
.kader figcaption { text-align: center; font-weight: 600; font-size: 1.3em; padding-top: .35em; color: var(--ink); }

.steen--duo .fotos { align-items: flex-start; }
.steen--duo .kader--klein { --h: 21em; transform: rotate(3deg); margin: 9em 0 0 -1em; position: relative; }

.kaart {
  position: relative;
  min-width: 0;
  background: var(--papier);
  background: rgb(255 253 248 / .96);
  border-radius: 1.75em;
  padding: 1.5em 1.9em 1.7em;
  box-shadow: 0 1.6em 3em -1.3em rgb(20 10 30 / .55);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin: 0;
  padding: .3em .9em;
  border-radius: 999px;
  font-size: 1.3em;
  font-weight: 600;
}
.chip::before { content: ""; width: .6em; height: .6em; border-radius: .12em; background: currentColor; transform: rotate(45deg); }
.chip--mineraal { background: #dff3e6; color: #15522c; }
.chip--gemaakt { background: #ffe6c7; color: #7a3a00; }

.naam { font-size: 4.6em; font-weight: 700; line-height: 1.02; margin: .2em 0 0; letter-spacing: -.01em; }
.andere-naam { margin: .1em 0 0; font-size: 1.8em; font-weight: 500; color: var(--ink-zacht); }

.kracht {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin: .6em 0 0;
  padding: .32em 1.5em .32em .75em;
  font-size: 2em;
  font-weight: 700;
  line-height: 1.2;
  background: var(--lint);
  color: var(--op-lint);
  border-radius: .35em 0 0 .35em;
  clip-path: polygon(0 0, 100% 0, calc(100% - .65em) 50%, 100% 100%, 0 100%);
}
.kracht svg { width: 1em; height: 1em; flex: none; }


/* ---------- Quiz ---------- */

.quiz { text-align: center; }
.quiz-nr { margin: 0 0 .4em; font-size: 1.4em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--goud); }
.opties {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2em;
  margin: 1.2em 0 0;
  padding: 0;
}
.optie {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7em;
  padding: 1.6em 1em 1.4em;
  border: .25em solid transparent;
  border-radius: 1.6em;
  background: var(--papier);
  color: var(--ink);
  font-size: 1em;
  cursor: pointer;
  box-shadow: 0 1.4em 2.6em -1.2em rgb(0 0 0 / .6);
  transition: opacity .35s ease, transform .35s ease, border-color .35s ease;
}
.optie:hover { transform: translateY(-.3em); }
.optie .rondje { width: 9em; height: 9em; }
.letter {
  position: absolute;
  top: .6em;
  left: .6em;
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--nacht);
  color: #fff;
  font-size: 1.3em;
  font-weight: 700;
}
.optie-naam { font-size: 2.2em; font-weight: 700; }
.is-onthuld .optie:not([data-goed]) { opacity: .35; transform: scale(.94); }
.is-onthuld .optie[data-goed] { border-color: #2ecc71; transform: scale(1.06); }
.is-onthuld .optie[data-goed] .letter { background: #1e9e55; color: transparent; }
.is-onthuld .optie[data-goed] .letter::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }

/* ---------- Slotslide ---------- */

.slot { text-align: center; }
.groot { font-size: 5.5em; font-weight: 700; line-height: 1.05; margin: 0; }
.mini-stenen {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em 1.8em;
  margin: 1.8em 0 0;
  padding: 0;
}
.mini-stenen li { display: flex; flex-direction: column; align-items: center; gap: .45em; font-size: 1.2em; font-weight: 600; }
.mini-stenen .rondje { width: 4.6em; height: 4.6em; }

/* ---------- Bronnen ---------- */

.bronnen { max-width: 62em; margin: 0 auto; color: var(--licht); }
.bronnen h2 { font-size: 2.6em; margin: 0 0 .25em; color: #fff; }
.bronnen > p { font-size: 1.2em; margin: 0 0 1.1em; }
.bronnen ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8em 2.5em;
  font-size: 1.15em;
  line-height: 1.35;
}
.bronnen a { color: #ffe08a; text-underline-offset: .15em; }
.bronnen a:hover { color: #fff; }
.bronnen strong { color: #fff; }

/* ---------- Bediening ---------- */

.bediening {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem;
  border-radius: 999px;
  background: rgb(26 15 39 / .8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .3);
}
.knop {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.knop svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.knop:hover { background: rgb(255 255 255 / .16); }
.knop[aria-disabled="true"] { opacity: .35; cursor: default; background: transparent; }
.knop[aria-pressed="true"] { background: var(--goud); color: var(--ink); }
.knop[hidden] { display: none; }

.stippen { display: flex; }
.stip {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.stip::before {
  content: "";
  width: .6rem;
  height: .6rem;
  border-radius: 999px;
  background: rgb(255 255 255 / .55);
  transition: width .25s ease, background-color .25s ease;
}
.stip:hover::before { background: #fff; }
.stip[aria-current]::before { width: 1.3rem; background: var(--goud); }

.teller {
  min-width: 4.4em;
  padding: 0 .5rem;
  border-left: 1px solid rgb(255 255 255 / .25);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---------- Gsm / rechtop / laag venster ---------- */

@media (max-width: 700px), (max-height: 480px), (orientation: portrait) {
  .slide {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.5rem 1rem 8rem;
  }
  .inhoud { margin: 0 auto; }
  .slide--titel .inhoud, .slide--slot .inhoud { margin-top: max(0px, 12vh - 2rem); }

  .titel .kicker { font-size: 1.6em; }
  .ondertitel { font-size: 1.35em; }
  .steentjes { gap: .9em; margin-top: 1.8em; }
  .rondje { width: 4.2em; height: 4.2em; }

  .slide-titel { font-size: 2.2em; }
  .opties { grid-template-columns: 1fr; gap: 1em; }
  .optie { flex-direction: row; padding: .8em 1em .8em 4em; }
  .optie .rondje { width: 4.2em; height: 4.2em; }
  .letter { top: 50%; transform: translateY(-50%); }
  .optie-naam { font-size: 1.5em; }

  .steen, .steen--duo { grid-template-columns: minmax(0, 1fr); gap: 1.5em; }
  .kader { --h: min(20em, 48vh); }
  .steen--duo .kader { --h: min(15em, 40vh); }
  .steen--duo .kader--klein { --h: min(10em, 30vh); margin: 4em 0 0 -1.5em; }
  .kader figcaption { font-size: 1.05em; }
  .kaart { padding: 1.2em 1.1em 1.3em; border-radius: 1.3em; }
  .naam { font-size: 2.8em; }
  .kracht { font-size: 1.35em; }

  .groot { font-size: 3em; }
  .mini-stenen { gap: .9em 1.2em; }
  .mini-stenen li { font-size: 1em; }

  .bronnen h2 { font-size: 2em; }
  .bronnen > p, .bronnen ul { font-size: 1em; }
  .bronnen ul { grid-template-columns: 1fr; }

  .bediening {
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    transform: none;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: 1.25rem;
  }
  .stippen { order: -1; flex-basis: 100%; justify-content: center; }
  .teller { border: 0; }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .slide { transform: none !important; }
}