/* Each game's neon icon gets its own entrance on the between-rounds screen (#s-next), then a little
   idle move while Pib explains the game. host.js puts data-g="<game>" on the svg and only redraws it
   when the game changes, so each entrance plays once. See them all at /mockups/game-icons.

   Squib       the bubble inflates, the "!" drops in and the dot pops, then it chatters
   Bad Art     the pencil swoops in and draws its squiggle, then taps
   Odd Duck    three circles pop in a row, the square arrives late and spins, then fidgets
   Blame Game  the person rises, the arrow drops onto their head and bounces, then keeps pointing
   Pop Squiz   the circle draws itself, the "?" swings in and the dot drops, then it wonders
   Gloop       the loop whirls in, the drip forms and falls, and keeps dripping

   The parts are picked out by their order in the icon (Hub.GAMES in hub.js). */

.gi { overflow: visible; }
.screen.active .nx-logo.gi { animation: none; } /* the parts make their own entrance instead of the plain pop */
.gi > * { transform-box: fill-box; transform-origin: center; }
/* lines that draw themselves use a dash longer than any stroke in a 48-unit icon (160) */

/* ---------- Squib: a speech bubble with a "!" ---------- */
.gi[data-g="squib"] > :nth-child(1) { transform-origin: 30% 100%; animation: gi-inflate .7s cubic-bezier(.2,1.6,.4,1) both, gi-chatter 2.4s ease-in-out 1.8s infinite; }
.gi[data-g="squib"] > :nth-child(2) { animation: gi-drop .5s cubic-bezier(.3,1.7,.5,1) .45s both; }
.gi[data-g="squib"] > :nth-child(3) { animation: gi-dot .45s cubic-bezier(.2,2,.4,1) .8s both; }
@keyframes gi-inflate { 0% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.18, .86); opacity: 1; } 75% { transform: scale(.92, 1.08); } }
@keyframes gi-chatter { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-5deg) scale(1.04); } 82% { transform: rotate(4deg); } 88% { transform: rotate(-2deg); } }
@keyframes gi-drop { 0% { transform: translateY(-22px); opacity: 0; } 60% { opacity: 1; } }
@keyframes gi-dot { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(2.4); opacity: 1; } }

/* ---------- Bad Art: a pencil and the squiggle it draws ---------- */
.gi[data-g="draw"] > :nth-child(1), .gi[data-g="draw"] > :nth-child(2) { transform-origin: 20% 80%; animation: gi-swoop .65s cubic-bezier(.2,1.3,.4,1) both, gi-scribble .9s ease-in-out .65s both, gi-tap 2.2s ease-in-out 2s infinite; }
.gi[data-g="draw"] > :nth-child(3) { stroke-dasharray: 160; stroke-dashoffset: 160; animation: gi-draw-on .9s ease-out .65s forwards; }
@keyframes gi-swoop { 0% { transform: translate(26px, -22px) rotate(40deg); opacity: 0; } 70% { opacity: 1; } }
@keyframes gi-scribble { 0%, 100% { transform: none; } 20% { transform: translate(-2px, 2px) rotate(-6deg); } 45% { transform: translate(2px, 1px) rotate(5deg); } 70% { transform: translate(-1px, 2px) rotate(-4deg); } }
@keyframes gi-tap { 0%, 75%, 100% { transform: none; } 82% { transform: translate(-1px, 2px) rotate(-8deg); } 90% { transform: none; } 95% { transform: translate(-1px, 1.5px) rotate(-5deg); } }
@keyframes gi-draw-on { to { stroke-dashoffset: 0; } }

/* ---------- Odd Duck: three circles and the square that doesn't belong ---------- */
.gi[data-g="odd"] > :nth-child(-n+3) { animation: gi-pop .4s cubic-bezier(.2,1.8,.4,1) both; }
.gi[data-g="odd"] > :nth-child(2) { animation-delay: .12s; }
.gi[data-g="odd"] > :nth-child(3) { animation-delay: .24s; }
/* the square's own tilt (rotate(14) in the icon) has to live in CSS too, or the animation would straighten it */
.gi[data-g="odd"] > :nth-child(4) { transform: rotate(14deg); animation: gi-late .9s cubic-bezier(.3,1.4,.5,1) .55s both, gi-fidget 2.6s ease-in-out 2s infinite; }
@keyframes gi-pop { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.2); opacity: 1; } }
@keyframes gi-late { 0% { transform: translate(14px, 14px) rotate(-200deg) scale(.3); opacity: 0; } 60% { transform: rotate(34deg) scale(1.15); opacity: 1; } 80% { transform: rotate(6deg); } 100% { transform: rotate(14deg); } }
@keyframes gi-fidget { 0%, 72%, 100% { transform: rotate(14deg); } 78% { transform: translateX(-2px) rotate(2deg); } 84% { transform: translateX(2px) rotate(26deg); } 90% { transform: rotate(10deg); } }

