/* Small, slow movements give the quiet office a little life. */
.coffee-steam {
  opacity: 1;
  transition: opacity 180ms ease;
  filter: blur(0.85px);
}
.steam-wisp {
  transform-box: fill-box;
  transform-origin: center bottom;
  opacity: 0.12;
  animation: office-steam 6s ease-in-out infinite;
}
.steam-wisp-two {
  animation-duration: 7s;
  animation-delay: -3.5s;
}
.steam-wisp-three {
  animation-duration: 6.5s;
  animation-delay: -1.6s;
}
[data-time="night"] .coffee-steam {
  opacity: 0.8;
}
[data-coffee] .coffee-steam,
[data-coffee-fill="empty"] .coffee-steam {
  opacity: 0;
}
.coffee-cup-content {
  opacity: var(--coffee-desk-opacity, 1);
  filter: brightness(1);
  transition: filter 1.1s ease;
}
[data-time="night"] .coffee-cup-content { filter: brightness(.63); }
.coffee-empty,
[data-coffee-fill="empty"] .coffee-full { display: none; }
[data-coffee-fill="empty"] .coffee-empty { display: inline; }
.office-idle-screen {
  opacity: 0.55;
  transition: opacity 0.3s;
}
.idle-code-stream {
  opacity: 0.55;
  animation: office-code-drift 12s ease-in-out infinite;
}
.idle-screen-caret {
  animation: office-screen-caret 2.2s ease-in-out infinite;
}
[data-build="building"] .office-idle-screen,
[data-build="complete"] .office-idle-screen,
[data-page-screen="true"] .office-idle-screen {
  opacity: 0;
}
.office-landing:not(.in-view) .steam-wisp,
.office-landing:not(.in-view) .idle-code-stream,
.office-landing:not(.in-view) .idle-screen-caret,
.tab-hidden .steam-wisp,
.tab-hidden .idle-code-stream,
.tab-hidden .idle-screen-caret {
  animation-play-state: paused;
}
@keyframes office-steam {
  0% {
    opacity: 0;
    transform: translate(0, 4px) scaleX(0.95);
  }
  30% {
    opacity: 0.68;
  }
  70% {
    opacity: 0.32;
  }
  100% {
    opacity: 0;
    transform: translate(3px, -18px) scaleX(1.05);
  }
}
@keyframes office-code-drift {
  0%,
  65% {
    opacity: 0.5;
    transform: translateY(0);
  }
  82% {
    opacity: 0.5;
    transform: translateY(-7px);
  }
  91% {
    opacity: 0;
    transform: translateY(-7px);
  }
  92% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 0.5;
    transform: translateY(0);
  }
}
@keyframes office-screen-caret {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.75;
  }
}
@media (prefers-reduced-motion: reduce) {
  .coffee-steam {
    display: none;
  }
}
.motion-paused .coffee-steam {
  display: none;
}