/* gambling.css — bespoke hero motion layered on industry.css (scope
   .p-industry--gambling). The slot machine's three reels each hold a
   clipped symbol column (diamond·heart·7·diamond·heart) whose rest pose
   centers the 7 in the window — pixel-identical to the old static 7s.
   Each cycle the column sweeps UP through the symbols and snaps back
   down with a small overshoot, always landing on the 7; the reels fire
   left → right on one shared 5s clock (0.35s apart), so the sequence is
   locked. Seam-correct: every loop starts and ends at rest. */

.p-industry--gambling .gb-reel--1 { --ih-ambient: gb-spin 5s linear 2.4s infinite; }
.p-industry--gambling .gb-reel--2 { --ih-ambient: gb-spin 5s linear 2.75s infinite; }
.p-industry--gambling .gb-reel--3 { --ih-ambient: gb-spin 5s linear 3.1s infinite; }
/* the v3 column is periodic (every symbol repeats at +702.42px), so one
   full-period sweep lands on the second 7 in a state pixel-identical to
   the start — the loop's 0%/100% wrap is invisible: a PERFECT loop, one
   direction only, like a real reel. */
@keyframes gb-spin {
  0%, 12% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.55, 0, 0.7, 0.5); /* wind up */
  }
  26% {
    transform: translateY(-660px); /* the bulk of the spin */
    animation-timing-function: cubic-bezier(0.25, 0, 0.4, 1);
  }
  31% {
    transform: translateY(-708px); /* slight overshoot past the lock */
    animation-timing-function: cubic-bezier(0.34, 1.2, 0.64, 1);
  }
  35%, 100% { transform: translateY(-702.42px); } /* locked on 7 #2 ≡ 7 #1 */
}

/* nested tags take the template's entrance+ambient dual declaration */
.p-industry--gambling .ih-hero__art svg .gb-reel {
  transform-box: fill-box;
  animation:
    ih-el 0.55s var(--ease-out-expo, ease) var(--ih-el-delay, 0.12s) both,
    var(--ih-ambient, ih-none);
}
html[data-ih-skip] .p-industry--gambling .ih-hero__art svg .gb-reel {
  animation: var(--ih-ambient, ih-none);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .p-industry--gambling .gb-reel {
    animation: none;
    opacity: 1;
    transform: none;
  }
}