/* HYPagotchi game motion core — modern web animation techniques shared by all
   mini games. Spring physics via linear() easing, @property-animated conic combo
   ring, offset-path coin trajectories, screen-blend flashes, paint containment. */

:root{
  /* real spring curve (mass-spring approximation) — modern linear() easing */
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%,
    1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
    0.997 69.8%, 1.003 76.9%, 1);
  --ease-snap: linear(0, 0.242 8.7%, 0.797 21.6%, 1.056 32.5%, 1.075, 1.087 38.8%,
    1.088 42.2%, 1.05 53.6%, 0.998 67.2%, 0.988, 0.984 79.4%, 1);
  --ease-out-5: cubic-bezier(.22,1,.36,1);
}

/* paint containment — keeps 60fps under particle storms */
.arena{ contain: layout paint; }

/* spring pop-in (streaks, banners, forged eggs, picker cards) */
@keyframes gmPopIn{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
.gm-pop{ animation: gmPopIn .5s var(--ease-spring) both; }

/* score bump — used via WAAPI (el.animate) with composite:add; class fallback */
@keyframes gmBump{ 0%{ transform:scale(1);} 35%{ transform:scale(1.22);} 100%{ transform:scale(1);} }
.gm-bump{ animation: gmBump .3s var(--ease-spring); }

/* coin trajectories — offset-path arcs (4 variants), GPU-composited */
@keyframes gmCoinFly{ 0%{ offset-distance:0%; opacity:1; } 70%{ opacity:1; } 100%{ offset-distance:100%; opacity:0; } }
.gm-coin{ position:absolute; z-index:13; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFF3B0, #F2C200 60%, #8A6A00);
  border:2px solid #1A202C; pointer-events:none;
  animation: gmCoinFly .75s var(--ease-out-5) forwards; }
.gm-coin.p0{ offset-path: path('M 0 0 Q -50 -90 -80 -30'); }
.gm-coin.p1{ offset-path: path('M 0 0 Q -15 -110 20 -50'); }
.gm-coin.p2{ offset-path: path('M 0 0 Q 45 -95 75 -25'); }
.gm-coin.p3{ offset-path: path('M 0 0 Q 15 -70 55 -60'); }

/* rotating conic combo ring — @property makes the gradient angle animatable */
@property --gm-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes gmSpin{ to{ --gm-angle:360deg; } }
.gm-ring{ position:relative; }
.gm-ring::before{ content:""; position:absolute; inset:-6px; z-index:-1; border-radius:inherit;
  background:conic-gradient(from var(--gm-angle), #FF6B6B, #FFE66D, #4FD1C5, #B794F4, #FF6B6B);
  animation: gmSpin 1.6s linear infinite; filter:blur(1px); }
.gm-ring.fast::before{ animation-duration:.7s; }

/* screen-blend flash — reads as light, not white paint */
.gm-flash{ mix-blend-mode:screen; }

/* speed streaks with staggered custom-property delays */
@keyframes gmStreak{ from{ transform:translateX(0); opacity:.95; } to{ transform:translateX(-520px); opacity:0; } }
.gm-streak{ position:absolute; z-index:8; height:2px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.9), transparent);
  animation: gmStreak .32s linear forwards; }

/* character star-mode aura: hue cycle + pulsing glow, composited filters only */
@keyframes gmStarAura{
  0%{ filter:hue-rotate(0deg) drop-shadow(0 0 5px #fff) brightness(1.05); }
  50%{ filter:hue-rotate(180deg) drop-shadow(0 0 9px #FFE66D) brightness(1.15); }
  100%{ filter:hue-rotate(360deg) drop-shadow(0 0 5px #fff) brightness(1.05); } }
.gm-star{ animation: gmStarAura .8s linear infinite; }

/* floating reward text with spring overshoot */
@keyframes gmReward{ 0%{ opacity:0; transform:translateY(8px) scale(.5); }
  20%{ opacity:1; transform:translateY(0) scale(1.15); } 32%{ transform:scale(1); }
  75%{ opacity:1; } 100%{ opacity:0; transform:translateY(-46px) scale(.96); } }
.gm-reward{ animation: gmReward .75s var(--ease-out-5) forwards; }

/* territory crossfade helper (background img pairs) */
.gm-xfade{ transition: opacity 1.2s var(--ease-out-5); }

@media (prefers-reduced-motion: reduce){
  .gm-pop,.gm-bump,.gm-coin,.gm-ring::before,.gm-streak,.gm-star,.gm-reward{ animation:none !important; }
}