/* Startfilm van polyg: tussen de startknop en de eerste vraag.
   De inhoud van de schijf lost op, de stippelring loopt vol als laadbalk, in
   de schijf speelt een korte scène die toont wat er komt, en daarna vervormt
   de schijf tot de spelkaart. Alles staat in één vaste laag boven de pagina;
   de spelcode rendert eronder zoals altijd. */

.pi-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: auto;
  cursor: pointer;
  contain: strict;
  -webkit-tap-highlight-color: transparent;
}
.pi-backdrop { position: absolute; inset: 0; background: var(--pi-bg, #f7f6f2); }

.pi-halo {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pi-a1) 22%, transparent), transparent);
  pointer-events: none;
}

.pi-ring { position: absolute; pointer-events: none; }
.pi-ring i {
  --lit: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pi-dot, 4px);
  height: var(--pi-dot, 4px);
  margin: calc(var(--pi-dot, 4px) / -2);
  border-radius: 1px;
  background: color-mix(in srgb, var(--dc, var(--pi-a1)) calc(40% + var(--lit) * 60%), var(--pi-dim));
  box-shadow: 0 0 calc(var(--lit) * 10px) color-mix(in srgb, var(--dc, var(--pi-a1)) 70%, transparent);
  transform: rotate(var(--pi-angle)) translateY(calc(var(--pi-r) * -1)) scale(calc(1 + var(--lit) * .7));
}

/* Zelfde opbouw als .mot-orbit-core, zodat de overgang naar deze kopie niet
   opvalt. De accentkleuren komen uit de pagina op het moment van de klik. */
.pi-disc {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  color: #fff;
  background: #15151b;
  background:
    radial-gradient(ellipse at 8% 10%, color-mix(in srgb, var(--pi-a1) 34%, transparent) 0%, transparent 51%),
    radial-gradient(ellipse at 96% 86%, color-mix(in srgb, var(--pi-a2) 28%, transparent) 0%, transparent 53%),
    radial-gradient(circle at 78% 4%, color-mix(in srgb, var(--pi-a3) 13%, transparent) 0%, transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--pi-a1) 8%, #08080a) 0%, #08080a 49%, color-mix(in srgb, var(--pi-a2) 8%, #08080a) 100%);
  box-shadow: 0 26px 70px color-mix(in srgb, var(--pi-a1) 16%, rgba(13,13,18,.24)), inset 0 0 0 1px rgba(255,255,255,.09);
}
.pi-skin { position: absolute; inset: 0; opacity: 0; }
.pi-gloss {
  position: absolute;
  left: 21%;
  top: 9%;
  width: 34%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.18), rgba(255,255,255,.06) 62%, transparent);
  transform: rotate(-28deg);
  filter: blur(2px);
}

