:root {
  --magic-gold: #ffe4a0;
  --magic-gold-soft: rgba(255, 228, 160, 0.18);
  --magic-purple: rgba(138, 49, 255, 0.34);
  --magic-red: rgba(255, 36, 79, 0.24);
}

.magic-page-bloom {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--magic-x, 70%) var(--magic-y, 34%), rgba(255, 228, 160, 0.13), transparent 22rem),
    radial-gradient(circle at calc(var(--magic-x, 70%) - 18%) calc(var(--magic-y, 34%) + 22%), var(--magic-purple), transparent 28rem),
    radial-gradient(circle at calc(var(--magic-x, 70%) + 18%) calc(var(--magic-y, 34%) + 4%), var(--magic-red), transparent 20rem);
  mix-blend-mode: screen;
  opacity: 0.62;
}

body.steffs-magic-loaded main,
body.steffs-magic-loaded .app,
body.steffs-magic-loaded .site-header,
body.steffs-magic-loaded .back-to-steffsweb {
  position: relative;
  z-index: 2;
}

.magic-cursor-star {
  position: fixed;
  z-index: 10050;
  color: var(--magic-gold);
  font-family: Cinzel, Georgia, serif;
  font-size: 0.82rem;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(255, 228, 160, 0.9), 0 0 24px rgba(138, 49, 255, 0.55);
  animation: magicStarFade 850ms ease-out forwards;
}

.magic-spark {
  position: absolute;
  z-index: 3;
  color: var(--magic-gold);
  font-size: 0.72rem;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(255, 228, 160, 0.9);
  animation: magicSparkRise 760ms ease-out forwards;
}

.magic-reveal {
  opacity: 0;
  transform: translateY(1.1rem) scale(0.99);
  transition: opacity 700ms ease, transform 700ms ease;
}

.magic-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.magic-hover-aura {
  position: relative;
  overflow: hidden;
}

.magic-hover-aura::before {
  position: absolute;
  inset: -55%;
  z-index: 0;
  content: "";
  background: conic-gradient(from 80deg, transparent, rgba(255, 228, 160, 0.12), transparent, rgba(138, 49, 255, 0.15), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.magic-hover-aura:hover::before {
  opacity: 1;
  animation: magicAuraTurn 5s linear infinite;
}

.magic-hover-aura > * {
  position: relative;
  z-index: 1;
}

.primary,
.secondary,
.button,
.music-btn,
.spread,
.theme,
.quick,
.god-card,
.section,
.input-panel,
.result-panel,
.number-stage,
.result,
.birth-form,
.oracle-card,
.ritual-box {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, filter 220ms ease;
}

.primary:hover,
.secondary:hover,
.button:hover,
.music-btn:hover,
.spread:hover,
.theme:hover,
.quick:hover {
  transform: none !important;
  filter: saturate(1.12) brightness(1.05);
  box-shadow: 0 0 28px rgba(255, 228, 160, 0.2), 0 18px 54px rgba(138, 49, 255, 0.18);
}

button:hover,
a.button:hover,
.primary:hover,
.secondary:hover,
.music-btn:hover,
.language-select:hover,
.spread:hover,
.spread.active,
.theme:hover,
.theme.active,
.quick:hover,
.quick-nav a:hover,
.header-link:hover,
.back-to-steffsweb:hover,
.birth-form button:hover,
.zodiac-grid button:hover,
.tarot-module-buttons button:hover,
.tarot-module-buttons button.active,
.empire-btn:hover,
.god-card button:hover {
  transform: none !important;
}

.god-card:hover,
.section:hover,
.input-panel:hover,
.result-panel:hover,
.number-stage:hover,
.result:hover,
.birth-form:hover,
.oracle-card:hover,
.ritual-box:hover {
  border-color: rgba(255, 228, 160, 0.38);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.4), 0 0 42px rgba(138, 49, 255, 0.2);
}

@keyframes magicStarFade {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -2rem) scale(0.2) rotate(90deg);
  }
}

@keyframes magicSparkRise {
  0% {
    opacity: 0;
    transform: translateY(0.35rem) scale(0.55);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-1.25rem) scale(1.35) rotate(36deg);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .magic-page-bloom,
  .magic-cursor-star,
  .magic-spark {
    display: none;
  }

  .magic-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}