/* Fusion Artists: fluid layer v2
   Adds motion and a few live-data touches. Colours, type and layout still come from styles.css.
   Most rules apply only when <html> has the .fluid class (set by fluid.js; never for reduced motion). */

/* ---------- page transitions ---------- */
/* set by the one-line snippet in <head> so the incoming page starts covered (no flash) */
html.fx-entering::after{content:"";position:fixed;inset:0;z-index:9998;background:#d4ff00}
.fx-wipe{position:fixed;inset:0;z-index:9999;background:var(--acid);color:var(--acid-ink);display:flex;align-items:flex-end;padding:clamp(24px,4vw,56px) var(--pad);pointer-events:none;will-change:clip-path}
.fx-wipe b{font-family:var(--font);font-weight:900;font-size:var(--fs-h1);line-height:.86;letter-spacing:-.035em;text-transform:uppercase;max-width:14ch;word-spacing:.14em}
.fx-wipe small{position:absolute;top:clamp(20px,3vw,40px);left:var(--pad);font:500 var(--fs-label) var(--font);letter-spacing:var(--track);text-transform:uppercase}

/* ---------- nav: hides on the way down, returns on the way up; progress line ---------- */
.fluid .nav{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fluid .nav.fx-up{transform:translateY(-100%)}
.fx-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:60;background:var(--acid);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;will-change:transform}

/* ---------- custom cursor ---------- */
.fx-cursor{position:fixed;left:0;top:0;z-index:70;pointer-events:none;width:0;height:0;transition:opacity .3s;will-change:transform}
/* the dot grows by scaling (GPU only) rather than changing size, which would re-measure the page */
.fx-cursor::before{content:"";position:absolute;left:-42px;top:-42px;width:84px;height:84px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 10px rgba(12,12,12,.55);transform:scale(.143);transition:transform .4s cubic-bezier(.2,.8,.2,1),background-color .3s,box-shadow .3s}
.fx-cursor span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:700 11px var(--font);letter-spacing:var(--track);text-transform:uppercase;color:var(--acid-ink);opacity:0;transition:opacity .2s;white-space:nowrap}
.fx-cursor.lab::before{transform:scale(1);background:var(--acid);box-shadow:none}
.fx-cursor.lab span{opacity:1;transition-delay:.12s}
.fx-cursor.off{opacity:0}
@media (hover:none),(pointer:coarse){.fx-cursor{display:none}}

/* ---------- featured carousel: liquid wipe between banners (the wavy edge is drawn by fluid.js) ---------- */
.fluid .slide{opacity:1;clip-path:inset(0 0 0 100%);transition:none;z-index:0}
/* only the live and outgoing banners get their own GPU layer; the other slides aren't drawn at all */
.fluid .slide.on,.fluid .slide.was{will-change:transform}
.fluid .slide:not(.on):not(.was){visibility:hidden}
.fluid .feature.back .slide:not(.on):not(.was){clip-path:inset(0 100% 0 0)}
.fluid .slide.on{clip-path:inset(0 0 0 0);z-index:2;transition:clip-path 1.15s cubic-bezier(.77,0,.18,1)}
.fluid .slide.was{clip-path:inset(0 0 0 0);z-index:1}
.fluid .slide.was img{transform:scale(1.06) translateX(-4%);transition:transform 1.15s cubic-bezier(.77,0,.18,1),filter 1.2s}
.fluid .feature.back .slide.was img{transform:scale(1.06) translateX(4%)}
.fluid .slide.on img{transition:transform 7.5s cubic-bezier(.2,.8,.2,1),filter 1.2s}
.fluid .f-progress i{transition:none}
.fluid #viz{display:none}
.fx-viz{position:absolute;left:0;right:0;bottom:0;width:100%;height:26%;z-index:2;pointer-events:none;will-change:transform}

