/* ============================================================================
   Luria bounding-box system, CSS half. Lifted VERBATIM from landing.css
   (archive branch archive/site-pre-template, commit d4fb855) so the values
   are byte-identical. JS halves: client/landing.js (hero rotation, [data-vswap]
   swaps, spawnAmbient), client/ambient.js (self-contained ambient layer),
   client/box-transition.js (teardown). Timings/alphas are frozen by
   the template port work order (01_docs/01_planning/) §3-4, and written down
   in notes/ANIMATIONS.md, do not edit a number here without updating both.
   Load order on a page: theme.css → template.css → boxes.css.
   ============================================================================ */

/* ---- tokens (light values; dark block below wins under data-theme=dark) ---- */
:root {
  /* ambient boxes render at FULL element opacity now, the ambience lives in
     these alphas directly, so the labels can be legible (.42) while borders
     stay quiet (.2). (The old .32 layer-opacity knob multiplied the labels
     down to ~14% ink, unreadable.) */
  --box-line:        rgba(10,10,10,.2);    /* ambient box border + ticks     */
  --box-label:       rgba(10,10,10,.42);   /* ambient conf/element labels    */
  --box-line-safe:   rgba(10,10,10,.07);   /* inside [data-box-safe]         */
  --vbox-ink:        rgba(10,10,10,.45);   /* secondary vswap boxes          */
  --pix-line:        rgba(10,10,10,.09);   /* mosaic / vpix grid lines       */
  --pix-tint-a:      rgba(27,77,255,.06);  /* mosaic accent wash             */
  --pix-tint-b:      rgba(27,77,255,.05);  /* vpix accent wash               */
  --note-bg:         rgba(255,255,255,.94);
  --note-line:       rgba(10,10,10,.18);
}
html[data-theme="dark"] {
  --box-line:        rgba(240,237,230,.26); /* deliberate detection boxes, not lost placeholders */
  --box-label:       rgba(240,237,230,.42); /* ambient labels: legible, clearly secondary */
  --box-line-safe:   rgba(240,237,230,.09);
  --vbox-ink:        rgba(240,237,230,.55); /* active swap boxes + their labels */
  --pix-line:        rgba(240,237,230,.12);
  --pix-tint-a:      rgba(110,134,255,.08);
  --pix-tint-b:      rgba(110,134,255,.07);
  --note-bg:         rgba(22,30,46,.94);
  --note-line:       rgba(240,237,230,.3);
  --note-tick:       rgba(240,237,230,.4);
}

/* --- Detection boxes ------------------------------------------------------- */
.demo-boxes, .demo-notes, .ambient-boxes { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.ambient-boxes { z-index: 0; }
.dbox { position: absolute; left: 0; top: 0; border: 1px solid var(--ink); opacity: 0; }
.dbox.is-on { opacity: 1; transition: opacity 70ms linear; }
.dbox.is-off { opacity: 0; transition: opacity 70ms linear; }
.dbox.is-accent { border-color: var(--accent); }
.dbox .tick { position: absolute; background: var(--ink); }
.dbox.is-accent .tick { background: var(--accent); }
.dbox .tick.h { width: 8px; height: 1px; } .dbox .tick.v { width: 1px; height: 8px; }
.dbox .tick.tl-h { left: -1px; top: -1px; } .dbox .tick.tl-v { left: -1px; top: -1px; }
.dbox .tick.tr-h { right: -1px; top: -1px; } .dbox .tick.tr-v { right: -1px; top: -1px; }
.dbox .tick.bl-h { left: -1px; bottom: -1px; } .dbox .tick.bl-v { left: -1px; bottom: -1px; }
.dbox .tick.br-h { right: -1px; bottom: -1px; } .dbox .tick.br-v { right: -1px; bottom: -1px; }
.dbox .conf {
  position: absolute; top: -16px; left: 0;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink); white-space: nowrap;
}
.dbox.is-accent .conf { color: var(--accent); }
.dbox .elabel {
  position: absolute; bottom: -14px; left: 0;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-60); white-space: nowrap;
}
/* Ambient (background) boxes: quietly visible, like a moving watermark.
   Opacity lives in ONE place, on each box (.32 normal, .12 inside a
   data-box-safe block), the layer itself stays at 1 so nothing compounds.
   Bold boxes remain only: the hero .vbox and the demo. */
.dbox--ambient { border-color: var(--box-line); }
.dbox--ambient .tick { background: var(--box-line); }
.dbox--ambient .conf, .dbox--ambient .elabel { color: var(--box-label); }
.dbox--ambient.is-on { opacity: 1; } /* alphas live in the color tokens above */
.dbox--ambient.dbox--insafe { border-color: var(--box-line-safe); }
.dbox--ambient.dbox--insafe .tick { background: var(--box-line-safe); }
.dbox--ambient.dbox--insafe .conf { display: none; }
/* section-level layers (JS-injected by landing.js spawnAmbient) */
.sect-boxes { z-index: -1; }
.sect-boxes--over { z-index: 0; }

