/* --------------------------------
   THE HALLWAY
   please don't run
-------------------------------- */

.hallway-page {
  max-width: 960px;
}

/* INTRO */

.hallway-intro {
  max-width: 570px;
  margin-bottom: 95px;
}

.hallway-label {
  color: var(--faded);
  font-size: 0.7rem;
  margin-bottom: 35px;
}

.hallway-intro h1 {
  margin: 0 0 35px;
  font-weight: normal;
}

.hallway-intro p {
  margin-bottom: 25px;
}

.hallway-instruction {
  color: var(--faded);
  font-size: 0.78rem;
  margin-top: 48px;
}

/* --------------------------------
   THE CORRIDOR
-------------------------------- */

.hallway-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: 90px clamp(18px, 5vw, 55px) 95px;

  background-color: #dcd5c7;

  background-image:
    linear-gradient(
      90deg,
      rgba(59, 48, 33, 0.10),
      transparent 22%,
      transparent 78%,
      rgba(59, 48, 33, 0.10)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 145px,
      rgba(65, 55, 40, 0.035) 146px 148px
    ),
    linear-gradient(
      #e4ded1,
      #c7bfaf
    );

  border: 2px solid #b5ab99;

  box-shadow:
    inset 0 0 55px rgba(51, 42, 29, 0.12),
    5px 7px 0 rgba(51, 42, 29, 0.07);
}

/* A WORN RUNNER THAT NARROWS INTO THE DISTANCE */

.hallway-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background:
    repeating-linear-gradient(
      0deg,
      rgba(42, 35, 25, 0.06) 0 2px,
      transparent 3px 33px
    ),
    linear-gradient(
      90deg,
      #aa9984,
      #c0b09a 50%,
      #aa9984
    );

  clip-path: polygon(
    35% 0,
    65% 0,
    53% 100%,
    47% 100%
  );

  opacity: 0.8;
}

/* --------------------------------
   DOORS IN PERSPECTIVE
-------------------------------- */

.hallway-row {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(30px, 30%)
    minmax(0, 1fr);

  align-items: end;
}

/* Door dimensions decrease with distance */

.hallway-row--near {
  --door-width: 220px;
  --door-height: 290px;
  margin-bottom: 150px;
}

.hallway-row--middle {
  --door-width: 185px;
  --door-height: 240px;
  margin-bottom: 145px;
}

.hallway-row--far {
  --door-width: 155px;
  --door-height: 205px;
  margin-bottom: 105px;
}

/* THE BASIC DOOR */

