*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

:root{
  --bg:#000000;
  --cyan:#00eaff;
  --blue:#1b7cff;
  --green:#19ffb7;
  --yellow:#fff15c;
  --orange:#ff9b00;
  --red:#ff304f;
  --pink:#d53cff;
  --white:rgba(255,255,255,.95);
}

html,body{
  margin:0;
  width:100%;
  min-height:100%;
  overflow:hidden;
  background:#000;
  user-select:none;
}

body{
  position:relative;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.02), transparent 28%),
    radial-gradient(circle at 18% 22%, rgba(213,60,255,.12), transparent 22%),
    radial-gradient(circle at 82% 72%, rgba(0,234,255,.11), transparent 24%);
  animation: atmosphereShift 12s ease-in-out infinite alternate;
}

#space{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

.scene{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:20px;
  perspective:1400px;
}

.logo-wrap{
  position:relative;
  width:min(72vw, 720px);
  min-width:260px;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  animation: logoFloat 6s ease-in-out infinite;
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,.55))
    drop-shadow(0 0 36px rgba(255,48,79,.55))
    drop-shadow(0 0 62px rgba(0,234,255,.48));
}

.logo-wrap::before,
.logo-wrap::after{
  content:"";
  position:absolute;
  border-radius:50%;
  inset:-36px;
  border:1px solid rgba(0,234,255,.22);
  box-shadow:
    0 0 28px rgba(0,234,255,.20),
    inset 0 0 24px rgba(0,234,255,.08);
  animation: ringPulse 5s ease-in-out infinite;
}

.logo-wrap::after{
  inset:-76px;
  border-color:rgba(213,60,255,.20);
  box-shadow:
    0 0 40px rgba(213,60,255,.18),
    inset 0 0 32px rgba(213,60,255,.05);
  animation-delay:1.5s;
}

.logo-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  -webkit-user-drag:none;
  animation: spectrumShift 8s linear infinite;
  will-change:filter,transform;
}

.aurora{
  position:absolute;
  border-radius:999px;
  filter:blur(28px);
  opacity:.65;
  pointer-events:none;
}

.aurora-a{
  width:280px;
  height:280px;
  left:10%;
  top:16%;
  background:radial-gradient(circle, rgba(213,60,255,.22), transparent 68%);
  animation: driftA 10s ease-in-out infinite alternate;
}

.aurora-b{
  width:320px;
  height:320px;
  right:10%;
  bottom:14%;
  background:radial-gradient(circle, rgba(0,234,255,.18), transparent 68%);
  animation: driftB 11s ease-in-out infinite alternate;
}

@keyframes logoFloat{
  0%,100%{ transform:translateY(0) rotateX(0deg) scale(1); }
  50%{ transform:translateY(-18px) rotateX(8deg) scale(1.02); }
}

@keyframes ringPulse{
  0%,100%{ transform:scale(.96); opacity:.28; }
  50%{ transform:scale(1.05); opacity:.9; }
}

@keyframes spectrumShift{
  0%{
    filter:
      hue-rotate(0deg)
      drop-shadow(0 0 24px rgba(255,48,79,.55))
      drop-shadow(0 0 44px rgba(0,234,255,.35));
  }
  50%{
    filter:
      hue-rotate(35deg)
      drop-shadow(0 0 28px rgba(25,255,183,.48))
      drop-shadow(0 0 56px rgba(213,60,255,.34));
  }
  100%{
    filter:
      hue-rotate(360deg)
      drop-shadow(0 0 24px rgba(255,241,92,.48))
      drop-shadow(0 0 44px rgba(27,124,255,.38));
  }
}

@keyframes atmosphereShift{
  to{ transform:scale(1.05) rotate(2deg); opacity:.92; }
}

@keyframes driftA{
  to{ transform:translate3d(30px,-18px,0) scale(1.12); }
}

@keyframes driftB{
  to{ transform:translate3d(-26px,22px,0) scale(1.1); }
}

@media (max-width: 768px){
  .logo-wrap{
    width:min(88vw, 520px);
    min-width:220px;
  }

  .logo-wrap::before{ inset:-24px; }
  .logo-wrap::after{ inset:-52px; }

  .aurora-a, .aurora-b{
    transform:scale(.72);
  }
}

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