/* De zes werelden.
   Het kader, het nummer en het bijschrift komen uit atlas.css en blijven
   overal gelijk. Alles hieronder is wat elke plaat van de andere vijf
   onderscheidt. */

.plate {
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--s-8));
  align-items: center;
}

/* Het plaatkader loopt tot de rand: dat is de rand van de plaat zelf. De
   inhoud erbinnen blijft een kolom, ook op een breed scherm. */
.plate > .back,
.plate > .plate__head,
.plate > .plate__body,
.plate > .plate__caption {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
}

.plate > .back {
  align-self: auto;
  justify-content: flex-start;
}

.plate__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Deeltjes horen bij de figuur bovenaan, niet bij de leestekst eronder. Ze
   staan wel achter de tekst, maar ze mogen hem ook niet druk maken. */
.plate--5 .plate__field,
.plate--6 .plate__field {
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.4) 58%,
    rgba(0, 0, 0, 0.16) 74%,
    rgba(0, 0, 0, 0.16) 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.4) 58%,
    rgba(0, 0, 0, 0.16) 74%,
    rgba(0, 0, 0, 0.16) 100%
  );
}

.plate > .back,
.plate > .plate__head,
.plate > .plate__body,
.plate > .plate__caption {
  position: relative;
  z-index: 1;
}

.fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}

/* ============ PLAAT I · NUMEROLOGIE ====================================== */

.plate--1 {
  --plate-ink: var(--bone);
  --plate-line: rgba(224, 190, 115, 0.42);
  background:
    radial-gradient(115% 78% at 50% 24%, #221d47 0%, transparent 62%),
    radial-gradient(90% 70% at 50% 108%, #150f30 0%, transparent 60%),
    var(--ground-indigo);
}

.fig--geometry {
  position: relative;
  display: grid;
  place-items: center;
  width: min(74vw, 20rem);
  margin-inline: auto;
}

.rosette {
  width: 100%;
  height: auto;
  color: var(--gold-mid);
  animation: rosette-turn 96s linear infinite;
}

.rosette__web {
  color: var(--gold-warm);
}

@keyframes rosette-turn {
  to {
    transform: rotate(360deg);
  }
}

.fig__numeral {
  position: absolute;
  font-family: var(--face-display);
  font-variation-settings: "opsz" 96;
  font-weight: 700;
  font-size: var(--fs-numeral);
  line-height: 1;
  letter-spacing: -0.05em;
  /* Bladgoud is materiaal, geen benadrukking: vandaar het verloop. */
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* De gloed komt uit text-shadow, niet uit filter: een filter op een element
     met background-clip:text laat het achtergrondvlak zelf zien. */
  text-shadow: 0 0 30px rgba(224, 190, 115, 0.5);
}

/* ============ PLAAT II · SSH ============================================= */

.plate--2 {
  --plate-ink: #CFE8D6;
  --plate-line: rgba(107, 255, 158, 0.28);
  background:
    radial-gradient(120% 80% at 50% 0%, #0A1A12 0%, transparent 60%),
    var(--ground-terminal);
}

.plate--2 .plate__title {
  font-family: var(--face-mono);
  font-size: clamp(1.25rem, 5.6vw, 1.75rem);
  letter-spacing: -0.02em;
  color: #6BFF9E;
}

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-linear-gradient(
    0deg,
    rgba(107, 255, 158, 0.045) 0 1px,
    transparent 1px 3px
  );
}

.term {
  width: 100%;
  max-width: 38rem;
  margin-inline: auto;
  border: 1px solid rgba(107, 255, 158, 0.26);
  background: rgba(3, 8, 6, 0.72);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.9), inset 0 0 60px rgba(107, 255, 158, 0.04);
}

.term__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid rgba(107, 255, 158, 0.18);
}

.term__bar > span:not(.term__host) {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(107, 255, 158, 0.3);
}

