/* Intro / loading star page */
html,body.intro-body{ height:100%; }
body.intro-body{
  margin:0; background:#040404; color:#fff;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; font-family:var(--font-body);
  position:relative;
}

/* faint drifting particles for atmosphere */
.intro-noise{
  position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:radial-gradient(1px 1px at 20% 30%, rgba(232,185,35,.5), transparent),
                    radial-gradient(1px 1px at 70% 60%, rgba(232,185,35,.35), transparent),
                    radial-gradient(1.5px 1.5px at 40% 80%, rgba(232,185,35,.4), transparent),
                    radial-gradient(1px 1px at 85% 20%, rgba(232,185,35,.3), transparent),
                    radial-gradient(1px 1px at 55% 15%, rgba(232,185,35,.4), transparent);
}

.intro-stage{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:34px;
  padding:40px 20px; text-align:center; z-index:2;
}

.star-btn{
  position:relative;
  width:min(300px,58vw); aspect-ratio:1;
  background:none; border:none; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

/* ambient static glow */
.ring-ambient{
  position:absolute; inset:-10%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(240,197,61,.35) 0%, rgba(240,197,61,.12) 42%, transparent 70%);
  filter:blur(6px);
  animation:pulse-glow 2.6s ease-in-out infinite;
}

/* rotating sparkle ring — the "Sonic ring" spin */
.ring-spin{
  position:absolute; inset:6%;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg, #fff6cf 8deg, #f0c53d 18deg, transparent 34deg,
    transparent 96deg, #fff6cf 104deg, #f0c53d 114deg, transparent 130deg,
    transparent 186deg, #fff6cf 194deg, #f0c53d 204deg, transparent 220deg,
    transparent 276deg, #fff6cf 284deg, #f0c53d 294deg, transparent 310deg,
    transparent 360deg);
  -webkit-mask-image:radial-gradient(circle, transparent 63%, black 65%, black 79%, transparent 81%);
          mask-image:radial-gradient(circle, transparent 63%, black 65%, black 79%, transparent 81%);
  filter:blur(1.5px) brightness(1.25);
  animation:ring-rotate 2.8s linear infinite;
  mix-blend-mode:screen;
}
.ring-spin.ring-spin-2{
  animation-duration:4.2s;
  animation-direction:reverse;
  opacity:.55;
  filter:blur(3px) brightness(1.1);
}

.star-logo{
  position:relative; z-index:2;
  width:78%; height:78%; object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(240,197,61,.45));
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.star-btn:hover .star-logo{ transform:scale(1.045); }
.star-btn:active .star-logo{ transform:scale(.97); }

.star-btn.collecting .star-logo{ animation:collect-pulse .55s ease forwards; }
.star-btn.collecting .ring-spin{ animation-duration:.4s; }
.intro-flash{
  position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:50;
}
.intro-flash.flash-on{ animation:flash-out .55s ease forwards; }

.intro-tagline{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.28em;
  font-size:13px; color:var(--gray, #c7c7c7);
}
.intro-enter{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.22em;
  font-size:13px; color:var(--gold, #e8b923);
  animation:enter-blink 1.8s ease-in-out infinite;
}

@keyframes ring-rotate{ to{ transform:rotate(360deg); } }
@keyframes pulse-glow{
  0%,100%{ opacity:.75; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}
@keyframes enter-blink{
  0%,100%{ opacity:.5; }
  50%{ opacity:1; }
}
@keyframes collect-pulse{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.18); filter:drop-shadow(0 0 40px rgba(255,246,207,.9)) brightness(1.4); }
  100%{ transform:scale(2.4); opacity:0; }
}
@keyframes flash-out{
  0%{ opacity:0; }
  35%{ opacity:1; }
  100%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .ring-spin, .ring-ambient, .intro-enter{ animation:none; }
}