/* Atlas: de gedeelde plaatgrammatica.
   Dit bestand is wat de zes werelden bij elkaar houdt. Het kader, het
   plaatnummer, het bijschrift, het vloeipapier en de gouden lijn blijven over
   alle zes identiek; daarbinnen mag de plaat zelf alles zijn. */

/* ---- Marokijnleer -------------------------------------------------------- */

.leather {
  background-color: var(--leather-800);
  background-image:
    radial-gradient(120% 80% at 50% -10%, var(--leather-600) 0%, transparent 62%),
    radial-gradient(100% 70% at 50% 112%, var(--leather-900) 0%, transparent 58%);
  position: relative;
}

/* De korrel van geitenleer: fijne ruis, laag opgezet, plus een vignet dat de
   randen laat wegvallen zoals licht op een gebonden band. */
.leather::before,
.leather::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.leather::before {
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.42;
  mix-blend-mode: overlay;
  z-index: 0;
}

.leather::after {
  background: radial-gradient(
    130% 95% at 50% 42%,
    transparent 38%,
    rgba(9, 2, 5, 0.5) 82%,
    rgba(9, 2, 5, 0.82) 100%
  );
  z-index: 0;
}

.leather > * {
  position: relative;
  z-index: 1;
}

/* ---- Gouden lijn en stempel ---------------------------------------------- */

.gold {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Goudstempel wordt in leer geperst: donker aan de bovenkant van de indruk,
   licht aan de onderkant. Vandaar de twee tegengestelde schaduwen. */
.tooled {
  filter:
    drop-shadow(0 1px 0 rgba(0, 0, 0, 0.85))
    drop-shadow(0 -1px 0 rgba(245, 227, 174, 0.16));
}

.rule {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(198, 160, 82, 0.55) 18%,
    rgba(245, 227, 174, 0.75) 50%,
    rgba(198, 160, 82, 0.55) 82%,
    transparent
  );
  margin: 0;
}

/* ---- Label: gesperde kapitalen, de stem van het bijschrift ---------------- */

.label {
  font-family: var(--face-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--gold-warm);
}

.label--quiet {
  color: var(--bone-3);
}

/* ---- Het plaatkader ------------------------------------------------------ */

.plate {
  --plate-ink: var(--bone);
  --plate-line: rgba(240, 230, 214, 0.34);
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  color: var(--plate-ink);
}

/* Dubbele regel, dik-dun, zoals een gegraveerd plaatkader. */
.plate__frame {
  position: absolute;
  inset: 0;
  border: 1px solid var(--plate-line);
  pointer-events: none;
  z-index: 2;
}

.plate__frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 3px solid var(--plate-line);
  opacity: 0.5;
}

.plate__number {
  font-family: var(--face-display);
  font-variation-settings: "opsz" 11;
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  color: var(--plate-ink);
  opacity: 0.62;
}

.plate__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
}

.plate__title {
  font-family: var(--face-display);
  font-variation-settings: "opsz" 48;
  font-weight: 500;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Het bijschriftplaatje onder elke plaat: haarlijn, dan gesperde kapitalen.
   Meer ruimte boven dan onder: dat geldt overal in dit ontwerp. */
.plate__caption {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--plate-line);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  text-align: center;
}

.plate__caption .label {
  color: inherit;
  opacity: 0.7;
}

.plate__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-6);
  padding-block: var(--s-6);
}

/* Figuurverwijzing, zoals in een echt plaatwerk. */
.figref {
  font-family: var(--face-display);
  font-variation-settings: "opsz" 11;
  font-style: italic;
  font-size: var(--fs-caption);
  opacity: 0.66;
}

/* ---- Het gemerkte woord --------------------------------------------------
   Dit is het wachtwoord voor de volgende plaat. Het moet opvallen zonder de
   zin te breken: gouden onderstreping, iets meer spatie, meer gewicht. */

.keyword {
  color: var(--gold-bright);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding-bottom: 1px;
  border-bottom: 1px solid rgba(224, 190, 115, 0.55);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Geen glyph achter het woord: op tekstformaat is een sleuteltje niet meer te
   herkennen en leest het als vuil. Het sleuteltje staat in de regel eronder,
   waar het groot genoeg mag zijn om een sleutel te zijn. */

:root {
  --icon-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7.5' cy='16.5' r='4.5'/%3E%3Cpath d='M10.8 13.2 21 3M17.5 6.5l2.5 2.5M14.5 9.5l2 2'/%3E%3C/svg%3E");
}

.keyword-note {
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--gold-warm);
  opacity: 0.9;
  text-align: center;
  text-wrap: balance;
}

/* Het sleuteltje loopt mee in de tekstregel, niet als los vlak ernaast. */
.keyword-note::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.45em;
  vertical-align: -0.18em;
  background: currentColor;
  -webkit-mask: var(--icon-key) center / contain no-repeat;
  mask: var(--icon-key) center / contain no-repeat;
}

