/* Fase 2: het pad.
   De inleiding, dan zes platen onder vloeipapier. */

.scene--path {
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--s-9));
}

.path__inner {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

.path__head {
  padding-top: var(--s-7);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.path__salutation {
  font-family: var(--face-script);
  font-size: clamp(1.5rem, 6.4vw, 2rem);
  line-height: 1.35;
  color: var(--gold-warm);
  text-wrap: balance;
}

/* Het getal draagt de kop. De zin eromheen is bijschrift. Zou de hele zin op
   displayformaat staan, dan is er geen hiërarchie meer, alleen volume. */
.path__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-weight: 400;
}

.path__line {
  font-family: var(--face-display);
  font-variation-settings: "opsz" 24;
  font-style: italic;
  font-size: clamp(1.3125rem, 5.9vw, 1.625rem);
  line-height: 1.3;
  color: var(--bone-2);
  text-wrap: balance;
  max-width: 20ch;
}

.path__age {
  font-family: var(--face-display);
  font-variation-settings: "opsz" 96;
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 0.9;
  letter-spacing: -0.055em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-block: var(--s-2);
}

.path__prose {
  color: var(--bone-2);
}

/* ---- De vijf eigenschappen ----------------------------------------------
   Geen kaartjes. Een gegraveerde opsomming: het cijfer in de kantlijn, een
   haarlijn tussen de regels. De nummering is informatie: ze verwijst naar de
   platen I tot V. */

.traits {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
  margin-inline: auto;
  width: 100%;
}

.trait {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-5);
  border-top: 1px solid rgba(224, 190, 115, 0.2);
}

.trait:last-child {
  border-bottom: 1px solid rgba(224, 190, 115, 0.2);
}

.trait__num {
  font-family: var(--face-display);
  font-variation-settings: "opsz" 36;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold-warm);
  text-align: right;
}

.trait p {
  margin: 0;
  color: var(--bone);
  text-wrap: pretty;
}

.path__grid-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: center;
  padding-top: var(--s-5);
}

.path__grid-head .rule {
  width: 100%;
}

/* ---- Onthulling per alinea ---------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-4) var(--ease-soft) var(--reveal-delay, 0ms),
    transform var(--dur-4) var(--ease-soft) var(--reveal-delay, 0ms);
}

[data-reveal][data-revealed] {
  opacity: 1;
  transform: none;
}

/* ---- Het rooster van zes deuren ----------------------------------------- */

.grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}

@media (min-width: 34rem) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
  }
}

.door {
  position: relative;
}

.door[data-state="asking"] {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--s-5);
  justify-items: center;
}

.door__face {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--leather-900);
  box-shadow: var(--shadow-lift);
  transition:
    transform var(--dur-2) var(--ease-soft),
    box-shadow var(--dur-2) var(--ease-soft);
}

.door[data-state="asking"] .door__face {
  width: min(46%, 9rem);
}

/* Het vloeipapier ligt over de plaat, niet over het opschrift: in een echt
   plaatwerk staat het plaatnummer op de kartonnen mount, niet onder het vel. */
.door__tissue {
  z-index: 2;
}

.door__frame {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(224, 190, 115, 0.42);
  z-index: 4;
}

.door__frame::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 3px solid rgba(224, 190, 115, 0.2);
}

.door__numeral {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  font-family: var(--face-display);
  font-variation-settings: "opsz" 72;
  font-size: clamp(2.25rem, 11vw, 3rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--gold-warm);
  transition: color var(--dur-2) var(--ease-soft), opacity var(--dur-2) var(--ease-soft);
}

/* Een gesloten plaat laat alleen een zweem van haar eigen kleur door. Dat is
   sfeer, geen verklapping: het onderwerp blijft onbenoemd tot ze hem opent. */
.door__peek {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.28;
  transition: opacity var(--dur-3) var(--ease-soft);
}

