.pivenkaIntro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: radial-gradient(ellipse at center, #fff9e4 0%, #fffdf7 65%);
  color: #55422b;
  text-align: center;
  cursor: default;
  animation: pivenka-intro-out 1350ms ease both;
}

.pivenkaIntroContent {
  display: grid;
  justify-items: center;
  gap: .6rem;
}

.pivenkaIntroMug {
  width: clamp(5rem, 25vw, 8.25rem);
  height: auto;
  animation: pivenka-intro-mug 370ms cubic-bezier(.18, .75, .3, 1) both;
}

.pivenkaIntroWordmark {
  width: clamp(8.5rem, 42vw, 13.5rem);
  height: auto;
  animation: pivenka-intro-rise 290ms 100ms ease-out both;
}

.pivenkaIntroTagline {
  margin: .05rem 0 0;
  font: 600 clamp(.88rem, 3.4vw, 1rem)/1.45 system-ui, sans-serif;
  animation: pivenka-intro-rise 290ms 220ms ease-out both;
}

@keyframes pivenka-intro-mug {
  from { opacity: 0; transform: translateY(.55rem) rotate(-7deg) scale(.94); }
  to { opacity: 1; transform: none; }
}

@keyframes pivenka-intro-rise {
  from { opacity: 0; transform: translateY(.4rem); }
  to { opacity: 1; transform: none; }
}

@keyframes pivenka-intro-out {
  0%, 82% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .pivenkaIntro { display: none; }
}