/* Mirror Factory accents (10 Nov 2026): the small living marks that make every section ours.
   Section mark (four dots + number in the section tone), the heading's full stop as a tone dot that pings,
   a printed halftone highlight behind one phrase, a light that walks the steps, and a refraction edge on product frames.
   --tone is set per section by accents.js from the deepened/ground-tuned accents (--oD, --liD, --pcD, --lmD). */

/* section mark */
.mfa .lab{gap:10px}
.mfa .lab .d4{gap:4px}
.mfa .lab .d4 i{width:5px;height:5px}
.mfa-n{font:500 11.5px/1 "MF Mono",ui-monospace,monospace;letter-spacing:.04em;color:var(--tone);padding-right:10px;border-right:1px solid var(--line2)}
.mfa.in .lab .d4 i{animation:d4 1.1s var(--ease) both,mfa-wave 4.8s cubic-bezier(.45,0,.25,1) 1.4s infinite}
.mfa.in .lab .d4 i:nth-child(2){animation-delay:.08s,1.58s}
.mfa.in .lab .d4 i:nth-child(3){animation-delay:.16s,1.76s}
.mfa.in .lab .d4 i:nth-child(4){animation-delay:.24s,1.94s}
@keyframes mfa-wave{0%,42%,100%{translate:0 0;scale:1}12%{translate:0 -3px;scale:1.25}24%{translate:0 .5px;scale:.94}}

/* the heading's full stop */
/* an empty inline-block sits exactly on the baseline; the real period stays in the text for copy and screen readers */
.mfa-stop{display:inline-block;position:relative;width:.19em;height:.19em;margin-left:.05em;vertical-align:baseline;border-radius:50%;background:var(--tone);opacity:0;translate:0 -.55em;transition:opacity .6s var(--ease),translate 1.1s var(--ease);transition-delay:var(--sd,.8s)}
.mfa-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v4.in .mfa-stop{opacity:1;translate:0 0}
.mfa-stop::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px var(--tone);opacity:0;pointer-events:none}
.mfa.in .mfa-stop::after{animation:mfa-ring 7s var(--ease) calc(var(--sd,.8s) + .7s) infinite}
@keyframes mfa-ring{0%{opacity:0;scale:1}3%{opacity:.85}26%{opacity:0;scale:3.4}100%{opacity:0;scale:3.4}}

/* printed highlight: halftone dots behind one phrase, denser toward the baseline */
.mfa-hh{position:relative;isolation:isolate}
/* the tone phrase: the heading's key phrase takes the section tone, word by word, after the words rise (no underline, 11 Nov 2026) */
.v4 .w.mfa-ph{transition:color 1.2s ease;transition-delay:var(--pd,.9s)}
.v4.in .w.mfa-ph,.v4 .in .w.mfa-ph{color:var(--tone)}

/* the light that walks the steps */
.mfa-rail{position:relative}
.mfa-rail .sg-s b i{position:relative;z-index:1;transition:scale .6s var(--ease),box-shadow .6s var(--ease)}
.mfa-rail .sg-s b{transition:color .6s var(--ease)}
.mfa-rail .sg-s span{transition:color .6s var(--ease)}
.mfa-rail .sg-s:not(.mfa-on) b{color:var(--fg2)}
.mfa-rail .sg-s.mfa-on span{color:var(--ink)}
.mfa-rail .sg-s.mfa-on b i{scale:1.35}
.mfa-track{position:absolute;width:1px;margin-left:-.5px;background:var(--line2);pointer-events:none}
.mfa-light{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 3px color-mix(in srgb,var(--tone) 24%,transparent);z-index:2;pointer-events:none;opacity:0;transition:transform 1.2s cubic-bezier(.45,0,.25,1),opacity .45s var(--ease)}
.mfa.in .mfa-light{opacity:1}
.mfa-light.fade{opacity:0!important}

/* refraction edge: a crisp spectral hairline on product frames that sweeps in, rests, and sweeps again on hover */
.mfa-prism::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;z-index:4;pointer-events:none;background:linear-gradient(90deg,transparent 0%,var(--oD) 22%,var(--liD) 42%,var(--pcD) 62%,var(--lmD) 80%,transparent 100%);background-size:260% 100%;background-position:100% 0;opacity:0}
.v4.in .mfa-prism::before{animation:mfa-prism 3s var(--ease) .5s both}
.v4.in .mfa-prism:hover::before{animation:mfa-prism-h 2.2s var(--ease) both}
@keyframes mfa-prism{0%{opacity:0;background-position:100% 0}25%{opacity:1}100%{opacity:.6;background-position:30% 0}}
@keyframes mfa-prism-h{0%{opacity:.6;background-position:100% 0}100%{opacity:.85;background-position:0 0}}

/* the one action is live: its lime dot pings now and then */
.mfa.mfa-live .btn.p>i{animation:mfa-ping 3.6s ease-out 1.2s infinite}
@keyframes mfa-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lmD) 55%,transparent)}40%,100%{box-shadow:0 0 0 7px transparent}}

/* off screen everything waits; reduced motion and captures hold the finished frame */
.mfa:not(.mfa-live) .lab .d4 i,.mfa:not(.mfa-live) .mfa-stop::after,.mfa:not(.mfa-live) .btn.p>i{animation-play-state:running,paused}
.mfa:not(.mfa-live) .mfa-stop::after,.mfa:not(.mfa-live) .btn.p>i{animation-play-state:paused}
.mfa-still .mfa .lab .d4 i,.mfa-still .mfa-stop::after,.mfa-still .mfa .btn.p>i{animation:none!important}
.mfa-still .mfa-stop{opacity:1;translate:none;transition:none}
.mfa-still .v4 .w.mfa-ph{color:var(--tone);transition:none}
.mfa-still .mfa-light{opacity:1;transition:none}
.mfa-still .mfa-prism::before{animation:none!important;opacity:.6;background-position:30% 0}