/* ══════════════════════════════════════════════════════════
   hl-splash.css — the Happy Light start-up animation.

   Shared byte-for-byte by Journal, the Arcade and the Portal. The bulb
   draws itself, its filament switches on, a warm glow blooms and the
   app's name rises in underneath. Lit by 0.65s, held lit for half a second
   so the finished bulb can be seen, gone by about 1.35s.

   It only ever plays when the app is launched as an installed app:
   the manifests start at `/?source=pwa`. A normal visit, a reload in a
   browser tab or an in-app navigation never sees it. `?splash` forces it
   (for demos).

   Two ways to end it:
   - Journal and the Arcade load hl-splash.js, which puts
     `hl-splash-on` on <html> and fades the splash (`.is-out`) as soon
     as the app is ready — never earlier than the bulb is lit, never
     later than it has to be.
   - The Portal runs no script at all, so its server renders the markup
     with `data-auto` and the fade is pure CSS, on a fixed timer.
   Either way a CSS safety timer removes it after 4s, so a broken script
   can never leave an app hidden behind its splash.

   Colours: the bulb keeps its daytime colours in both themes (it is a
   lit bulb either way). Only the ground, the glow and the name follow
   the theme. An app whose ground is not the default sets
   --hls-light / --hls-dark on .hl-splash in its own stylesheet.
   ══════════════════════════════════════════════════════════ */

.hl-splash {
  --hls-bg: var(--hls-light, #faf8f4);
  --hls-ink: #3a3026;
  --hls-glow: rgba(245, 158, 11, .62);
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  place-items: center;
  background: var(--hls-bg);
  color: var(--hls-ink);
  /* A failed or missing script must not trap the app: always gone by 4.2s. */
  animation: hls-out .2s ease 4s forwards;
}

@media (prefers-color-scheme: dark) {
  .hl-splash { --hls-bg: var(--hls-dark, #0b0a0d); --hls-ink: #f3ece0; --hls-glow: rgba(245, 158, 11, .78); }
}
html[data-theme="light"] .hl-splash { --hls-bg: var(--hls-light, #faf8f4); --hls-ink: #3a3026; --hls-glow: rgba(245, 158, 11, .62); }
html[data-theme="dark"] .hl-splash { --hls-bg: var(--hls-dark, #0b0a0d); --hls-ink: #f3ece0; --hls-glow: rgba(245, 158, 11, .78); }
html[data-hl-splash-theme="light"] .hl-splash { --hls-bg: var(--hls-light, #faf8f4); --hls-ink: #3a3026; --hls-glow: rgba(245, 158, 11, .62); }
html[data-hl-splash-theme="dark"] .hl-splash { --hls-bg: var(--hls-dark, #0b0a0d); --hls-ink: #f3ece0; --hls-glow: rgba(245, 158, 11, .78); }

html.hl-splash-on .hl-splash,
.hl-splash[data-auto] { display: grid; }

/* While it shows, the page underneath must not scroll behind it. */
html.hl-splash-on, html.hl-splash-on body { overflow: hidden; }

/* The Portal's script-free exit: lit by 0.65s, held, gone by 1.35s. */
.hl-splash[data-auto] { animation: hls-out .2s ease 1.15s forwards; }

/* hl-splash.js's exit. */
.hl-splash.is-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.hl-splash__inner {
  display: grid;
  justify-items: center;
  gap: 18px;
}

.hl-splash__bulb {
  width: min(34vmin, 156px);
  height: auto;
  overflow: visible;
}

/* ── the bulb, in the order it comes alive ── */

/* 1. The outline draws itself (each path has pathLength="1"). */
.hl-splash .hls-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hls-draw .28s cubic-bezier(.4, 0, .2, 1) forwards;
}
.hl-splash .hls-base { animation-delay: .08s; }

/* 2. The glass fills. */
.hl-splash .hls-glass {
  fill-opacity: 0;
  animation: hls-fill .22s ease .08s forwards;
}

/* 3. The filament switches on: a dim wire that warms to amber. */
.hl-splash .hls-filament {
  stroke: #8f7a5a;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hls-draw .14s ease .16s forwards, hls-light .18s ease .26s forwards;
}

/* 4. The glow blooms behind it. */
.hl-splash .hls-glow {
  fill: var(--hls-glow);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.55);
  animation: hls-bloom .32s cubic-bezier(.2, .8, .2, 1) .26s forwards;
}

/* 5. It smiles. */
.hl-splash .hls-face,
.hl-splash .hls-shine {
  opacity: 0;
  animation: hls-show .16s ease .28s forwards;
}

/* 6. The name rises in underneath. */
.hl-splash__name {
  margin: 0;
  font: 600 22px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .01em;
  opacity: 0;
  transform: translateY(6px);
  animation: hls-rise .22s ease .3s forwards;
}

@keyframes hls-draw  { to { stroke-dashoffset: 0; } }
@keyframes hls-fill  { to { fill-opacity: 1; } }
@keyframes hls-light { to { stroke: #e0a02a; } }
@keyframes hls-bloom { 60% { opacity: 1; } to { opacity: .9; transform: scale(1); } }
@keyframes hls-show  { to { opacity: 1; } }
@keyframes hls-rise  { to { opacity: 1; transform: none; } }
@keyframes hls-out   { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Reduced motion: a lit bulb, already on, and a short fade. */
@media (prefers-reduced-motion: reduce) {
  .hl-splash .hls-line,
  .hl-splash .hls-filament { stroke-dashoffset: 0; animation: none; }
  .hl-splash .hls-filament { stroke: #e0a02a; }
  .hl-splash .hls-glass { fill-opacity: 1; animation: none; }
  .hl-splash .hls-glow { opacity: .9; transform: none; animation: none; }
  .hl-splash .hls-face,
  .hl-splash .hls-shine,
  .hl-splash__name { opacity: 1; transform: none; animation: none; }
  .hl-splash[data-auto] { animation-delay: .25s; }
  .hl-splash.is-out { transition-duration: .12s; }
}