/* ---------------------------------------------------------
   Z.O.Z. - de lift van de A'DAM Toren
   Rosegouden cabine, een warm lampje, en dan de avondlucht.
   --------------------------------------------------------- */

:root {
  --wand:        #f0cec8;
  --wand-diep:   #e2b3ab;
  --wand-hoog:   #f8e2dd;
  --plaat:       #f8e7e2;
  --plaat-hoog:  #fdf2ef;
  --lijn:        #d9a49d;

  --roosgoud:    #b26b6b;
  --lamp:        #f3ae9c;

  --inkt:        #46262a;
  --inkt-zacht:  #7b5054;

  --schemer-hoog: #1e1024;
  --schemer-laag: #8a4553;
  --maanlicht:    #fdf3e3;
  --papier:       #fdf7f3;

  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --hand: 'Caveat', 'Segoe Script', cursive;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #c99b95;
  color: var(--inkt);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100dvh; }

/* ---------------------------------------------------------
   De liftcabine
   --------------------------------------------------------- */

.lift {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 540px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--wand);
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, var(--wand-hoog) 0%, var(--wand) 48%, var(--wand-diep) 100%);
  border-inline: 1px solid var(--lijn);
  transition: background 1.4s ease 0.9s;
}

.lift.is-boven {
  color: #f7e7e4;
  background: var(--schemer-hoog);
  background-image:
    radial-gradient(130% 62% at 50% 100%, rgba(232,150,140,.5) 0%, transparent 64%),
    linear-gradient(180deg, #170c1e 0%, var(--schemer-hoog) 38%, #4c2338 72%, var(--schemer-laag) 100%);
}

/* ---------------------------------------------------------
   Verdiepingspaneel
   --------------------------------------------------------- */

.paneel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  padding-top: max(15px, env(safe-area-inset-top));
  background: linear-gradient(180deg, #3f2329, #33191f);
  border-bottom: 1px solid #8b5a58;
  box-shadow: inset 0 -8px 14px -12px #000;
}

.paneel__pijl {
  font-size: 15px;
  line-height: 1;
  color: #8c5750;
  transition: color .3s, text-shadow .3s;
}

.paneel__pijl.is-aan {
  color: var(--lamp);
  text-shadow: 0 0 14px rgba(243,174,156,.8);
}

.paneel__cijfer {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--lamp);
  text-shadow: 0 0 18px rgba(243,174,156,.5);
}

.paneel__doel {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #c69b96;
}

.geluidknop {
  padding: 7px 9px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  color: #c69b96;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}

.geluidknop:hover,
.geluidknop:focus-visible {
  color: var(--lamp);
  border-color: #8b5a58;
  outline: none;
}

/* ---------------------------------------------------------
   Binnenruimte
   --------------------------------------------------------- */

.ruimte {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 24px 42px;
  padding-bottom: max(42px, env(safe-area-inset-bottom));
}

.ruimte:focus { outline: none; }

/* ---------------------------------------------------------
   Instapscherm
   --------------------------------------------------------- */

.intro__kicker {
  display: inline-block;
  margin: 0 0 6px;
  transform: rotate(-3deg);
  font-family: var(--hand);
  font-size: 28px;
  color: var(--roosgoud);
}

.intro__titel {
  margin: 0 0 18px;
  font-size: clamp(31px, 9vw, 43px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.025em;
  color: var(--inkt);
}

.intro__tekst,
.boven__tekst {
  max-width: 33ch;
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: var(--inkt-zacht);
  white-space: pre-line;
}

.oproep {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.oproep__knop {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 1px solid #c98d85;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, #fdeae5 0%, #eec4bb 58%, #dda79d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 10px 22px rgba(128,70,66,.28);
  color: var(--roosgoud);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: box-shadow .2s, color .2s, transform .08s;
}

.oproep__knop:hover,
.oproep__knop:focus-visible {
  color: #8f4a4a;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 0 0 4px rgba(178,107,107,.24),
    0 10px 26px rgba(128,70,66,.32);
}

.oproep__knop:active { transform: translateY(1px) scale(.985); }

.oproep__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--inkt-zacht);
}

/* ---------------------------------------------------------
   Vragen
   --------------------------------------------------------- */

.teller {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--inkt-zacht);
}

.vraag {
  margin: 0 0 24px;
  max-width: 28ch;
  font-size: clamp(21px, 5.4vw, 25px);
  font-weight: 600;
  line-height: 1.26;
  letter-spacing: -.015em;
  color: var(--inkt);
}

.opties {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.optie {
  width: 100%;
  padding: 15px 16px;
  text-align: left;
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--inkt);
  background: var(--plaat);
  border: 1px solid #e3bcb5;
  border-left: 3px solid transparent;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(128,70,66,.12);
  cursor: pointer;
  transition: background .16s, border-left-color .16s, color .16s;
}

.optie:hover,
.optie:focus-visible {
  background: var(--plaat-hoog);
  border-left-color: var(--roosgoud);
  outline: none;
}

