/* SubGround Collective · fx.css · interactive layer v2 (2026-10-17, perf pass)
   Loaded by the homepage only. The box office pages never load it.
   v2: cursor ring removed · lens is a canvas (no per-frame mask raster) · field and
   sparks drop out of the compositor when idle · glare moves by transform, never repaint. */

/* ---------- codex field: bass/decode glow (under content, over the etch) ---------- */
.fx-field{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;visibility:hidden}
.fx-field.live{visibility:visible}
.fx-field i{position:absolute;inset:0;display:block;
  -webkit-mask-image:url("img/sg-etch-1520.png");mask-image:url("img/sg-etch-1520.png");
  -webkit-mask-repeat:repeat;mask-repeat:repeat;
  -webkit-mask-size:var(--ts,760px) var(--ts,760px);mask-size:var(--ts,760px) var(--ts,760px);
  background:linear-gradient(160deg,#f5c451,#e4a420 45%,#a855f7 120%)}

/* ---------- decode lens (canvas) + spark canvas ---------- */
.fx-lens{position:fixed;left:0;top:0;width:560px;height:560px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s ease;will-change:transform}
.fx-lens.on{opacity:1}
.fx-sparks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:94;visibility:hidden}
.fx-sparks.live{visibility:visible}

/* ---------- nav: scroll progress + live section marker ---------- */
.fx-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold2) 60%,var(--violet));transform-origin:0 50%;transform:scaleX(0);pointer-events:none;will-change:transform}
@media (min-width:901px){
  .fx-on .nav ul a{position:relative}
  .fx-on .nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .fx-on .nav ul a:hover::after,.fx-on .nav ul a.fx-active::after{transform:scaleX(1)}
  .fx-on .nav ul a.fx-active{color:var(--ink)}
}

/* ---------- tilt + glare ---------- */
.fx-fine .mail,.fx-fine .art,.fx-fine .tix,.fx-fine .signup{position:relative}
.fx-fine .gallery-grid figure,.fx-fine .stats,.fx-fine .mail,.fx-fine .art,.fx-fine .tix,.fx-fine .signup{transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .7s ease,border-color .25s,color .25s}
.fx-glare{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s}
.fx-glare i{position:absolute;left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,196,81,.17),rgba(168,85,247,.06) 42%,transparent 64%);will-change:transform}
.fx-tilting{transition:transform .14s ease-out,border-color .25s!important;border-color:rgba(228,164,32,.55)!important;z-index:2;will-change:transform}
.fx-tilting .fx-glare{opacity:1}

/* ---------- magnetic controls ---------- */
.fx-fine .btn,.fx-fine .soc,.fx-fine .os-pill,.fx-fine .sigil,.fx-fine .brand{transition:translate .45s cubic-bezier(.2,.8,.2,1),background .2s,color .2s,border-color .2s}
.fx-fine .fx-mag{transition:translate .12s ease-out,background .2s,color .2s,border-color .2s}
.fx-fine .hero-logo{will-change:transform;transform-origin:50% 50%}

