:root {
  --violet: 135 46 255;
  --violet-hot: 174 81 255;
  --page-bg: #000;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--page-bg);
}

body {
  min-height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
}

.stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(var(--violet), .085) 0, rgba(var(--violet), .028) 22%, transparent 48%),
    radial-gradient(ellipse at 50% 110%, rgba(var(--violet), .055) 0, transparent 42%),
    #000;
}

.ambient {
  position: absolute;
  width: min(80vw, 1100px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: .22;
  mix-blend-mode: screen;
}

.ambient-a {
  left: -28vw;
  top: 18vh;
  background: radial-gradient(circle, rgba(var(--violet), .22), transparent 65%);
  animation: driftA 20s ease-in-out infinite alternate;
}

.ambient-b {
  right: -30vw;
  bottom: -30vh;
  background: radial-gradient(circle, rgba(var(--violet-hot), .16), transparent 68%);
  animation: driftB 24s ease-in-out infinite alternate;
}

.halo {
  position: absolute;
  width: min(78vw, 920px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(var(--violet-hot), .10) 0,
      rgba(var(--violet), .06) 23%,
      rgba(var(--violet), .025) 43%,
      transparent 68%);
  filter: blur(34px);
  opacity: .8;
  animation: haloBreath 7s ease-in-out infinite;
}

.logo-wrap {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  width: min(72vw, 920px);
  aspect-ratio: 1;
  transform:
    perspective(1200px)
    rotateX(var(--rx))
    rotateY(var(--ry))
    translateZ(0);
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
  will-change: transform;
  z-index: 5;
}

.logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    contrast(1.055)
    brightness(1.02)
    drop-shadow(0 0 14px rgba(var(--violet), .14))
    drop-shadow(0 0 45px rgba(var(--violet), .08));
  animation: logoBreath 6s ease-in-out infinite;
}

.logo-aura {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(var(--violet-hot), .12) 0,
    rgba(var(--violet), .055) 34%,
    transparent 72%);
  filter: blur(48px);
  transform: translateZ(-40px);
  opacity: .9;
  animation: auraBreath 6s ease-in-out infinite;
}

.specular {
  position: absolute;
  inset: 17% 8%;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 22%,
    rgba(255,255,255,.025) 39%,
    rgba(255,255,255,.075) 50%,
    rgba(255,255,255,.025) 60%,
    transparent 78%
  );
  mix-blend-mode: screen;
  transform: translateX(-115%) skewX(-8deg);
  animation: specularSweep 9s cubic-bezier(.4,0,.2,1) infinite;
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  background:
    radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.22) 67%, rgba(0,0,0,.78) 100%);
}

.grain {
  position: absolute;
  inset: -50%;
  z-index: 30;
  pointer-events: none;
  opacity: .035;
  background-image:
    repeating-radial-gradient(circle at 17% 32%, rgba(255,255,255,.35) 0 1px, transparent 1px 3px);
  background-size: 8px 8px;
  animation: grainShift .7s steps(2) infinite;
  mix-blend-mode: soft-light;
}

@keyframes logoBreath {
  0%, 100% {
    transform: scale(1);
    filter:
      contrast(1.055)
      brightness(1.02)
      drop-shadow(0 0 14px rgba(var(--violet), .14))
      drop-shadow(0 0 45px rgba(var(--violet), .08));
  }
  50% {
    transform: scale(1.012);
    filter:
      contrast(1.06)
      brightness(1.035)
      drop-shadow(0 0 19px rgba(var(--violet-hot), .18))
      drop-shadow(0 0 58px rgba(var(--violet), .105));
  }
}

@keyframes auraBreath {
  0%, 100% { opacity: .62; transform: translateZ(-40px) scale(.96); }
  50% { opacity: 1; transform: translateZ(-40px) scale(1.06); }
}

@keyframes haloBreath {
  0%, 100% { transform: scale(.94); opacity: .58; }
  50% { transform: scale(1.04); opacity: .92; }
}

@keyframes specularSweep {
  0%, 68% { transform: translateX(-120%) skewX(-8deg); opacity: 0; }
  72% { opacity: .55; }
  82% { opacity: .18; }
  88%, 100% { transform: translateX(120%) skewX(-8deg); opacity: 0; }
}

@keyframes driftA {
  from { transform: translate3d(-2vw, -2vh, 0) scale(.95); }
  to { transform: translate3d(9vw, 7vh, 0) scale(1.12); }
}

@keyframes driftB {
  from { transform: translate3d(4vw, 5vh, 0) scale(1.04); }
  to { transform: translate3d(-10vw, -5vh, 0) scale(.92); }
}

@keyframes grainShift {
  0% { transform: translate3d(0,0,0) rotate(0deg); }
  25% { transform: translate3d(1.5%, -1%,0) rotate(.2deg); }
  50% { transform: translate3d(-1%, 1.5%,0) rotate(-.2deg); }
  75% { transform: translate3d(.8%, .5%,0) rotate(.1deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}

@media (max-width: 700px) {
  .logo-wrap {
    width: min(94vw, 720px);
  }

  .halo {
    width: 112vw;
  }

  .ambient {
    opacity: .16;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient,
  .halo,
  .logo,
  .logo-aura,
  .specular,
  .grain {
    animation: none !important;
  }

  .logo-wrap {
    transform: none !important;
  }
}