/* ══════════════════════════════════════════════════════════════
   Backlight prototype kit v3 — Exposure, selected direction
   tokens · mark (with beam) · 6 cursors · stage · pill nav
   ══════════════════════════════════════════════════════════════
   v3 changes from v2:
   · dark is the default theme, not system
   · the mark carries its light band (v2's mark was band-less)
   · six cursor families, switched per beat
   · two scroll behaviours, switchable at runtime
   · the interactive wire replaces the viewfinder's centre ticks
   ══════════════════════════════════════════════════════════════ */

/* ── tokens ───────────────────────────────────────────────────
   Dark is the default: the bare :root IS the dark palette, and
   light is opt-in via [data-theme="light"]. This is the reverse
   of v2 and means a page renders dark before JS runs.          */
:root{
  --bg:#0A0A0C; --bg-2:#121216; --bg-3:#1A1A20;
  --fg:#F2F1EC; --fg-2:#A09EA9; --fg-3:#726F7C;
  --line:#242430; --hair:#1B1B22;
  --grey:#595A5C; --light:#A7AAAC; --yellow:#F4D70D;
  --cur-core:#F2F1EC; --cur-glow:rgba(244,215,13,1);
  --shadow:0 24px 70px rgba(0,0,0,.62);
  /* the mark's light band, warm on dark so it reads as light
     raking across an already-pale letterform */
  --band-mid:#FFFAE8; --band-lit:#FFEE9C;
  /* the hero beam */
  --hero-dim:#2B2B33; --beam-hot:#FFFDF4; --beam-lit:#FFE98A;
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --gut:clamp(18px,4vw,72px);
  /* Settled 8 Sept 2026: Kaushan Script, free and open-licence.
     Chosen over Yellowtail (too retro), Caveat (too casual) and
     Sacramento (monoline strokes go weak in yellow on black).
     Gathenia is deliberately NOT in this stack — it is commercial,
     unlicensed here, and naming it would make the page render
     differently for the few visitors who happen to have it installed
     locally. To adopt it later, add an @font-face and put it first. */
  --script:"Kaushan Script",cursive;

  /* The four typographic roles, as tokens.
     Every rule in every stylesheet goes through these, so the CMS can change
     the whole site's type by overriding four custom properties — and a face
     that fails to load still falls back to something sane. The tagline's
     accent is its own role rather than "the heading font, but cursive",
     because it is the one place the script is used and the one place a client
     will want to change it on its own. */
  --display:var(--display);
  --body:Inter,system-ui,sans-serif;
  --mono:var(--mono);
}
:root[data-theme="light"]{
  --bg:#F7F6F2; --bg-2:#EDEBE4; --bg-3:#E2DFD5;
  --fg:#111013; --fg-2:#56545C; --fg-3:#8A8792;
  --line:#DEDBD2; --hair:#EAE8E1;
  --cur-core:#111013; --cur-glow:rgba(244,215,13,.95);
  --shadow:0 24px 70px rgba(0,0,0,.14);
  /* true to the master: on paper the band lightens toward the light grey */
  --band-mid:#6E6F71; --band-lit:#A7AAAC;
  /* the hero inverts on paper, as v2's did: unlit ink is faint and the
     beam lays ink down rather than lifting it. Grey mid-tones made the
     wedge read as a smudge, so the lit end goes to near-black. */
  --hero-dim:#DAD8D1; --beam-hot:#141418; --beam-lit:#63636A;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color .45s var(--ease),color .45s var(--ease)}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--yellow);color:#111013}

/* ── the mark ─────────────────────────────────────────────────
   Injected as real inline SVG by kit3.js. mask-image against an
   external file fails silently in several browsers, so the paths
   travel in the JS.                                             */
.bl-mark{display:block;width:100%;height:auto;color:var(--fg)}
.bl-mark .bl-dot{fill:var(--yellow)}
.bl-mark .bl-band-mid{fill:var(--band-mid)}
.bl-mark .bl-band-lit{fill:var(--band-lit)}
[data-mark]{display:block}
/* the dot is the source, so it glows even at nav size */
.bl-mark .bl-dot{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--yellow) 55%,transparent))}

/* ── the stage: viewport-sized beats ──────────────────────── */
.stage{position:fixed;inset:0;z-index:3}
.beat{position:fixed;inset:0;display:grid;align-content:center;
  background:var(--bg);overflow:hidden;will-change:transform,opacity;
  transform-origin:50% 50%;backface-visibility:hidden}
