/* ==========================================================================
   PrimeSphere intro splash (/assets/js/splash.js). Plays once per browser tab session.
   Timeline: 0s backdrop + stars → .2s rings draw → .35s emblem + flare
   → 1.25s wordmark → 2s tagline → 2.3s a glint runs across the wordmark
   → .6–3.2s progress → 3s content lifts away → 3.25s the curtain opens.
   The exit is pure CSS, so the overlay always clears itself.
   ========================================================================== */
html.ps-splash-on body { overflow: hidden; }
html[data-splash="done"] .ps-splash { display: none; }

.ps-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-family: 'Sora', 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
  pointer-events: none;
  animation: ps-splash-hide 0.01s linear 4.15s forwards;
}
/* Two halves of the backdrop part like a curtain at the end. */
.ps-splash-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;
  background: #050B1A;
  animation-duration: 0.95s;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
  animation-delay: 3.25s;
  animation-fill-mode: forwards;
}
.ps-splash-half--top { top: 0; animation-name: ps-curtain-up; }
.ps-splash-half--bottom { bottom: 0; animation-name: ps-curtain-down; }
.ps-splash-half--top::after,
.ps-splash-half--bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127, 216, 255, 0.9), transparent);
  box-shadow: 0 0 18px rgba(31, 190, 248, 0.8);
  opacity: 0;
  animation: ps-fade 0.2s ease 3.2s forwards;
}
.ps-splash-half--top::after { bottom: 0; }
.ps-splash-half--bottom::before { top: 0; }

.ps-splash-stage { position: absolute; inset: 0; animation: ps-stage-out 0.6s ease 3.15s forwards; }
.ps-splash-aurora {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 40% at 25% 30%, rgba(5, 137, 237, 0.45), transparent 70%),
    radial-gradient(38% 38% at 78% 72%, rgba(31, 190, 248, 0.32), transparent 70%),
    radial-gradient(30% 30% at 60% 15%, rgba(40, 80, 220, 0.28), transparent 70%);
  filter: blur(30px);
  animation: ps-fade 1.4s ease both, ps-drift 14s ease-in-out infinite alternate;
}
.ps-splash-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
  animation: ps-fade 1.6s ease 0.1s both, ps-grid-zoom 4s ease-out both;
}
.ps-splash-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #CFEFFF;
  box-shadow: 0 0 6px rgba(127, 216, 255, 0.9);
  opacity: 0;
  animation: ps-star 3.2s ease-in-out infinite;
}
.ps-splash-beam {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(127, 216, 255, 0.16), transparent);
  transform: skewX(-18deg);
  animation: ps-beam 2s cubic-bezier(0.4, 0, 0.2, 1) 0.7s both;
}
.ps-splash-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(3, 7, 18, 0.8) 100%); }

.ps-splash-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  animation: ps-content-out 0.5s ease 3s forwards;
}

.ps-splash-emblem { position: relative; width: 200px; height: 200px; display: grid; place-items: center; margin-bottom: 92px; }
.ps-splash-rings { position: absolute; top: -70px; left: -70px; width: 340px; height: 340px; overflow: visible; }
.ps-ring { stroke-dasharray: 1; transform-box: view-box; transform-origin: 200px 200px; }
.ps-ring-outer { animation: ps-draw 1.8s cubic-bezier(0.6, 0, 0.2, 1) 0.2s both, ps-spin 20s linear infinite; }
.ps-ring-inner { animation: ps-draw 1.6s cubic-bezier(0.6, 0, 0.2, 1) 0.45s both, ps-spin 15s linear infinite reverse; }
.ps-ring-dash { stroke-dasharray: 0.006 0.02; animation: ps-fade 1s ease 0.9s both, ps-spin 40s linear infinite; transform-box: view-box; transform-origin: 200px 200px; }
.ps-orbit { transform-box: view-box; transform-origin: 200px 200px; filter: drop-shadow(0 0 6px rgba(127, 216, 255, 0.9)); }
.ps-orbit-1 { animation: ps-fade 0.6s ease 1.1s both, ps-spin 7s linear infinite; }
.ps-orbit-2 { animation: ps-fade 0.6s ease 1.3s both, ps-spin 10s linear infinite reverse; }

