/* ═══════════════════════════════════════════
   Panipaali — Splash / App Loading Animation
═══════════════════════════════════════════ */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #060610;
  overflow: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
            env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.76,0,0.24,1);
}

/* ── Background energy grid ── */
.splash__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(124,58,237,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  animation: grid-drift 8s linear infinite;
}
@keyframes grid-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 44px 44px; }
}

/* ── Orbs ── */
.splash__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.splash__orb--1 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(255,45,85,0.35) 0%, transparent 70%);
  top: -100px; left: -80px;
  animation: orb-drift-1 6s ease-in-out infinite alternate;
}
.splash__orb--2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(124,58,237,0.4) 0%, transparent 70%);
  bottom: -80px; right: -60px;
  animation: orb-drift-2 5s ease-in-out infinite alternate;
}
.splash__orb--3 {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(6,214,160,0.25) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: orb-pulse 2.5s ease-in-out infinite;
}
@keyframes orb-drift-1 { to { transform: translate(40px, 30px); } }
@keyframes orb-drift-2 { to { transform: translate(-30px, -40px); } }
@keyframes orb-pulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1);   opacity: 0.6; }
  50%       { transform: translate(-50%,-50%) scale(1.4); opacity: 1; }
}

/* ── Center stage ── */
.splash__center { position: relative; z-index: 1; text-align: center; }

/* ── Rings ── */
.splash__rings {
  position: relative;
  width: 170px; height: 170px;
  margin: 0 auto 32px;
  display: flex; align-items: center; justify-content: center;
}
.splash__ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid transparent;
}
.splash__ring--1 {
  width: 170px; height: 170px;
  border-color: rgba(255,45,85,0.18);
  animation: ring-spin 3s linear infinite;
  background: conic-gradient(from 0deg, rgba(255,45,85,0.3), transparent 35%);
}
.splash__ring--2 {
  width: 130px; height: 130px;
  border-color: rgba(124,58,237,0.22);
  animation: ring-spin 2s linear infinite reverse;
  background: conic-gradient(from 180deg, rgba(124,58,237,0.3), transparent 35%);
}
.splash__ring--3 {
  width: 92px; height: 92px;
  border-color: rgba(6,214,160,0.3);
  animation: ring-spin 4s linear infinite;
  background: conic-gradient(from 90deg, rgba(6,214,160,0.25), transparent 30%);
}
@keyframes ring-spin { to { transform: rotate(360deg); } }

/* ── Core icon ── */
.splash__icon {
  width: 64px; height: 64px;
  border-radius: 22px;
  background: linear-gradient(135deg, #ff2d55 0%, #7c3aed 50%, #06d6a0 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1),
    0 0 40px rgba(255,45,85,0.5),
    0 0 80px rgba(124,58,237,0.3);
  animation: icon-bounce 1.8s cubic-bezier(0.34,1.56,0.64,1) both,
             icon-glow 2.5s ease-in-out 1.8s infinite;
  position: relative;
  z-index: 2;
}
@keyframes icon-bounce {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
  80%  { transform: scale(0.94) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes icon-glow {
  0%, 100% { box-shadow: 0 0 40px rgba(255,45,85,0.5), 0 0 80px rgba(124,58,237,0.3); }
  50%       { box-shadow: 0 0 60px rgba(255,45,85,0.8), 0 0 120px rgba(124,58,237,0.5); }
}

/* ── Brand name ── */
.splash__logo {
  font-family: 'Syne', sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -2px;
  margin-bottom: 8px;
  opacity: 0;
  animation: logo-reveal 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.5s both;
  line-height: 1;
}
.splash__logo .pp-fire {
  background: linear-gradient(135deg, #ff2d55, #ff6b35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}
.splash__logo .pp-cyan {
  color: #06d6a0;
  -webkit-text-fill-color: #06d6a0;
  display: inline;
}
@keyframes logo-reveal {
  0%   { opacity: 0; transform: translateY(24px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Tagline ── */
.splash__tag {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(240,240,255,0.45);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  opacity: 0;
  animation: fade-in 0.5s ease 1s both;
  margin-bottom: 40px;
}
@keyframes fade-in { to { opacity: 1; } }

/* ── Loader bar ── */
.splash__bar-wrap {
  width: 160px;
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
  opacity: 0;
  animation: fade-in 0.3s ease 1.2s both;
  margin: 0 auto;
}
.splash__bar {
  height: 100%;
  width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff2d55, #7c3aed, #06d6a0);
  animation: bar-fill 1.6s cubic-bezier(0.4,0,0.2,1) 1.2s both;
}
@keyframes bar-fill {
  0%   { width: 0%;   }
  40%  { width: 55%;  }
  70%  { width: 75%;  }
  90%  { width: 92%;  }
  100% { width: 100%; }
}

/* ── Floating particles ── */
.splash__particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.splash__particle {
  position: absolute;
  border-radius: 50%;
  animation: particle-float linear infinite;
  opacity: 0;
}
@keyframes particle-float {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-120px) scale(1.2); opacity: 0; }
}

/* ── Exit animation ── */
.splash--exit {
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
}

/* ── Ensure content beneath is invisible during splash ── */
.splash-active .splash-content {
  opacity: 0;
  pointer-events: none;
}
.splash-content {
  opacity: 1;
  transition: opacity 0.4s ease 0.1s;
}