#bl-spacer{position:relative;z-index:0;pointer-events:none}
/* reduced motion / no-JS: everything becomes a normal document */
.bl-static .stage{position:static;display:block}
.bl-static .beat{position:relative;inset:auto;min-height:auto;height:auto;
  padding-block:clamp(56px,9vh,110px);border-bottom:1px solid var(--line)}
.bl-static #bl-spacer{display:none}

/* ── nav: the pill, from 02 Aperture ─────────────────────────
   Floating, centred, detached from the edge. Adopted wholesale;
   only the type scale is Exposure's mono rather than Inter.     */
.pill{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:clamp(12px,2vw,26px);
  padding:9px 10px 9px 16px;border-radius:999px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 6px 26px rgba(0,0,0,.32)}
:root[data-theme="light"] .pill{box-shadow:0 6px 26px rgba(0,0,0,.09)}
/* WordPress's admin bar is fixed over the top of the page for a logged-in
   editor, and the pill is fixed under it — so the client, who is always logged
   in, sees a nav cut in half on a phone while every visitor sees it correctly.
   46px is the mobile bar, 32px the desktop one. */
body.admin-bar .pill{top:64px}
@media(min-width:783px){body.admin-bar .pill{top:50px}}
.pill [data-mark]{width:92px;flex:0 0 auto}
.pill ul{display:flex;gap:clamp(8px,1.4vw,18px);list-style:none;margin:0;padding:0;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase}
.pill a{color:var(--fg-3);padding:6px 11px;border-radius:999px;
  transition:color .22s,background-color .28s}
.pill a.on,.pill a[aria-current]{color:var(--fg);background:var(--bg-3)}
@media(hover:hover){.pill a:hover{color:var(--fg)}}
@media(max-width:860px){
  .pill{gap:8px;padding:7px 8px 7px 12px;top:12px}
  .pill ul{gap:2px;font-size:8.5px}
  .pill a{padding:5px 7px}
  .pill [data-mark]{width:70px}
}

/* ── toggle: exposure stops (v2 design, unchanged) ────────── */
.stops{position:fixed;right:clamp(20px,5vw,44px);bottom:22px;z-index:95;
  display:flex;align-items:stretch;border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px)}
.stops button{border:0;background:transparent;cursor:pointer;padding:8px 11px;color:var(--fg-3);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  border-right:1px solid var(--line);transition:color .22s,background-color .25s}
.stops button:last-child{border-right:0}
.stops button[aria-pressed="true"]{color:var(--bg);background:var(--fg)}
@media(hover:hover){.stops button:hover{color:var(--fg)}}
.stops button[aria-pressed="true"]:hover{color:var(--bg)}

/* ── scroll-behaviour switch ──────────────────────────────────
   Prototype-only control. It exists so the two retained scroll
   ideas can be compared side by side; in the build this becomes
   one CMS setting and the control disappears.                   */
.rig{position:fixed;left:clamp(20px,5vw,44px);bottom:22px;z-index:95;
  display:flex;align-items:stretch;border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px)}
.rig b{font:500 9px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);align-self:center;padding:0 10px 0 11px;
  border-right:1px solid var(--line)}
.rig button{border:0;background:transparent;cursor:pointer;padding:8px 11px;color:var(--fg-3);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  border-right:1px solid var(--line);transition:color .22s,background-color .25s}
.rig button:last-child{border-right:0}
.rig button[aria-pressed="true"]{color:var(--bg);background:var(--fg)}
@media(hover:hover){.rig button:hover{color:var(--fg)}}
.rig button[aria-pressed="true"]:hover{color:var(--bg)}
@media(max-width:700px){.rig{display:none}}

/* ══ cursors ══════════════════════════════════════════════════
   Six families. One is active at a time, chosen by the beat in
   view. Only the active one runs; the rest are parked.          */
.bl-cursor{position:fixed;inset:0;z-index:88;pointer-events:none;
  opacity:0;transition:opacity .4s var(--ease)}
.bl-cursor.live{opacity:1}
body.bl-nocursor{cursor:none}
@media (hover:none),(pointer:coarse){
  body.bl-nocursor{cursor:auto}
  .bl-cursor{display:none!important}
}

