/*! artist-swipe.css v1.0.0 · 2026-08-11 · fc-brands @fcv */
/* ============================================================
   TEMPER — artist page swipe / prev-next glitch transition
   Cross-document View Transitions: the browser snapshots the old
   page, holds it through the load (no white flash), and glitch-
   slides to the new one. Direction set by JS via html[data-fcvt].
   Link this on the ARTIST template (both pages must have it).
   Unsupported browsers just navigate normally (no transition).
   ============================================================ */
@view-transition { navigation: auto; }

/* Dark backdrop so any gap DURING the slide flashes black, never white.
   These are transition-only pseudo-elements — do NOT set a background on
   :root here: an always-on opaque :root background changes how the page's
   mix-blend/compositing renders and washes it out on wide-gamut displays. */
::view-transition { background: #04060c; }
::view-transition-group(root) { background: #04060c; }

/* we drive root directionally instead of the default cross-fade */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* NEXT = swipe left / next button: everything slides LEFT, new enters from the right */
html[data-fcvt="next"]::view-transition-old(root) { animation: fcvtOutLeft  .5s cubic-bezier(.6,.02,.2,1) both; }
html[data-fcvt="next"]::view-transition-new(root) { animation: fcvtInLeft   .5s cubic-bezier(.6,.02,.2,1) both; }
/* PREV = swipe right / prev button: everything slides RIGHT, new enters from the left (mirror) */
html[data-fcvt="prev"]::view-transition-old(root) { animation: fcvtOutRight .5s cubic-bezier(.6,.02,.2,1) both; }
html[data-fcvt="prev"]::view-transition-new(root) { animation: fcvtInRight  .5s cubic-bezier(.6,.02,.2,1) both; }

@keyframes fcvtOutLeft {
  0%   { transform: translateX(0);    opacity: 1; filter: none;              clip-path: inset(0 0 0 0); }
  15%  { filter: hue-rotate(35deg) saturate(1.6) contrast(1.08);            clip-path: inset(0 0 66% 0); }
  30%  { transform: translateX(-3%);                                        clip-path: inset(46% 0 22% 0); }
  45%  {                                                                    clip-path: inset(72% 0 4% 0); }
  60%  { filter: none;                                                      clip-path: inset(0 0 0 0); }
  100% { transform: translateX(-22%); opacity: 0; filter: blur(3px); }
}
@keyframes fcvtInLeft {
  0%   { transform: translateX(22%);  opacity: 0; filter: blur(3px); }
  40%  { opacity: 1; filter: hue-rotate(-35deg) saturate(1.6);              clip-path: inset(0 0 55% 0); }
  55%  {                                                                    clip-path: inset(50% 0 18% 0); }
  70%  {                                                                    clip-path: inset(78% 0 0 0); }
  85%  { filter: none;                                                      clip-path: inset(0 0 0 0); }
  100% { transform: translateX(0);    opacity: 1; filter: none; }
}
@keyframes fcvtOutRight {
  0%   { transform: translateX(0);    opacity: 1; filter: none;              clip-path: inset(0 0 0 0); }
  15%  { filter: hue-rotate(35deg) saturate(1.6) contrast(1.08);            clip-path: inset(0 0 66% 0); }
  30%  { transform: translateX(3%);                                         clip-path: inset(46% 0 22% 0); }
  45%  {                                                                    clip-path: inset(72% 0 4% 0); }
  60%  { filter: none;                                                      clip-path: inset(0 0 0 0); }
  100% { transform: translateX(22%);  opacity: 0; filter: blur(3px); }
}
@keyframes fcvtInRight {
  0%   { transform: translateX(-22%); opacity: 0; filter: blur(3px); }
  40%  { opacity: 1; filter: hue-rotate(-35deg) saturate(1.6);              clip-path: inset(0 0 55% 0); }
  55%  {                                                                    clip-path: inset(50% 0 18% 0); }
  70%  {                                                                    clip-path: inset(78% 0 0 0); }
  85%  { filter: none;                                                      clip-path: inset(0 0 0 0); }
  100% { transform: translateX(0);    opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* NOTE: the player's own view-transition (fcp) is owned entirely in player.css
   (shrink-to-box + collapse-on-click). Do NOT redefine ::view-transition-*(fcp)
   here — two definitions in different files fight in the cascade. */

:root{--fcv-artist-swipe-css:"1.0.0";}