/*
 * Boot-critical + static fallback stylesheet.
 *
 * Externalized from index.html so no <style> element or style="" attribute
 * is required anywhere in the served HTML. React's mounted tree still uses
 * dynamic style attributes, so the production CSP permits inline styles while
 * keeping inline script execution blocked.
 *   - the pre-hydration background/boot shell (no FCP flash-of-white, no CLS)
 *   - the boot-shell entrance/thruster/ray animations
 *   - the <noscript> crawler fallback in index.html
 *   - the server-rendered SEO body fallback + brief share page in serve.mjs
 *     (both are injected into the same document that loads this stylesheet)
 *
 * Loaded via a render-blocking <link rel="stylesheet"> in <head>, in the
 * same position/order the previous inline <style> blocks occupied.
 */

/* ── Background-before-paint ─────────────────────────────────────── */
/* Background colour + depth gradient — must match body rules in index.css exactly
   so there is no FCP jump between boot paint and hydrated CSS. */
html, body {
  background-color: #080F14;
  background-image:
    radial-gradient(ellipse 120% 55% at 50% -5%, hsl(210 38% 11%) 0%, transparent 68%),
    radial-gradient(ellipse 100% 80% at 50% 50%, transparent 55%, hsl(210 28% 3%) 100%);
  margin: 0;
}

/* ── Boot shell icon sizing ─────────────────────────────────────── */
#l3-boot-img { border-radius: 36px; position: relative; z-index: 1; }
#l3-boot-icon-wrap {
  position: relative; width: 160px; height: 160px;
  display: flex; align-items: center; justify-content: center;
}
/* Thruster glow: burnt-orange radial beneath the icon */
#l3-thruster {
  position: absolute; bottom: -18px; left: 50%;
  width: 60px; height: 28px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, #d47030 0%, transparent 72%);
  opacity: 0; z-index: 0; pointer-events: none;
}
/* Loading pulse: a minimal rotating arc beneath the icon, signaling that
   loading is still in progress once the entrance animation has settled. */
#l3-boot-pulse {
  position: absolute; bottom: -32px; left: 50%;
  width: 22px; height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: #d47030;
  opacity: 0; z-index: 0; pointer-events: none;
}
@media (max-width: 767px) {
  #l3-boot-img { width: 96px !important; height: 96px !important; border-radius: 22px !important; }
  #l3-boot-icon-wrap { width: 96px !important; height: 96px !important; }
  /* Scale SVG ray fan proportionally: 96/160 = 0.6 */
  #l3-boot-rays { width: 192px !important; height: 240px !important; top: -23px !important; }
}

/* ── Boot shell layout (was inline style="" on #l3-boot / svg) ────── */
#l3-boot {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #080F14; z-index: 99999;
  transition: opacity 0.65s ease-in, transform 0.65s ease-in, filter 0.65s ease-in;
  transform-origin: center center;
  will-change: transform, filter, opacity;
}
#l3-boot-rays {
  position: absolute; left: 50%; top: -38.4px;
  transform: translateX(-50%);
  overflow: visible; pointer-events: none; z-index: 2;
}
#l3-boot-retry { display: none; margin-top: 2.5rem; text-align: center; }
#l3-boot-retry-btn {
  background: none; border: 1px solid #d4703055; color: #d47030;
  font-family: sans-serif; font-size: 0.8125rem;
  padding: 0.5rem 1.25rem; border-radius: 6px; cursor: pointer;
}
#l3-boot-error {
  display: none; margin-top: 1rem; font-family: monospace; font-size: 0.7rem;
  color: #94a3b8; max-width: 320px; word-break: break-all; text-align: left;
  padding: 0 1rem;
}

