/* Icon grid (js/icon-grid.js): the TruBenefits icon badges, placed as in
   Figma over their background. When the cell scrolls into view the badges
   pop in on a diagonal, then each icon draws its lines on. After that, one
   badge at a time lifts and its icon takes on a product color (--lit). */

.icon-grid {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.64, 1); /* lands with a slight overshoot */
  --stagger: 80ms; /* between each diagonal of badges (--d) */
  container-type: inline-size;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.icon-grid_bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Each badge: 140px on the 727px Figma cell. Waits small and low, hidden. */
.icon-badge {
  position: absolute;
  width: 19.3%;
  aspect-ratio: 1;
  opacity: 0;
  scale: 0.6;
  translate: 0 12%;
  transition:
    opacity 0.5s ease-out,
    scale 0.8s var(--ease-back),
    translate 0.8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * var(--stagger));
}

.icon-badge svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition:
    scale 0.6s var(--ease-out),
    filter 0.6s var(--ease-out);
}

/* The icon's lines, hidden until drawn (pathLength="1" on each, so the
   dash maths is the same for every shape) */
.icon-badge_glyph [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition:
    stroke-dashoffset 1.1s var(--ease-out) calc(var(--d, 0) * var(--stagger) + 300ms),
    stroke 0.6s ease 0s;
}

/* In view: badges up, lines drawn */
.icon-grid.is-in .icon-badge {
  opacity: 1;
  scale: 1;
  translate: 0 0;
}

.icon-grid.is-in .icon-badge_glyph [pathLength] {
  stroke-dashoffset: 0;
}

/* Taking its turn: lifts a touch with a soft shadow, icon in color */
.icon-badge.is-lit svg {
  scale: 1.08;
  filter: drop-shadow(0 1.2cqw 2.4cqw rgb(19 15 15 / 0.12));
}

.icon-badge.is-lit .icon-badge_glyph [pathLength] {
  stroke: var(--lit);
}

/* Reduced motion: everything in place from the start, nothing moving */
@media (prefers-reduced-motion: reduce) {
  .icon-badge,
  .icon-grid.is-in .icon-badge {
    opacity: 1;
    scale: 1;
    translate: 0 0;
    transition: none;
  }
  .icon-badge_glyph [pathLength] {
    stroke-dashoffset: 0;
    transition: none;
  }
}