/* TASK 04: impact, slash, settle. Default document remains visible without JS. */
html, body { overflow-x: clip; }
.blade { animation: none; }
.blade-cover > svg { position: absolute; top: -29%; right: -17%; width: 94%; height: 155%; }
.speed-ticker { overflow: hidden; background: var(--accent); color: var(--ink); padding-block: 12px; }
.ticker-track { display: flex; width: max-content; }
.ticker-unit { display: flex; flex: none; align-items: center; gap: 26px; padding-right: 26px; font: 700 clamp(22px, 2.4vw, 35px)/1.2 var(--condensed); white-space: nowrap; }
.ticker-unit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 4; }
.js-motion, .js-motion body { scroll-behavior: auto; }
.js-motion .manifesto p span { color: inherit; }
.js-motion .manifesto p > span:not(.manifest-word) { color: var(--accent); }
.manifest-word { display: inline-block; }
.decision-mark { position: absolute; left: 0; right: 0; bottom: -.02em; height: .055em; background: var(--accent); transform-origin: left center; pointer-events: none; }
.decision-target { position: relative; display: inline-block; }
.pipeline { position: relative; }
.pipeline-progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--accent); transform-origin: left center; pointer-events: none; }
.pipeline li.is-reached > span:first-child { background: var(--accent); color: var(--ink); }
.pipeline li > span:first-child { padding-inline: 3px; }
.studio, .contacts { position: relative; }
.section-slash { position: absolute; left: 0; right: 0; top: -25px; height: 65px; background: var(--accent); z-index: 3; pointer-events: none; }
.section-slash.slash-exit { top: auto; bottom: -25px; }
.fighter-grid { position: relative; }
.roster-selector { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; }
.selector-corner { position: absolute; left: 0; top: 0; width: 19px; height: 19px; border: 4px solid var(--accent); }
.selector-tl { border-right: 0; border-bottom: 0; }
.selector-tr { border-left: 0; border-bottom: 0; }
.selector-bl { border-top: 0; border-right: 0; }
.selector-br { border-top: 0; border-left: 0; }
.selector-label { position: absolute; left: 0; top: 0; padding: 1px 6px; background: var(--accent); color: var(--ink); font: 700 11px/1.5 var(--mono); }
.js-motion .portrait { isolation: isolate; }
.halftone-pulse { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--accent); opacity: 0; }
.js-motion .contact-links > a { position: relative; isolation: isolate; overflow: hidden; }
.js-motion .contact-links > a::before { content: ''; position: absolute; inset: 0; background: var(--ink); z-index: -1; clip-path: polygon(0 0,0 0,-15% 100%,0 100%); transition: clip-path 180ms cubic-bezier(.16,1,.3,1); }
.js-motion .contact-links > a:hover::before, .js-motion .contact-links > a:focus-visible::before { clip-path: polygon(0 0,115% 0,100% 100%,0 100%); }
.js-motion .contact-links > a:hover, .js-motion .contact-links > a:focus-visible { color: var(--cream); }
.js-motion .contact-links > a:hover .contact-note, .js-motion .contact-links > a:focus-visible .contact-note { color: var(--cream); }
.js-motion .contact-arrow { transform: translateX(-8px); }
.js-motion .contact-links > a:hover .contact-arrow, .js-motion .contact-links > a:focus-visible .contact-arrow { transform: translateX(-2px) rotate(-12deg); }
.js-motion .redactions.is-scrambling { color: var(--cream); }
.motion-intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--ink); overflow: hidden; pointer-events: none; }
.intro-stamp { background: var(--accent); color: var(--ink); padding: 12px; transform: rotate(-2deg); }
.intro-stamp > span { display: block; border: 2px solid var(--cream); padding: 20px 26px; font: 400 clamp(28px,6vw,80px)/1.3 var(--display); letter-spacing: -.025em; }
.intro-flash { position: absolute; inset: 0; background: var(--accent); opacity: 0; }
.intro-skip { position: absolute; bottom: 8%; left: 20px; right: 20px; text-align: center; color: var(--muted); font: 400 10px/1.6 var(--mono); }
.impact-effects { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 90; contain: strict; }
.slash-follower { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; opacity: 0; }
.slash-follower::before, .slash-follower::after { content: ''; position: absolute; background: var(--accent); }
.slash-follower::before { width: 14px; height: 2px; top: 6px; }
.slash-follower::after { width: 2px; height: 14px; left: 6px; }
.hit-streak { position: absolute; left: -65px; top: -2px; width: 130px; height: 4px; background: var(--cream); opacity: 0; }
.hit-streak::after { content: ''; position: absolute; inset: 4px 10px -3px 20px; background: var(--accent); }
.hit-spark { position: absolute; width: 7px; height: 2px; background: var(--cream); opacity: 0; }
.hit-spark:nth-child(even) { background: var(--accent); }
@media(max-width:560px) {
  .ticker-unit { gap: 18px; padding-right: 18px; }
  .speed-ticker { padding-block: 10px; }
  .section-slash { height: 42px; top: -16px; }
  .section-slash.slash-exit { top: auto; bottom: -16px; }
}
@media(prefers-reduced-motion:reduce) {
  .motion-intro, .impact-effects, .section-slash { display: none !important; }
}

.speed-ticker{position:relative;padding-top:48px}
.ticker-control{position:absolute;top:7px;right:var(--gutter);z-index:1;border:1px solid var(--ink);background:var(--accent);color:var(--ink);padding:6px 10px;font:700 10px/1.4 var(--mono);min-height:32px}
.ticker-control:hover,.ticker-control[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
.ticker-control:focus-visible{outline-color:var(--ink)}
html:not(.js-enabled) .speed-ticker{padding-top:12px}
@media(max-width:560px){.speed-ticker{padding-top:48px}}