/* Keyframes + small motion utilities kept separate from style.css so the
   critical layout stylesheet stays lean; these are progressive-enhancement
   only and safe to defer. */

/* Hero floating badges are intentionally static -- no ambient motion. */

@keyframes pi-pulse-ring {
	0% { box-shadow: 0 0 0 0 rgba(0,0,0,.28); }
	100% { box-shadow: 0 0 0 12px rgba(0,0,0,0); }
}
.pi-badge-live { animation: pi-pulse-ring 2.2s ease-out infinite; }

@keyframes pi-spin {
	to { transform: rotate(360deg); }
}
.pi-spinner { width: 22px; height: 22px; border: 2.5px solid var(--pi-border); border-top-color: var(--pi-accent); border-radius: 50%; animation: pi-spin .7s linear infinite; }

@keyframes pi-skeleton {
	0% { background-position: -200px 0; }
	100% { background-position: calc(200px + 100%) 0; }
}
.pi-skeleton {
	background: linear-gradient(90deg, var(--pi-bg-alt) 25%, var(--pi-border) 37%, var(--pi-bg-alt) 63%);
	background-size: 400px 100%;
	animation: pi-skeleton 1.4s ease infinite;
	border-radius: var(--pi-radius-sm);
}

/* Shifts by exactly one copy's width (not a fixed -50%) -- the track
   is server-rendered as 2 identical copies of the brand list back to
   back, and -100%/copies always lands exactly at the start of the next
   copy regardless of how many total copies actually end up on the
   page. main.js (brandMarquee()) tops up --pi-marquee-copies with more
   copies of the list when the visible strip is wide enough (or the
   list short enough) that 2 copies alone would run out of content
   before completing one loop, leaving a blank gap at the end of each
   cycle instead of scrolling straight into a seamless repeat. Because
   the shift is always "one copy's width" no matter the copy count, the
   scroll speed stays constant automatically -- no need to also adjust
   the animation's duration when more copies get added. */
@keyframes pi-marquee {
	from { transform: translateX(0); }
	to { transform: translateX( calc( -100% / var(--pi-marquee-copies, 2) ) ); }
}
.pi-brand-marquee-track { animation: pi-marquee 32s linear infinite; }
.pi-brand-marquee:hover .pi-brand-marquee-track { animation-play-state: paused; }