/* Fide Group v5 — "Vivid" mode: an optional, animated, multi-colour layer toggled
   independently from light/dark/system theme (see fide.js: VIVID_KEY / html.f-vivid).
   Rules here only ever touch background/background-position/background-size/filter/
   box-shadow — never width, height, padding, margin, grid or position — so layout,
   control sizes and the skeleton loader (.f-skel, .f-ph, .f-thumb) are never touched
   by this file. prefers-reduced-motion is already handled globally in fide.css
   (animation-duration:1ms!important), so every animation below freezes to a single
   static frame there automatically — no extra override needed here. */

@keyframes f-vivid-hue{to{filter:hue-rotate(360deg)}}
@keyframes f-vivid-shimmer{to{background-position:-200% 0}}
@keyframes f-vivid-text{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---- Hero: bespoke looping background video (self-rendered, no third-party
   generation — see pages.ts .hero-motion / static/fide-vivid-bg.mp4), replacing
   the theme-aware gradient entirely as its own fixed artistic backdrop. Hidden
   unless vivid is on; the file has no audio track, so it is inherently silent.
   fide.js plays/pauses it in step with the toggle (autoplay alone is unreliable
   while the element is display:none). ---- */
html.f-vivid .hero{background:#0A2240}
html.f-vivid .hero::before,html.f-vivid .hero::after{display:none}
.hero-motion{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
html.f-vivid .hero-motion{display:block}

@supports ((background-clip:text) or (-webkit-background-clip:text)){
  html.f-vivid .hero h1{
    background-image:linear-gradient(90deg,#FF2FB8,#7C3AED,#2563EB,#06B6D4,#FF2FB8);
    background-size:300% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    animation:f-vivid-text 8s linear infinite;
  }
}

/* ---- Primary CTA: moving sheen, guarded so disabled buttons stay muted ---- */
html.f-vivid .f-btn--primary:not(:disabled):not([aria-disabled="true"]){
  background-image:linear-gradient(100deg,var(--cta-bg) 0%,rgba(255,255,255,.55) 50%,var(--cta-bg) 100%),linear-gradient(0deg,var(--cta-bg),var(--cta-bg));
  background-size:220% 100%,auto;
  animation:f-vivid-shimmer 2.6s linear infinite;
}
html.f-vivid .f-btn--primary:hover:not(:disabled):not([aria-disabled="true"]){
  background-image:linear-gradient(100deg,var(--cta-bg-hover) 0%,rgba(255,255,255,.55) 50%,var(--cta-bg-hover) 100%),linear-gradient(0deg,var(--cta-bg-hover),var(--cta-bg-hover));
  background-size:220% 100%,auto;
}

/* ---- Active chips & category tiles: cycle the hue of their existing gradient ---- */
html.f-vivid .f-chip[aria-pressed="true"],
html.f-vivid .f-chip.is-active,
html.f-vivid .cat-art{
  animation:f-vivid-hue 7s linear infinite;
}