:root {
  --machine-drop: clamp(16px, 4svh, 38px);
  --machine-width: min(1426px, max(815px, calc((100svh - 3rem) * 1.5792)));
  color-scheme: dark;
  background: #050404 url("steampunk-boden.png") left top / cover no-repeat fixed;
  color: #f4dcba;
  font: 100% system-ui, sans-serif;
}

:root:is([data-workshop-light="day"], [data-workshop-light="twilight"]) {
  --workshop-day: url("steampunk-werkstatt-16x9.png");
  --workshop-twilight: url("steampunk-daemmerung-16x9.png");
  background: #967253 var(--workshop-day) left bottom / cover no-repeat fixed;
}

:root[data-workshop-light="twilight"] {
  background-color: #4e4240;
  background-image: var(--workshop-twilight);
}

@media (max-aspect-ratio: 3/2) {
  :root:is([data-workshop-light="day"], [data-workshop-light="twilight"]) {
    --workshop-day: url("steampunk-werkstatt-4x3.png");
    --workshop-twilight: url("steampunk-daemmerung-4x3.png");
  }
}

@media (orientation: portrait) {
  :root:is([data-workshop-light="day"], [data-workshop-light="twilight"]) {
    --workshop-day: url("steampunk-werkstatt-3x4.png");
    --workshop-twilight: url("steampunk-daemmerung-3x4.png");
  }
}

@media (max-aspect-ratio: 2/3) {
  :root:is([data-workshop-light="day"], [data-workshop-light="twilight"]) {
    --workshop-day: url("steampunk-werkstatt-9x16.png");
    --workshop-twilight: url("steampunk-daemmerung-schmal.png");
  }
}

body {
  margin: 0;
}

.background-rays {
  --sun-angle: 128deg;
  --ray-drift: 0deg;
  --ray-strength: .8;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.background-rays::before {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  background: url("steampunk-boden.png") left top / cover no-repeat;
  mask-image: radial-gradient(ellipse 115% 85% at 0 0,#000 8%,#000b 42%,transparent 85%);
  transform: rotate(var(--ray-drift)) scale(1.06);
  filter: blur(7px);
  opacity: var(--ray-strength);
}

:root:is([data-workshop-light="day"], [data-workshop-light="twilight"]) .background-rays::before {
  content: none;
}

.background-rays::after {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from calc(var(--sun-angle) - 24deg) at 0 0,
    transparent 0deg, #ffc87904 6deg, #ffcf8914 12deg, #ffdea636 18deg,
    #ffe9bb52 24deg, #ffdea636 30deg, #ffcf8914 36deg, #ffc87904 42deg,
    transparent 48deg, transparent 360deg);
  mask-image: radial-gradient(ellipse 122% 122% at 0 0,#000 6%,#000e 32%,#0008 62%,#0002 86%,transparent 100%);
  filter: blur(10px);
  opacity: var(--ray-strength);
}

.wall-calendar:not([hidden]) {
  display: grid;
}

.wall-calendar {
  position: absolute;
  top: clamp(20px, 13svh, 160px);
  right: clamp(14px, 11vw, 180px);
  box-sizing: border-box;
  width: clamp(67px, 6.1vw, 96px);
  padding: .28rem .30rem .41rem;
  color: #35261c;
  background: linear-gradient(112deg, #dfc89f, #f2e6c9 46%, #e4d0ac);
  border: 1px solid #997650;
  border-top: .46rem solid #62442e;
  border-radius: 3px 3px 1px 1px;
  box-shadow: 1px 2px #c3ab81, 2px 4px #8c704d, 6px 9px 14px #23160c94;
  font-family: Georgia, "Times New Roman", serif;
  text-align: center;
  line-height: 1.15;
  pointer-events: none;
  filter: brightness(.72) saturate(.78);
}

.wall-calendar::before {
  content: "";
  position: absolute;
  top: -.46rem;
  left: 50%;
  width: .40rem;
  height: .40rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e5c88c, #795233 70%);
  box-shadow: 1px 1px 2px #27180e;
}

.wall-calendar-weekday {
  padding-top: .24rem;
  border-top: 1px dashed #967b5590;
  font-size: clamp(.60rem, .74vw, .75rem);
}

.wall-calendar-day {
  margin: .10rem 0 .12rem;
  color: #773524;
  font-size: clamp(1.65rem, 3.2vw, 2.8rem);
  font-weight: 700;
  line-height: .96;
  font-variant-numeric: lining-nums tabular-nums;
}

.wall-calendar-month {
  font-size: clamp(.66rem, .85vw, .84rem);
  font-weight: 700;
}

.wall-calendar-year {
  margin-top: .12rem;
  font-size: .60rem;
}

:root[data-workshop-light="day"] .wall-calendar {
  filter: none;
}

:root[data-workshop-light="twilight"] .wall-calendar {
  filter: brightness(.87) saturate(.90);
}

@media (orientation: portrait) {
  :root[data-workshop-light="night"] .wall-calendar {
    top: 3svh;
    right: 4vw;
  }
}

#droste-machine {
  position: relative;
  max-width: 1426px;
  max-width: var(--machine-width);
  margin: 0 auto;
  padding-top: var(--machine-drop);
}

:root:is([data-workshop-light="day"], [data-workshop-light="twilight"]) #droste-machine {
  /* Keep the wooden base over the floor in the tall workshop images. */
  padding-top: max(var(--machine-drop), calc(83svh - min(100vw, var(--machine-width)) * .57));
}

.foreground-sunlight {
  --sun-angle: 128deg;
  --ray-strength: .8;
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: var(--ray-strength);
}

.foreground-sunlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from calc(var(--sun-angle) - 24deg) at 0 0,
    transparent 0deg, #ffd58d02 6deg, #ffda9b09 12deg, #ffe2aa1b 18deg,
    #ffedc82c 24deg, #ffe2aa1b 30deg, #ffda9b09 36deg, #ffd58d02 42deg,
    transparent 48deg, transparent 360deg);
  mask-image: radial-gradient(ellipse 128% 125% at 0 0,transparent 0%,#0008 15%,#000 30%,#0008 61%,#0002 86%,transparent 100%);
  filter: blur(12px);
}

