.maintenance-page .not-found__badge {
  color: #7f58d7;
}

.maintenance-page .not-found__pillow-wrap {
  width: 20rem;
  height: 17.5rem;
  margin-top: 1.2rem;
}

.maintenance-tea {
  --tea-scale: 1;
  position: relative;
  width: 18rem;
  height: 16.4rem;
  display: grid;
  place-items: center;
  animation: teaFloat 6.2s ease-in-out infinite;
}

.maintenance-tea__steam-field {
  position: absolute;
  top: 0.1rem;
  left: 50%;
  width: 15.4rem;
  height: 8.4rem;
  transform: translateX(-50%);
  pointer-events: none;
}

.maintenance-tea__steam {
  position: absolute;
  bottom: 0.9rem;
  width: 3.2rem;
  height: 5.8rem;
  border-radius: 999px;
  border-left: 2px solid rgba(160, 123, 235, 0.26);
  border-top: 2px solid rgba(255, 214, 232, 0.42);
  filter: drop-shadow(0 0 10px rgba(191, 157, 255, 0.22));
  opacity: 0.7;
  animation: teaSteam 4.8s ease-in-out infinite;
}

.maintenance-tea__steam--one {
  --steam-rotate: -16deg;
  left: 3.1rem;
  transform: rotate(var(--steam-rotate));
}

.maintenance-tea__steam--two {
  --steam-rotate: 8deg;
  left: 6.5rem;
  height: 6.5rem;
  transform: rotate(var(--steam-rotate));
  animation-delay: 0.7s;
}

.maintenance-tea__steam--three {
  --steam-rotate: 18deg;
  right: 3.4rem;
  transform: rotate(var(--steam-rotate));
  animation-delay: 1.4s;
}

.maintenance-tea__constellation {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.maintenance-tea__constellation path {
  fill: none;
  stroke: rgba(150, 111, 226, 0.38);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  animation: teaConstellationDraw 5.8s ease-in-out infinite;
}

.maintenance-tea__constellation path:nth-of-type(2) {
  animation-delay: 0.35s;
}

.maintenance-tea__constellation circle {
  fill: #fffaf2;
  stroke: rgba(177, 139, 244, 0.46);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 9px rgba(164, 125, 242, 0.5));
  transform-origin: center;
  animation: teaStarPulse 3.6s ease-in-out infinite;
}

.maintenance-tea__constellation circle:nth-of-type(2n) {
  animation-delay: 0.7s;
}

.maintenance-tea__constellation circle:nth-of-type(3n) {
  animation-delay: 1.2s;
}

.maintenance-tea__cloud {
  position: absolute;
  left: 50%;
  bottom: 2.15rem;
  width: 15.5rem;
  height: 4.2rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 40%, rgba(255, 255, 255, 0.92) 0 2.8rem, transparent 2.9rem),
    radial-gradient(circle at 42% 22%, rgba(255, 246, 255, 0.94) 0 3.2rem, transparent 3.3rem),
    radial-gradient(circle at 70% 38%, rgba(255, 255, 255, 0.9) 0 2.8rem, transparent 2.9rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(239, 226, 255, 0.58));
  box-shadow: 0 18px 38px rgba(142, 111, 209, 0.14);
  opacity: 0.9;
}

.maintenance-tea__cloud span {
  position: absolute;
  top: -1.15rem;
  width: 3.7rem;
  height: 3.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(0.2px);
}

.maintenance-tea__cloud span:nth-child(1) {
  left: 1.4rem;
}

.maintenance-tea__cloud span:nth-child(2) {
  top: -1.75rem;
  left: 5.8rem;
  width: 4.5rem;
  height: 4.5rem;
}

.maintenance-tea__cloud span:nth-child(3) {
  right: 1.8rem;
}

.maintenance-tea__saucer {
  position: absolute;
  bottom: 3.1rem;
  left: 50%;
  width: 11.6rem;
  height: 2.25rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0 38%, rgba(255, 222, 235, 0.82) 39% 66%, rgba(193, 159, 248, 0.62) 100%);
  box-shadow:
    0 18px 38px rgba(132, 96, 206, 0.18),
    inset 0 3px 10px rgba(255, 255, 255, 0.72);
}