/* ---- pixel grid + blur primitives (shared by vpix, mosaic, bt-box) ---- */
@keyframes pix-anim {
  0%   { background-size: 4px 4px, 4px 4px, auto; }
  33%  { background-size: 8px 8px, 8px 8px, auto; }
  66%  { background-size: 5px 5px, 5px 5px, auto; }
  100% { background-size: 9px 9px, 9px 9px, auto; }
}
.is-blurred, .is-blurred > * { filter: blur(5px); }
.sh-el, .vtext { transition: filter 180ms ease; }
/* hero rotation runs its blur ~25% faster than the secondary swaps */
#hero-h1 .vtext, #hero-h1 .vtext > span { transition: filter 135ms ease; }

/* ============== site-wide variant-swap (the box-test theme) =============== */
[data-vswap] { position: relative; }
span[data-vswap] { display: inline-block; }
.vbox {
  position: absolute; inset: -.08em -.22em; z-index: 2; pointer-events: none;
  border: 1px solid currentColor; color: var(--vbox-ink); opacity: 0;
}
/* bold box treatment is reserved for the hero headline (and the demo) */
.hero .vbox { color: var(--ink); }
.vbox.is-on { opacity: 1; transition: opacity 90ms linear; }
.vbox.is-off { opacity: 0; transition: opacity 200ms linear; }
.vbox .tick { position: absolute; background: currentColor; }
.vbox .tick.h { width: 8px; height: 1px; } .vbox .tick.v { width: 1px; height: 8px; }
.vbox .tick.tl-h, .vbox .tick.tl-v { left: -1px; top: -1px; }
.vbox .tick.tr-h, .vbox .tick.tr-v { right: -1px; top: -1px; }
.vbox .tick.bl-h, .vbox .tick.bl-v { left: -1px; bottom: -1px; }
.vbox .tick.br-h, .vbox .tick.br-v { right: -1px; bottom: -1px; }
.vconf {
  position: absolute; top: -19px; left: -1px;
}
.vconf.is-placed {
  top: 0; left: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .05em; white-space: nowrap; line-height: 1;
}
.vpix {
  position: absolute; inset: -.04em -.14em; z-index: 1; pointer-events: none; opacity: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--pix-line) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, var(--pix-line) 0 1px, transparent 1px 6px),
    linear-gradient(var(--pix-tint-b), var(--pix-tint-b));
}
.vpix.is-on { opacity: 1; transition: opacity 110ms ease-out; animation: pix-anim 460ms steps(4, end) infinite; }
.vtext.is-pix { filter: blur(6px); }
/* landing.js reserves min-height for the longest variant so swaps never move
   the fold; .vbox.is-manual carries inline geometry for partial-word swaps */
.vbox.is-manual { inset: auto; left: 0; top: 0; }
#hero-h1 { position: relative; }
#hero-h1 .vtext { display: inline; }

/* ============== box-dissolve page transition ============================== */
.bt-layer { position: fixed; inset: 0; z-index: 999; pointer-events: all; cursor: progress; }
.bt-veil { position: absolute; inset: 0; background: var(--bg); opacity: 0; transition: opacity 250ms ease-out; }
.bt-veil.is-dim { opacity: .55; }
.bt-veil.is-full { opacity: 1; transition: opacity 320ms ease-in; }
.bt-box {
  position: absolute; border: 1px solid var(--ink); opacity: 0; z-index: 2;
  will-change: transform, opacity;
  /* boxes never ease position anywhere on the site, except the inward
     collapse when an element vanishes (see .is-die below). Do not "fix". */
  transition: opacity 70ms linear;
}
.bt-box.is-on { opacity: 1; }
/* the page element being torn down: pixelate, then fade, opacity/filter only */
.bt-t { will-change: opacity, filter; transition: opacity 140ms ease-in, filter 120ms ease; }
.bt-px { filter: blur(5px); }
.bt-gone { opacity: 0 !important; }
.bt-box .tick { position: absolute; background: var(--ink); }
.bt-box .tick.h { width: 8px; height: 1px; } .bt-box .tick.v { width: 1px; height: 8px; }
.bt-box .tick.tl-h, .bt-box .tick.tl-v { left: -1px; top: -1px; }
.bt-box .tick.tr-h, .bt-box .tick.tr-v { right: -1px; top: -1px; }
.bt-box .tick.bl-h, .bt-box .tick.bl-v { left: -1px; bottom: -1px; }
.bt-box .tick.br-h, .bt-box .tick.br-v { right: -1px; bottom: -1px; }
.bt-box .conf {
  position: absolute; top: -16px; left: 0;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink);
}
.bt-box.is-pix {
  backdrop-filter: blur(5px);
  background-image:
    repeating-linear-gradient(0deg, var(--pix-line) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(90deg, var(--pix-line) 0 1px, transparent 1px 6px);
  animation: pix-anim 420ms steps(4, end) infinite;
}
.bt-box.is-die { /* the box collapses inward as its element vanishes */
  transform: scale(.9); opacity: 0;
  transition: transform 140ms ease-in, opacity 140ms ease-in;
}

/* ============== DELIBERATE: the storefront mockup stays LIGHT =============