/* home page — PS2 aurora, pure CSS */

body.home {
  height: 100dvh;
  overflow: hidden;
}

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--bg);
}

/* ------- drifting aurora mist ------- */

.mist,
.mist2 {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  filter: blur(50px);
}

.mist {
  background:
    radial-gradient(38% 48% at 32% 42%, rgba(55, 75, 210, 0.34) 0%, rgba(55, 75, 210, 0.34) 42%, rgba(40, 55, 180, 0.2) 48%, rgba(40, 55, 180, 0.2) 66%, transparent 73%),
    radial-gradient(42% 52% at 68% 62%, rgba(110, 55, 205, 0.22) 0%, rgba(110, 55, 205, 0.22) 46%, rgba(90, 45, 180, 0.12) 53%, rgba(90, 45, 180, 0.12) 70%, transparent 78%),
    radial-gradient(30% 42% at 52% 28%, rgba(40, 115, 250, 0.18) 0%, rgba(40, 115, 250, 0.18) 50%, transparent 58%);
  animation: swirl 26s ease-in-out infinite alternate;
}

.mist2 {
  background:
    radial-gradient(30% 40% at 60% 35%, rgba(70, 90, 230, 0.2), transparent 70%),
    radial-gradient(36% 46% at 38% 68%, rgba(140, 70, 230, 0.14), transparent 70%);
  animation: swirl2 34s ease-in-out infinite alternate;
}

@keyframes swirl {
  to {
    transform: rotate(9deg) scale(1.18) translate(3%, -3%);
  }
}

@keyframes swirl2 {
  from {
    transform: rotate(6deg) scale(1.1);
  }
  to {
    transform: rotate(-5deg) scale(1.02) translate(-3%, 2%);
  }
}

/* ------- slow rising motes ------- */

.motes,
.motes2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
}

/* transform-based: GPU compositing, no repaints; tile-height loops stay seamless */
.motes {
  background-image:
    radial-gradient(2.5px 2.5px at 60px 90px, rgba(170, 190, 255, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 220px 240px, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(2px 2px at 380px 140px, rgba(150, 170, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 500px 330px, rgba(255, 255, 255, 0.55), transparent 60%);
  background-size: 560px 500px;
  inset: 0 0 -500px 0;
  animation: rise 55s linear infinite;
}

.motes2 {
  background-image:
    radial-gradient(3px 3px at 140px 200px, rgba(160, 180, 255, 0.35), transparent 60%),
    radial-gradient(2px 2px at 420px 80px, rgba(255, 255, 255, 0.25), transparent 60%);
  background-size: 700px 620px;
  filter: blur(1px);
  inset: 0 0 -620px 0;
  animation: rise2 90s linear infinite;
}

@keyframes rise {
  to {
    transform: translate3d(0, -500px, 0);
  }
}

@keyframes rise2 {
  to {
    transform: translate3d(0, -620px, 0);
  }
}

/* ------- name ------- */

.hero {
  position: fixed;
  inset: 0;
  pointer-events: none; /* let clicks pass through to the nav */
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 1rem;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 4.8rem);
  font-weight: 100;
  letter-spacing: 0.35em;
  text-indent: 0.35em; /* balance the tracking */
  color: #f0f2fa;
  text-shadow:
    -1px 0 rgba(255, 70, 120, 0.35),
    1px 0 rgba(80, 220, 255, 0.35),
    0 0 30px rgba(110, 130, 255, 0.55);
}

.hero .tagline {
  margin: 1rem 0 0;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: rgba(223, 227, 240, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .mist,
  .mist2,
  .motes,
  .motes2 {
    animation: none;
  }
}