/* footer-drift.css — the faint CUTLANCA watermark in the footer drifts slowly, endlessly (2026-10-22).
   Its own file because main.css is compiled from SCSS. The word keeps main.css's look and
   faintness (.clc-footer__bgword: 20vw, heavy italic, 2.2% white) — only the movement is new.

   Each row is the word repeated with no gap ("CUTLANCACUTLANCA…") in TWO identical halves;
   moving the row by exactly one half and starting again is seamless.
   Computers: one row, right → left, one pass every 71 s.
   Phones (≤ 640px): three rows stacked over the footer's height, alternating directions (53/67/80 s),
   top and bottom rows right → left.
   Kept light for Safari: each half is only 2 words (~2 screens), the box is contained, no will-change.
   It moves only while the footer is on screen (index.html adds .is-drifting), and never for
   people who asked their device to reduce motion. */
.clc-footer__bgword { contain: layout paint; }
.clc-footer__bgword .clc-drift { display: block; width: max-content; white-space: nowrap;
  animation: clcDriftLeft 71s linear infinite; animation-play-state: paused; }
.clc-footer__bgword .clc-drift + .clc-drift { display: none; }          /* computers: one row */
.clc-footer.is-drifting .clc-drift { animation-play-state: running; }

@keyframes clcDriftRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes clcDriftLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }

@media (max-width: 640px) {
  .clc-footer__bgword { top: 0; bottom: 0; left: 0; right: 0; transform: none;
    display: flex; flex-direction: column; justify-content: space-around; }
  .clc-footer__bgword .clc-drift + .clc-drift { display: block; }
  .clc-footer__bgword .clc-drift:nth-child(1) { animation-duration: 53s; }
  .clc-footer__bgword .clc-drift:nth-child(2) { animation-name: clcDriftRight; animation-duration: 67s; }
  .clc-footer__bgword .clc-drift:nth-child(3) { animation-duration: 80s; }
}
@media (prefers-reduced-motion: reduce) {
  .clc-footer__bgword .clc-drift { animation: none; }
}