.door[data-plate="1"] .door__peek { background: radial-gradient(120% 90% at 50% 30%, #241f4a, var(--ground-indigo)); }
.door[data-plate="2"] .door__peek { background: radial-gradient(120% 90% at 50% 30%, #0d2418, var(--ground-terminal)); }
.door[data-plate="3"] .door__peek { background: linear-gradient(150deg, #3d454f, var(--ground-steel)); }
.door[data-plate="4"] .door__peek { background: linear-gradient(160deg, #57301c, var(--ground-walnut)); }
.door[data-plate="5"] .door__peek { background: radial-gradient(120% 90% at 50% 34%, #0d4a80, var(--ground-prussian)); }
.door[data-plate="6"] .door__peek { background: radial-gradient(120% 90% at 50% 34%, var(--leather-600), var(--leather-900)); }

.door__keyhole {
  position: absolute;
  z-index: 4;
  bottom: 12%;
  left: 50%;
  translate: -50% 0;
  width: 18px;
  height: 18px;
  fill: var(--gold-warm);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-soft);
}

/* ---- Deurstaten ---------------------------------------------------------- */

/* Een plaat die nog niet aan de beurt is, treedt terug. Ze is er wel, ze
   dringt zich alleen niet op. */
.door[data-state="locked"] .door__face {
  cursor: default;
  box-shadow: none;
  filter: brightness(0.6) saturate(0.55);
}

.door[data-state="locked"] .door__peek {
  opacity: 0.2;
}

.door[data-state="locked"] .door__numeral {
  color: var(--bone-3);
  opacity: 0.34;
}

.door[data-state="locked"] .door__frame {
  border-color: rgba(169, 156, 135, 0.2);
}

.door[data-state="locked"] .door__tissue {
  opacity: 1;
}

.door[data-state="available"] .door__keyhole {
  opacity: 0.9;
}

/* Beschikbaar: het vloeipapier is bij één hoek al opgetild. */
.door[data-state="available"] .door__tissue,
.door[data-state="asking"] .door__tissue {
  opacity: 0.66;
  transform: rotateX(-9deg) translateY(-5%);
  box-shadow: inset 0 -18px 20px -14px rgba(0, 0, 0, 0.7);
}

.door[data-state="available"] .door__peek {
  opacity: 0.44;
}

@media (hover: hover) {
  .door[data-state="available"] .door__face:hover .door__tissue {
    transform: rotateX(-26deg) translateY(-7%);
  }
  .door[data-state="opened"] .door__face:hover {
    transform: translateY(-3px);
  }
}

.door[data-state="opening"] .door__tissue {
  animation: tissue-lift 620ms var(--ease-soft) both;
}

@keyframes tissue-lift {
  to {
    transform: rotateX(-96deg) translateY(-34%);
    opacity: 0;
  }
}

.door[data-state="opening"] .door__peek,
.door[data-state="opened"] .door__peek {
  opacity: 1;
}

.door[data-state="opened"] .door__tissue {
  opacity: 0;
  pointer-events: none;
}

.door[data-state="opened"] .door__numeral {
  color: var(--bone);
}

.door[data-state="opened"] .door__frame {
  border-color: rgba(240, 230, 214, 0.5);
}

.door__tissue {
  transition:
    opacity var(--dur-3) var(--ease-soft),
    transform var(--dur-3) var(--ease-soft);
  perspective: 500px;
}

/* ---- De gleuf onder een deur --------------------------------------------- */

.door__slot {
  width: 100%;
  max-width: 22rem;
}

.door__slot[hidden] {
  display: none;
}

.door__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  padding-top: var(--s-2);
}

.act--small {
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
}

.door__cancel {
  min-height: 44px;
  padding-inline: var(--s-3);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--bone-3);
  transition: color var(--dur-1) var(--ease-soft);
}

.door__cancel:hover,
.door__cancel:focus-visible {
  color: var(--bone);
}