.office-weather {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  --weather-cycle: 54s;
  --flash-room: 0.55;
  --flash-shade: 0.1;
}
[data-time="night"] .office-weather {
  --flash-room: 0.9;
  --flash-shade: 0.22;
}
.weather-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.weather-rain {
  opacity: 0.85;
}
.motion-paused .weather-canvas {
  visibility: hidden;
}
.weather-clouds {
  opacity: 0;
  animation: office-cloudfront var(--weather-cycle) ease-in-out infinite;
}
[data-season="winter"] .weather-clouds {
  animation-name: office-winter-cover;
}
.weather-cloud-drift {
  animation: office-cloud-drift 18s ease-in-out infinite alternate;
  will-change: transform;
}
.weather-glass-drops {
  opacity: 0.5;
}
.weather-drop {
  animation: office-glass-drop 5s ease-in infinite;
}
.weather-drop:nth-child(2n) {
  animation-delay: -2.3s;
  animation-duration: 6.5s;
}
.weather-drop:nth-child(3n) {
  animation-delay: -3.6s;
}
.weather-lightning,
.weather-window-glow {
  opacity: 0;
  animation: office-distant-lightning var(--weather-cycle) linear infinite;
}
.weather-window-glow {
  stroke-opacity: 0.45;
}
/* The same strikes, seen inside the room. */
.weather-room-shade {
  opacity: 0;
  animation: office-room-shade var(--weather-cycle) linear infinite;
}
.weather-room-flash {
  opacity: 0;
  animation: office-room-lightning var(--weather-cycle) linear infinite;
}
[data-time="night"] .weather-window-glow {
  stroke-opacity: 0.7;
}
.office-starting .office-weather *,
.office-landing:not(.in-view) .office-weather *,
.tab-hidden .office-weather * {
  animation-play-state: paused;
}
.motion-paused .office-weather {
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .office-weather,
  .weather-canvas {
    display: none;
  }
}
@keyframes office-cloudfront {
  0%,
  7%,
  80%,
  100% {
    opacity: 0;
  }
  20% {
    opacity: 0.35;
  }
  38%,
  49% {
    opacity: 0.63;
  }
  65% {
    opacity: 0.28;
  }
}
@keyframes office-winter-cover {
  0%,
  100% {
    opacity: 0.3;
  }
  45% {
    opacity: 0.6;
  }
}
@keyframes office-cloud-drift {
  from {
    transform: translate(-45px, 0);
  }
  to {
    transform: translate(35px, 10px);
  }
}
@keyframes office-glass-drop {
  0% {
    opacity: 0;
    transform: translate(0, -12px);
  }
  24% {
    opacity: 0.7;
  }
  80% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: translate(0, 50px);
  }
}
/* Two strikes per passing storm; the first one stutters like a real flash. */
@keyframes office-distant-lightning {
  0%,
  37.9%,
  38.6%,
  38.9%,
  39.5%,
  49.1%,
  50.7%,
  100% {
    opacity: 0;
  }
  38.1% {
    opacity: 0.7;
  }
  38.4% {
    opacity: 0.25;
  }
  38.75% {
    opacity: 0.65;
  }
  49.5% {
    opacity: 0.5;
  }
}
@keyframes office-room-lightning {
  0%,
  37.9%,
  38.6%,
  38.9%,
  39.6%,
  49.1%,
  50.8%,
  100% {
    opacity: 0;
  }
  38.1% {
    opacity: var(--flash-room);
  }
  38.4% {
    opacity: calc(var(--flash-room) * 0.35);
  }
  38.75% {
    opacity: var(--flash-room);
  }
  49.5% {
    opacity: calc(var(--flash-room) * 0.75);
  }
}
@keyframes office-room-shade {
  0%,
  37.9%,
  39.8%,
  49.1%,
  51%,
  100% {
    opacity: 0;
  }
  38.1%,
  38.9% {
    opacity: var(--flash-shade);
  }
  49.5% {
    opacity: calc(var(--flash-shade) * 0.8);
  }
}