.ps-splash-glow {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 190, 248, 0.55), rgba(5, 137, 237, 0.18) 55%, transparent 72%);
  filter: blur(18px);
  animation: ps-pop 1.2s cubic-bezier(0.2, 0.9, 0.3, 1) 0.2s both, ps-glow-pulse 3s ease-in-out 1.4s infinite;
}
/* A short horizontal lens flare as the emblem lands. */
.ps-splash-flare {
  position: absolute;
  width: 520px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(127, 216, 255, 0.85) 45%, #fff 50%, rgba(127, 216, 255, 0.85) 55%, transparent);
  filter: blur(0.5px);
  opacity: 0;
  animation: ps-flare 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s both;
}
.ps-splash-disc {
  position: relative;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 30% 25%, #ffffff 0%, #E6F1FF 55%, #C9DFFB 100%);
  box-shadow:
    0 20px 60px -10px rgba(5, 137, 237, 0.7),
    0 0 0 8px rgba(255, 255, 255, 0.05),
    0 0 0 9px rgba(127, 216, 255, 0.12),
    inset 0 -8px 20px rgba(5, 137, 237, 0.18);
  animation: ps-pop 0.95s cubic-bezier(0.2, 1.25, 0.4, 1) 0.35s both, ps-float 4.5s ease-in-out 1.4s infinite;
}
.ps-splash-disc::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: ps-disc-sheen 1.1s ease 1.05s forwards;
}
.ps-splash-disc img { position: relative; z-index: 1; width: 104px; height: auto; display: block; }

.ps-splash-word { position: relative; display: flex; gap: 0.4em; font-size: clamp(1.9rem, 7vw, 3rem); font-weight: 800; line-height: 1; }
.ps-splash-line { display: inline-flex; letter-spacing: 0.16em; margin-right: -0.16em; }
.ps-splash-line-accent { text-shadow: 0 0 28px rgba(31, 190, 248, 0.45); }
.ps-splash-letter { display: inline-block; }
/* Once the wordmark is in, a glint runs across it letter by letter (delays set in splash.js). */
.ps-splash-letter { animation-name: ps-letter, ps-glint; animation-duration: 0.7s, 0.55s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1), ease-in-out; animation-fill-mode: both, none; }

.ps-splash-tagline {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  font-family: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(0.62rem, 2.2vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9DB7DE;
  white-space: nowrap;
  animation: ps-tagline 1s ease 2s both;
}
.ps-splash-tagline i { display: block; height: 1px; width: 44px; background: linear-gradient(90deg, transparent, #1FBEF8); animation: ps-line-grow 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 2.1s both; transform-origin: right center; }
.ps-splash-tagline i:last-child { background: linear-gradient(90deg, #1FBEF8, transparent); transform-origin: left center; }

.ps-splash-progress { position: relative; width: 180px; height: 2px; margin-top: 40px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; animation: ps-fade 0.6s ease 0.5s both; }
.ps-splash-progress span { position: absolute; inset: 0; background: linear-gradient(90deg, #0589ED, #7FD8FF); box-shadow: 0 0 12px rgba(31, 190, 248, 0.9); transform-origin: left center; animation: ps-progress 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s both; }

@keyframes ps-splash-hide { to { visibility: hidden; opacity: 0; } }
@keyframes ps-curtain-up { to { transform: translateY(-101%); } }
@keyframes ps-curtain-down { to { transform: translateY(101%); } }
@keyframes ps-stage-out { to { opacity: 0; } }
@keyframes ps-content-out { to { opacity: 0; transform: scale(1.06); filter: blur(6px); } }
@keyframes ps-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ps-draw { from { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes ps-spin { to { transform: rotate(360deg); } }
@keyframes ps-pop { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
@keyframes ps-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ps-glow-pulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes ps-letter { from { opacity: 0; transform: translateY(22px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ps-tagline { from { opacity: 0; letter-spacing: 0.5em; } to { opacity: 1; letter-spacing: 0.32em; } }
@keyframes ps-line-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes ps-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ps-beam { from { left: -40%; opacity: 0; } 20% { opacity: 1; } to { left: 120%; opacity: 0; } }
@keyframes ps-drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 3%, 0) scale(1.08); } }
@keyframes ps-grid-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes ps-star { 0%, 100% { opacity: 0; transform: scale(0.6); } 50% { opacity: 0.85; transform: scale(1); } }
@keyframes ps-flare { 0% { opacity: 0; transform: scaleX(0.1); } 35% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes ps-disc-sheen { to { transform: translateX(120%); } }
@keyframes ps-glint { 0%, 100% { filter: none; } 45% { filter: brightness(1.9) drop-shadow(0 0 10px rgba(207, 239, 255, 0.95)); } }

@media (max-width: 480px) { .ps-splash-tagline i { width: 22px; } }

/* Motion off: a short, calm fade instead of the full intro. */
@media (prefers-reduced-motion: reduce) {
  .ps-splash { animation: ps-splash-hide 0.01s linear 1.3s forwards; }
  .ps-splash *, .ps-splash *::before, .ps-splash *::after { animation: none !important; }
  .ps-splash-half { animation: ps-reduced-out 0.4s ease 0.9s forwards !important; }
  .ps-splash-stage, .ps-splash-content { animation: ps-reduced-out 0.4s ease 0.9s forwards !important; }
  .ps-splash-progress span { transform: none; }
}
@keyframes ps-reduced-out { to { opacity: 0; } }