/* AUDIOSNAG FOCUS / SCROLL FX
   Progressive disclosure + NES/DOS motion layer. Landing page excluded. */
html{scroll-behavior:smooth}
body.fx-ready{--fx-accent:var(--or,#F26A21)}

#fx-progress{position:fixed;z-index:9998;left:0;top:0;height:2px;width:0;background:var(--fx-accent);pointer-events:none;transform-origin:left center;box-shadow:0 0 8px color-mix(in srgb,var(--fx-accent) 55%,transparent)}
#fx-rail{position:fixed;z-index:9997;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 6px;background:color-mix(in srgb,#000 68%,transparent);box-shadow:0 0 0 1px rgba(255,255,255,.055);opacity:.52;transition:opacity .18s steps(2,end)}
#fx-rail:hover,#fx-rail:focus-within{opacity:.95}
.fx-dot{display:block;width:6px;height:6px;padding:0;border:0;background:#4b4640;cursor:pointer;transition:height .16s steps(3,end),background-color .16s steps(3,end),opacity .16s steps(3,end)}
.fx-dot.fx-active{height:18px;background:var(--fx-accent);opacity:1}
.fx-dot.fx-past{background:color-mix(in srgb,var(--fx-accent) 45%,#4b4640)}

body.fx-ready .fx-unit{opacity:.075;transform:translate3d(0,22px,0);transition:opacity .44s steps(6,end),transform .52s cubic-bezier(.2,.76,.18,1),filter .42s ease;filter:brightness(.72) saturate(.72);will-change:transform,opacity;content-visibility:auto;contain-intrinsic-size:auto 420px}
body.fx-ready .fx-unit.fx-seen{opacity:1;transform:translate3d(0,0,0);filter:none}
body.fx-ready .fx-detail{transform:translate3d(0,14px,0)}
body.fx-ready .fx-detail.fx-seen{transform:none}

.fx-major{position:relative}
.fx-major::before,.fx-major::after{content:"";position:absolute;pointer-events:none;z-index:40;opacity:0}
.fx-major.fx-enter::before{left:0;right:0;top:0;height:2px;background:var(--fx-accent);box-shadow:0 0 10px color-mix(in srgb,var(--fx-accent) 72%,transparent);opacity:.78;animation:fx-raster-sweep .54s steps(12,end) both}
.fx-major.fx-enter::after{inset:0;background:repeating-linear-gradient(180deg,rgba(0,0,0,.93) 0 4px,rgba(0,0,0,.35) 4px 8px,transparent 8px 12px);transform-origin:bottom center;opacity:.78;animation:fx-band-clear .48s steps(8,end) both}
.fx-major.fx-enter .sec-n,.fx-major.fx-enter .label{animation:fx-palette-hit .46s steps(4,end) both}
.fx-major.fx-active .sec-h{border-bottom-color:color-mix(in srgb,var(--fx-accent) 42%,var(--ink3,#232019))}

.fx-raster{animation:fx-raster-nudge .14s steps(2,end)}
#fx-hit{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;background:var(--fx-accent);mix-blend-mode:screen}
#fx-hit.fx-fire{animation:fx-hit .12s steps(2,end)}
:where(a,button,[role="button"],.btn,.it,.rk,.wf,.cell,.key,.fxb):focus-visible{outline:1px solid var(--fx-accent);outline-offset:4px}

@keyframes fx-band-clear{0%{clip-path:inset(0 0 0 0);opacity:.78}100%{clip-path:inset(100% 0 0 0);opacity:0}}
@keyframes fx-raster-sweep{0%{transform:translateY(-3px);opacity:0}10%{opacity:.85}100%{transform:translateY(min(58vh,520px));opacity:0}}
@keyframes fx-palette-hit{0%,100%{filter:none}25%{filter:brightness(1.8) saturate(.35)}50%{filter:brightness(.75) saturate(1.8)}75%{filter:brightness(1.25)}}
@keyframes fx-raster-nudge{0%,100%{transform:translateX(0)}34%{transform:translateX(2px)}67%{transform:translateX(-1px)}}
@keyframes fx-hit{0%{opacity:0}45%{opacity:.075}100%{opacity:0}}

@media(max-width:760px){#fx-rail{right:6px;gap:6px;padding:6px 4px;background:rgba(0,0,0,.48)}.fx-dot{width:4px;height:4px}.fx-dot.fx-active{height:13px}body.fx-ready .fx-unit{transform:translate3d(0,14px,0)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body.fx-ready .fx-unit,body.fx-ready .fx-unit.fx-seen{opacity:1;transform:none;filter:none;transition:none}.fx-major::before,.fx-major::after,#fx-hit{display:none!important}.fx-raster{animation:none!important}}

/* MOBILE CONTAINMENT PASS
   Formatting only: keeps existing copy inside the viewport without changing text. */
@media(max-width:760px){
  html,body{max-width:100%;overflow-x:clip}
  body.fx-ready *{min-width:0}

  /* Pixel-text canvases have intrinsic widths based on character count. Let long
     headings scale down instead of disappearing beyond the right edge. */
  canvas{max-width:100%;height:auto}

  /* Shared horizontal chrome */
  .nav .in,.systems-nav,.herotop,.sec-h,.media .mh,.reels{
    flex-wrap:wrap;
  }
  .nav .in,.systems-nav{max-width:100%}
  .nav .links{min-width:0;max-width:100%}
  .systems-nav{padding-left:18px;padding-right:18px}

  /* Section headers were laid out as one desktop line. On narrow screens the
     descriptor drops cleanly underneath instead of being clipped. */
  .sec-h{align-items:flex-start}
  .sec-h .sec-t{flex:1 1 auto}
  .sec-h .sec-d{flex:1 0 100%;margin-left:0;text-align:left}

  /* Cards, labels and controls must be allowed to shrink/wrap. */
  .btn,button,.tb,.stub,.chain span,.meta span,.tag,.pill{
    max-width:100%;
    white-space:normal;
  }
  .ctas,.toolctas,.bar,.grp,.chain,.foot,.foot .big,.foot .links{
    max-width:100%;
    flex-wrap:wrap;
  }

  /* Only break otherwise unbreakable strings; ordinary prose still wraps at spaces. */
  a,.mail,.email,[href^="mailto:"],.status,.note{
    overflow-wrap:anywhere;
  }

  /* Fixed-position/absolute DOS labels need a viewport-aware line length. */
  .plate .kickline{max-width:calc(100% - 112px);white-space:normal}

  /* The rail is navigation chrome, not content: keep it from sitting on copy. */
  #fx-rail{right:3px}
}

@media(max-width:380px){
  .wrap{padding-left:14px!important;padding-right:14px!important}
  .nav .in{padding-left:14px!important;padding-right:14px!important}
  .systems-nav{padding-left:14px;padding-right:14px}
  .sec-t,.label,.kick{letter-spacing:.14em}
  .sec-d,.micro,.stub{letter-spacing:.08em}
}