.term__host {
  margin-left: auto;
  font-family: var(--face-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: rgba(107, 255, 158, 0.55);
}

.term__out {
  margin: 0;
  padding: var(--s-4);
  font-family: var(--face-mono);
  font-size: 0.8125rem;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-height: 26rem;
}

.term__line {
  display: block;
}

.term__line:empty {
  display: none;
}

.term__line--cmd {
  color: #6BFF9E;
  font-weight: 700;
  margin-top: 0.9em;
}

.term__line--cmd::before {
  content: "hennie@22:~$ ";
  color: rgba(107, 255, 158, 0.5);
  font-weight: 400;
}

.term__line--out,
.term__line--ask {
  color: #8FB3A0;
}

.term__line--art {
  color: var(--gold-warm);
  line-height: 1.28;
  margin-block: 0.5em;
  font-size: 0.75rem;
}

.term__line--yes {
  color: #6BFF9E;
  font-weight: 700;
}

.term__line--ok {
  color: #6BFF9E;
  margin-bottom: 0.4em;
}

/* De brief zelf: nog steeds monospace, maar op leesformaat. Kleiner zetten om
   er meer tekens per regel in te krijgen was de verkeerde ruil, want de tekst
   is het cadeau. */
.term__line--body {
  color: var(--bone);
  font-size: var(--fs-body);
  line-height: 1.72;
  margin-top: 0.9em;
}

.term__cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  translate: 0 0.18em;
  background: #6BFF9E;
  animation: blink 1.05s steps(2, start) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.plate--2 .keyword {
  font-family: var(--face-mono);
  color: #6BFF9E;
  border-bottom-color: rgba(107, 255, 158, 0.5);
}

.plate--2 .keyword-note {
  color: #8FB3A0;
}

/* ============ PLAAT III · TITANIUM ====================================== */

.plate--3 {
  --plate-ink: #E4E9EF;
  --plate-line: rgba(228, 233, 239, 0.3);
  --sheen: 0.5;
  background:
    linear-gradient(168deg, #2A323C 0%, #171C23 46%, #0F1319 100%),
    var(--ground-steel);
}

/* De geborstelde structuur van gewalst metaal. */
.plate--3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background: repeating-linear-gradient(
    92deg,
    rgba(255, 255, 255, 0.028) 0 1px,
    transparent 1px 3px
  );
}

.sheen {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent calc(var(--sheen) * 100% - 26%),
    rgba(255, 255, 255, 0.05) calc(var(--sheen) * 100% - 12%),
    rgba(255, 255, 255, 0.16) calc(var(--sheen) * 100%),
    rgba(255, 255, 255, 0.05) calc(var(--sheen) * 100% + 12%),
    transparent calc(var(--sheen) * 100% + 26%)
  );
}

.element {
  position: relative;
  display: grid;
  grid-template-areas:
    "z    ."
    "sym  sym"
    "name name"
    "mass mass";
  gap: var(--s-1);
  width: min(56vw, 13rem);
  aspect-ratio: 1;
  padding: var(--s-4);
  align-content: center;
  text-align: center;
  border: 1px solid rgba(228, 233, 239, 0.42);
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 16px 32px -16px rgba(0, 0, 0, 0.8);
}

.element__z {
  grid-area: z;
  justify-self: start;
  font-family: var(--face-display);
  font-variation-settings: "opsz" 14;
  font-size: var(--fs-caption);
  opacity: 0.75;
}

