/* ── Papers/Combined-Science data-load screen (flask lottie + ambient FX) ──
   Shown on every load of papers.html / combined-science.html to mask the
   real async PaperModel fetch, so the year grid never pops in half-built.
   js/loading-screen.js hides it once js/papers.js confirms data + the grid
   are actually ready (window.hideLoadingScreen()), not on a fixed timer.
   All motion below is transform/opacity only (GPU-cheap, no layout cost). */

#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-page);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--ease-out, ease), visibility 0.6s;
}

#loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── ambient background wash ── */
.loading-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(46vw, 480px);
  height: min(46vw, 480px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(192, 132, 252, 0.16) 0%, rgba(244, 114, 182, 0.06) 45%, transparent 72%);
  filter: blur(34px);
  animation: loading-glow-pulse 4.6s ease-in-out infinite;
  pointer-events: none;
}

/* ── rising bubble particles ── */
.loading-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.loading-bubbles span {
  position: absolute;
  bottom: -10%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(232, 121, 249, 0.6), rgba(168, 85, 247, 0.22));
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.35);
  opacity: 0;
  animation-name: loading-bubble-rise;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
.loading-bubbles span:nth-child(1) { left: 6%;  width: 7px; height: 7px; --bx: 16px;  animation-duration: 5.2s; animation-delay: 0s; }
.loading-bubbles span:nth-child(2) { left: 17%; width: 5px; height: 5px; --bx: -10px; animation-duration: 6.4s; animation-delay: 0.6s; }
.loading-bubbles span:nth-child(3) { left: 29%; width: 9px; height: 9px; --bx: 18px;  animation-duration: 5.8s; animation-delay: 1.4s; }
.loading-bubbles span:nth-child(4) { left: 41%; width: 6px; height: 6px; --bx: -16px; animation-duration: 7.1s; animation-delay: 0.3s; }
.loading-bubbles span:nth-child(5) { left: 53%; width: 8px; height: 8px; --bx: 10px;  animation-duration: 6.0s; animation-delay: 2.0s; }
.loading-bubbles span:nth-child(6) { left: 64%; width: 5px; height: 5px; --bx: -8px;  animation-duration: 5.4s; animation-delay: 1.0s; }
.loading-bubbles span:nth-child(7) { left: 75%; width: 7px; height: 7px; --bx: 16px;  animation-duration: 6.8s; animation-delay: 2.6s; }
.loading-bubbles span:nth-child(8) { left: 86%; width: 6px; height: 6px; --bx: -14px; animation-duration: 5.6s; animation-delay: 0.8s; }
.loading-bubbles span:nth-child(9) { left: 94%; width: 9px; height: 9px; --bx: 12px;  animation-duration: 7.4s; animation-delay: 1.8s; }

/* ── centred content ── */
.loading-screen-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.loading-flask-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-flask-halo {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.32) 0%, rgba(192, 132, 252, 0.16) 45%, transparent 72%);
  filter: blur(16px);
  animation: loading-halo-pulse 3.2s ease-in-out infinite;
}

.loading-flask {
  position: relative;
  width: clamp(190px, 30vw, 280px);
  height: clamp(190px, 30vw, 280px);
}

@media (max-width: 640px) {
  .loading-flask {
    width: clamp(230px, 58vw, 300px);
    height: clamp(230px, 58vw, 300px);
  }
}

.loading-screen-text {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(1.05rem, 3vw, 1.25rem);
  background: var(--gradient-text);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-travel 3.2s linear infinite;
}

/* ── indeterminate progress sweep ── */
.loading-progress {
  width: clamp(140px, 30vw, 200px);
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(124, 58, 237, 0.15);
}

.loading-progress-bar {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-brand);
  animation: loading-progress-sweep 1.5s ease-in-out infinite;
}

@keyframes loading-glow-pulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes loading-halo-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 0.9;  transform: scale(1.08); }
}

@keyframes loading-bubble-rise {
  0%   { transform: translate(0, 0);                opacity: 0; }
  12%  { opacity: 0.8; }
  88%  { opacity: 0.35; }
  100% { transform: translate(var(--bx, 12px), -78vh); opacity: 0; }
}

@keyframes loading-progress-sweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(300%); }
}

@media (prefers-reduced-motion: reduce) {
  #loading-screen {
    transition: none;
  }
  .loading-screen-text {
    animation: none;
  }
  .loading-bg-glow,
  .loading-flask-halo {
    animation: none;
  }
  .loading-bubbles {
    display: none;
  }
  .loading-progress-bar {
    animation: none;
    width: 100%;
  }
}