:root { --splash-on: 1; }

#sp-intro { display: none; }

html.splash { overflow: hidden; }
html.splash #sp-intro {
  position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #0c1c26 0%, #060e16 55%, #000 100%);
  animation: spShell 2.4s cubic-bezier(.7,0,.25,1) forwards;
  will-change: opacity, transform;
}

.sp-core {
  position: relative; width: clamp(220px, 44vmin, 440px); aspect-ratio: 1;
  display: grid; place-items: center;
  animation: spScene 2.4s cubic-bezier(.6,0,.35,1) forwards;
  will-change: transform, opacity;
}
.sp-rays {
  position: absolute; width: 200vmax; height: 200vmax; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(0,232,184,.10) 10deg, transparent 12deg 30deg);
  opacity: 0; pointer-events: none;
  animation: spSpin 9s linear infinite, spRays 2.4s ease forwards;
}
.sp-halo {
  position: absolute; inset: -45%; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,232,184,.45), transparent 62%);
  filter: blur(24px); animation: spHalo 2.4s ease forwards;
}
.sp-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 20deg, #00e8b8 72deg, #25b7ff 152deg, transparent 214deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  filter: drop-shadow(0 0 16px #00e8b8);
  animation: spSpin 1.05s linear infinite, spRingIn 2.4s ease forwards;
}
.sp-ring2 {
  position: absolute; inset: 9%; border-radius: 50%;
  background: conic-gradient(from 180deg, transparent 0 40deg, #2ce6a1 96deg, transparent 176deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  filter: drop-shadow(0 0 10px #2ce6a1);
  animation: spSpin 1.7s linear infinite reverse, spRingIn 2.4s ease forwards;
}
.sp-hole {
  position: absolute; inset: 26%; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #071119, #000 68%);
  box-shadow: inset 0 0 26px 6px rgba(0,0,0,.9), 0 0 30px 4px rgba(0,232,184,.35);
}
.sp-rim {
  position: absolute; inset: 24%; border-radius: 50%;
  box-shadow: 0 0 22px rgba(0,232,184,.7), inset 0 0 14px rgba(37,183,255,.55);
}
.sp-flash {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: #eafffb; box-shadow: 0 0 30px 12px #00e8b8;
  opacity: 0; animation: spFlash 2.4s ease forwards;
}
.sp-logo {
  position: absolute; inset: 0; margin: auto; width: 36%; height: 36%; object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(0,232,184,.8)) drop-shadow(0 0 34px rgba(37,183,255,.5));
  animation: spLogo 2.4s ease forwards; pointer-events: none; -webkit-user-drag: none;
}

@keyframes spSpin { to { transform: rotate(360deg); } }
@keyframes spScene {
  0% { transform: scale(.25); opacity: 0; }
  12% { opacity: 1; }
  12%, 68% { transform: scale(1); }
  84% { transform: scale(1.14); }
  93% { transform: scale(.03); opacity: 1; }
  97% { opacity: 0; }
  100% { opacity: 0; transform: scale(.03); }
}
@keyframes spHalo {
  0% { opacity: 0; transform: scale(.4); }
  16% { opacity: .55; }
  68% { opacity: .4; }
  85% { opacity: .95; transform: scale(1.6); }
  93% { opacity: 1; transform: scale(2.4); }
  100% { opacity: 0; transform: scale(3.2); }
}
@keyframes spRingIn { 0% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes spRays { 0% { opacity: 0; } 25% { opacity: .6; } 80% { opacity: .35; } 90% { opacity: .8; } 100% { opacity: 0; } }
@keyframes spFlash { 0%, 82% { opacity: 0; transform: scale(.2); } 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(7); } }
@keyframes spLogo {
  0% { opacity: 0; transform: scale(.5); }
  18% { opacity: 1; transform: scale(1); }
  55% { transform: scale(1.07); }
  80% { transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes spShell { 0%, 86% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  html.splash #sp-intro { animation: none; opacity: 0; pointer-events: none; }
  .sp-core, .sp-core *, .sp-rays { animation: none; }
}