/* ---------- Blame Game: a person, and the arrow pointing at them ---------- */
.gi[data-g="likely"] > :nth-child(2) { transform-origin: 50% 100%; animation: gi-rise .5s cubic-bezier(.2,1.3,.4,1) both; }
.gi[data-g="likely"] > :nth-child(1) { animation: gi-pop .45s cubic-bezier(.2,1.8,.4,1) .3s both; }
.gi[data-g="likely"] > :nth-child(3), .gi[data-g="likely"] > :nth-child(4) { animation: gi-blame .9s cubic-bezier(.3,1.5,.5,1) .65s both, gi-point 1.4s ease-in-out 1.8s infinite; }
@keyframes gi-rise { 0% { transform: translateY(12px) scaleY(.2); opacity: 0; } 70% { opacity: 1; } }
@keyframes gi-blame { 0% { transform: translateY(-26px); opacity: 0; } 35% { transform: translateY(3px); opacity: 1; } 55% { transform: translateY(-6px); } 75% { transform: translateY(2px); } }
@keyframes gi-point { 50% { transform: translateY(2.5px); } }

/* ---------- Pop Squiz: a "?" in a circle ---------- */
.gi[data-g="quiz"] > :nth-child(1) { stroke-dasharray: 160; stroke-dashoffset: 160; animation: gi-draw-on .8s cubic-bezier(.5,0,.3,1) forwards; }
.gi[data-g="quiz"] > :nth-child(2) { transform-origin: 50% 0%; animation: gi-swing 1s cubic-bezier(.3,1.2,.5,1) .5s both, gi-wonder 3s ease-in-out 2s infinite; }
.gi[data-g="quiz"] > :nth-child(3) { animation: gi-bounce .6s cubic-bezier(.3,1.6,.5,1) 1.1s both; }
@keyframes gi-swing { 0% { transform: rotate(-70deg) scale(.4); opacity: 0; } 40% { transform: rotate(30deg); opacity: 1; } 65% { transform: rotate(-14deg); } 85% { transform: rotate(6deg); } }
@keyframes gi-wonder { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } }
@keyframes gi-bounce { 0% { transform: translateY(-16px); opacity: 0; } 40% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(-5px); } 80% { transform: translateY(0); } }

/* ---------- Gloop: a loop with a drip coming off it ---------- */
/* the loop and its arrowhead turn together, round the loop's centre */
.gi[data-g="gloop"] > :nth-child(-n+2) { transform-box: view-box; transform-origin: 24px 22px; animation: gi-whirl .9s cubic-bezier(.2,1.2,.4,1) both; }
.gi[data-g="gloop"] > :nth-child(3) { transform-origin: 50% 0%; animation: gi-drip-form .6s ease-out .8s both, gi-drip 2.2s cubic-bezier(.5,0,.8,.4) 1.6s infinite; }
@keyframes gi-whirl { 0% { transform: rotate(-300deg) scale(.2); opacity: 0; } 60% { opacity: 1; } 80% { transform: rotate(12deg) scale(1.06); } }
@keyframes gi-drip-form { 0% { transform: scale(0, .2); opacity: 0; } 70% { transform: scale(1.1, 1.25); opacity: 1; } }
@keyframes gi-drip { 0% { transform: none; opacity: 1; } 35% { transform: scaleY(1.35); } 60% { transform: translateY(9px) scale(.85, 1.1); opacity: 1; } 70% { transform: translateY(11px) scale(1.4, .5); opacity: 0; } 71% { transform: scale(0); opacity: 0; } 100% { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .gi, .gi > * { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* Between rounds, in order: the icon makes its entrance, then the game's name strikes on like the
   "Squib" sign on the home screen (menu.css sq-on: a stutter, two drop-outs, then lit, then the hum),
   with the tube's zaps (host.js), then Pib speaks (the server waits NEXT_INTRO_MS, game.js). */
/* the same gold tube as the home screen's "Squib" (menu.css .sq-title); dark until it strikes */
#s-next .nx-strike { opacity: .07; color: #fff6dc; -webkit-text-stroke: .1vw #fff6dc;
  text-shadow: 0 0 1px #fff, 0 0 .47vw #ffe3a0, 0 0 1.1vw #ffc35a, 0 0 2.3vw #ffa53a, 0 0 4.8vw rgba(255,150,50,.55), 0 0 9.4vw rgba(255,140,40,.35); }
#s-next.screen.active .nx-strike { animation: nx-strike 1.8s steps(1) 1.3s both, nx-hum 5s ease-in-out 3.1s infinite; }
@keyframes nx-strike { 0% { opacity: .07; text-shadow: none; } 9% { opacity: 1; } 13% { opacity: .12; } 22% { opacity: .95; } 26% { opacity: .2; } 42% { opacity: 1; } 46% { opacity: .55; } 50%, 100% { opacity: 1; } }
@keyframes nx-hum { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.1); } }
@media (prefers-reduced-motion: reduce) { #s-next .nx-strike, #s-next.screen.active .nx-strike { animation: none; opacity: 1; } }