.element__sym {
  grid-area: sym;
  font-family: var(--face-display);
  font-variation-settings: "opsz" 96;
  font-weight: 500;
  font-size: clamp(3rem, 16vw, 4.5rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  background: linear-gradient(
    168deg,
    #FFFFFF 0%,
    #C3CCD6 34%,
    #8E99A6 52%,
    #EDF2F7 68%,
    #7C8794 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.element__name {
  grid-area: name;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: 0.9;
}

.element__mass {
  grid-area: mass;
  font-family: var(--face-display);
  font-variation-settings: "opsz" 14;
  font-size: var(--fs-caption);
  opacity: 0.6;
}

.plate--3 .keyword {
  color: #FFFFFF;
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.plate--3 .keyword-note,
.plate--5 .keyword-note {
  color: currentColor;
  opacity: 0.75;
}

/* ============ PLAAT IV · STRATOCASTER =================================== */

.plate--4 {
  --plate-ink: #F2E4D2;
  --plate-line: rgba(242, 228, 210, 0.3);
  background:
    radial-gradient(120% 82% at 50% 16%, #6B3D22 0%, transparent 58%),
    linear-gradient(180deg, #3A1D0F 0%, var(--ground-walnut) 100%);
}

/* Oxbloed speakerdoek: precies de kleur waarin deze atlas gebonden is.
   Dat is geen toeval: Fender weefde het in dezelfde tint. */
.cloth {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.82;
  background-color: rgba(74, 14, 26, 0.72);
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(226, 190, 130, 0.09) 0 1px, transparent 1px 6px);
  mask-image: radial-gradient(125% 92% at 50% 64%, #000 12%, transparent 82%);
  -webkit-mask-image: radial-gradient(125% 92% at 50% 64%, #000 12%, transparent 82%);
}

.fig--neck {
  width: 100%;
}

.neck {
  width: 100%;
  height: clamp(74px, 17vw, 112px);
  border: 1px solid rgba(242, 228, 210, 0.26);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.85);
}

/* De fretdraden keren terug als de haarlijnen tussen de alinea's. */
.plate--4 .prose p + p {
  padding-top: var(--s-5);
  border-top: 1px solid rgba(242, 228, 210, 0.22);
  box-shadow: 0 -3px 0 -2px rgba(255, 255, 255, 0.16);
}

.plate--4 .keyword {
  color: #FFE9B8;
  border-bottom-color: rgba(255, 233, 184, 0.55);
}

.plate--4 .keyword-note {
  color: #E9C99A;
}

/* ============ PLAAT V · DE HALO ========================================= */

.plate--5 {
  --plate-ink: #DCEDFF;
  --plate-line: rgba(220, 237, 255, 0.3);
  background:
    radial-gradient(100% 62% at 50% 30%, #0C4576 0%, transparent 64%),
    linear-gradient(180deg, #06294A 0%, var(--ground-prussian) 62%, #03152A 100%);
}

.fig--halo {
  width: min(78vw, 21rem);
  margin-inline: auto;
}

.halo {
  width: 100%;
  height: auto;
}

.halo__ring {
  transform-origin: 160px 160px;
  transform-box: view-box;
  animation: halo-turn 62s linear infinite;
}

@keyframes halo-turn {
  to {
    transform: rotate(360deg);
  }
}

.halo__annot {
  opacity: 0.72;
}

.halo__deg {
  font-family: var(--face-display);
  font-variation-settings: "opsz" 16;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.plate--5 .keyword {
  color: #FFFFFF;
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

/* ============ PLAAT VI · DE FINALE ====================================== */

.plate--6 {
  --plate-ink: var(--bone);
  --plate-line: rgba(224, 190, 115, 0.42);
}

/* De processie: de vijf bewijzen komen op volgorde nog één keer langs.
   Dit is de afsluiting: ze ziet het hele bewijs in één beweging terug. */
.procession {
  width: 100%;
}

/* Alle vijf tegelijk in beeld. De processie werkt alleen als ze het hele
   bewijs in één blik terugziet; drie zichtbaar en twee buiten beeld is geen
   afsluiting. */
.procession__rail {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2);
  padding-block: var(--s-4);
  width: 100%;
}

.medallion {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  text-align: center;
  color: var(--gold-warm);
  opacity: 0;
  animation: medallion-in var(--dur-4) var(--ease-soft) both;
  animation-delay: calc(240ms + var(--i) * 180ms);
}

@keyframes medallion-in {
  from {
    opacity: 0;
    transform: translateX(38px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.medallion svg {
  width: min(100%, 3.25rem);
  height: auto;
  aspect-ratio: 1;
  padding: 0.32rem;
  border: 1px solid rgba(224, 190, 115, 0.42);
  border-radius: 50%;
  background: rgba(9, 2, 5, 0.4);
}

.medallion figcaption {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.medallion__numeral {
  font-family: var(--face-display);
  font-variation-settings: "opsz" 18;
  font-size: var(--fs-caption);
}

.medallion__label {
  font-size: 0.625rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--bone-3);
  hyphens: auto;
}

.finale__prose {
  color: var(--bone);
}

.finale__sign {
  font-family: var(--face-script);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  line-height: 1.3;
  text-align: center;
  color: var(--gold-warm);
  text-wrap: balance;
  padding-top: var(--s-3);
}

/* ---- Terugval voor stille voorkeuren ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .rosette,
  .halo__ring {
    animation: none;
  }
  .medallion {
    opacity: 1;
    animation: none;
  }
  .term__cursor {
    animation: none;
  }
}