/* Spud & Root: home/restroom.html (a visual gag). Loaded after site.css.
   Timing is driven by restroom.js, which sets data-state on .restroom:
   ready -> (tap) open -> noticed -> scream -> slam -> locked. */

.restroom-page {
  overflow: hidden;
  background: var(--cream);
}

.restroom {
  /* Doorway size; everything else scales off it */
  --dh: min(70vh, 136vw);
  --dw: calc(var(--dh) / 2);
  --trim: calc(var(--dh) * 0.035);
  --wall: var(--cream);
  --floor: #e9c79a;
  position: relative;
}
@supports (height: 1svh) {
  .restroom {
    --dh: min(70svh, 136vw);
  }
}

.stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  min-height: 360px;
  overflow: hidden;
  /* Hallway wall, then the floor from the bottom of the doorway down */
  background:
    repeating-linear-gradient(90deg, transparent 0 116px, rgba(35, 31, 32, 0.14) 116px 119px) bottom / 100% calc(50% - var(--dh) / 2) no-repeat,
    linear-gradient(
      var(--wall) 0 calc(50% + var(--dh) / 2),
      var(--ink) calc(50% + var(--dh) / 2) calc(50% + var(--dh) / 2 + 5px),
      var(--floor) calc(50% + var(--dh) / 2 + 5px)
    );
}

/* ---------- Doorway, room and door ---------- */
.doorway {
  position: relative;
  width: var(--dw);
  height: var(--dh);
  border: 5px solid var(--ink);
  border-bottom: 0;
  perspective: calc(var(--dh) * 2.4);
  perspective-origin: 50% 45%;
}
/* Door trim */
.doorway::before {
  content: "";
  position: absolute;
  inset: calc(-5px - var(--trim)) calc(-5px - var(--trim)) 0;
  z-index: -1;
  background: var(--white);
  border: 5px solid var(--ink);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.room,
.door,
.door__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.room {
  display: block;
}
/* Nothing peeks round a shut door */
.restroom:not([data-state="open"], [data-state="noticed"], [data-state="scream"], [data-state="slam"]) .room {
  visibility: hidden;
}

.door {
  transform-origin: left center;
  transform: rotateY(0deg);
}
[data-state="open"] .door,
[data-state="noticed"] .door,
[data-state="scream"] .door {
  transform: rotateY(84deg);
}
[data-state="open"] .door {
  transition: transform 0.42s var(--ease-out);
}
[data-state="slam"] .door {
  transition: transform 0.18s cubic-bezier(0.55, 0, 1, 0.45);
}
[data-state="ready"] .door {
  cursor: pointer;
}

.knob {
  position: absolute;
  left: 87.5%;
  top: 52.5%;
  width: 17%;
  aspect-ratio: 1;
  min-width: 36px;
  translate: -50% -50%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Bigger tap target than the knob itself */
.knob::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
}
.knob:disabled {
  cursor: default;
}
.knob svg {
  display: block;
  width: 100%;
  height: 100%;
}
.knob:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 9px var(--logo-yellow);
}

