/* OddWizard magic: a slow aurora, twinkling stars and the odd shooting star behind every page.
   CSS only (no JavaScript), GPU-friendly transforms/opacity, and switched off for people who prefer less motion. */
.magic { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.magic .aurora { position: absolute; inset: -20%; filter: blur(60px); opacity: .55;
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(111,104,216,.45), transparent 70%),
    radial-gradient(34% 28% at 78% 30%, rgba(47,196,143,.30), transparent 70%),
    radial-gradient(30% 26% at 55% 88%, rgba(245,184,61,.14), transparent 70%);
  animation: auroraDrift 26s ease-in-out infinite alternate; }
@keyframes auroraDrift { 0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(3%, 2%, 0) rotate(8deg) scale(1.06); } 100% { transform: translate3d(-2%, 3%, 0) rotate(-6deg) scale(1.02); } }
.magic .stars, .magic .stars2 { position: absolute; inset: 0; background-repeat: repeat; }
.magic .stars { background-image:
    radial-gradient(1.2px 1.2px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #cfd6ff, transparent),
    radial-gradient(1.4px 1.4px at 200px 160px, #fff, transparent), radial-gradient(1px 1px at 300px 40px, #ffe3a3, transparent),
    radial-gradient(1.2px 1.2px at 360px 220px, #fff, transparent), radial-gradient(1px 1px at 80px 260px, #b3aef2, transparent);
  background-size: 400px 300px; opacity: .55; animation: twinkle 5s ease-in-out infinite alternate; }
.magic .stars2 { background-image:
    radial-gradient(1px 1px at 50px 120px, #fff, transparent), radial-gradient(1.6px 1.6px at 240px 60px, #ffe3a3, transparent),
    radial-gradient(1px 1px at 170px 230px, #fff, transparent), radial-gradient(1.3px 1.3px at 330px 140px, #9ff0cf, transparent);
  background-size: 380px 280px; opacity: .35; animation: twinkle 7s ease-in-out -3s infinite alternate, starDrift 120s linear infinite; }
@keyframes twinkle { from { opacity: .2; } to { opacity: .7; } }
@keyframes starDrift { from { background-position: 0 0; } to { background-position: -380px 280px; } }
.magic .shoot { position: absolute; top: 12%; left: 70%; width: 140px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(255,227,163,0), #ffe3a3); transform: rotate(-25deg); animation: shoot 11s ease-in 4s infinite; }
.magic .shoot.s2 { top: 34%; left: 30%; animation-duration: 17s; animation-delay: 9s; }
@keyframes shoot { 0%, 92% { opacity: 0; transform: rotate(-25deg) translateX(0); } 94% { opacity: 1; } 100% { opacity: 0; transform: rotate(-25deg) translateX(-420px); } }
.magic .orb { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #f5b83d; box-shadow: 0 0 12px 3px rgba(245,184,61,.6); opacity: 0; animation: float 14s ease-in-out infinite; }
.magic .orb.o1 { left: 12%; bottom: -10px; } .magic .orb.o2 { left: 64%; bottom: -10px; animation-delay: 5s; background: #2fc48f; box-shadow: 0 0 12px 3px rgba(47,196,143,.55); }
.magic .orb.o3 { left: 86%; bottom: -10px; animation-delay: 9s; background: #b3aef2; box-shadow: 0 0 12px 3px rgba(139,133,232,.6); }
@keyframes float { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 10% { opacity: .9; } 80% { opacity: .5; } 100% { opacity: 0; transform: translate3d(30px, -90vh, 0); } }
@media (prefers-reduced-motion: reduce) { .magic * { animation: none !important; } .magic .shoot, .magic .orb { display: none; } }