/* 1 · beam — no overlay of its own beyond a small soft source dot.
       The hero's light does the work. */
.bl-spark{position:fixed;width:7px;height:7px;border-radius:50%;
  background:var(--yellow);transform:translate3d(-50%,-50%,0);
  box-shadow:0 0 10px 2px color-mix(in srgb,var(--yellow) 55%,transparent),
             0 0 28px 8px color-mix(in srgb,var(--yellow) 20%,transparent)}

/* 2 · torch / spotlight — a pool of light you carry */
.bl-torch{--tx:50vw;--ty:50vh;--tr:250px;--tsoft:.7;--tdim:.86;
  background:radial-gradient(circle var(--tr) at var(--tx) var(--ty),
    transparent 0%,
    rgba(0,0,0,calc(var(--tdim)*.06)) calc(var(--tsoft)*50%),
    rgba(0,0,0,calc(var(--tdim)*.40)) 100%)}
.bl-torch::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle calc(var(--tr)*.95) at var(--tx) var(--ty),
    rgba(255,244,206,.34) 0%, rgba(255,236,176,.15) 40%, transparent 74%);
  mix-blend-mode:screen}
.bl-torch__dot{position:absolute;left:var(--tx);top:var(--ty);width:9px;height:9px;
  border-radius:50%;background:var(--yellow);transform:translate(-50%,-50%);
  box-shadow:0 0 12px 3px color-mix(in srgb,var(--yellow) 62%,transparent),
             0 0 34px 10px color-mix(in srgb,var(--yellow) 26%,transparent)}
:root[data-theme="light"] .bl-torch{
  background:radial-gradient(circle var(--tr) at var(--tx) var(--ty),
    transparent 0%,
    rgba(14,12,10,calc(var(--tdim)*.10)) calc(var(--tsoft)*46%),
    rgba(14,12,10,calc(var(--tdim)*.62)) 100%)}
:root[data-theme="light"] .bl-torch::before{
  background:radial-gradient(circle calc(var(--tr)*.92) at var(--tx) var(--ty),
    rgba(255,246,214,.20) 0%, rgba(255,240,190,.09) 40%, transparent 72%)}

/* 3 · comet — canvas, drawn in kit3.js */
canvas.bl-cursor{mix-blend-mode:normal}

/* 4 · reticle — a crosshair that frames and labels what it is over */
.bl-reticle{--rs:30px;inset:auto;top:0;left:0;width:var(--rs);height:var(--rs);
  transition:width .3s var(--ease),height .3s var(--ease),opacity .4s var(--ease)}
.bl-reticle svg{width:100%;height:100%;overflow:visible}
.bl-reticle path,.bl-reticle circle{fill:none;stroke:var(--cur-core);
  stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linecap:round}
.bl-reticle .rt-ring{stroke:var(--yellow);opacity:.9}
.bl-reticle .rt-frame{opacity:0;transition:opacity .3s var(--ease)}
.bl-reticle .rt-cross{opacity:.85}
.bl-reticle .rt-read{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);
  font:500 9.5px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg);white-space:nowrap;opacity:0;
  transition:opacity .3s var(--ease)}
.bl-reticle.locked{--rs:74px}
.bl-reticle.locked .rt-frame{opacity:.95}
.bl-reticle.locked .rt-ring{opacity:0}
.bl-reticle.locked .rt-cross{opacity:.3}
.bl-reticle.locked .rt-read{opacity:.95}

/* 5 · gel — a lighting gel held over the room. It tints what is
       under it and warms as it passes an image. */
.bl-gel{inset:auto;top:0;left:0;width:var(--gs,190px);height:var(--gs,190px);
  border-radius:50%;transform:translate3d(-50%,-50%,0);
  transition:width .35s var(--ease),height .35s var(--ease),opacity .4s var(--ease)}