.optie[disabled] { cursor: default; }

.optie.is-mis {
  background: #ecd6d1;
  border-left-color: #c49a94;
  color: #997370;
  box-shadow: none;
  animation: schud .4s;
}

@keyframes schud {
  0%, 100% { transform: translateX(0); }
  22%      { transform: translateX(-6px); }
  46%      { transform: translateX(5px); }
  72%      { transform: translateX(-3px); }
}

.reactie {
  margin: 9px 2px 2px;
  font-family: var(--hand);
  font-size: 20px;
  line-height: 1.2;
  color: var(--roosgoud);
}

/* ---------------------------------------------------------
   Polaroid
   --------------------------------------------------------- */

.polaroid {
  max-width: 290px;
  margin: 0 auto;
  padding: 11px 11px 0;
  background: var(--papier);
  box-shadow: 0 16px 34px rgba(88,44,44,.34), 0 2px 4px rgba(88,44,44,.2);
  transform: rotate(-2.2deg);
  animation: plakken .55s cubic-bezier(.2,.9,.3,1.1) both;
}

.polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #e6d8d2;
}

.polaroid figcaption {
  padding: 11px 5px 14px;
  font-family: var(--hand);
  font-size: 20px;
  line-height: 1.22;
  text-align: center;
  color: var(--inkt);
}

@keyframes plakken {
  from { opacity: 0; transform: translateY(-26px) rotate(-9deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-2.2deg); }
}

.verder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 30px;
  padding: 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--roosgoud);
  background: transparent;
  border: 1px solid rgba(178,107,107,.5);
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s;
}

.verder:hover, .verder:focus-visible {
  background: rgba(178,107,107,.1);
  border-color: var(--roosgoud);
  outline: none;
}

.verder:active { transform: translateY(1px); }

.is-boven .verder { color: #f0c3bc; border-color: rgba(240,195,188,.5); }

/* ---------------------------------------------------------
   De deuren
   --------------------------------------------------------- */

.deuren {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  pointer-events: none;
}

.deuren.is-actief { display: block; }

.deur {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.4%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #f2cec5 0%, #e0a89e 55%, #c8887f 100%);
  transition: transform 2.1s cubic-bezier(.55,.02,.2,1);
}

.deur::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 71%;
  height: 1px;
  background: rgba(255,255,255,.5);
  box-shadow: 0 1px 0 rgba(122,64,60,.25);
}

.deur--links {
  left: 0;
  transform: translateX(-101%);
  border-right: 1px solid #a5675f;
  box-shadow: inset -18px 0 26px -18px rgba(90,42,40,.8);
}

.deur--rechts {
  right: 0;
  transform: translateX(101%);
  border-left: 1px solid #fbe6df;
  box-shadow: inset 18px 0 26px -18px rgba(90,42,40,.8);
}

.deuren.is-dicht .deur { transition-duration: .95s; }
.deuren.is-dicht .deur--links,
.deuren.is-dicht .deur--rechts { transform: translateX(0); }

/* ---------------------------------------------------------
   Boven
   --------------------------------------------------------- */

.boven { position: relative; }

.maan {
  position: absolute;
  top: -8px;
  right: 2px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fffdf6 0%, var(--maanlicht) 52%, #e8cfb8 100%);
  box-shadow: 0 0 70px 14px rgba(253,243,227,.25);
  animation: opkomen 2.6s ease-out .5s both;
}

@keyframes opkomen {
  from { opacity: 0; transform: translateY(46px) scale(.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.boven__aankondiging {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
  color: #d7a3a9;
}

.boven__naam {
  margin: 0 0 18px;
  max-width: 8ch;
  font-size: clamp(34px, 10vw, 46px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
  color: var(--maanlicht);
}

.boven__regels {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.boven__regels li {
  padding: 9px 0;
  font-size: 16px;
  color: #f4e2e0;
  border-top: 1px solid rgba(244,226,224,.2);
}

.boven__regels li:last-child { border-bottom: 1px solid rgba(244,226,224,.2); }

.boven__tekst { color: #e3bec2; margin-bottom: 30px; }

.boven .polaroid { margin-bottom: 22px; }

.strip {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 30px;
}

.strip img {
  width: 46%;
  max-width: 132px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  padding: 7px 7px 20px;
  background: var(--papier);
  box-shadow: 0 10px 22px rgba(60,25,35,.5);
}

.strip img:first-child { transform: rotate(2.4deg); }
.strip img:last-child  { transform: rotate(-1.8deg); }
.strip img:only-child  { width: 60%; max-width: 168px; transform: rotate(2deg); }

.ondertekening {
  margin: 0;
  text-align: right;
  font-family: var(--hand);
  font-size: 27px;
  color: var(--maanlicht);
}

.skyline {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 36px;
  margin-bottom: -44px;
}

/* ---------------------------------------------------------
   Rustige weergave
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}