:root {
  --bg: #17173a;
  --bg-deep: #0b0b22;
  --gold: #e6c98f;
  --gold-soft: rgba(230, 201, 143, 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at center, var(--bg) 0%, #131333 45%, var(--bg-deep) 100%);
  cursor: default;
}

#stars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.aura {
  position: fixed;
  left: 50%; top: 50%;
  width: 90vmin; height: 90vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 201, 143, 0.16) 0%, rgba(230, 201, 143, 0.05) 35%, transparent 65%);
  filter: blur(20px);
  animation: breathe 6s ease-in-out infinite;
  pointer-events: none;
}

.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.stage > * { grid-area: 1 / 1; }

.logo-wrap {
  position: relative;
  width: min(70vmin, 620px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
  opacity: 0;
  animation: reveal 2.2s cubic-bezier(.2, .8, .2, 1) 0.3s forwards;
}

.logo {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-mask-image: radial-gradient(circle, #000 48%, transparent 68%);
          mask-image: radial-gradient(circle, #000 48%, transparent 68%);
  filter: drop-shadow(0 0 30px rgba(230, 201, 143, 0.25));
  animation: glow 4s ease-in-out infinite;
}

/* light sweep across the logo */
.shine {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}
.shine::before {
  content: "";
  position: absolute;
  top: -50%; left: -150%;
  width: 60%; height: 200%;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 200, 0.35), transparent);
  transform: rotate(15deg);
  animation: sweep 5s ease-in-out 2.5s infinite;
}

.ring {
  border-radius: 50%;
  border: 1px solid var(--gold-soft);
  pointer-events: none;
  opacity: 0;
  animation: fadeIn 2s ease 1s forwards, spin 40s linear infinite;
}
.ring-1 {
  width: min(62vmin, 560px); aspect-ratio: 1;
  border-style: dashed;
  border-color: rgba(230, 201, 143, 0.18);
}
.ring-2 {
  width: min(78vmin, 700px); aspect-ratio: 1;
  border-color: rgba(230, 201, 143, 0.1);
  border-top-color: rgba(230, 201, 143, 0.6);
  animation: fadeIn 2s ease 1.3s forwards, spin 12s linear infinite reverse;
}
.ring-3 {
  width: min(94vmin, 840px); aspect-ratio: 1;
  border-color: rgba(230, 201, 143, 0.06);
  border-left-color: rgba(230, 201, 143, 0.4);
  border-right-color: rgba(230, 201, 143, 0.4);
  animation: fadeIn 2s ease 1.6s forwards, spin 25s linear infinite;
}

.orbit {
  width: min(78vmin, 700px); aspect-ratio: 1;
  pointer-events: none;
  animation: spin 9s linear infinite;
  opacity: 0;
  animation: fadeIn 2s ease 2s forwards, spin 9s linear infinite;
}
.orbit span {
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #fff3d6;
  box-shadow: 0 0 12px 4px var(--gold), 0 0 40px 10px rgba(230, 201, 143, 0.4);
}
.orbit-rev {
  width: min(94vmin, 840px);
  animation: fadeIn 2s ease 2.3s forwards, spin 16s linear infinite reverse;
}
.orbit-rev span { width: 5px; height: 5px; margin-left: -2.5px; top: -2.5px; }

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

@keyframes reveal {
  0%   { opacity: 0; transform: scale(0.85); filter: blur(12px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(230, 201, 143, 0.18)); }
  50%      { filter: drop-shadow(0 0 45px rgba(230, 201, 143, 0.45)); }
}
@keyframes breathe {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}
@keyframes sweep {
  0%   { left: -150%; }
  45%, 100% { left: 180%; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { to { opacity: 1; } }

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