.sun-reflections {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  transform: rotate(var(--reflection-angle, 30deg));
}

.sun-reflections span {
  opacity: 0;
  position: absolute;
  left: calc(var(--reflection-reach, 140vmin) * var(--distance));
  top: 0;
  width: var(--diameter);
  height: var(--diameter);
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--reflection-color),.18) 0%,
    rgba(var(--reflection-color),.08) 48%,
    rgba(var(--reflection-color),.24) 66%,
    rgba(var(--reflection-color),.48) 78%,
    rgba(var(--reflection-color),.20) 86%,
    rgba(var(--reflection-color),0) 100%);
  filter: blur(1.5px);
}

.machine-scene {
  position: relative;
  aspect-ratio: 1426 / 903;
  overflow: hidden;
}

.machine-art {
  position: absolute;
  left: -16.4797%;
  top: -4.2082%;
  width: 117.2511%;
  height: auto;
}

.machine-printer-repair {
  position: absolute;
  left: 69.8457%;
  top: 56.9214%;
  width: 10.1683%;
  height: auto;
}

.machine-ready .machine-art,
.machine-ready .machine-printer-repair {
  visibility: hidden;
}

.machine-footlight-art {
  display: none;
}

.machine-scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.machine-power-art {
  position: absolute;
  pointer-events: none;
}

.machine-power {
  position: absolute;
  left: min(var(--power-x), calc(100% - 22px));
  top: min(var(--power-y), calc(100% - 22px));
  width: var(--power-hit-width);
  height: 7%;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: manipulation;
}

.machine-hit,
.machine-contact-trigger {
  display: block;
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  padding: 0;
  border: 0;
  border-radius: 24%;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.machine-hit.photo {
  border-radius: 48% 48% 32% 32%;
}

.machine-hit:hover,
.machine-hit[aria-disabled="true"],
.machine-shortcuts [aria-disabled="true"] {
  cursor: default;
}

.machine-hit[data-active] {
  box-shadow: inset 0 0 15px #fbbb6a70, 0 0 10px #b66e2a40;
}

#droste-machine :focus-visible {
  outline: 2px solid #ffd59a;
  outline-offset: 2px;
}

.machine-contact {
  position: absolute;
  left: 26.2034%;
  top: 24.2791%;
  width: 17.8583%;
  height: 5.6744%;
  z-index: 1;
}

.machine-contact-trigger {
  inset: 0;
  width: 100%;
  height: 100%;
}

.machine-contact address {
  display: none;
  position: absolute;
  bottom: calc(100% + .35rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(17rem, 78vw);
  padding: .5rem .7rem;
  border: 1px solid #92795c;
  border-radius: .3rem;
  background: #22140e;
  font: normal .875rem system-ui, sans-serif;
  text-align: center;
}

.machine-contact:hover address,
.machine-contact:focus-within address {
  display: block;
}

.machine-footer {
  display: flex;
  justify-content: flex-end;
  padding: .25rem .75rem .75rem;
}

.machine-motion,
.machine-shortcuts a,
.machine-shortcuts button {
  box-sizing: border-box;
  border: 1px solid #92795c;
  border-radius: .35rem;
  padding: .5rem .7rem;
  background: #20140e;
  color: #f4dcba;
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
}

.machine-shortcuts {
  display: none;
}

.machine-left-smoke {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  mask-image: linear-gradient(to right,transparent,#000 8%),
    linear-gradient(to bottom,transparent,#000 10%);
  mask-composite: intersect;
}

.machine-flight {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.machine-flight-paper {
  position: absolute;
  left: 0;
  top: 0;
  filter: drop-shadow(4px 7px 5px #180b08a0);
}

@media (max-width: 815px) {
  :root {
    background-size: auto calc(63.32vw + var(--machine-drop));
    background-attachment: scroll;
  }

  .machine-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    padding: 0 .75rem .75rem;
  }

  .machine-shortcuts a,
  .machine-shortcuts button {
    min-height: 44px;
    display: grid;
    place-items: center;
    text-align: center;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}