/* online-gaming.css — bespoke hero motion layered on industry.css
   (scope .p-industry--online-gaming). The grey card is a Tetris board.
   Each piece (J left, T right) runs a 6s cycle on a shared clock:
     lock (rest 2.4s, spanning the loop seam) → the squares DISSOLVE one
     by one (line-clear, 0.24s stagger) → the empty group resets three
     grid cells above the board (the board clip hides it) → squares
     reappear → step-drop back in discrete 76.24px ticks (steps(3)) →
     lock. Pieces run half a cycle apart. Seam-correct: 0% = settled. */

.p-industry--online-gaming .og-piece--a { --og-delay: 2.4s; }
.p-industry--online-gaming .og-piece--b { --og-delay: 4.32s; }
.p-industry--online-gaming .og-piece {
  --ih-ambient: og-drop 6s linear var(--og-delay) infinite;
}
@keyframes og-drop {
  0%, 40% { transform: translateY(0); }        /* locked; squares dissolve 20–36% */
  44% { transform: translateY(-228.7px); }      /* invisible reset above */
  48% {
    transform: translateY(-228.7px);
    animation-timing-function: steps(3, end);   /* the tetris ticks */
  }
  80%, 100% { transform: translateY(0); }       /* locked */
}
/* square dissolve slots — same clock, staggered clear, all back before
   the drop peeks over the board edge */
.p-industry--online-gaming .og-sq--1 { --ih-ambient: og-sq-1 6s linear var(--og-delay) infinite; }
.p-industry--online-gaming .og-sq--2 { --ih-ambient: og-sq-2 6s linear var(--og-delay) infinite; }
.p-industry--online-gaming .og-sq--3 { --ih-ambient: og-sq-3 6s linear var(--og-delay) infinite; }
.p-industry--online-gaming .og-sq--4 { --ih-ambient: og-sq-4 6s linear var(--og-delay) infinite; }
@keyframes og-sq-1 { 0%, 20% { opacity: 1; } 24%, 44% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes og-sq-2 { 0%, 24% { opacity: 1; } 28%, 44% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes og-sq-3 { 0%, 28% { opacity: 1; } 32%, 44% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes og-sq-4 { 0%, 32% { opacity: 1; } 36%, 44% { opacity: 0; } 46%, 100% { opacity: 1; } }

/* piece B: land late, clear sooner (~1.3s rest vs A's 2.4s) */
.p-industry--online-gaming .og-piece--b {
  --ih-ambient: og-drop-b 6s linear var(--og-delay) infinite;
}
@keyframes og-drop-b {
  0%, 40% { transform: translateY(0); }        /* locked; dissolve 20–36% */
  44% { transform: translateY(-228.7px); }
  66% {
    transform: translateY(-228.7px);
    animation-timing-function: steps(3, end);
  }
  98%, 100% { transform: translateY(0); }       /* lands at 98% → short rest */
}
.p-industry--online-gaming .og-piece--b .og-sq--1 { --ih-ambient: og-sq-1b 6s linear var(--og-delay) infinite; }
.p-industry--online-gaming .og-piece--b .og-sq--2 { --ih-ambient: og-sq-2b 6s linear var(--og-delay) infinite; }
.p-industry--online-gaming .og-piece--b .og-sq--3 { --ih-ambient: og-sq-3b 6s linear var(--og-delay) infinite; }
.p-industry--online-gaming .og-piece--b .og-sq--4 { --ih-ambient: og-sq-4b 6s linear var(--og-delay) infinite; }
@keyframes og-sq-1b { 0%, 20% { opacity: 1; } 24%, 62% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes og-sq-2b { 0%, 24% { opacity: 1; } 28%, 62% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes og-sq-3b { 0%, 28% { opacity: 1; } 32%, 62% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes og-sq-4b { 0%, 32% { opacity: 1; } 36%, 62% { opacity: 0; } 64%, 100% { opacity: 1; } }

/* nested tags take the template's entrance+ambient dual declaration */
.p-industry--online-gaming .ih-hero__art svg .og-piece,
.p-industry--online-gaming .ih-hero__art svg .og-sq {
  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--online-gaming .ih-hero__art svg .og-piece,
html[data-ih-skip] .p-industry--online-gaming .ih-hero__art svg .og-sq {
  animation: var(--ih-ambient, ih-none);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .p-industry--online-gaming .og-piece,
  .p-industry--online-gaming .og-sq {
    animation: none;
    opacity: 1;
    transform: none;
  }
}