/* =====================================================
   TRANSFRIO UNIVERSAL — ANIMATIONS
   Canvas image sequence: 120-frame bus rotation
   Synced to GSAP ScrollTrigger via animations.js
   ===================================================== */

/* ── CANVAS ──────────────────────────────────────────── */
/* Fills the pinned section absolutely.
   object-fit: cover behavior is handled in drawFrame()
   in animations.js — scales to fill, crops edges, no bars. */
#bus-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── REPSE CERTIFICATION BADGE ───────────────────────── */
/* Replaces the plain text REPSE stat item in the stats bar.
   Stacks logo above certification text, flush-left like
   the other stat-item cells. */
.repse-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.repse-badge__logo {
  height: 3rem;        /* 48px — slightly larger for better visibility */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1); /* renders white on the dark primary bg */
  opacity: 0.90;
}

/* ── IMAGE OVERLAY GRADIENTS ──────────────────────────── */
/* Replaces repeated inline style= gradient declarations.
   card-img-overlay: used on model spec cards (50% mid-stop)
   banner-img-overlay: used on page hero banners (55% mid-stop) */
.card-img-overlay {
  background: linear-gradient(100deg, rgba(10,30,20,0.92) 0%, rgba(10,30,20,0.72) 50%, rgba(10,30,20,0.30) 100%);
}

.banner-img-overlay {
  background: linear-gradient(100deg, rgba(10,30,20,0.92) 0%, rgba(10,30,20,0.72) 55%, rgba(10,30,20,0.35) 100%);
}

.repse-badge__text {
  font-size: 0.625rem; /* 10px — matches stat-item__label */
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.55;
}