/* Brics1 live wordmark: "Brics1.btc" <-> "Brics1.Currency" in Bricolage Grotesque 700 with a CRT-style switch.
   CSS only (no JS, no data: URIs) so it works under CSP default-src 'self'.
   The B1 mark is an <img> of b1-header/b1-hero (tight crop of the D18 transparent export of logo-locked.png: black background and empty margin removed only) and never animates.
   Continuous loop (Anoop, 4 Nov 10:16 AEDT): every animation is infinite and its 0% and 100% frames match, so the wrap is invisible.
   Timeline (4.8 s loop, same as the video masters): btc hold 0-38.33%, switch 38.33-50%,
   Currency hold 50-88.33%, switch back 88.33-100%.
   Loops continuously for all users, prefers-reduced-motion included (base standard, 5 Nov 2026). */
@font-face{font-family:"B1 Display";src:url(fonts/BricolageGrotesque-B1.woff2) format("woff2");font-weight:600 800;font-display:swap}  /* Bricolage Grotesque, OFL 1.1, see fonts/OFL-BricolageGrotesque.txt */
.b1wm{--b1wm-ink:#F3EEE4;--b1wm-red:#E5341A;--b1wm-size:64px;--b1wm-dur:4.8s;
  display:inline-flex;align-items:center;gap:.55em;font:700 var(--b1wm-size)/1 "B1 Display","B1 Grotesk",system-ui,sans-serif;font-optical-sizing:auto;
  letter-spacing:-.045em;color:var(--b1wm-ink);text-decoration:none;white-space:nowrap}
.b1wm__mark{height:2em;width:auto;display:block;flex:none}
.b1wm__text{display:inline-flex;align-items:baseline}
.b1wm__dot{color:var(--b1wm-red);margin-left:.035em}
/* the "tube": both words stacked in one grid cell; width = the longer word */
.b1wm__tube{position:relative;display:inline-grid;color:var(--b1wm-red)}
.b1wm__w{grid-area:1/1;position:relative;transform-origin:50% 55%;will-change:transform,opacity,filter}
.b1wm__w::before,.b1wm__w::after{content:attr(data-t);position:absolute;inset:0;opacity:0;pointer-events:none}
.b1wm__w::before{color:#ff2a4d;mix-blend-mode:screen}
.b1wm__w::after{color:#2ad9ff;mix-blend-mode:screen}
/* scanlines + static, visible only during switches; overlay blend keeps it on the glyphs (black stays black) */
.b1wm__tube::after{content:"";position:absolute;inset:-.12em -.08em;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.42) 0 1px,transparent 1px 3px),url(img/crt-noise.png);
  background-size:auto,96px 96px;mix-blend-mode:overlay;border-radius:.08em;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  animation:b1wm-static var(--b1wm-dur) linear infinite}
.b1wm__a{animation:b1wm-a var(--b1wm-dur) linear infinite}
.b1wm__b{animation:b1wm-b var(--b1wm-dur) linear infinite;opacity:0}
.b1wm__a::before,.b1wm__b::before{animation:b1wm-r var(--b1wm-dur) steps(1) infinite}
.b1wm__a::after,.b1wm__b::after{animation:b1wm-c var(--b1wm-dur) steps(1) infinite}
.b1wm .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* word A ("btc"): on, flicker out at ~39-44%, back in at ~94-100% */
@keyframes b1wm-a{
  0%,38.3%{opacity:1;transform:none;filter:none}
  39.2%{opacity:.25;transform:translateX(.04em) skewX(-8deg);filter:brightness(1.8)}
  40%{opacity:1;transform:translateX(-.03em);filter:brightness(1.4)}
  41.2%{opacity:.9;transform:translateY(-.18em) scaleY(1.06);filter:brightness(1.6) blur(.4px)}
  42.4%{opacity:1;transform:scale(1.08,.06);filter:brightness(3) blur(.6px)}
  43.4%,92%{opacity:0;transform:scale(1.15,.02);filter:brightness(3)}
  93.2%{opacity:1;transform:scale(1.1,.05);filter:brightness(3) blur(.6px)}
  94.6%{opacity:.85;transform:translateY(.14em) scaleY(1.08);filter:brightness(1.6) blur(.3px)}
  95.8%{opacity:.3;transform:translateX(.05em) skewX(7deg);filter:brightness(1.8)}
  96.8%{opacity:1;transform:translateX(-.02em);filter:brightness(1.3)}
  98.4%,100%{opacity:1;transform:none;filter:none}}
/* word B ("Currency"): mirror image, half a loop later */
@keyframes b1wm-b{
  0%,42.6%{opacity:0;transform:scale(1.15,.02);filter:brightness(3)}
  43.6%{opacity:1;transform:scale(1.1,.05);filter:brightness(3) blur(.6px)}
  45%{opacity:.85;transform:translateY(.14em) scaleY(1.08);filter:brightness(1.6) blur(.3px)}
  46.2%{opacity:.3;transform:translateX(-.05em) skewX(7deg);filter:brightness(1.8)}
  47.2%{opacity:1;transform:translateX(.02em);filter:brightness(1.3)}
  48.8%,88.3%{opacity:1;transform:none;filter:none}
  89.2%{opacity:.25;transform:translateX(-.04em) skewX(8deg);filter:brightness(1.8)}
  90%{opacity:1;transform:translateX(.03em);filter:brightness(1.4)}
  91.2%{opacity:.9;transform:translateY(.18em) scaleY(1.06);filter:brightness(1.6) blur(.4px)}
  92.4%{opacity:1;transform:scale(1.08,.06);filter:brightness(3) blur(.6px)}
  93.4%,100%{opacity:0;transform:scale(1.15,.02);filter:brightness(3)}}