/* ── Boot animations — only when motion is allowed ──────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* Icon: slow deliberate ascent into position */
  @keyframes l3icon-float {
    from { transform: translateY(8px); }
    to   { transform: translateY(0); }
  }
  #l3-boot-img {
    will-change: transform;
    animation: l3icon-float 1.4s cubic-bezier(0.16,1,0.3,1) both;
  }

  /* Thruster glow: slow atmospheric breathe beneath the icon */
  @keyframes l3thruster {
    0%,100% { opacity: 0.12; transform: translateX(-50%) scale(0.8); }
    50%     { opacity: 0.35; transform: translateX(-50%) scale(1.2); }
  }
  #l3-thruster {
    will-change: transform, opacity;
    animation: l3thruster 2.8s ease-in-out 0.4s infinite;
  }

  /* Loading pulse: fades in once the entrance settles, then rotates gently
     to signal in-progress loading without competing with the icon/rays. */
  @keyframes l3pulse-in { to { opacity: 0.5; } }
  @keyframes l3pulse-spin { to { transform: rotate(360deg); } }
  #l3-boot-pulse {
    will-change: transform, opacity;
    animation:
      l3pulse-in 0.8s ease-out 2s forwards,
      l3pulse-spin 1.4s linear 2s infinite;
  }

  /* Ray entrance keyframes — one per unique opacity target */
  @keyframes l3re72 { from{opacity:0;stroke-dashoffset:144} to{opacity:.72;stroke-dashoffset:0} }
  @keyframes l3re56 { from{opacity:0;stroke-dashoffset:144} to{opacity:.56;stroke-dashoffset:0} }
  @keyframes l3re46 { from{opacity:0;stroke-dashoffset:144} to{opacity:.46;stroke-dashoffset:0} }
  @keyframes l3re36 { from{opacity:0;stroke-dashoffset:144} to{opacity:.36;stroke-dashoffset:0} }
  @keyframes l3re27 { from{opacity:0;stroke-dashoffset:144} to{opacity:.27;stroke-dashoffset:0} }
  @keyframes l3re19 { from{opacity:0;stroke-dashoffset:144} to{opacity:.19;stroke-dashoffset:0} }
  @keyframes l3re13 { from{opacity:0;stroke-dashoffset:144} to{opacity:.13;stroke-dashoffset:0} }
  @keyframes l3re10 { from{opacity:0;stroke-dashoffset:144} to{opacity:.10;stroke-dashoffset:0} }
  @keyframes l3re07 { from{opacity:0;stroke-dashoffset:144} to{opacity:.07;stroke-dashoffset:0} }

  /* Inward shimmer drift (same mechanic as IconRays.tsx ${uid}-drift) */
  @keyframes l3shimmer {
    0%   { stroke-dashoffset:  0;    opacity: 0;    }
    22%  {                           opacity: 0.38; }
    78%  {                           opacity: 0.38; }
    100% { stroke-dashoffset: -130;  opacity: 0;    }
  }

  /* Base ray classes (animation-delay applied via .l3d-* utility classes) */
  .l3rb72 { animation: l3re72 1.1s ease-out both; will-change: opacity; }
  .l3rb56 { animation: l3re56 1.1s ease-out both; will-change: opacity; }
  .l3rb46 { animation: l3re46 1.1s ease-out both; will-change: opacity; }
  .l3rb36 { animation: l3re36 1.1s ease-out both; will-change: opacity; }
  .l3rb27 { animation: l3re27 1.1s ease-out both; will-change: opacity; }
  .l3rb19 { animation: l3re19 1.1s ease-out both; will-change: opacity; }
  .l3rb13 { animation: l3re13 1.1s ease-out both; will-change: opacity; }
  .l3rb10 { animation: l3re10 1.1s ease-out both; will-change: opacity; }
  .l3rb07 { animation: l3re07 1.1s ease-out both; will-change: opacity; }

  /* Shimmer layer (delay = 1.1s entrance + ray stagger, via .l3d-* classes) */
  .l3rs {
    stroke-dasharray: 14 130;
    animation: l3shimmer 5.5s linear infinite;
    will-change: opacity;
  }

  /* Tab-visibility pause hook (consistent with existing pattern) */
  .paused { animation-play-state: paused !important; }

  /* Per-ray stagger delay utility classes — replace inline style="animation-delay:...".
     Naming: l3d-<seconds with dot removed>, matching each ray's original inline value. */
  .l3d-0   { animation-delay: 0s; }
  .l3d-018 { animation-delay: 0.18s; }
  .l3d-038 { animation-delay: 0.38s; }
  .l3d-060 { animation-delay: 0.60s; }
  .l3d-082 { animation-delay: 0.82s; }
  .l3d-104 { animation-delay: 1.04s; }
  .l3d-126 { animation-delay: 1.26s; }
  .l3d-146 { animation-delay: 1.46s; }
  .l3d-164 { animation-delay: 1.64s; }
  .l3d-180 { animation-delay: 1.80s; }
  .l3d-110 { animation-delay: 1.10s; }
  .l3d-128 { animation-delay: 1.28s; }
  .l3d-148 { animation-delay: 1.48s; }
  .l3d-170 { animation-delay: 1.70s; }
  .l3d-192 { animation-delay: 1.92s; }
  .l3d-214 { animation-delay: 2.14s; }
  .l3d-236 { animation-delay: 2.36s; }
  .l3d-256 { animation-delay: 2.56s; }
  .l3d-274 { animation-delay: 2.74s; }
  .l3d-290 { animation-delay: 2.90s; }
}

