/* pages/intro.css */

html, body { overflow: hidden; background: #0a0e14; }

.splash {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #0e1a2e 0%, #0a0e14 70%);
  position: relative;
}

.glow {
  position: absolute;
  width: clamp(220px, 38vw, 300px);
  height: clamp(220px, 38vw, 300px);
  border-radius: 50%;
  border: 2px solid rgba(70,140,180,0);
  pointer-events: none;
  animation: ringPulse .8s 1.1s ease forwards;
}

.logo-wrap {
  opacity: 0;
  transform: scale(0.55);
  animation:
    popIn .8s .25s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    nudge 1.4s 1.2s ease-in-out 2 forwards;
}

.logo-wrap img {
  width: clamp(200px, 36vw, 280px);
  height: clamp(200px, 36vw, 280px);
  object-fit: contain;
  display: block;
  border-radius: 50%;
}

.splash.out { animation: fadeOut .5s ease forwards; }

@keyframes popIn  { to { opacity: 1; transform: scale(1); } }
@keyframes nudge  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes ringPulse {
  0%   { border-color: rgba(70,140,180,0);   transform: scale(0.88); }
  55%  { border-color: rgba(70,140,180,0.6); transform: scale(1.16); }
  100% { border-color: rgba(70,140,180,0);   transform: scale(1.25); }
}