.quiet-focus-mark {
  display: grid;
  width: min(48%, 190px);
}
.quiet-focus-mark img {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.quiet-focus-soft { opacity: 0; }
.site-opening {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  place-items: center;
  align-content: center;
  gap: 16px;
  padding: 24px;
  background: #d9c9b4;
  color: #351e10;
  text-align: center;
  pointer-events: none;
}
.site-opening .motion-name { display: grid; gap: 5px; }
.site-opening .motion-brand {
  font: 400 24px/1.1 "TAN PEARL", serif;
  letter-spacing: .025em;
}
.site-opening .motion-descriptor {
  font: 400 11px/1.2 "Tenor Sans", sans-serif;
  letter-spacing: .07em;
}
.site-opening .motion-tagline {
  display: block;
  margin-top: 5px;
  font: 400 21px/1.2 Buffalo, cursive;
}
@media (prefers-reduced-motion: no-preference) {
  .quiet-focus.playing .quiet-focus-mark { animation: quiet-focus-settle 3.8s ease both; }
  .quiet-focus.playing .quiet-focus-soft { animation: quiet-focus-fade-soft 3.8s ease both; }
  .quiet-focus.playing .quiet-focus-sharp { animation: quiet-focus-reveal 3.8s ease both; }
  .quiet-focus.playing .reference-name { animation: monogram-name 3.8s ease both; }
  .site-opening.playing {
    display: grid;
    animation: quiet-focus-exit .45s 3.8s ease both;
  }
}
@keyframes quiet-focus-settle {
  from { transform: scale(1.1); }
  65%, to { transform: scale(1); }
}
@keyframes quiet-focus-fade-soft {
  from { opacity: .55; }
  65%, to { opacity: 0; }
}
@keyframes quiet-focus-reveal {
  from { opacity: 0; }
  65%, to { opacity: 1; }
}
@keyframes quiet-focus-exit {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}
@keyframes monogram-name {
  0%, 60% { opacity: 0; transform: translateY(6px); }
  85%, 100% { opacity: 1; transform: translateY(0); }
}