/* ---------- the seven marks ---------- */
.fx-on .cx{cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent}
.fx-on .cx:hover{transform:translateY(-3px)}
.fx-on .cx svg{transition:filter .35s,color .35s}
.fx-on .cx:hover svg,.cx.fx-lit svg{filter:drop-shadow(0 0 12px rgba(228,164,32,.8));color:var(--gold2)}
.cx.fx-lit b{color:var(--gold)}
.fx-on .cx:focus-visible,.fx-on .gallery-grid figure:focus-visible{outline:2px solid var(--gold);outline-offset:5px;border-radius:4px}
.cx.fx-pop{animation:fxpop .6s cubic-bezier(.2,.8,.2,1)}
@keyframes fxpop{0%{transform:scale(1)}35%{transform:scale(1.3) rotate(-9deg)}100%{transform:scale(1)}}
.codex-row.fx-shake{animation:fxshake .45s}
@keyframes fxshake{0%,100%{transform:none}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.codex-row.fx-ping .cx svg{animation:fxping 1.3s ease-out both}
.codex-row.fx-ping .cx:nth-child(2) svg{animation-delay:.08s}.codex-row.fx-ping .cx:nth-child(3) svg{animation-delay:.16s}
.codex-row.fx-ping .cx:nth-child(4) svg{animation-delay:.24s}.codex-row.fx-ping .cx:nth-child(5) svg{animation-delay:.32s}
.codex-row.fx-ping .cx:nth-child(6) svg{animation-delay:.40s}.codex-row.fx-ping .cx:nth-child(7) svg{animation-delay:.48s}
@keyframes fxping{0%{filter:none}30%{filter:drop-shadow(0 0 18px rgba(245,196,81,.95))}100%{filter:none}}
.codex-band{transition:background .6s}
.codex-band.fx-decoded{background:radial-gradient(60% 140% at 50% 50%,rgba(228,164,32,.16),transparent 70%),linear-gradient(180deg,var(--bg2),var(--bg))}
.codex-band.fx-decoded .cx svg{color:var(--gold2)}
.codex-band .hint{transition:color .3s}
.codex-band .hint.fx-prog{color:var(--gold)}

/* ---------- roster pulse ---------- */
.art.fx-live{border-color:var(--gold);color:var(--gold2)}
.fx-on .art{transition:border-color .5s,color .5s,transform .55s cubic-bezier(.2,.8,.2,1)}

/* ---------- gallery lightbox (blur-to-sharp reveal) ---------- */
.fx-on .gallery-grid figure{cursor:zoom-in}
.fx-lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:70px 16px;background:rgba(0,0,0,.94);opacity:0;transition:opacity .3s}
.fx-lb[hidden]{display:none}
.fx-lb.open{opacity:1}
.fx-lb figure{margin:0;max-width:min(100%,1100px);display:flex;flex-direction:column;gap:14px;align-items:center}
.fx-lb img{max-width:100%;max-height:74vh;width:auto;height:auto;object-fit:contain;border:1px solid var(--line);border-radius:var(--r);opacity:0;transform:scale(.96);filter:blur(10px);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .35s,filter .55s ease}
.fx-lb img.ld{opacity:1;transform:none;filter:blur(0)}
.fx-lb figcaption{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.fx-lb figcaption::before{content:"\2AF8  ";color:var(--gold)}
.fx-lb figcaption::after{content:"  ::";color:rgba(228,164,32,.6)}
.fx-lb button{position:absolute;width:52px;height:52px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:1.5rem;line-height:1;color:var(--ink);background:rgba(18,16,25,.75);transition:border-color .2s,color .2s}
.fx-lb button:hover,.fx-lb button:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}
.fx-lb .x{top:16px;right:16px}
.fx-lb .pv{left:16px;top:50%;translate:0 -50%}
.fx-lb .nx{right:16px;top:50%;translate:0 -50%}
.fx-lb .ct{position:absolute;left:50%;top:30px;translate:-50% 0;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.3em;color:var(--gold)}
@media (max-width:640px){.fx-lb .pv,.fx-lb .nx{top:auto;bottom:16px;translate:none}}

/* ---------- toast ---------- */
.fx-toast{position:fixed;left:50%;top:86px;z-index:96;translate:-50% -14px;opacity:0;pointer-events:none;transition:opacity .35s,translate .45s cubic-bezier(.2,.8,.2,1);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#120d02;background:var(--gold);padding:.8em 1.3em;border-radius:0;white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
.fx-toast.on{opacity:1;translate:-50% 0}

@media (prefers-reduced-motion:reduce){
  .fx-lens,.fx-sparks{display:none}
  .cx.fx-pop,.codex-row.fx-shake,.codex-row.fx-ping .cx svg{animation:none}
}

/* v4: on small phones the 207 and 441 marks sat on the hero eyebrow text */
@media (max-width:560px){.cxf.f3,.cxf.f4{display:none}}