/* ── <noscript> static fallback (index.html) ─────────────────────── */
.l3-ns-wrap { padding: 2rem; color: #e2e8f0; background: #080F14; font-family: sans-serif; max-width: 860px; margin: 0 auto; line-height: 1.6; }
.l3-ns-h1   { font-size: 2rem; margin-bottom: 0.5rem; }
.l3-ns-lead { font-size: 1.1rem; color: #94a3b8; margin-bottom: 1.5rem; }
.l3-ns-h2   { font-size: 1.25rem; margin-bottom: 0.5rem; }
.l3-ns-p    { color: #94a3b8; }
.l3-ns-ul   { color: #94a3b8; margin-top: 1rem; padding-left: 1.25rem; }
.l3-ns-foot { margin-top: 1.5rem; color: #64748b; font-size: 0.875rem; }

/* ── SEO fallback body content (serve.mjs buildBodyInjection) ────── */
.l3-wrap  { font-family: system-ui, sans-serif; color: #e2e8f0; background: #080F14; padding: 2rem 1.5rem; max-width: 860px; margin: 0 auto; line-height: 1.6; }
.l3-h1    { font-size: 2rem; font-weight: 600; margin-bottom: 0.5rem; color: #f8fafc; line-height: 1.1; }
.l3-h2    { font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: #f1f5f9; }
.l3-lead  { font-size: 1.05rem; color: #94a3b8; margin-bottom: 1.25rem; }
.l3-p     { color: #94a3b8; margin-bottom: 1rem; }
.l3-ul    { color: #94a3b8; margin: 0.5rem 0 1rem; padding-left: 1.25rem; }
.l3-li    { margin-bottom: 0.25rem; }
.l3-cta   { display: inline-block; margin-top: 1.25rem; padding: 0.6rem 1.5rem; border: 1px solid #d47030; color: #d47030; border-radius: 4px; text-decoration: none; font-size: 0.9rem; }
.l3-cta-secondary { display: inline-block; margin-top: 1.25rem; margin-left: 1rem; padding: 0.6rem 1.5rem; border: 1px solid #475569; color: #94a3b8; border-radius: 4px; text-decoration: none; font-size: 0.9rem; }
.l3-label { font-size: 0.75rem; font-family: monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #d47030; opacity: 0.75; margin-bottom: 0.5rem; display: block; }
.l3-dim   { color: #94a3b8; font-size: 0.875rem; margin-top: 0.5rem; }

/* ── Brief share page fallback (serve.mjs serveBriefSharePage) ───── */
.l3-brief-wrap        { padding: 2rem; color: #e2e8f0; background: #080F14; font-family: monospace; max-width: 720px; margin: 0 auto; line-height: 1.6; }
.l3-brief-h1          { font-size: 1.5rem; margin-bottom: 0.25rem; }
.l3-brief-sector      { color: #94a3b8; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; margin: 0 0 0.5rem; }
.l3-brief-codename    { color: #64748b; font-size: 0.75rem; margin: 0 0 1rem; }
.l3-brief-tier        { color: #64748b; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 1.5rem; }
.l3-brief-quote       { border-left: 2px solid #ea7c2f; padding-left: 1rem; margin-bottom: 1.5rem; }
.l3-brief-summary     { margin: 0 0 0.5rem; color: #e2e8f0; }
.l3-brief-objective   { margin: 0; color: #94a3b8; font-size: 0.875rem; }
.l3-brief-field       { margin: 0.75rem 0; }
.l3-brief-field-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: #94a3b8; }
.l3-brief-field-value { color: #e2e8f0; }
.l3-brief-footer      { margin-top: 2rem; color: #64748b; font-size: 0.75rem; }