/* ---- Vloeipapier ---------------------------------------------------------
   Elke plaat in een plaatwerk ligt onder een vel glassine. Een deur openen is
   dat vel oplichten. Dit is het echte materiaal, geen glazen kaartje. */

/* Glassine is dun en droog, geen matglas. Een lichte warme waas met een
   diagonale glans en heel fijne vezel: geen backdrop-filter, want zes
   vervaagde lagen tegelijk is precies wat een telefoon niet moet doen. */
.tissue {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      118deg,
      rgba(236, 229, 214, 0.13) 0%,
      rgba(236, 229, 214, 0.07) 36%,
      rgba(244, 238, 226, 0.18) 51%,
      rgba(236, 229, 214, 0.06) 68%,
      rgba(236, 229, 214, 0.12) 100%
    ),
    rgba(226, 217, 200, 0.1);
  transform-origin: top center;
}

.tissue::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--fiber);
  background-size: 140px 140px;
  opacity: 0.14;
  mix-blend-mode: overlay;
}

/* De vouw waar het vel over de bovenrand knikt. De glans komt uit de kleur van
   het vel zelf; zuiver wit hoort bij metaal en licht, niet bij warm papier. */
.tissue::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(240, 230, 214, 0.42), transparent);
}

/* ---- Bedieningselementen in de taal van deze wereld ----------------------
   Geen standaardknoppen. Een handeling is een gestempeld label op leer. */

.act {
  --act-ink: var(--gold-bright);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: var(--s-4) var(--s-6);
  font-family: var(--face-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--act-ink);
  background:
    linear-gradient(180deg, rgba(224, 190, 115, 0.11), rgba(224, 190, 115, 0.03));
  border: 1px solid rgba(224, 190, 115, 0.45);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(245, 227, 174, 0.16);
  transition:
    transform var(--dur-1) var(--ease-soft),
    box-shadow var(--dur-1) var(--ease-soft),
    border-color var(--dur-1) var(--ease-soft),
    background var(--dur-1) var(--ease-soft);
}

.act::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(224, 190, 115, 0.22);
  pointer-events: none;
}

@media (hover: hover) {
  .act:hover {
    border-color: rgba(245, 227, 174, 0.78);
    background: linear-gradient(180deg, rgba(224, 190, 115, 0.2), rgba(224, 190, 115, 0.07));
  }
}

.act:active {
  transform: translateY(2px);
  box-shadow: var(--shadow-press);
}

.act[disabled],
.act[aria-disabled="true"] {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---- Het gegraveerde invoerveld -----------------------------------------
   Geen afgerond tekstvak. Een gleuf die in het materiaal geperst is. */

.slot {
  width: 100%;
  max-width: 19rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.slot__hint {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--rose-ink);
  text-align: center;
  text-wrap: balance;
}

.slot__field {
  position: relative;
  display: flex;
  align-items: center;
}

.slot__input {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-5);
  font-family: var(--face-display);
  font-variation-settings: "opsz" 18;
  font-size: var(--fs-body); /* 17px: houdt iOS Safari van inzoomen af */
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--bone);
  background: rgba(6, 1, 4, 0.34);
  /* Een zachte hoek: de gleuf blijft geperst, maar niet scherp genoeg om aan te
     snijden. De rest van de vormtaal blijft rechthoekig. */
  border: 1px solid rgba(224, 190, 115, 0.22);
  border-bottom-color: rgba(224, 190, 115, 0.5);
  border-radius: var(--radius-slot);
  box-shadow: var(--shadow-press);
  transition: border-color var(--dur-1) var(--ease-soft), background var(--dur-1) var(--ease-soft);
}

.slot__input::placeholder {
  color: var(--bone-3);
  opacity: 1;
  letter-spacing: 0.14em;
  font-size: var(--fs-caption);
}

.slot__input:focus {
  outline: none;
  border-color: rgba(245, 227, 174, 0.5);
  border-bottom-color: var(--gold-bright);
  background: rgba(6, 1, 4, 0.72);
}

.slot__field:focus-within {
  outline: 2px solid transparent; /* de onderlijn draagt de focus zelf */
}

.slot__error {
  min-height: 1.4em;
  font-size: var(--fs-caption);
  line-height: 1.4;
  text-align: center;
  color: var(--error-ink);
  text-wrap: balance;
}

.slot__error:empty {
  visibility: hidden;
}

/* Een fout wachtwoord schudt het slot, één keer, zonder de tekst te verstoren. */
@keyframes slot-refuse {
  0%, 100% { transform: translateX(0); }
  16% { transform: translateX(-7px); }
  33% { transform: translateX(6px); }
  50% { transform: translateX(-4px); }
  67% { transform: translateX(3px); }
  84% { transform: translateX(-1px); }
}

.is-refused {
  animation: slot-refuse 460ms var(--ease-both);
}

/* ---- Terug naar het pad -------------------------------------------------- */

.back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-right: var(--s-3);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.6;
  transition: opacity var(--dur-1) var(--ease-soft);
}

.back:hover,
.back:focus-visible {
  opacity: 1;
}

.back::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
}