/* ---------- The potato ---------- */
.spud {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.face,
.alert,
.arm--fist {
  visibility: hidden;
}
.blush {
  fill: #ff8aa8;
  opacity: 0.85;
}

[data-state="open"] .face--calm,
[data-state="noticed"] .face--shock,
[data-state="noticed"] .alert,
[data-state="scream"] .face--scream,
[data-state="slam"] .face--scream,
[data-state="scream"] .arm--fist,
[data-state="slam"] .arm--fist {
  visibility: visible;
}
[data-state="scream"] .arm--calm,
[data-state="slam"] .arm--calm {
  visibility: hidden;
}
[data-state="scream"] .blush,
[data-state="slam"] .blush {
  fill: #ff4438;
  opacity: 0.6;
}

.alert {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.arm--fist {
  transform-box: view-box;
  transform-origin: 296px 398px;
}

/* ---------- Speech bubble ---------- */
.bubble {
  /* Sits to her left with the tail tip at the corner of her mouth. Shrinks on
     narrow screens so it never runs off the left edge. */
  --tip-x: calc(50vw - var(--dw) * 0.02);
  --tip-y: calc(50% - var(--dh) * 0.06);
  --bw: min(calc(var(--dw) * 0.95), calc((var(--tip-x) - 8px) / 0.987));
  position: absolute;
  z-index: 3;
  width: var(--bw);
  aspect-ratio: 300 / 232;
  left: calc(var(--tip-x) - var(--bw) * 0.987);
  top: calc(var(--tip-y) - var(--bw) * 0.713);
  visibility: hidden;
  transform-origin: 98.7% 92%;
}
[data-state="scream"] .bubble,
[data-state="slam"] .bubble {
  visibility: visible;
}
.bubble__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.bubble__text {
  position: absolute;
  inset: 13% 23% 17% 9%;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(var(--bw) * 0.118);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- Slam impact lines ---------- */
.impact {
  position: absolute;
  width: calc(var(--dw) + 2 * var(--trim));
  height: calc(var(--dh) + var(--trim));
  top: calc(50% - var(--dh) / 2 - var(--trim));
  left: calc(50% - var(--dw) / 2 - var(--trim));
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}

/* ---------- "Tap to barge in" and "It's locked." ---------- */
.hint,
.locked {
  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 2;
  margin: 0;
  padding: 0.1em 0.6em 0.15em;
  white-space: nowrap;
  font-family: var(--font-script);
  font-size: max(1.5rem, calc(var(--dw) * 0.15));
  line-height: 1.2;
  color: var(--ink);
  background: var(--white);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}
.hint {
  translate: -50% 0;
  visibility: hidden;
}
[data-state="ready"] .hint {
  visibility: visible;
}
.locked {
  opacity: 0;
  translate: -50% 8px;
  transition: opacity 0.9s ease, translate 0.9s ease;
}
.locked.is-shown {
  opacity: 1;
  translate: -50% 0;
  transition-duration: 0.15s;
}

/* ---------- Way out ---------- */
.leave {
  position: absolute;
  left: 50%;
  bottom: max(12px, calc(25% - var(--dh) / 4 - 0.8em));
  translate: -50% 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}
[data-state="locked"] .leave,
html:not(.js) .leave {
  opacity: 1;
  visibility: visible;
}

/* Hidden until the script picks a state, so a returning visitor never sees
   the open door flash. Shown anyway after a moment if the script fails. */
.js [data-state="pending"] .stage {
  visibility: hidden;
  animation: restroom-fallback 0s 1.5s forwards;
}
@keyframes restroom-fallback {
  to { visibility: visible; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .steam__wisp {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: restroom-steam 2.4s ease-out infinite;
  }
  .steam__wisp:nth-child(2) { animation-delay: -0.8s; }
  .steam__wisp:nth-child(3) { animation-delay: -1.6s; }

  [data-state="noticed"] .spud {
    animation: restroom-jump 0.26s var(--ease-out) both;
  }
  [data-state="noticed"] .alert {
    animation: restroom-pop 0.2s var(--ease-spring) both;
  }
  [data-state="scream"] .spud,
  [data-state="slam"] .spud {
    animation: restroom-rage 0.11s linear infinite;
  }
  [data-state="scream"] .arm--fist,
  [data-state="slam"] .arm--fist {
    animation: restroom-fist 0.16s ease-in-out infinite alternate;
  }
  [data-state="scream"] .bubble {
    animation:
      restroom-bubble-in 0.24s var(--ease-spring) both,
      restroom-bubble-shake 0.12s linear 0.24s infinite;
  }
  .is-impact .stage {
    animation: restroom-shake 0.36s linear both;
  }
  .is-impact .door {
    animation: restroom-bounce 0.24s ease-out both;
  }
  .is-impact .impact {
    animation: restroom-lines 0.42s ease-out both;
  }
  [data-state="ready"] .hint {
    animation: restroom-bob 1.6s ease-in-out infinite;
  }
  .knob.is-jiggling svg {
    animation: restroom-jiggle 0.45s ease-in-out both;
  }
  .is-rattling .door {
    animation: restroom-rattle 0.45s linear both;
  }
}

@keyframes restroom-bob {
  0%, 100% { translate: -50% 0; }
  50% { translate: -50% -6px; }
}
@keyframes restroom-steam {
  0% { opacity: 0; translate: 0 20px; }
  30% { opacity: 0.8; }
  100% { opacity: 0; translate: 0 -40px; }
}
@keyframes restroom-jump {
  0% { translate: 0 0; scale: 1 1; }
  45% { translate: 0 -18px; scale: 0.97 1.05; }
  100% { translate: 0 0; scale: 1 1; }
}
@keyframes restroom-pop {
  0% { scale: 0; }
  100% { scale: 1; }
}
@keyframes restroom-rage {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: -3px 1px; rotate: -1.2deg; }
  75% { translate: 3px -1px; rotate: 1.2deg; }
}
@keyframes restroom-fist {
  from { rotate: -8deg; }
  to { rotate: 10deg; }
}
@keyframes restroom-bubble-in {
  0% { scale: 0.2; rotate: -10deg; }
  100% { scale: 1; rotate: 0deg; }
}
@keyframes restroom-bubble-shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -2px 1px; }
  75% { translate: 2px -1px; }
}
@keyframes restroom-shake {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  15% { translate: -9px 3px; rotate: -0.6deg; }
  30% { translate: 8px -2px; rotate: 0.5deg; }
  45% { translate: -6px 2px; rotate: -0.3deg; }
  60% { translate: 4px -1px; }
  80% { translate: -2px 0; }
}
@keyframes restroom-bounce {
  0% { transform: rotateY(0deg); }
  40% { transform: rotateY(5deg); }
  100% { transform: rotateY(0deg); }
}
@keyframes restroom-lines {
  0% { opacity: 1; scale: 0.94; }
  100% { opacity: 0; scale: 1.06; }
}
@keyframes restroom-jiggle {
  0%, 100% { rotate: 0deg; }
  15% { rotate: -32deg; }
  35% { rotate: 26deg; }
  55% { rotate: -18deg; }
  75% { rotate: 10deg; }
}
@keyframes restroom-rattle {
  0%, 100% { translate: 0 0; }
  15%, 55% { translate: -2px 0; }
  35%, 75% { translate: 2px 0; }
}