/* reader-splash.css — full-page loading splash shown on (re)load while the
   briefing fetches. Aurora background (same pastel blobs as the sidebar) +
   the "Reader" wordmark with a white highlight sweeping left→right across the
   dark letters. Removed by loader.js once applyServerBriefing renders (with a
   safety-timeout fallback so it can never get stuck). */

.reader-splash{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  background:#fbfcff;
  transition:opacity .4s ease;
}
.reader-splash.reader-splash-hide{ opacity:0; pointer-events:none; }

.reader-splash-aurora{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(48% 38% at 22% 30%, rgba(70,120,245,.30), transparent 70%),
    radial-gradient(46% 36% at 78% 32%, rgba(170,80,225,.24), transparent 70%),
    radial-gradient(44% 36% at 58% 62%, rgba(40,195,205,.20), transparent 72%),
    radial-gradient(46% 36% at 36% 68%, rgba(235,90,155,.18), transparent 72%);
  background-size:160% 160%, 170% 170%, 165% 165%, 180% 180%;
  background-repeat:no-repeat;
  background-position:0% 0%, 100% 0%, 50% 100%, 0% 100%;
  animation:reader-splash-aurora 16s ease-in-out infinite alternate;
}
@keyframes reader-splash-aurora{
  0%   { background-position:0% 0%,   100% 0%,  50% 100%,  0% 100%; }
  50%  { background-position:40% 30%,  60% 20%,  30% 70%,  30% 60%; }
  100% { background-position:20% 40%,  80% 10%,  60% 90%,  10% 80%; }
}

/* Rendered exactly like the header / sidebar "Reader" wordmark: Alkatra,
   solid dark fill, thick frosted white outline (stroke painted first, the dark
   fill on top via paint-order) + soft white glow. No italic, no shimmer — just
   scaled up for the splash. (briefing-sidebar.css .sidebar .title.) */
.reader-splash-logo{
  position:relative; z-index:1;
  font-family:'Alkatra', cursive; font-weight:600; line-height:1.1;
  font-size:72px; letter-spacing:.01em; color:#0f1117;
  -webkit-text-stroke:14px rgba(255,255,255,0.88);
  paint-order:stroke fill;
  text-shadow:0 0 16px rgba(255,255,255,0.55);
}

/* Left→right outline sweep. A stroke-only copy of the wordmark (transparent
   fill, fully-opaque white stroke) sits exactly over the base; a narrow
   gradient mask band travels across it so a bright highlight runs along the
   outline. Stroke width is inherited so the desktop/mobile sizes track the
   base automatically. */
.reader-splash-logo::after{
  content:"Reader";
  position:absolute; left:0; top:0; pointer-events:none;
  font:inherit; letter-spacing:inherit; line-height:inherit;
  /* Dark fill (same as the base wordmark) painted OVER the inner half of the
     stroke via paint-order, so only the outer outline ring lights up — the
     sweep rides the outline, not the whole letter. */
  color:#0f1117;
  /* Blue highlight (brand accent) — visible sweeping across the white outline,
     where a white sweep would be invisible. */
  -webkit-text-stroke-width:inherit; -webkit-text-stroke-color:rgba(110,150,255,0.75);
  paint-order:stroke fill;
  /* Soft, wide band with feathered edges so the highlight glides subtly. */
  -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000 50%, transparent 70%);
          mask-image:linear-gradient(90deg, transparent 30%, #000 50%, transparent 70%);
  -webkit-mask-size:300% 100%;  mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:reader-splash-sweep 2.6s ease-in-out infinite;
}
/* position 100% → band off the LEFT; 0% → band off the RIGHT, so going
   100%→0% sweeps the highlight from left to right. Hold off-screen briefly
   before repeating. */
@keyframes reader-splash-sweep{
  0%   { -webkit-mask-position:100% 0; mask-position:100% 0; }
  55%  { -webkit-mask-position:0% 0;   mask-position:0% 0; }
  100% { -webkit-mask-position:0% 0;   mask-position:0% 0; }
}

@media (max-width:600px){
  .reader-splash-logo{ font-size:52px; -webkit-text-stroke-width:10px; }
}
@media (prefers-reduced-motion:reduce){
  .reader-splash-aurora{ animation:none; }
  .reader-splash-logo::after{ animation:none; opacity:0; }
}