/* ---------- banner colour + sparkle ---------- */
/* banners now show in full colour, a touch richer than the original photo */
.fluid .slide img{filter:saturate(1.12) contrast(1.06) brightness(.97)}
.fluid .slide .bg{filter:blur(38px) saturate(1.5) brightness(.55)}
.fluid .slide:not(.on):not(.was) .bg{display:none}
/* the outgoing banner drains to black-and-white as the new one wipes over it */
.fluid .slide.was img{filter:grayscale(1) contrast(1.15) brightness(.55)}
/* the incoming banner starts as a bright black-and-white flash, then blooms into colour */
.fluid .slide.on img{transition:transform 7.5s cubic-bezier(.2,.8,.2,1),filter 1.5s cubic-bezier(.2,.8,.2,1)}
.fluid .slide.fx-bloom img{filter:grayscale(1) contrast(1.35) brightness(1.4);transition:none}
/* hover: colour turns up, and a soft light follows the cursor */
.fluid .feature:hover .slide.on img{filter:saturate(1.4) contrast(1.12) brightness(1.03)}
/* artist-page banner gets the same treatment: colour, bloom when it scrolls into view, hover boost */
.fluid .banner img{will-change:transform;filter:saturate(1.12) contrast(1.06) brightness(.97);transition:filter 1.5s cubic-bezier(.2,.8,.2,1),transform 1.4s var(--ease)}
.fluid .banner.fx-bloom img{filter:grayscale(1) contrast(1.35) brightness(1.4);transition:none}
.fluid .banner:hover img{filter:saturate(1.4) contrast(1.12) brightness(1.03)}
.fx-glint{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fx-glint .spot{position:absolute;inset:0;background:radial-gradient(circle 34vmax at var(--gx,62%) var(--gy,38%),rgba(255,255,255,.34),rgba(212,255,0,.08) 38%,transparent 64%);mix-blend-mode:soft-light;opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.fx-glint.hot .spot{opacity:1;visibility:visible;transition:opacity .6s}
.fx-glint .sheen{position:absolute;top:-10%;bottom:-10%;left:0;width:22%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28) 45%,rgba(212,255,0,.22) 55%,transparent);mix-blend-mode:overlay;opacity:0;visibility:hidden;transform:translate3d(-60%,0,0) skewX(-18deg)}
.fx-spark{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;will-change:transform}

/* ---------- strips ---------- */
.fluid .strip .track{animation:none!important;will-change:transform}

/* ---------- roster rows (a.row only: the footer's bottom line is also a .row) ---------- */
.fluid a.row{background:transparent!important;isolation:isolate}
.fluid a.row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acid);transform:scaleY(0);transform-origin:50% var(--o,0%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.fluid a.row:hover::before,.fluid a.row:focus-visible::before{transform:scaleY(1)}

.fx-hl{background:var(--acid);color:var(--acid-ink);padding:0 .04em}
a.row:hover .fx-hl{background:var(--acid-ink);color:var(--acid)}

/* floating preview photo (roster rows and the gig strip) */
.fluid #float{display:none!important}
.ffloat{position:fixed;left:0;top:0;width:clamp(180px,17vw,260px);aspect-ratio:4/5;z-index:40;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .3s;box-shadow:0 30px 60px rgba(0,0,0,.5);will-change:transform}
.ffloat.on{opacity:1}
.ffloat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15);opacity:0;transform:scale(1.12);transition:opacity .45s,transform .9s cubic-bezier(.2,.8,.2,1),filter .9s .35s}
/* roster photos appear in black-and-white, then colour floods in if you stay on the row */
.ffloat img.on{opacity:1;transform:scale(1);filter:saturate(1.15) contrast(1.06)}
@media (max-width:900px),(hover:none){.ffloat{display:none}}

/* ---------- artist page ---------- */
.fluid .gig,.fluid .soc,.fluid .pn a{isolation:isolate;position:relative}
.fluid .gig:hover,.fluid .soc:hover,.fluid .pn a:hover{background:transparent}
.fluid .gig::before,.fluid .soc::before,.fluid .pn a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acid);transform:scaleY(0);transform-origin:50% var(--o,0%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.fluid .gig:hover::before,.fluid .soc:hover::before,.fluid .pn a:hover::before{transform:scaleY(1)}
.fluid .portrait img{will-change:transform}
.fx-geo{position:absolute;inset:-12%;width:124%;height:124%;pointer-events:none;opacity:.7;animation:fx-spin 120s linear infinite;will-change:transform}
.fx-geo circle{fill:none;stroke:var(--acid);stroke-width:.6}
@keyframes fx-spin{to{transform:rotate(360deg)}}

/* buttons are drawn towards the cursor, so their own transform transition is removed */
.fluid .btn,.fluid .f-arrows button{transition:background .25s,color .25s,border-color .25s}

/* footer wordmark */
.fluid .foot .big .fl{display:inline-block;color:#1c1c1c;transition:color .6s}
.fluid .foot .big .fl.lit{color:#3a3a3a}
.fluid .foot .big:hover .fl{color:var(--ink)}

@media (prefers-reduced-motion:reduce){ .ffloat,.fx-cursor,.fx-progress{display:none} html.fx-entering::after{display:none} }