/* components/hero-kenburns/hero-kenburns.css
 *
 * Startsidans hero: herobilden zoomar långsamt in en gång vid laddning (Ken Burns),
 * med en lätt glidning. Ingen loop – den stannar i slutläget (rules/motion.md regel 6).
 * Laddas bara på startsidan (inc/enqueue.php). Test 2026-11-09.
 * Tempot ändras med tokens i style.css (Rörelse): --dur-kenburns, --ease-kenburns,
 * --kenburns-scale, --kenburns-drift-x/-y.
 */
.brokk-hero-xl__img {
  overflow: hidden; /* bilden växer inom heron */
}

/* Var avstängd 2026-11-10 (herobilden såg grynig ut) – på igen samma dag efter ny bild, och
   lite segare (--dur-kenburns 30 → 36 s). */
.brokk-hero-xl__img img {
  animation: brk-kenburns var(--dur-kenburns) var(--ease-kenburns) both;
  will-change: transform;
}

/* transform, inte scale/translate: på mobil har bilden en egen scale (1.25, ankrad i
   nederkant, i post 7:s CSS). transform multipliceras med den i stället för att skriva
   över den – undantag från rules/motion.md regel 2 av just det skälet. */
@keyframes brk-kenburns {
  from { transform: none; }
  to   { transform: translate(var(--kenburns-drift-x), var(--kenburns-drift-y)) scale(var(--kenburns-scale)); }
}

@media (prefers-reduced-motion: reduce) {
  .brokk-hero-xl__img img { animation: none; }
}