/* Spud & Root: the Kitchen (home/kitchen/index.html). Only that page loads
   this file, after site.css. Mom's kitchen in the 1990s, as on the basement
   page: her wallpaper and heart border, almond appliances, and the gang in
   it. Every class starts with kt-. The recipe cards below the room are
   site.css's, as on the home page. */

/* Mom's wallpaper: cream pinstripes with blue and pink dots */
.kt-room {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background-color: #f4ecd6;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 0, rgba(255, 255, 255, 0.45), transparent 70%),
    radial-gradient(circle, #7fa6c9 0 2px, transparent 2.5px),
    radial-gradient(circle, #d98a9a 0 2px, transparent 2.5px),
    repeating-linear-gradient(90deg, #e6dab9 0 1.5px, transparent 1.5px 12px);
  background-size: auto, 24px 24px, 24px 24px, auto;
  background-position: 0 0, -6px -6px, 6px 6px, 0 0;
  border-bottom: var(--stroke) solid var(--ink);
}

/* ---------- The border along the top ---------- */
.kt-border {
  display: block;
  width: 100%;
  height: 28px;
}

/* ---------- The intro ---------- */
.kt-intro {
  padding-top: clamp(20px, 3vw, 36px);
  padding-bottom: clamp(8px, 2vw, 16px);
}
.kt-intro__eyebrow {
  font-family: var(--font-script);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem);
  line-height: 1.1;
  color: #3f6f9e;
  rotate: -2deg;
  transform-origin: 0 50%;
}
.kt-intro h1 {
  margin-top: 6px;
  font-size: clamp(2.6rem, 1.8rem + 4vw, 5rem);
  line-height: 0.98;
  color: var(--ink);
  text-shadow: 4px 4px 0 #fff8ea, 7px 7px 0 #d98a9a;
}
.kt-intro__lede {
  max-width: 30em;
  margin-top: 14px;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
}

/* ---------- The room ---------- */
/* The scene keeps its shape and stops growing on wide screens. On phones
   it has a minimum height and its sides are cropped (the fridge, the sink
   with the potato by it, and the stove stay in view). The floor is drawn far past the edges of
   the drawing, and overflow: visible lets it run the full width either way. */
.kt-scene {
  display: block;
  width: min(100%, 1320px);
  height: auto;
  min-height: 240px;
  aspect-ratio: 645 / 225.75;
  margin: 0 auto;
  overflow: visible;
}

/* ---------- The stove ----------
   Off until you turn something on: kitchen.js puts a class on the scene for
   each burner that's lit (is-pot and is-left-back on the left, is-kettle
   and is-right-back on the right) and the oven (is-oven), and as the pot
   and the kettle heat up, the pot simmering and boiling (is-simmering,
   is-boiling) and the kettle steaming and whistling (is-kettle-warm,
   is-steaming). */
.kt-toggle,
.kt-knob {
  cursor: pointer;
}
.kt-flame {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.is-pot [data-burner="pot"],
.is-left-back [data-burner="left-back"],
.is-kettle [data-burner="kettle"],
.is-right-back [data-burner="right-back"] {
  opacity: 1;
}
.kt-flame path {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: kt-flicker 0.4s ease-in-out infinite alternate;
}
.kt-flame path:nth-child(4n + 3) {
  animation-delay: -0.2s;
}
.kt-flame path:nth-child(4n + 1) {
  animation-delay: -0.1s;
}
@keyframes kt-flicker {
  from {
    transform: scaleY(0.82);
  }
  to {
    transform: scaleY(1.12);
  }
}
.kt-oven {
  opacity: 0;
  transition: opacity 1.5s ease;
}
.is-oven .kt-oven {
  opacity: 1;
  animation: kt-glow 3s ease-in-out infinite alternate;
}

/* The potato, between the sink and the stove: it jumps when the pot's lid
   rattles */
.kt-spud {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.is-boiling .kt-spud {
  animation: kt-jump 7s ease-in-out infinite;
}
@keyframes kt-jump {
  0%, 46%, 64%, 100% {
    transform: none;
  }
  49% {
    transform: translateY(-4.3px) rotate(-3deg);
  }
  53% {
    transform: rotate(-3deg);
  }
}
.kt-lid {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.is-boiling .kt-lid {
  animation: kt-rattle 7s linear infinite;
}
@keyframes kt-rattle {
  0%, 46%, 60%, 100% {
    transform: none;
  }
  48% {
    transform: translateY(-4px) rotate(-3deg);
  }
  50% {
    transform: rotate(2deg);
  }
  52% {
    transform: translateY(-5px) rotate(3deg);
  }
  54% {
    transform: none;
  }
  56% {
    transform: translateY(-2px) rotate(-2deg);
  }
  58% {
    transform: none;
  }
}
.kt-steam path,
.kt-kettle-steam path {
  opacity: 0;
}
.is-simmering .kt-steam path,
.is-kettle-warm .kt-kettle-steam path {
  animation: kt-wisp 3.6s ease-out infinite;
}
.is-boiling .kt-steam path {
  animation: kt-steam 2.6s ease-out infinite;
}
.is-boiling .kt-steam path:nth-child(2) {
  animation-delay: -0.9s;
}
.is-boiling .kt-steam path:nth-child(3) {
  animation-delay: -1.7s;
}
.is-steaming .kt-kettle-steam path {
  animation: kt-steam 1.2s ease-out infinite;
}
.is-steaming .kt-kettle-steam path:nth-child(2) {
  animation-delay: -0.6s;
}
.kt-kettle {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.is-steaming .kt-kettle {
  animation: kt-jiggle 0.25s linear infinite;
}
@keyframes kt-jiggle {
  0%, 100% {
    transform: none;
  }
  25% {
    transform: rotate(-1.5deg);
  }
  75% {
    transform: rotate(1.5deg);
  }
}
@keyframes kt-wisp {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  40% {
    opacity: 0.35;
  }
  100% {
    opacity: 0;
    transform: translateY(-12px);
  }
}
@keyframes kt-steam {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  30% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateY(-18px);
  }
}
/* The toaster (kitchen.js moves the toast and the lever) */
.kt-toaster {
  cursor: pointer;
}
.kt-toaster__glow {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.is-toasting .kt-toaster__glow {
  opacity: 1;
}
.kt-toaster__smoke path {
  opacity: 0;
}
.is-burnt .kt-toaster__smoke path {
  animation: kt-steam 2.4s ease-out infinite;
}
.is-burnt .kt-toaster__smoke path:nth-child(2) {
  animation-delay: -1.2s;
}
@keyframes kt-glow {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}
.kt-truffle {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: kt-sway 3s ease-in-out infinite;
}
@keyframes kt-sway {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

/* The gang aren't things to play with: clicks and drags go through them
   (and their pictures' see-through edges) to the kitchen behind */
.kt-scene image {
  pointer-events: none;
}

/* The oven's door and the muffins (kitchen.js) */
.kt-oven-door {
  cursor: pointer;
  touch-action: none;
}
.is-oven-open:not(.is-tray-out) .kt-tray {
  cursor: grab;
  touch-action: none;
}
.kt-ow {
  font-family: var(--font-script);
  font-size: 22px;
  fill: #e5322d;
  stroke: #fff8ea;
  stroke-width: 4px;
  paint-order: stroke;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: kt-ow 1.6s ease-out both;
  pointer-events: none;
}
/* The room shakes when you realise the tin's hot (kitchen.js) */
.kt-room.is-shaken {
  animation: kt-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes kt-shake {
  10%, 90% {
    transform: translate(-2px, 1px) rotate(-0.3deg);
  }
  20%, 80% {
    transform: translate(5px, -3px) rotate(0.5deg);
  }
  30%, 50%, 70% {
    transform: translate(-9px, 4px) rotate(-0.8deg);
  }
  40%, 60% {
    transform: translate(9px, -4px) rotate(0.8deg);
  }
}
@keyframes kt-ow {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-8deg);
  }
  12% {
    opacity: 1;
    transform: scale(1.15) rotate(-4deg);
  }
  20% {
    transform: scale(1) rotate(-4deg);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-14px) rotate(-4deg);
  }
}

/* The pot and the kettle (kitchen.js carries them) */
.kt-vessel {
  cursor: grab;
  touch-action: none;
}
.kt-vessel.is-held {
  cursor: grabbing;
}

.kt-pour {
  pointer-events: none;
  animation: kt-flow 0.3s linear infinite;
}
.kt-overflow {
  opacity: 0;
}
.is-overflowing .kt-overflow {
  opacity: 1;
  animation: kt-flow 0.3s linear infinite;
}

/* The sink's faucet (kitchen.js turns it on and swings it) */
.kt-faucet {
  cursor: pointer;
  touch-action: none;
}
.kt-water {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.is-running .kt-water {
  opacity: 1;
}
.is-running .kt-water__flow {
  animation: kt-flow 0.35s linear infinite;
}
@keyframes kt-flow {
  to {
    stroke-dashoffset: -8;
  }
}
.kt-water__drop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.is-running .kt-water__drop {
  animation: kt-splash 0.5s ease-out infinite;
}
.is-running .kt-water__drop + .kt-water__drop {
  animation-delay: -0.25s;
}
@keyframes kt-splash {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

/* The fridge's doors (kitchen.js swings them) */
.kt-door {
  cursor: grab;
  touch-action: none;
}
.kt-door.is-held {
  cursor: grabbing;
}

/* The magnets on the fridge (kitchen.js) */
.kt-magnet {
  cursor: grab;
  touch-action: none;
}
.kt-magnet.is-held {
  cursor: grabbing;
}

/* The pedal bin (kitchen.js moves the lid) */
.kt-bin__pedal,
.kt-bin__lid {
  cursor: pointer;
  touch-action: none;
}
.kt-bin__lid {
  cursor: grab;
}
.kt-bin__lid.is-held {
  cursor: grabbing;
}
.kt-bin__pedal.is-down {
  transform: translateY(3px);
}

/* ---------- The clock ----------
   A button over the clock in the drawing (kitchen.js keeps it there) opens
   the clock up close, to set it */
.kt-clock-btn {
  position: absolute;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.kt-clock-btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.kt-clock-set {
  width: min(92vw, 360px);
  padding: 24px 24px 22px;
  text-align: center;
  color: var(--ink);
  background: var(--cream);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.kt-clock-set::backdrop {
  background: rgba(35, 31, 32, 0.45);
}
.kt-clock-set h2 {
  font-size: 1.5rem;
}
.kt-clock-set__face {
  display: block;
  width: min(100%, 240px);
  height: auto;
  margin: 16px auto 12px;
  cursor: grab;
  touch-action: none;
  border-radius: 50%;
}
.kt-clock-set__face:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
.kt-clock-set__hint {
  margin-bottom: 16px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .kt-spud,
  .kt-lid,
  .kt-steam path,
  .kt-kettle-steam path,
  .kt-kettle,
  .kt-toaster__smoke path,
  .kt-water__flow,
  .kt-overflow,
  .kt-pour,
  .kt-water__drop,
  .kt-oven,
  .kt-flame path,
  .kt-truffle {
    animation: none !important;
  }
  .is-boiling .kt-steam path,
  .is-steaming .kt-kettle-steam path,
  .is-burnt .kt-toaster__smoke path {
    opacity: 0.6;
  }
}