/* =========================================
   SPLASH SCREEN — SkoolApps Intro
   ========================================= */

#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2e9fd4 0%, #1a7ab5 40%, #3bbce8 70%, #2e9fd4 100%);
  background-size: 300% 300%;
  animation: splashBg 3s ease infinite;
  overflow: hidden;
}

@keyframes splashBg {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Radial glow blobs matching the image */
#splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(255,255,255,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 75% 65%, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Subtle noise texture overlay */
#splash::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.3;
}

/* Center content */
.splash__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Logo image */
.splash__logo {
  width: 180px;
  height: 180px;
  object-fit: contain;
  animation: splashLogoIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
  filter: drop-shadow(0 0 32px rgba(100,220,100,0.5)) drop-shadow(0 0 64px rgba(100,220,100,0.25));
}

@keyframes splashLogoIn {
  0%   { opacity: 0; transform: scale(0.5) rotate(-10deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Glow pulse ring around logo */
.splash__glow {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px solid rgba(100,230,100,0.4);
  animation: splashGlow 1.6s ease-in-out infinite;
  pointer-events: none;
}
.splash__glow--2 {
  width: 280px;
  height: 280px;
  border-color: rgba(100,230,100,0.2);
  animation-delay: 0.3s;
}
.splash__glow--3 {
  width: 340px;
  height: 340px;
  border-color: rgba(100,230,100,0.1);
  animation-delay: 0.6s;
}

@keyframes splashGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.08); }
}

/* Loading dots */
.splash__dots {
  display: flex;
  gap: 8px;
  opacity: 0;
  animation: dotsIn 0.4s ease 0.8s forwards;
}
.splash__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  animation: dotBounce 1.2s ease-in-out infinite;
}
.splash__dot:nth-child(2) { animation-delay: 0.15s; }
.splash__dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes dotsIn {
  to { opacity: 1; }
}

@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.6; }
  40%           { transform: translateY(-10px); opacity: 1; }
}

/* ── Exit animation — whole splash fades & scales out ── */
#splash.splash--exit {
  animation: splashExit 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes splashExit {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); pointer-events: none; }
}

/* Hide from accessibility tree once gone */
#splash.splash--hidden {
  display: none;
}

/* ── Prevent scroll while splash is showing ── */
body.splash-active {
  overflow: hidden;
}