/* ===== GLOBAL RESET & BASE ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* suppress tap flash on iOS/Android */
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;     /* prevent iOS rubber-band outside the page */
  font-family: 'Inter', sans-serif;
  background: #130c1e;
  color: #eee;
}

/* Dynamic viewport height — respects collapsible browser chrome (iOS 16+, Chrome 108+) */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Utility */
.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Deep ambient light blobs */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(255, 70, 110, .22) 0%, transparent 48%),
    radial-gradient(ellipse at 85% 65%, rgba(150, 70, 255, .18) 0%, transparent 48%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 90, 140, .12) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 10%,  rgba(100, 60, 220, .10) 0%, transparent 40%);
  z-index: 0;
  pointer-events: none;
  animation: bgPulse 10s ease-in-out infinite alternate, blobDrift 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Distant twinkling star field */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9)  1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,200,220,.8)  1px, transparent 1px),
    radial-gradient(circle, rgba(200,180,255,.5)  1px, transparent 1px);
  background-size: 160px 160px, 110px 110px, 230px 230px, 190px 190px;
  background-position: 30px 40px, 80px 110px, 150px 60px, 55px 145px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  animation: starsShift 40s linear infinite, starsTwinkle 6s ease-in-out infinite alternate;
}

/* ===== AMBIENT PARTICLES ===== */
.bg-particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.bg-particle {
  position: absolute;
  opacity: 0;
  animation: bgParticleFloat linear infinite;
  will-change: transform, opacity;
}

.bg-particle svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ===== KEYFRAMES ===== */
@keyframes bgPulse {
  0%   { opacity: 1; }
  100% { opacity: .72; }
}

@keyframes blobDrift {
  0%   { transform: translate(0,    0)    scale(1); }
  33%  { transform: translate(-2%,  3%)   scale(1.06); }
  66%  { transform: translate(3%,  -2%)   scale(.97); }
  100% { transform: translate(-1%,  2%)   scale(1.03); }
}

@keyframes starsShift {
  0%   { background-position: 30px 40px, 80px 110px, 150px 60px, 55px 145px; }
  100% { background-position: 190px 200px, 190px 220px, 380px 290px, 245px 335px; }
}

@keyframes starsTwinkle {
  0%   { opacity: .4; }
  50%  { opacity: .52; }
  100% { opacity: .32; }
}

@keyframes bgParticleFloat {
  0%   { opacity: 0;    transform: translateY(0)      rotate(0deg)   scale(0.7); }
  8%   { opacity: 0.45; }
  90%  { opacity: 0.25; }
  100% { opacity: 0;    transform: translateY(-110vh) rotate(390deg) scale(1.1); }
}

/* ===== ACCESSIBILITY: REDUCE MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:      0.01ms !important;
  }
}