/* GRIMLIFE shared glow specification ---------------------------------------
   One source of truth for the three luminous render primitives that must
   match between the live scanner and Export Studio. The live DOM consumes
   these variables directly; js/glow-renderer.js reads the same computed
   values for the export canvas. */
#grim-simple-unfold{
  --gl-wave-b1:5px;
  --gl-wave-b2:14px;
  --gl-wave-b3:32px;
  --gl-wave-b4:58px;
  --gl-wave-c1:rgba(255,255,255,.96);
  --gl-wave-c2:rgba(255,255,255,.62);
  --gl-wave-c3:rgba(255,255,255,.29);
  --gl-wave-c4:rgba(255,255,255,.12);

  --gl-progress-b1:10px;
  --gl-progress-b2:26px;
  --gl-progress-b3:52px;
  --gl-progress-c1:rgba(255,255,255,.90);
  --gl-progress-c2:rgba(255,255,255,.38);
  --gl-progress-c3:rgba(255,255,255,.14);

  --gl-seg-b1:9px;
  --gl-seg-b2:22px;
  --gl-seg-b3:44px;
  --gl-seg-b4:78px;
  --gl-seg-p1:93.3%;
  --gl-seg-p2:66.7%;
  --gl-seg-p3:33.3%;
  --gl-seg-p4:13.3%;
  --gl-seg-halo-blur:10px;
  --gl-seg-halo-alpha:.35;
}

/* The live surface now consumes the same spec that Export Studio reads. */
#grim-simple-unfold .gss-wave-past .gss-wave-bar{
  box-shadow:
    0 0 var(--gl-wave-b1) var(--gl-wave-c1),
    0 0 var(--gl-wave-b2) var(--gl-wave-c2),
    0 0 var(--gl-wave-b3) var(--gl-wave-c3),
    0 0 var(--gl-wave-b4) var(--gl-wave-c4) !important;
}
#grim-simple-unfold .fill{
  box-shadow:
    0 0 var(--gl-progress-b1) var(--gl-progress-c1),
    0 0 var(--gl-progress-b2) var(--gl-progress-c2),
    0 0 var(--gl-progress-b3) var(--gl-progress-c3) !important;
}
#grim-simple-unfold .seg.on{
  box-shadow:
    0 0 var(--gl-seg-b1) color-mix(in srgb,var(--c) var(--gl-seg-p1),transparent),
    0 0 var(--gl-seg-b2) color-mix(in srgb,var(--c) var(--gl-seg-p2),transparent),
    0 0 var(--gl-seg-b3) color-mix(in srgb,var(--c) var(--gl-seg-p3),transparent),
    0 0 var(--gl-seg-b4) color-mix(in srgb,var(--c) var(--gl-seg-p4),transparent),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}
#grim-simple-unfold .seg.on::before{
  filter:blur(var(--gl-seg-halo-blur)) !important;
  opacity:var(--gl-seg-halo-alpha) !important;
}

/* Preserve the already-approved mobile fullscreen compensation, but express
   it through the same variables so the spec stays centralized. */
@media (max-width:560px){
  .app[data-recording="true"][data-record-stage="capture"] #grim-simple-unfold{
    --gl-progress-b1:10px;
    --gl-progress-b2:28px;
    --gl-progress-b3:56px;
    --gl-progress-c1:rgba(255,255,255,.95);
    --gl-progress-c2:rgba(255,255,255,.48);
    --gl-progress-c3:rgba(255,255,255,.20);

    --gl-seg-b1:11px;
    --gl-seg-b2:28px;
    --gl-seg-b3:56px;
    --gl-seg-b4:92px;
    --gl-seg-halo-blur:12px;
    --gl-seg-halo-alpha:.46;
  }
}