.bl-gel__disc{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,
    color-mix(in srgb,var(--gel-a,#F4D70D) 46%,transparent) 0%,
    color-mix(in srgb,var(--gel-b,#22D3EE) 26%,transparent) 58%,
    transparent 78%);
  mix-blend-mode:screen;
  border:1px solid color-mix(in srgb,var(--gel-a,#F4D70D) 34%,transparent)}
:root[data-theme="light"] .bl-gel__disc{mix-blend-mode:multiply;
  background:radial-gradient(circle at 38% 32%,
    color-mix(in srgb,var(--gel-a,#F4D70D) 30%,transparent) 0%,
    color-mix(in srgb,var(--gel-b,#22D3EE) 18%,transparent) 58%,
    transparent 78%)}
.bl-gel.hot{--gs:250px}

/* 6 · pulse — a quiet dot that sends a ring out when you stop */
.bl-pulse{inset:auto;top:0;left:0;width:0;height:0}
.bl-pulse__dot{position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--cur-core);transform:translate(-50%,-50%)}
.bl-pulse__ring{position:absolute;border-radius:50%;
  border:1px solid var(--yellow);transform:translate(-50%,-50%);
  width:var(--pr,0px);height:var(--pr,0px);opacity:var(--po,0)}

/* ══ the interactive wire, from 03 Filament ═══════════════════
   Replaces the viewfinder's centre tick row.

   It lives INSIDE each beat, not as a fixed sibling of the stage.
   It has to: every beat is opaque and carries a z-index from the
   scroll rig, which makes it its own stacking context — so nothing
   outside a beat can ever paint between that beat's background and
   its content. z-index:-1 on a child of a stacking context is the
   one place that sits above the background and below every element,
   which is what "in the back, behind everything" needs.

   Only the beats carrying data-wire get one, so beat 1 has none.  */
.bwire{position:absolute;inset:0;z-index:-1;pointer-events:none;
  width:100%;height:100%}
.bwire .w-base{fill:none;stroke:color-mix(in srgb,var(--fg) 20%,transparent);stroke-width:1}
.bwire .w-lit{fill:none;stroke:var(--yellow);stroke-width:1.8;stroke-linecap:round;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--yellow) 65%,transparent))}
.bwire .w-node{fill:var(--bg);stroke:var(--yellow);stroke-width:1.3}

/* ── viewfinder overlay (crop marks + EV bar retained) ────── */
#vf{position:fixed;inset:0;z-index:53;pointer-events:none}
#vf .crop{fill:none;stroke:var(--yellow);stroke-width:1.3;opacity:.55}
#vf .evb{fill:none;stroke:color-mix(in srgb,var(--fg) 16%,transparent);
  stroke-width:2.2;stroke-linecap:round}
#vf .evf{fill:none;stroke:var(--yellow);stroke-width:2.2;stroke-linecap:round}
/* the frame counter moved off the nav when the pill replaced the strip */
.ctr{position:fixed;left:clamp(20px,5vw,44px);top:auto;bottom:56px;z-index:54;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);pointer-events:none}
@media(max-width:700px){.ctr{bottom:22px}}

/* ══ lightbox ═════════════════════════════════════════════════
   The floating gallery, and the film. One overlay, any content.  */
/* display:grid beats the user-agent [hidden]{display:none}, so without this
   rule a closed lightbox stays as an invisible full-screen layer at z-index 120
   and swallows every click on the page — the nav most visibly. */
.bl-lb[hidden]{display:none}
.bl-lb{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(14px,3vw,44px)}
.bl-lb__scrim{position:absolute;inset:0;background:color-mix(in srgb,#050507 82%,transparent);
  backdrop-filter:blur(10px);opacity:0;transition:opacity .34s var(--ease)}
.bl-lb.on .bl-lb__scrim{opacity:1}
.bl-lb__panel{position:relative;width:min(1240px,100%);max-height:100%;
  display:flex;flex-direction:column;outline:0;
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .34s var(--ease),transform .42s var(--ease)}
.bl-lb.on .bl-lb__panel{opacity:1;transform:none}
.bl-lb__body{overflow:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding-right:2px}
.bl-lb__x{position:absolute;top:-6px;right:-2px;z-index:2;width:42px;height:42px;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:999px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);
  color:var(--fg-2);cursor:pointer;transition:color .22s,border-color .22s,transform .3s var(--ease)}
.bl-lb__x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round}
@media(hover:hover){.bl-lb__x:hover{color:var(--yellow);border-color:var(--yellow);
  transform:rotate(90deg)}}
@media(max-width:700px){.bl-lb__x{top:-4px;right:-4px;width:36px;height:36px}}

/* the gallery grid inside it */
.lbgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(6px,1vw,12px);
  padding-top:46px}
.lbgrid figure{margin:0;position:relative;overflow:hidden;background:var(--bg-2);
  aspect-ratio:3/2;grid-column:span 6;opacity:0;transform:translateY(14px);
  animation:lbin .6s var(--ease) forwards;animation-delay:calc(var(--i)*38ms)}
@keyframes lbin{to{opacity:1;transform:none}}
.lbgrid figure.c4{grid-column:span 4}
.lbgrid figure.c6{grid-column:span 6}
.lbgrid figure.c8{grid-column:span 8;aspect-ratio:16/9}
.lbgrid figure.c12{grid-column:span 12;aspect-ratio:21/9}
.lbgrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:11px 12px;
  font-size:11.5px;line-height:1.3;color:#F2F1EC;opacity:0;transform:translateY(6px);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.92));
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.lbgrid figcaption b{display:block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:13px}
.lbgrid figcaption small{opacity:.72;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.06em}
@media(hover:hover){.lbgrid figure:hover figcaption{opacity:1;transform:none}}
@media(hover:none){.lbgrid figcaption{opacity:1;transform:none}}
@media(max-width:860px){
  .lbgrid figure,.lbgrid figure.c4,.lbgrid figure.c6{grid-column:span 6}
  .lbgrid figure.c8,.lbgrid figure.c12{grid-column:span 12}
}
@media(max-width:560px){.lbgrid figure{grid-column:span 12!important;aspect-ratio:3/2}}

/* the film slot: a real embed when there is one, a still sequence
   until then. Both sit in the same 16:9 frame. */
.filmbox{position:relative;width:100%;aspect-ratio:16/9;background:#000;
  margin-top:46px;overflow:hidden}
.filmbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel{position:relative;width:100%;height:100%;background:#000}
.reel__f{position:absolute;inset:0;margin:0;opacity:0;
  transition:opacity 1.1s var(--ease)}
.reel__f.on{opacity:1}
.reel__f img{width:100%;height:100%;object-fit:cover;
  animation:kb 14s ease-out both}
@keyframes kb{from{transform:scale(1.0)}to{transform:scale(1.1)}}
.reel__bar{position:absolute;left:0;right:0;bottom:0;height:2px;
  background:color-mix(in srgb,var(--fg) 18%,transparent)}
.reel__bar i{display:block;height:100%;background:var(--yellow);
  transform:scaleX(0);transform-origin:0 50%}
.reel__cap{position:absolute;left:0;right:0;bottom:14px;margin:0;padding:0 18px;
  font-family:var(--mono);font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.82);
  text-shadow:0 1px 14px rgba(0,0,0,.9)}
@media (prefers-reduced-motion:reduce){
  .reel__f{opacity:1}.reel__f img{animation:none}
  .reel__f:not(.on){display:none}
}

/* ── a project card that is actually a link ───────────────── */
a.card{display:block;position:relative;overflow:hidden;background:var(--bg-2);
  color:inherit;isolation:isolate}
a.card:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
a.card .card__go{position:absolute;top:10px;right:10px;z-index:3;width:26px;height:26px;
  border-radius:999px;display:grid;place-items:center;
  background:color-mix(in srgb,#0A0A0C 62%,transparent);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
a.card .card__go svg{width:12px;height:12px;fill:none;stroke:var(--yellow);stroke-width:1.9;
  stroke-linecap:round}
@media(hover:hover){a.card:hover .card__go{opacity:1;transform:none}}
@media(hover:none){a.card .card__go{opacity:1;transform:none}}

/* the caption on a project card. Lives here, not in service.css: the homepage
   loads only kit3 + home, so keeping it there left every card on the homepage
   with an unstyled title — the reported "no title, no client name". */
.card__t{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 13px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.92));color:#F2F1EC}
.card__t b{display:block;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:14px;line-height:1.05}
.card__t small{display:block;margin-top:3px;opacity:.72;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em}
.card__t .who{display:block;margin-top:2px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.08em;color:var(--yellow);opacity:.92}

/* ── shared atoms ─────────────────────────────────────────── */
.tbd{color:color-mix(in srgb,var(--yellow) 68%,var(--fg));
  background:color-mix(in srgb,var(--yellow) 16%,transparent);
  padding:1px 6px;border-radius:2px;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.r{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.r.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .r{opacity:1;transform:none}
  #wire,#vf{display:none}
}