.maintenance-tea__cup {
  position: absolute;
  bottom: 4.2rem;
  left: 50%;
  width: 8.7rem;
  height: 5.9rem;
  overflow: hidden;
  transform: translateX(-50%);
  border-radius: 1.2rem 1.2rem 2.5rem 2.5rem;
  background:
    radial-gradient(circle at 27% 26%, rgba(255, 255, 255, 0.98) 0 1.25rem, transparent 1.3rem),
    linear-gradient(135deg, #fff8df 0%, #ffd9e7 42%, #cdb3ff 100%);
  box-shadow:
    inset 14px 15px 22px rgba(255, 255, 255, 0.48),
    inset -13px -16px 24px rgba(118, 85, 187, 0.13),
    0 20px 44px rgba(151, 116, 221, 0.23);
}

.maintenance-tea__cup::before {
  content: '';
  position: absolute;
  top: 0.58rem;
  right: 0.9rem;
  left: 0.9rem;
  height: 0.85rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(139, 108, 219, 0.2), rgba(255, 255, 255, 0.62), rgba(231, 177, 62, 0.24));
}

.maintenance-tea__tea {
  position: absolute;
  top: 0.76rem;
  right: 1.05rem;
  left: 1.05rem;
  height: 0.48rem;
  border-radius: 999px;
  background: rgba(151, 102, 220, 0.42);
  box-shadow: 0 0 18px rgba(177, 139, 244, 0.38);
}

.maintenance-tea__shine {
  position: absolute;
  top: 1.9rem;
  left: 1.55rem;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  filter: blur(1px);
}

.maintenance-tea__label {
  position: absolute;
  top: 2.65rem;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  color: #fffaf8;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 5px 16px rgba(89, 57, 152, 0.22);
  text-transform: uppercase;
}

.maintenance-tea__handle {
  position: absolute;
  right: 3.05rem;
  bottom: 5.25rem;
  width: 3.2rem;
  height: 3.9rem;
  border: 0.75rem solid rgba(214, 187, 255, 0.82);
  border-left: 0;
  border-radius: 0 999px 999px 0;
  box-shadow:
    inset -5px 4px 12px rgba(255, 255, 255, 0.42),
    0 10px 22px rgba(126, 88, 203, 0.12);
}

.maintenance-tea__spark {
  position: absolute;
  z-index: 3;
  color: #fffdf7;
  text-shadow: 0 0 18px rgba(158, 115, 237, 0.48);
  animation: twinklePastel 3.6s ease-in-out infinite;
}

.maintenance-tea__spark--one {
  top: 2.35rem;
  left: 2.25rem;
  font-size: 1.18rem;
}

.maintenance-tea__spark--two {
  top: 4.1rem;
  right: 1.8rem;
  color: #b892ff;
  font-size: 1rem;
  animation-delay: 0.8s;
}

.maintenance-tea__spark--three {
  bottom: 5.25rem;
  left: 1.45rem;
  color: #ffd7eb;
  font-size: 0.9rem;
  animation-delay: 1.6s;
}

.maintenance-page .not-found__primary:disabled {
  cursor: progress;
  opacity: 0.76;
}

@keyframes teaFloat {
  0%, 100% {
    transform: translateY(0) rotate(-1.4deg) scale(var(--tea-scale));
  }

  50% {
    transform: translateY(-10px) rotate(1.2deg) scale(var(--tea-scale));
  }
}

@keyframes teaSteam {
  0%, 100% {
    opacity: 0.36;
    transform: translateY(8px) scale(0.95) rotate(var(--steam-rotate));
  }

  50% {
    opacity: 0.9;
    transform: translateY(-8px) scale(1.05) rotate(var(--steam-rotate));
  }
}

@keyframes teaConstellationDraw {
  0% {
    opacity: 0;
    stroke-dashoffset: 190;
  }

  18%, 68% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: -190;
  }
}

@keyframes teaStarPulse {
  0%, 100% {
    opacity: 0.62;
    transform: scale(0.84);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

@media (max-width: 640px) {
  .maintenance-page .not-found__pillow-wrap {
    width: 16.5rem;
    height: 15rem;
  }

  .maintenance-tea {
    --tea-scale: 0.86;
  }
}
