/* ============================================================
   AI Research Hub — Splash / Launch Screen
   File: static/css/splash.css
   All rules are scoped under #splash-screen — zero side effects
   on pages where the splash is not rendered.
   ============================================================ */

#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060d1f;
  overflow: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#splash-screen.splash-hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Background ── */
.splash-bg { position: absolute; inset: 0; overflow: hidden; }

.splash-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: orbFloat 8s ease-in-out infinite alternate;
}
.splash-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(37,99,235,.45) 0%, transparent 70%);
  top: -120px; left: -100px; animation-delay: 0s;
}
.splash-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(30,64,175,.5) 0%, transparent 70%);
  bottom: -80px; right: -80px; animation-delay: -3s;
}
.splash-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(251,191,36,.18) 0%, transparent 70%);
  top: 40%; left: 55%; animation-delay: -6s;
}
.splash-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
}
@keyframes orbFloat {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(30px,20px) scale(1.08); }
}

/* ── Centre body ── */
.splash-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}

/* ── Logo ── */
.splash-logo-wrap {
  position: relative; width: 130px; height: 130px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2rem;
  opacity: 0;
  animation: logoEntrance .8s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: .1s;
}
@keyframes logoEntrance {
  from { opacity: 0; transform: scale(.4) rotate(-20deg); }
  to   { opacity: 1; transform: scale(1)  rotate(0deg); }
}
.splash-logo-ring {
  position: absolute; border-radius: 50%;
  border: 2px solid rgba(37,99,235,.35);
}
.splash-ring-outer { width: 130px; height: 130px; animation: ringPulse 2.5s ease-in-out infinite; }
.splash-ring-inner {
  width: 100px; height: 100px;
  border-color: rgba(251,191,36,.3);
  animation: ringPulse 2.5s ease-in-out infinite reverse;
  animation-delay: .4s;
}
@keyframes ringPulse {
  0%,100% { transform: scale(1);    opacity: .6; }
  50%     { transform: scale(1.06); opacity: 1;  }
}
.splash-logo-core {
  width: 76px; height: 76px; border-radius: 22px;
  background: linear-gradient(145deg, #1e40af, #2563eb, #3b82f6);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,.2), 0 0 40px rgba(37,99,235,.6), 0 8px 32px rgba(0,0,0,.5);
  animation: corePulse 2s ease-in-out infinite alternate;
}
@keyframes corePulse {
  from { box-shadow: 0 0 0 4px rgba(37,99,235,.2), 0 0 40px rgba(37,99,235,.6), 0 8px 32px rgba(0,0,0,.5); }
  to   { box-shadow: 0 0 0 8px rgba(37,99,235,.1), 0 0 60px rgba(37,99,235,.8), 0 8px 32px rgba(0,0,0,.5); }
}

/* ── Orbit ── */
.splash-orbit { position: absolute; inset: 0; animation: orbitSpin 12s linear infinite; }
@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.splash-node {
  position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(15,23,42,.9); border: 1.5px solid rgba(37,99,235,.5);
  display: flex; align-items: center; justify-content: center;
  color: #60a5fa;
  animation: nodeCounterSpin 12s linear infinite;
}
.splash-node i { font-size: .5rem; }
@keyframes nodeCounterSpin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.splash-node-1 { top:-2px;    left:50%;  transform:translateX(-50%); }
.splash-node-2 { top:50%;     right:-2px; transform:translateY(-50%); }
.splash-node-3 { bottom:-2px; left:50%;  transform:translateX(-50%); }
.splash-node-4 { top:50%;     left:-2px;  transform:translateY(-50%); }

/* ── Brand ── */
.splash-brand {
  display: flex; align-items: center; gap: .75rem;
  opacity: 0; animation: fadeRise .6s ease forwards; animation-delay: .55s;
}
.splash-brand-ai   { font-family:'Fraunces',serif; font-size:2.4rem; font-weight:800; color:#fbbf24; letter-spacing:-.04em; line-height:1; }
.splash-brand-sep  { width:1.5px; height:28px; background:rgba(255,255,255,.2); border-radius:2px; }
.splash-brand-name { font-family:'Fraunces',serif; font-size:2rem; font-weight:700; color:#fff; letter-spacing:-.03em; line-height:1; }

/* ── Tagline ── */
.splash-tagline {
  margin-top:.85rem; margin-bottom:0;
  font-family:'DM Sans',sans-serif; font-size:.95rem;
  color:#93c5fd; font-weight:400; letter-spacing:.04em; text-transform:uppercase;
  opacity:0; animation:fadeRise .6s ease forwards; animation-delay:.75s;
}

@keyframes fadeRise {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Loader ── */
.splash-loader {
  margin-top:2.75rem; width:220px;
  opacity:0; animation:fadeRise .5s ease forwards; animation-delay:.95s;
}
.splash-loader-track {
  width:100%; height:3px;
  background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden;
}
.splash-loader-fill {
  height:100%; width:0%; border-radius:4px;
  background:linear-gradient(90deg,#2563eb,#fbbf24,#2563eb);
  background-size:200% 100%;
  animation: loaderGrow 3.8s cubic-bezier(.4,0,.2,1) forwards, loaderShimmer 1.2s ease infinite;
}
@keyframes loaderGrow    { 0%{width:0%} 60%{width:75%} 85%{width:92%} 100%{width:100%} }
@keyframes loaderShimmer { 0%{background-position:0% 0} 100%{background-position:200% 0} }
.splash-loader-label {
  display:block; margin-top:.6rem;
  font-family:'DM Sans',sans-serif; font-size:.72rem;
  color:#475569; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
}

/* ── Corners ── */
.splash-corner {
  position:absolute; font-family:'DM Sans',sans-serif;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  opacity:0; animation:fadeRise .5s ease forwards; animation-delay:1.1s;
}
.splash-corner-tl { top:1.5rem; left:1.75rem; }
.splash-corner-br { bottom:1.5rem; right:1.75rem; }
.splash-corner span {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  padding:.3rem .65rem; border-radius:2rem; color:#475569;
}

/* ── Particles ── */
.splash-particles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.splash-particle {
  position:absolute;
  font-family:'DM Sans',sans-serif; font-size:.65rem; font-weight:600;
  color:rgba(255,255,255,.07); white-space:nowrap;
  animation:particleDrift linear infinite; user-select:none;
}
@keyframes particleDrift {
  from { transform:translateY(0)      rotate(var(--rot)); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  to   { transform:translateY(-100vh) rotate(var(--rot)); opacity:0; }
}

/* ── Mobile ── */
@media (max-width:480px) {
  .splash-logo-wrap, .splash-ring-outer { width:110px; height:110px; }
  .splash-ring-inner  { width:84px;  height:84px;  }
  .splash-logo-core   { width:64px;  height:64px;  font-size:1.6rem; }
  .splash-brand-ai    { font-size:1.9rem; }
  .splash-brand-name  { font-size:1.6rem; }
  .splash-tagline     { font-size:.78rem; }
  .splash-loader      { width:180px; }
  .splash-corner-tl, .splash-corner-br { display:none; }
}