.pi-stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto auto auto 1fr;
  justify-items: center;
  align-items: center;
  gap: calc(var(--pi-d) * .035);
  padding: 0 calc(var(--pi-d) * .12);
  text-align: center;
  font-size: calc(var(--pi-d) * .1);
  line-height: 1.05;
}
.pi-kicker {
  grid-row: 2;
  font-size: max(10px, calc(var(--pi-d) * .024));
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pi-a1);
  white-space: nowrap;
}
.pi-scene {
  grid-row: 3;
  position: relative;
  width: 100%;
  min-height: 1.3em;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: -.045em;
}
.pi-meta {
  grid-row: 4;
  display: flex;
  align-items: baseline;
  gap: .4em;
  font-size: max(11px, calc(var(--pi-d) * .028));
  color: rgba(255,255,255,.62);
  letter-spacing: .02em;
}
.pi-meta b {
  display: inline-block;
  min-width: 2ch;
  color: #fff;
  font-size: 1.9em;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* Nuance: de keuzes rollen als een dial voorbij en vallen stil op één woord. */
.pi-reel {
  position: relative;
  height: 1.25em;
  overflow: hidden;
  -webkit-mask: linear-gradient(transparent, #000 28%, #000 72%, transparent);
  mask: linear-gradient(transparent, #000 28%, #000 72%, transparent);
}
.pi-reel-strip { display: flex; flex-direction: column; }
.pi-reel-strip span { height: 1.25em; line-height: 1.25em; white-space: nowrap; }
.pi-underline {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -.08em;
  height: max(2px, .035em);
  border-radius: 2px;
  background: var(--pi-a1);
  transform: scaleX(0);
}

/* Zegswijzen en woorden: losse delen die op hun plaats vallen. */
.pi-words { display: flex; flex-wrap: wrap; justify-content: center; column-gap: .26em; row-gap: .02em; font-size: .78em; }
.pi-words span { display: inline-block; white-space: nowrap; }
.pi-words .is-key { color: var(--pi-a1); }
.pi-scramble { white-space: nowrap; font-variant-ligatures: none; }
.pi-scramble span { display: inline-block; min-width: .2em; }
.pi-scramble span.is-noise { color: color-mix(in srgb, var(--pi-a1) 70%, #fff); opacity: .7; }

/* Werkwoorden: infinitief boven, de vorm wordt eronder getypt. */
.pi-verb { display: grid; gap: .18em; justify-items: center; }
.pi-verb-lemma { font-size: .36em; font-weight: 600; letter-spacing: .01em; color: rgba(255,255,255,.6); }
.pi-verb-lemma em { font-style: normal; color: var(--pi-a1); margin: 0 .35em; }
.pi-verb-line { white-space: nowrap; }
.pi-verb-line small { font-size: .62em; font-weight: 600; color: rgba(255,255,255,.55); margin-right: .2em; letter-spacing: -.02em; }
.pi-caret {
  display: inline-block;
  width: .07em;
  height: .82em;
  margin-left: .06em;
  vertical-align: -.06em;
  background: var(--pi-a1);
  animation: piCaret .8s steps(1) infinite;
}
@keyframes piCaret { 50% { opacity: 0; } }
.pi-chips {
  grid-row: 5;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  margin-top: calc(var(--pi-d) * .01);
}
.pi-chips span {
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.8);
  font-size: max(10px, calc(var(--pi-d) * .021));
  font-weight: 600;
  white-space: nowrap;
}

/* Mix: wat er in de reeks zit, deel per deel. */
.pi-parts { display: grid; gap: .2em; justify-items: start; font-size: .46em; letter-spacing: -.02em; }
.pi-parts span { display: flex; align-items: center; gap: .45em; white-space: nowrap; }
.pi-parts i { width: .42em; height: .42em; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.pi-parts small { min-width: 1.6em; font-size: 1em; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }

/* Polyglot: vijf taalbanken die oplichten zodra ze echt geladen zijn. */
.pi-banks { position: relative; width: 2.8em; height: 2.8em; font-size: 1em; }
.pi-banks span {
  --c: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  width: .64em;
  height: .64em;
  margin: -.32em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.55);
  transform: rotate(var(--angle)) translateY(-1.05em) rotate(calc(var(--angle) * -1));
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, opacity .3s ease;
}
.pi-banks span b { font-size: max(8px, .22em); font-weight: 800; letter-spacing: .04em; }
.pi-banks span.is-loaded { background: var(--c); border-color: var(--c); color: #0b0b10; box-shadow: 0 0 18px color-mix(in srgb, var(--c) 55%, transparent); }
.pi-banks span.is-idle { background: transparent; border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.32); box-shadow: none; }
.pi-spectrum {
  position: absolute;
  inset: 31%;
  border-radius: 50%;
  background: conic-gradient(#ff8a45, #ffd047, #7ee8b0, #4dd6c1, #7599ff, #a97cf6, #ff6d9f, #ff8a45);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 74% 100%);
  mask: radial-gradient(closest-side, transparent 72%, #000 74% 100%);
  animation: piSpin 1.6s linear infinite;
  opacity: .85;
}
@keyframes piSpin { to { transform: rotate(360deg); } }

/* Echte pagina tijdens de film: de schijfinhoud lost op onder de kopie. */
html[data-polyg-intro="out"] #module-motjuste .mot-orbit-core > *,
html[data-polyg-intro="out"] #module-motjuste .mot-verb-config-dialog {
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
  opacity: 0;
  transform: translateY(6px) scale(.985);
  filter: blur(3px);
}

/* ---------- Polyglot: zonsverduistering, in het wit van het startscherm ---------- */
.pi-layer.is-dread .pi-backdrop {
  inset: -48px;
  background: radial-gradient(ellipse at 50% 50%, #131317 0%, #08080a 55%, #000 100%);
}
.pi-layer.is-dread .pi-halo { background: radial-gradient(closest-side, rgba(255,255,255,.2), transparent); }
/* Dezelfde gloeiende witte schijf als op het Polyglot-startscherm. */
.pi-layer.is-dread .pi-disc {
  background: radial-gradient(circle at 50% 44%, #fff 0%, #f6f5f9 55%, #e2e1e8 100%);
  box-shadow: 0 0 80px rgba(255,255,255,.26), 0 0 0 1px rgba(255,255,255,.55);
}
.pi-layer.is-dread .pi-gloss { display: none; }
.pi-layer.is-dread .pi-disc.is-total { background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.pi-disc.is-total .pi-moon { display: none; }
.pi-moon {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #050506 0 72%, #000 100%);
}
/* Tekst keert om waar de maan staat: zwart op wit licht, wit op de schaduw. */
.pi-layer.is-dread .pi-stage { mix-blend-mode: difference; color: #fff; }
.pi-layer.is-dread .pi-kicker { color: #fff; letter-spacing: .42em; }
.pi-layer.is-dread .pi-meta, .pi-layer.is-dread .pi-meta b { color: #fff; }
.pi-corona {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  /* Witte stralen, zoals een echte corona; geen kleur. */
  background:
    radial-gradient(closest-side, rgba(255,255,255,.95) 60%, rgba(255,255,255,.35) 66%, transparent 100%),
    repeating-conic-gradient(from 7deg, rgba(255,255,255,.75) 0deg 1.5deg, rgba(255,255,255,.12) 1.5deg 6deg, rgba(255,255,255,.45) 6deg 7.5deg, transparent 7.5deg 13deg);
  -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 62%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 58%, #000 62%, transparent 100%);
  filter: blur(5px);
  animation: piSpin 40s linear infinite;
}
.pi-flare {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(closest-side, #fff 0 12%, rgba(255,255,255,.55) 30%, transparent 100%);
  filter: blur(2px);
}
.pi-flash { position: absolute; inset: -48px; background: #fff; opacity: 0; pointer-events: none; }

.pi-banks.is-dread { font-size: 1.22em; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .55s ease; }
.pi-banks.is-dread .pi-spectrum {
  background: conic-gradient(#fff, rgba(255,255,255,.08) 40%, #fff 70%, rgba(255,255,255,.08), #fff);
  animation-duration: .9s;
  opacity: .7;
}
.pi-banks.is-dread span { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.pi-banks.is-dread span.is-waiting { opacity: 0; }
.pi-banks.is-dread span.is-loaded { background: #fff; border-color: #fff; color: #000; box-shadow: 0 0 16px rgba(255,255,255,.5); }
.pi-banks.is-dread.is-receding { transform: scale(.6); opacity: .3; }
.pi-banks.is-dread span.is-dead { background: transparent; border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.4); box-shadow: none; }
.pi-late {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.pi-late span {
  opacity: 0;
  font-size: 1.14em;
  font-weight: 800;
  letter-spacing: -.05em;
  white-space: nowrap;
  color: #fff;
  text-shadow: 3px 0 rgba(255,255,255,.35), -3px 0 rgba(150,150,160,.45);
}
.pi-late.is-on span { animation: piGlitch .5s steps(1) .05s both; }
/* Eén korte storing bij het inslaan; geen herhaald knipperen. */
@keyframes piGlitch {
  0% { clip-path: inset(0 0 62% 0); translate: -7px 0; }
  14% { clip-path: inset(38% 0 22% 0); translate: 6px 0; }
  28% { clip-path: inset(8% 0 56% 0); translate: -4px 0; }
  42% { clip-path: inset(64% 0 0 0); translate: 5px 0; }
  56% { clip-path: none; translate: -2px 0; text-shadow: 6px 0 rgba(255,255,255,.5), -6px 0 rgba(150,150,160,.55); }
  100% { clip-path: none; translate: 0 0; }
}
.pi-meta.pi-tagline { gap: .55em; flex-wrap: wrap; justify-content: center; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: max(11px, calc(var(--pi-d) * .027)); color: #fff; }