/*! artist-bg-vt.css v1.1.0 · 2026-08-11 · fc-brands @fcv */ /* ============================================================ TEMPER — artist hero background: directional glitch-PULL on nav. Add class fc-vt-bg to the hero (the one inside .artist-img-cont). On prev/next the old bg glitch-pulls toward the nav direction and the new bg glitch-pulls in from the opposite side, travelling the same way. Independent VT group (fcbg) — does not touch the root/player transitions. Requires @view-transition:auto (already set in artist-swipe.css) + one .fc-vt-bg per page (view-transition-name must be unique). ============================================================ */ .fc-vt-bg { view-transition-name: fcbg; } ::view-transition-group(fcbg) { z-index: 0; } /* behind the content */ ::view-transition-old(fcbg), ::view-transition-new(fcbg) { animation: none; } /* Direction (direct-manipulation): NEXT = swipe left / next button = everything slides LEFT, new bg enters from the RIGHT. PREV = swipe right / prev button = everything slides RIGHT, new enters from the LEFT (mirror). Motion = a GLITCH burst at slide-start + a GLITCH burst as the new slide LANDS, but SMOOTH (clean) in between. */ html[data-fcvt="next"]::view-transition-old(fcbg) { animation: fcbgOutLeft .64s cubic-bezier(.4,0,.2,1) both; } html[data-fcvt="next"]::view-transition-new(fcbg) { animation: fcbgInFromRight .64s cubic-bezier(.4,0,.2,1) both; } html[data-fcvt="prev"]::view-transition-old(fcbg) { animation: fcbgOutRight .64s cubic-bezier(.4,0,.2,1) both; } html[data-fcvt="prev"]::view-transition-new(fcbg) { animation: fcbgInFromLeft .64s cubic-bezier(.4,0,.2,1) both; } @keyframes fcbgOutLeft { /* NEXT old — glitch burst, then SMOOTH slide out LEFT */ 0% { transform: translateX(0); opacity:1; filter:none; clip-path: inset(0 0 0 0); } 7% { transform: translateX(-2%) skewX(-4deg); filter: hue-rotate(32deg) saturate(1.6) contrast(1.1); clip-path: inset(0 0 56% 0); } 14% { transform: translateX(-5%) skewX(1deg); filter: hue-rotate(-18deg) saturate(1.3); clip-path: inset(38% 0 30% 0); } 20% { transform: translateX(-8%); filter:none; clip-path: inset(0 0 0 0); } /* clean from here on */ 100% { transform: translateX(-72%); opacity:.2; filter: blur(2px); clip-path: inset(0 0 0 0); } } @keyframes fcbgInFromRight { /* NEXT new — SMOOTH slide in from the RIGHT, glitch burst on LANDING */ 0% { transform: translateX(72%); opacity:.2; filter: blur(2px); clip-path: inset(0 0 0 0); } 18% { opacity:1; filter:none; } 74% { transform: translateX(6%); filter:none; clip-path: inset(0 0 0 0); } /* smooth until here */ 82% { transform: translateX(3%) skewX(3deg); filter: hue-rotate(-30deg) saturate(1.6) contrast(1.1); clip-path: inset(0 0 54% 0); } 90% { transform: translateX(-1%) skewX(-2deg); filter: hue-rotate(16deg) saturate(1.3); clip-path: inset(44% 0 22% 0); } 100% { transform: translateX(0); opacity:1; filter:none; clip-path: inset(0 0 0 0); } } @keyframes fcbgOutRight { /* PREV old — glitch burst, then SMOOTH slide out RIGHT */ 0% { transform: translateX(0); opacity:1; filter:none; clip-path: inset(0 0 0 0); } 7% { transform: translateX(2%) skewX(4deg); filter: hue-rotate(32deg) saturate(1.6) contrast(1.1); clip-path: inset(0 0 56% 0); } 14% { transform: translateX(5%) skewX(-1deg); filter: hue-rotate(-18deg) saturate(1.3); clip-path: inset(38% 0 30% 0); } 20% { transform: translateX(8%); filter:none; clip-path: inset(0 0 0 0); } 100% { transform: translateX(72%); opacity:.2; filter: blur(2px); clip-path: inset(0 0 0 0); } } @keyframes fcbgInFromLeft { /* PREV new — SMOOTH slide in from the LEFT, glitch burst on LANDING */ 0% { transform: translateX(-72%); opacity:.2; filter: blur(2px); clip-path: inset(0 0 0 0); } 18% { opacity:1; filter:none; } 74% { transform: translateX(-6%); filter:none; clip-path: inset(0 0 0 0); } 82% { transform: translateX(-3%) skewX(-3deg); filter: hue-rotate(-30deg) saturate(1.6) contrast(1.1); clip-path: inset(0 0 54% 0); } 90% { transform: translateX(1%) skewX(2deg); filter: hue-rotate(16deg) saturate(1.3); clip-path: inset(44% 0 22% 0); } 100% { transform: translateX(0); opacity:1; filter:none; clip-path: inset(0 0 0 0); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(fcbg), ::view-transition-new(fcbg) { animation: none !important; } } /* NOTE: the generic persistent-chrome classes (.fc-vt-back / .fc-vt-prev / .fc-vt-next / .fc-vt-keep-N) + the site-wide @view-transition opt-in now live in fc-vt.css (loaded in the GLOBAL head). This file is artist-only: just the fcbg background glitch-slide. Don't redefine fckeep-* here. */ /* ---- NOTHING ON AN ARTIST PAGE ACTUALLY CARRIES fcbg ---- VERIFIED IN A BROWSER ON PRODUCTION, 2026-08-11: the artist template never received the .fc-vt-bg class, so nothing carries fcbg and EVERY rule above this line is inert and has been since the day it shipped. The prev/next background glitch-slide has never once run; what a swipe actually shows is the plain root cross-fade. Keeping this written down because the file reads as though the effect is live, and the deploy was green the whole time. DO NOT "fix" it by naming .artist-img-cont — that was tried on 2026-08-11 and broke the live artist pages (everything vanished, black flashes, the fc-vt-keep-* chrome disappeared). Reason: naming an element REMOVES it from the root snapshot and re-parents it as a flat sibling of ::view-transition-group(root), so normal-flow z-order is gone. .artist-img-cont is FULL-VIEWPORT and the site sets an opaque body background (#06090e, the no-white-flash fix in STATUS.md), which leaves only two outcomes, both broken: · above root -> the sliding hero covers the whole page, chrome included · below root -> the opaque body background paints over it; slide invisible The "z-index:0 = behind the content" comment on line ~11 was never true: root is z-index auto and EARLIER in tree order, so an explicit 0 paints on top. Reviving this needs a real design pass — composing the content layer into the transition, or a transparent root for its duration — not a one-line switch. */ :root{--fcv-artist-bg-vt-css:"1.1.0";}