:root {
  color-scheme: dark;
  --bg: #080912;
  --bg-deep: #03040a;
  --gold: #d6aa4e;
  --gold-soft: #ffe6a6;
  --indigo: #31345f;
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(41, 42, 74, .48), transparent 46%),
    linear-gradient(145deg, var(--bg-deep), var(--bg) 48%, #0e1020);
  font-family: Arial, Helvetica, sans-serif;
}

.stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(22px, 5vw, 72px);
  perspective: 1200px;
}

.logo-wrap {
  position: relative;
  width: min(900px, 92vw);
  --mx: 0px;
  --my: 0px;
  --rx: 0deg;
  --ry: 0deg;
  transform: translate3d(var(--mx), var(--my), 0) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
  animation: entrance 1.2s cubic-bezier(.2, .8, .2, 1) both,
             float 7s ease-in-out 1.2s infinite;
  isolation: isolate;
}

.logo-wrap::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: clamp(18px, 2vw, 30px);
  background: linear-gradient(
    120deg,
    rgba(255, 239, 184, .10),
    rgba(214, 170, 78, .34),
    rgba(111, 116, 206, .18),
    rgba(255, 239, 184, .10)
  );
  background-size: 260% 260%;
  filter: blur(1px);
  opacity: .72;
  animation: borderFlow 10s linear infinite;
}

.logo-wrap::after {
  content: "";
  position: absolute;
  inset: 7% 8% -12%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(214, 170, 78, .28), transparent 67%);
  filter: blur(34px);
  opacity: .75;
  animation: breathe 4.8s ease-in-out infinite;
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(16px, 2vw, 28px);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .56),
    0 12px 38px rgba(0, 0, 0, .40),
    inset 0 1px 0 rgba(255, 255, 255, .10);
  user-select: none;
  -webkit-user-drag: none;
}

.logo-glow {
  position: absolute;
  inset: -15%;
  z-index: -3;
  border-radius: 50%;
  background:
    conic-gradient(
      from 90deg,
      transparent,
      rgba(214, 170, 78, .28),
      transparent 34%,
      rgba(77, 83, 158, .24),
      transparent 72%,
      rgba(255, 230, 166, .19),
      transparent
    );
  filter: blur(62px);
  animation: rotateGlow 18s linear infinite;
}

.ambient {
  position: fixed;
  z-index: 0;
  width: min(58vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(85px);
  opacity: .42;
  pointer-events: none;
  will-change: transform;
}

.ambient--one {
  top: -28%;
  left: -18%;
  background: radial-gradient(circle, rgba(214, 170, 78, .56), transparent 67%);
  animation: driftOne 16s ease-in-out infinite alternate;
}

.ambient--two {
  right: -24%;
  bottom: -34%;
  background: radial-gradient(circle, rgba(66, 71, 141, .72), transparent 68%);
  animation: driftTwo 18s ease-in-out infinite alternate;
}

.ambient--three {
  top: 31%;
  left: 43%;
  width: min(31vw, 420px);
  opacity: .20;
  background: radial-gradient(circle, rgba(255, 227, 153, .72), transparent 65%);
  animation: pulseAmbient 7s ease-in-out infinite;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  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='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

@keyframes entrance {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, -80px) scale(.94);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translate3d(var(--mx), var(--my), 0) rotateX(var(--rx)) rotateY(var(--ry)) scale(1);
    filter: blur(0);
  }
}

@keyframes float {
  0%, 100% { transform: translate3d(var(--mx), var(--my), 0) rotateX(var(--rx)) rotateY(var(--ry)); }
  50% { transform: translate3d(var(--mx), calc(var(--my) - 9px), 0) rotateX(var(--rx)) rotateY(var(--ry)); }
}

@keyframes borderFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes rotateGlow {
  to { transform: rotate(360deg); }
}

@keyframes breathe {
  0%, 100% { transform: scale(.94); opacity: .48; }
  50% { transform: scale(1.08); opacity: .82; }
}

@keyframes driftOne {
  from { transform: translate3d(-4%, -3%, 0) scale(.94); }
  to { transform: translate3d(18%, 14%, 0) scale(1.13); }
}

@keyframes driftTwo {
  from { transform: translate3d(8%, 6%, 0) scale(1.05); }
  to { transform: translate3d(-18%, -12%, 0) scale(.91); }
}

@keyframes pulseAmbient {
  0%, 100% { transform: translate(-50%, -50%) scale(.82); opacity: .12; }
  50% { transform: translate(-50%, -50%) scale(1.18); opacity: .28; }
}

@media (max-width: 640px) {
  .stage {
    padding: 18px;
  }

  .logo-wrap {
    width: min(96vw, 600px);
  }

  .logo-wrap::after {
    filter: blur(24px);
  }

  .logo-glow {
    filter: blur(42px);
  }
}

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