/* RGB split + tear slices (red and cyan ghost copies) only inside the two switch windows */
@keyframes b1wm-r{
  0%,38.3%,50%,88.3%{opacity:0;transform:none;clip-path:none}
  38.4%,88.4%{opacity:.85;transform:translate(-.05em,0);clip-path:inset(10% 0 52% 0)}
  40.4%,90.4%{opacity:.75;transform:translate(.08em,-.02em);clip-path:inset(48% 0 18% 0)}
  42.4%,92.4%{opacity:.9;transform:translate(-.1em,0);clip-path:inset(0 0 70% 0)}
  44.4%,94.4%{opacity:.8;transform:translate(.06em,.02em);clip-path:inset(60% 0 0 0)}
  46.4%,96.4%{opacity:.7;transform:translate(-.04em,0);clip-path:inset(25% 0 30% 0)}
  48.4%,98.4%{opacity:.4;transform:translate(-.02em,0);clip-path:none}
  100%{opacity:0;transform:none;clip-path:none}}
@keyframes b1wm-c{
  0%,38.3%,50%,88.3%{opacity:0;transform:none;clip-path:none}
  38.4%,88.4%{opacity:.85;transform:translate(.05em,0);clip-path:inset(30% 0 35% 0)}
  40.4%,90.4%{opacity:.75;transform:translate(-.08em,.02em);clip-path:inset(0 0 62% 0)}
  42.4%,92.4%{opacity:.9;transform:translate(.1em,0);clip-path:inset(55% 0 5% 0)}
  44.4%,94.4%{opacity:.8;transform:translate(-.06em,-.02em);clip-path:inset(12% 0 50% 0)}
  46.4%,96.4%{opacity:.7;transform:translate(.04em,0);clip-path:inset(40% 0 20% 0)}
  48.4%,98.4%{opacity:.4;transform:translate(.02em,0);clip-path:none}
  100%{opacity:0;transform:none;clip-path:none}}
@keyframes b1wm-static{
  0%,38.3%,50%,88.3%,100%{opacity:0;background-position:0 0,0 0}
  39%,89%{opacity:.55;background-position:0 1px,13px 41px}
  41%,91%{opacity:.75;background-position:0 2px,71px 7px}
  43%,93%{opacity:.85;background-position:0 0,29px 83px}
  45%,95%{opacity:.6;background-position:0 1px,88px 19px}
  47.5%,97.5%{opacity:.3;background-position:0 2px,5px 60px}}
/* light backgrounds (site header on Ledger Paper): ink text, multiply ghosts */
.b1wm--light{--b1wm-ink:#191816}
.b1wm--light .b1wm__w::before,.b1wm--light .b1wm__w::after{mix-blend-mode:multiply}
.b1wm--light .b1wm__tube::after{mix-blend-mode:normal;background:repeating-linear-gradient(to bottom,rgba(243,238,228,.6) 0 1px,transparent 1px 3px)}
/* Continuous loop for everyone, including prefers-reduced-motion (Anoop, 5 Nov 2026 09:40 AEDT:
   "Continuous loop is the only way. Thats the base standard"). No reduced-motion still override.
   Site revert: REDUCED_MOTION_STILL = True in brics1-app/tools/build.py. */
/* site header (every page). Mark = b1-header.png (tight transparent B1, 4:3), never animated.
   Height tuned so the B1 face sits about twice the wordmark cap height and shares its vertical centre. */
.b1wm--header{--b1wm-size:19px;gap:7px}
.b1wm--header .b1wm__mark{height:26px;width:auto;aspect-ratio:4/3}
.b1wm--header .b1wm__text{font-weight:700;letter-spacing:-.02em}
.b1wm--header span{font:inherit;letter-spacing:inherit}
/* home hero: large use of the same wordmark */
.b1wm--hero{--b1wm-size:clamp(26px,3.6vw,52px);display:flex;width:max-content;max-width:100%;gap:.28em;margin:0 0 28px}
.b1wm--hero .b1wm__mark{height:1.45em;width:auto;aspect-ratio:4/3}
@media (max-width:900px){.b1wm--hero{--b1wm-size:clamp(22px,7.2vw,52px)}}
.b1wm .sr,.brand .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* footer (every page): same looping wordmark, small, on the cream page (main logo, Anoop 4 Nov 2026 22:22 AEDT) */
.b1wm--footer{--b1wm-size:16px;gap:6px;margin:0 0 14px}
.b1wm--footer .b1wm__mark{height:22px;width:auto;aspect-ratio:4/3}
.b1wm--footer .b1wm__text{font-weight:700;letter-spacing:-.02em}
.b1wm--footer span{font:inherit;letter-spacing:inherit}