/*
Theme Name: SANOR Maintenance
Theme URI: https://sanor.com/
Author: SANOR
Description: Full-screen animated SANOR gradient maintenance page.
Version: 1.0.0
Text Domain: sanor-maintenance
*/

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@800&display=swap');

:root {
  --sanor-ink: #0b2f16;
  --sanor-mint: #b9efbe;
  --sanor-green: #59e269;
  --sanor-aqua: #a9e9c4;
  --sanor-lime: #dced86;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--sanor-mint);
}

.sanor-maintenance {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--sanor-mint),
    var(--sanor-green) 40%,
    var(--sanor-aqua) 75%,
    var(--sanor-lime)
  );
}

.sanor-maintenance::before,
.sanor-maintenance::after {
  position: absolute;
  z-index: -1;
  width: 110vmax;
  height: 110vmax;
  border-radius: 50%;
  content: "";
  filter: blur(7vmax) saturate(1.18);
  opacity: 0.82;
  will-change: transform;
}

.sanor-maintenance::before {
  top: -72vmax;
  left: -55vmax;
  background:
    radial-gradient(circle at 32% 38%, rgba(247, 255, 184, 0.92) 0 17%, transparent 46%),
    radial-gradient(circle at 70% 70%, rgba(56, 216, 111, 0.86) 0 22%, transparent 51%);
  animation: sanor-drift-one 17s ease-in-out infinite alternate;
}

.sanor-maintenance::after {
  right: -61vmax;
  bottom: -76vmax;
  background:
    radial-gradient(circle at 38% 34%, rgba(98, 229, 188, 0.84) 0 20%, transparent 49%),
    radial-gradient(circle at 70% 63%, rgba(226, 241, 119, 0.9) 0 18%, transparent 50%);
  animation: sanor-drift-two 21s ease-in-out infinite alternate;
}

.sanor-wordmark {
  color: var(--sanor-ink);
  font-family: "Sora", Arial, sans-serif;
  font-size: clamp(2.25rem, 7vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 1;
  text-rendering: geometricPrecision;
}

@keyframes sanor-drift-one {
  0% {
    transform: translate3d(-3vw, -2vh, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate3d(24vw, 18vh, 0) rotate(27deg) scale(1.12);
  }
  100% {
    transform: translate3d(42vw, 31vh, 0) rotate(54deg) scale(0.96);
  }
}

@keyframes sanor-drift-two {
  0% {
    transform: translate3d(3vw, 2vh, 0) rotate(0deg) scale(0.98);
  }
  50% {
    transform: translate3d(-23vw, -17vh, 0) rotate(-31deg) scale(1.1);
  }
  100% {
    transform: translate3d(-39vw, -29vh, 0) rotate(-58deg) scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sanor-maintenance::before,
  .sanor-maintenance::after {
    animation: none;
  }
}