:root {
  color-scheme: dark;
  --mx: 50%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #03040a;
}

body {
  min-height: 100svh;
  font-family: system-ui, sans-serif;
  isolation: isolate;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(35, 210, 255, .08), transparent 30%),
    radial-gradient(circle at 70% 38%, rgba(143, 60, 255, .10), transparent 35%),
    linear-gradient(150deg, #02030a 0%, #070817 48%, #02030a 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -5;
  background: radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,.42) 70%, rgba(0,0,0,.9) 100%);
  pointer-events: none;
}

#particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -4;
  opacity: .65;
}

.aurora {
  position: fixed;
  width: 50vw;
  height: 50vw;
  max-width: 760px;
  max-height: 760px;
  border-radius: 50%;
  filter: blur(95px);
  opacity: .13;
  z-index: -3;
  mix-blend-mode: screen;
  animation: drift 13s ease-in-out infinite alternate;
}

.aurora-one {
  left: -14vw;
  top: -16vw;
  background: #00d9ff;
}

.aurora-two {
  right: -14vw;
  bottom: -18vw;
  background: #8b2cff;
  animation-delay: -6s;
}

.grid {
  position: fixed;
  left: -20%;
  right: -20%;
  bottom: -43%;
  height: 76%;
  z-index: -2;
  opacity: .17;
  transform: perspective(580px) rotateX(66deg);
  transform-origin: center top;
  background-image:
    linear-gradient(rgba(43, 212, 255, .21) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145, 63, 255, .18) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%);
  animation: gridMove 10s linear infinite;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 5;
  opacity: .035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(18px, 5vw, 80px);
  perspective: 1100px;
}

.logo-scene {
  position: relative;
  width: min(86vw, 1080px);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  animation: reveal 1.45s cubic-bezier(.16,1,.3,1) both, float 6s ease-in-out 1.45s infinite;
  will-change: transform, opacity, filter;
}

.logo {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.18))
    drop-shadow(-16px 8px 24px rgba(0,210,255,.24))
    drop-shadow(18px 8px 28px rgba(124,44,255,.28));
}

.halo {
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 8%;
  top: 22%;
  bottom: 15%;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(0,220,255,.28), rgba(112,45,255,.33));
  filter: blur(65px);
  opacity: .5;
  animation: pulse 3.8s ease-in-out infinite;
}

.scanline {
  position: absolute;
  z-index: 4;
  left: 4%;
  right: 4%;
  height: 2px;
  top: 18%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  box-shadow: 0 0 18px #40e4ff;
  animation: scan 5.2s ease-in-out 2.1s infinite;
  pointer-events: none;
}

.reflection {
  position: absolute;
  z-index: 1;
  top: 71%;
  left: 7%;
  width: 86%;
  transform: scaleY(-.31);
  transform-origin: top;
  opacity: .16;
  filter: blur(2px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 78%);
  pointer-events: none;
}

.reflection img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes reveal {
  0% { opacity: 0; transform: translateY(26px) scale(.88); filter: blur(15px); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

@keyframes pulse {
  0%, 100% { opacity: .36; transform: scale(.96); }
  50% { opacity: .62; transform: scale(1.07); }
}

@keyframes scan {
  0%, 12% { top: 18%; opacity: 0; }
  18% { opacity: .85; }
  48% { top: 82%; opacity: .25; }
  55%, 100% { top: 82%; opacity: 0; }
}

@keyframes drift {
  from { transform: translate3d(-2vw, -1vw, 0) scale(.9); }
  to { transform: translate3d(8vw, 6vw, 0) scale(1.13); }
}

@keyframes gridMove {
  to { background-position: 0 58px, 0 0; }
}

@media (max-width: 700px) {
  .logo-scene { width: min(96vw, 720px); }
  .grid { bottom: -33%; height: 68%; background-size: 42px 42px; }
  .reflection { opacity: .10; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .logo-scene { transform: none !important; }
}