.hallway-door {
  position: relative;
  display: block;

  width: min(100%, var(--door-width));
  height: var(--door-height);

  box-sizing: border-box;
  color: #39332b;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.08),
      transparent 15%,
      rgba(255, 255, 255, 0.13) 65%,
      rgba(0, 0, 0, 0.07)
    ),
    var(--door-color, #b8ad96);

  border: 7px ridge var(--door-trim, #938570);

  box-shadow:
    inset 0 0 10px rgba(36, 27, 18, 0.12),
    5px 9px 10px rgba(36, 27, 18, 0.21);

  text-decoration: none;

  transform:
    perspective(650px)
    rotateY(var(--angle, 0deg));

  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

/* LEFT AND RIGHT SIDES */

.door-left {
  grid-column: 1;
  justify-self: end;

  --angle: -9deg;
}

.door-right {
  grid-column: 3;
  justify-self: start;

  --angle: 9deg;
}

/* DOORS RESPOND WHEN APPROACHED */
/* DOORS REST STRAIGHT */

.hallway-door {
  transform: perspective(650px) rotateY(0deg);
}

/* DOORS ANGLE WHEN APPROACHED */

.hallway-door:hover,
.hallway-door:focus-visible {
  transform:
    perspective(650px)
    rotateY(var(--angle, 0deg))
    translateY(-7px);

  box-shadow:
    inset 0 0 10px rgba(36, 27, 18, 0.12),
    8px 16px 18px rgba(36, 27, 18, 0.25);
}


.hallway-door:focus-visible {
  outline: 3px dashed #40372c;
  outline-offset: 7px;
}

/* INSET WOODEN PANELS */

.door-panel {
  position: absolute;
  left: 13%;
  right: 13%;

  border: 3px double rgba(70, 56, 39, 0.30);

  box-shadow:
    inset 2px 3px 5px rgba(40, 30, 19, 0.10),
    1px 1px 0 rgba(255, 255, 255, 0.22);
}

.door-panel--upper {
  top: 16%;
  height: 24%;
}

.door-panel--lower {
  bottom: 9%;
  height: 25%;
}

/* ROOM NUMBER */

.door-number {
  position: absolute;
  top: 5%;
  left: 12%;
  z-index: 2;

  font-size: 0.66rem;
  color: rgba(53, 43, 29, 0.72);
}

/* CROOKED LABEL ON EACH DOOR */

.door-plaque {
  position: absolute;
  z-index: 2;

  top: 45%;
  left: 9%;
  right: 9%;

  padding: 8px 3px;

  text-align: center;
  font-size: clamp(0.62rem, 1.3vw, 0.84rem);
  line-height: 1.3;

  color: #40382d;
  background: #f4efdf;
  border: 1px solid #c6b9a0;

  box-shadow:
    2px 3px 0 rgba(49, 37, 23, 0.15);

  transform: rotate(var(--plaque-tilt, -3deg));
}

/* DOORKNOBS */

.door-knob {
  position: absolute;
  top: 58%;
  z-index: 3;

  width: 15px;
  height: 15px;
  border-radius: 50%;

  background: radial-gradient(
    circle at 30% 25%,
    #f1e1b5,
    #b39a63 50%,
    #6e5836
  );

  border: 1px solid #76603a;

  box-shadow:
    2px 3px 3px rgba(39, 28, 15, 0.24);
}

.door-left .door-knob {
  right: 12px;
}

.door-right .door-knob {
  left: 12px;
}

/* --------------------------------
   EACH ROOM HAS ITS OWN DOOR
-------------------------------- */

.door--things {
  --door-color: #b2a48b;
  --door-trim: #82745f;
  --plaque-tilt: -5deg;
}

.door--exhibits {
  --door-color: #abb5a3;
  --door-trim: #7f8b7c;
  --plaque-tilt: 4deg;
}

.door--notes {
  --door-color: #c4b293;
  --door-trim: #95836a;
  --plaque-tilt: -2deg;
}

.door--philosophy {
  --door-color: #b7aaa2;
  --door-trim: #897b73;
  --plaque-tilt: 3deg;
}

.door--infestations {
  --door-color: #93877b;
  --door-trim: #6e6259;
  --plaque-tilt: -6deg;
}

.door--cockroach {
  --door-color: #c7bba3;
  --door-trim: #95886e;
  --plaque-tilt: 5deg;
}

/* --------------------------------
   AN UNMARKED DOOR AT THE END
-------------------------------- */

.hallway-end {
  position: relative;
  z-index: 2;

  display: flex;
  justify-content: center;
}

.hallway-closet {
  width: 95px;
  text-align: center;
}

.hallway-closet summary {
  position: relative;
  display: block;
  box-sizing: border-box;

  width: 95px;
  height: 135px;

  cursor: pointer;
  list-style: none;

  background: #a39d8f;
  border: 5px ridge #7f796b;

  box-shadow:
    inset 0 0 9px rgba(39, 30, 19, 0.15),
    3px 5px 7px rgba(39, 30, 19, 0.19);
}

.hallway-closet summary::-webkit-details-marker {
  display: none;
}

.hallway-closet summary:focus-visible {
  outline: 2px dashed #40372c;
  outline-offset: 5px;
}

.closet-number {
  position: absolute;
  top: 13px;
  left: 15px;

  font-size: 0.75rem;
  color: #5d564b;
}

.closet-knob {
  position: absolute;
  right: 10px;
  top: 59%;

  width: 10px;
  height: 10px;
  border-radius: 50%;

  background: #b9a46d;
  border: 1px solid #786744;
}


/* THE CLOSET WOULD PREFER SOME PRIVACY */

.hallway-closet {
  position: relative;
}

.hallway-closet p {
  position: absolute;

  /* Float ABOVE the closet door */
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);

  width: 180px;
  max-width: 60vw;

  margin: 0;
  padding: 9px;

  background: #eee6d5;
  border: 1px solid #c9bfac;

  color: #51493b;
  font-size: 0.69rem;
  line-height: 1.7;
  text-align: center;

  box-shadow: 2px 3px 0 rgba(39, 30, 19, 0.10);
}


/* --------------------------------
   SMALL SIGNS OF OCCUPATION
-------------------------------- */

.hallway-wall-writing {
  position: absolute;
  top: 30px;
  right: 5%;

  margin: 0;
  color: #82796b;
  font-size: 0.71rem;
  line-height: 1.4;

  transform: rotate(7deg);
}

.hallway-scratch {
  position: absolute;
  z-index: 3;

  left: 7%;
  bottom: 170px;

  font-size: 0.72rem;
  color: #6a6255;
}

.hallway-scratch summary {
  width: fit-content;
  cursor: pointer;
  list-style: none;
}

.hallway-scratch summary::-webkit-details-marker {
  display: none;
}

.hallway-scratch summary:focus-visible {
  outline: 2px dashed #40372c;
  outline-offset: 4px;
}

.hallway-scratch p {
  max-width: 150px;
  padding: 8px;

  background: #eee6d5;
  font-size: 0.67rem;
  line-height: 1.6;
}

/* THE WAY BACK */

.hallway-exit {
  margin-top: 65px;
  font-size: 0.8rem;
}

.hallway-exit a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* --------------------------------
   SMALLER WINDOWS
-------------------------------- */

@media (max-width: 650px) {

  .hallway-intro {
    margin-bottom: 65px;
  }

  .hallway-scene {
    padding: 75px 15px 80px;
  }

  .hallway-row {
    grid-template-columns:
      minmax(0, 1fr)
      12%
      minmax(0, 1fr);
  }

  .hallway-row--near {
    --door-height: 225px;
    margin-bottom: 100px;
  }

  .hallway-row--middle {
    --door-height: 195px;
    margin-bottom: 100px;
  }

  .hallway-row--far {
    --door-height: 170px;
    margin-bottom: 80px;
  }

  .hallway-door {
    border-width: 5px;
  }

  .door-plaque {
    font-size: 0.63rem;
    overflow-wrap: anywhere;
  }

  .door-panel {
    border-width: 2px;
  }

  .hallway-scratch {
    bottom: 165px;
    left: 3%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hallway-door {
    transition: none;
  }
}


/* --------------------------------
   HALLWAY PERSPECTIVE CORRECTION
   far away = top
   close to viewer = bottom
-------------------------------- */

/* Rearrange the hallway from farthest to nearest */

.hallway-scene {
  display: flex;
  flex-direction: column;
}

/* The mysterious door sits at the far end */

.hallway-end {
  order: 0;
  margin-bottom: 35px;
}

.hallway-closet,
.hallway-closet summary {
  width: 75px;
}

.hallway-closet summary {
  height: 105px;
}

/* The distant doors come first */

.hallway-row--far {
  order: 1;

  --door-width: 130px;
  --door-height: 170px;
  --corridor-gap: 8%;

  margin-bottom: 45px;
}

/* Middle distance */

.hallway-row--middle {
  order: 2;

  --door-width: 175px;
  --door-height: 225px;
  --corridor-gap: 19%;

  margin-bottom: 65px;
}

/* Closest doors appear largest and lowest */

.hallway-row--near {
  order: 3;

  --door-width: 230px;
  --door-height: 300px;
  --corridor-gap: 35%;

  margin-bottom: 0;
}

/* The space between opposite doors now
   grows wider toward the viewer. */

.hallway-row {
  grid-template-columns:
    minmax(0, 1fr)
    var(--corridor-gap)
    minmax(0, 1fr);
}

/* Correct the left/right door orientation */

.door-left {
  --angle: 5deg;
}

.door-right {
  --angle: -5deg;
}

/* The runner is narrow in the distance
   and wider at the bottom of the page. */

.hallway-scene::before {
  clip-path: polygon(
    47% 14%,
    53% 14%,
    80% 100%,
    20% 100%
  );
}

/* MOBILE CORRECTIONS */

@media (max-width: 650px) {

  .hallway-row--far {
    --door-width: 100px;
    --door-height: 155px;
    --corridor-gap: 4%;
    margin-bottom: 35px;
  }

  .hallway-row--middle {
    --door-width: 135px;
    --door-height: 190px;
    --corridor-gap: 10%;
    margin-bottom: 45px;
  }

  .hallway-row--near {
    --door-width: 160px;
    --door-height: 230px;
    --corridor-gap: 16%;
    margin-bottom: 0;
  }
}

.hallway-scene {
  background-image:
    linear-gradient(
      rgba(230, 221, 202, 0.20),
      rgba(79, 65, 43, 0.13)
    ),
    url("./assets/textures/hallway-wall.webp");

  background-size: cover;
  background-position: center;
}