:root {
  --ink: #fff7f0;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #080505;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
}

.maintenance-page {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow: hidden;
  padding: 28px;
}

.maintenance-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(28, 7, 8, 0.22), rgba(6, 5, 5, 0.84)),
    radial-gradient(circle at 50% 20%, rgba(241, 120, 152, 0.22), transparent 42%),
    url("./assets/moe-hero.avif") center / cover no-repeat;
  filter: saturate(0.92) contrast(1.08);
  transform: scale(1.12);
  animation: slowZoomOut 18s ease-out forwards;
}

.maintenance-backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at center, transparent 0 30%, rgba(0, 0, 0, 0.58) 82%),
    linear-gradient(135deg, rgba(94, 16, 18, 0.18), rgba(0, 0, 0, 0.18));
}

.pattern-mode .maintenance-backdrop {
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 157, 181, 0.16), transparent 34%),
    linear-gradient(180deg, #17080c, #080505 72%);
  filter: none;
  animation: none;
  transform: scale(1);
}

.pattern-mode .maintenance-backdrop::after {
  background:
    radial-gradient(circle at center, transparent 0 42%, rgba(0, 0, 0, 0.34) 82%),
    linear-gradient(135deg, rgba(241, 120, 152, 0.12), rgba(0, 0, 0, 0.14));
}

.pattern-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 340ms ease;
}

.pattern-mode .pattern-field {
  opacity: 1;
}

.pattern-mark {
  position: absolute;
  width: var(--pattern-size, 70px);
  height: auto;
  opacity: var(--pattern-opacity, 0.38);
  transform: translate(-50%, -50%) rotate(var(--pattern-rotate, 0deg));
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.22));
  animation: patternDrift var(--pattern-duration, 14s) ease-in-out infinite;
  animation-delay: var(--pattern-delay, 0s);
}

.pattern-at {
  opacity: var(--pattern-opacity, 0.24);
  mix-blend-mode: screen;
}

.p1 {
  --pattern-size: 70px;
  --pattern-opacity: 0.34;
  --pattern-rotate: -18deg;
  left: 11%;
  top: 17%;
}

.p2 {
  --pattern-size: 92px;
  --pattern-opacity: 0.22;
  --pattern-rotate: 12deg;
  left: 31%;
  top: 14%;
}

.p3 {
  --pattern-size: 48px;
  --pattern-opacity: 0.48;
  --pattern-rotate: 32deg;
  left: 78%;
  top: 18%;
}

.p4 {
  --pattern-size: 132px;
  --pattern-opacity: 0.16;
  --pattern-rotate: -21deg;
  left: 90%;
  top: 41%;
}

.p5 {
  --pattern-size: 88px;
  --pattern-opacity: 0.26;
  --pattern-rotate: 11deg;
  left: 17%;
  top: 58%;
}

.p6 {
  --pattern-size: 74px;
  --pattern-opacity: 0.2;
  --pattern-rotate: 24deg;
  left: 57%;
  top: 62%;
}

.p7 {
  --pattern-size: 44px;
  --pattern-opacity: 0.42;
  --pattern-rotate: -44deg;
  left: 71%;
  top: 82%;
}

.p8 {
  --pattern-size: 118px;
  --pattern-opacity: 0.14;
  --pattern-rotate: 8deg;
  left: 8%;
  top: 88%;
}

.p9 {
  --pattern-size: 58px;
  --pattern-opacity: 0.36;
  --pattern-rotate: 54deg;
  left: 44%;
  top: 36%;
}

.p10 {
  --pattern-size: 68px;
  --pattern-opacity: 0.18;
  --pattern-rotate: -8deg;
  --pattern-duration: 16s;
  --pattern-delay: -6s;
  left: 83%;
  top: 66%;
}

.p11 {
  --pattern-size: 38px;
  --pattern-opacity: 0.5;
  --pattern-rotate: 27deg;
  --pattern-duration: 12s;
  --pattern-delay: -3s;
  left: 35%;
  top: 78%;
}

.p12 {
  --pattern-size: 104px;
  --pattern-opacity: 0.12;
  --pattern-rotate: 38deg;
  --pattern-duration: 20s;
  --pattern-delay: -11s;
  left: 52%;
  top: 9%;
}

.p13 {
  --pattern-size: 52px;
  --pattern-opacity: 0.31;
  --pattern-rotate: -66deg;
  --pattern-duration: 18s;
  --pattern-delay: -8s;
  left: 94%;
  top: 88%;
}

.p14 {
  --pattern-size: 80px;
  --pattern-opacity: 0.17;
  --pattern-rotate: -36deg;
  --pattern-duration: 15s;
  --pattern-delay: -4s;
  left: 24%;
  top: 35%;
}

.maintenance-logo {
  position: relative;
  z-index: 2;
  width: min(74vw, 340px);
  height: auto;
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, 0.54));
  opacity: 0;
  transform: translateY(18px) scale(0.94);
  animation: logoReveal 950ms cubic-bezier(0.16, 1, 0.3, 1) 180ms forwards;
}

.maintenance-socials {
  position: fixed;
  bottom: 30px;
  left: 50%;
  z-index: 3;
  display: flex;
  gap: 14px;
  transform: translateX(-50%);
}

.maintenance-social {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: rgba(255, 247, 240, 0.9);
  background: rgba(255, 207, 218, 0.12);
  border: 1px solid rgba(255, 197, 211, 0.26);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  backdrop-filter: blur(18px);
  animation: socialReveal 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition:
    background 180ms ease,
    transform 180ms ease;
}

.maintenance-social:nth-child(1) {
  animation-delay: 920ms;
}

.maintenance-social:nth-child(2) {
  animation-delay: 1010ms;
}

.maintenance-social:nth-child(3) {
  animation-delay: 1100ms;
}

.maintenance-social:hover {
  background: rgba(255, 152, 178, 0.28);
  transform: translateY(-2px) scale(1);
}

.maintenance-social svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

@keyframes slowZoomOut {
  from {
    transform: scale(1.12);
  }

  to {
    transform: scale(1);
  }
}

@keyframes patternDrift {
  0% {
    transform: translate(-50%, -50%) translate3d(0, 0, 0)
      rotate(var(--pattern-rotate, 0deg)) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) translate3d(10px, -14px, 0)
      rotate(calc(var(--pattern-rotate, 0deg) + 10deg)) scale(1.04);
  }

  100% {
    transform: translate(-50%, -50%) translate3d(0, 0, 0)
      rotate(var(--pattern-rotate, 0deg)) scale(1);
  }
}

@keyframes logoReveal {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes socialReveal {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 520px) {
  .maintenance-page {
    padding: 18px;
  }

  .maintenance-logo {
    width: min(82vw, 280px);
  }

  .maintenance-socials {
    bottom: 20px;
  }

  .maintenance-social {
    width: 44px;
    height: 44px;
  }

  .p1 {
    left: 12%;
    top: 13%;
  }

  .p2 {
    left: 73%;
    top: 16%;
  }

  .p4 {
    left: 92%;
    top: 47%;
  }

  .p5 {
    left: 11%;
    top: 72%;
  }

  .p6 {
    left: 58%;
    top: 76%;
  }

  .p8 {
    left: 2%;
    top: 94%;
  }

  .p10 {
    left: 86%;
    top: 66%;
  }

  .p11 {
    left: 34%;
    top: 84%;
  }

  .p12 {
    left: 50%;
    top: 7%;
  }

  .p13 {
    left: 94%;
    top: 92%;
  }

  .p14 {
    left: 27%;
    top: 43%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}