/* ╔═══════════════════════════════════════════════════════════════╗
   ║  GENERATED FILE — DO NOT EDIT BY HAND                         ║
   ║  Written by build.js from data/friends.json.                   ║
   ║  9 friends · 2.2s each · 19.80s cycle                         ║
   ╚═══════════════════════════════════════════════════════════════╝ */

@keyframes fr-cyc {
  0%          { opacity: 0; visibility: hidden; pointer-events: none; transform: none; filter: none; }
  0.150%  { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-8px,2px) skewX(10deg); filter: saturate(4) hue-rotate(70deg) contrast(1.7); }
  0.450%  { opacity: 1; transform: translate(7px,-3px) skewX(-8deg); filter: invert(1) contrast(1.5); }
  0.800%  { opacity: 1; transform: translate(-3px,1px) skewX(4deg); filter: saturate(2.2); }
  1.200%  { opacity: 1; transform: none; filter: none; }
  10.000%  { opacity: 1; visibility: visible; pointer-events: auto; transform: none; filter: none; }
  10.400%  { opacity: 1; transform: translate(6px,0) skewX(-7deg); filter: invert(1); }
  10.900%  { opacity: 0; }
  11.111% { opacity: 0; visibility: hidden; pointer-events: none; }
  100%        { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* auto-cycle: runs only while no friend is pinned */
.crt-zone:not(:has(.fr-st:target)) .fr1 { animation: fr-cyc 19.80s linear 0.00s infinite both; }
.crt-zone:not(:has(.fr-st:target)) .fr2 { animation: fr-cyc 19.80s linear 2.20s infinite both; }
.crt-zone:not(:has(.fr-st:target)) .fr3 { animation: fr-cyc 19.80s linear 4.40s infinite both; }
.crt-zone:not(:has(.fr-st:target)) .fr4 { animation: fr-cyc 19.80s linear 6.60s infinite both; }
.crt-zone:not(:has(.fr-st:target)) .fr5 { animation: fr-cyc 19.80s linear 8.80s infinite both; }
.crt-zone:not(:has(.fr-st:target)) .fr6 { animation: fr-cyc 19.80s linear 11.00s infinite both; }
.crt-zone:not(:has(.fr-st:target)) .fr7 { animation: fr-cyc 19.80s linear 13.20s infinite both; }
.crt-zone:not(:has(.fr-st:target)) .fr8 { animation: fr-cyc 19.80s linear 15.40s infinite both; }
.crt-zone:not(:has(.fr-st:target)) .fr9 { animation: fr-cyc 19.80s linear 17.60s infinite both; }

/* pinned: one friend held, screen inert for the cooldown */
.crt-zone:has(#fr1:target) .fr1,
.crt-zone:has(#fr2:target) .fr2,
.crt-zone:has(#fr3:target) .fr3,
.crt-zone:has(#fr4:target) .fr4,
.crt-zone:has(#fr5:target) .fr5,
.crt-zone:has(#fr6:target) .fr6,
.crt-zone:has(#fr7:target) .fr7,
.crt-zone:has(#fr8:target) .fr8,
.crt-zone:has(#fr9:target) .fr9 { opacity: 1; visibility: visible; animation: fr-in 0.5s cubic-bezier(0.2,0.9,0.3,1) both, fr-cool 1.8s linear both; }