/* fx.css - motion layer for Noidan kirjanpito. transform/opacity only. */
:root{--fx-out:cubic-bezier(.23,1,.32,1);--fx-io:cubic-bezier(.77,0,.175,1)}
@keyframes fx-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fx-pulse{0%{transform:scale(1)}35%{transform:scale(1.018)}100%{transform:scale(1)}}
@keyframes fx-halo{0%{opacity:.7;transform:scale(.98)}100%{opacity:0;transform:scale(1.06)}}
@keyframes fx-seal{0%{transform:scale(1)}30%{transform:scale(.985)}100%{transform:scale(1)}}
@keyframes fx-stamp{0%{opacity:0;transform:scale(1.8) rotate(-14deg)}60%{opacity:1;transform:scale(.92) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes fx-pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
@keyframes fx-flick{0%{opacity:.4;transform:translateX(-4px)}100%{opacity:1;transform:none}}
@keyframes fx-glow{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes fx-bump{0%{transform:translateY(0)}40%{transform:translateY(-3px) scale(1.12)}100%{transform:none}}

.fx-in{animation:fx-rise .38s var(--fx-out) both;animation-delay:calc(var(--fx-i,0) * 45ms)}
.card{position:relative}
.card.fx-open{animation:fx-pulse .45s var(--fx-out)}
.card.fx-open::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 2px var(--venom),0 0 24px rgba(143,227,106,.45);animation:fx-halo .7s var(--fx-out) forwards}
.card.fx-seal{animation:fx-seal .35s var(--fx-out)}
.fx-wax{position:absolute;right:14px;top:10px;width:34px;height:34px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#e8664d,var(--ember) 55%,#7e2116);box-shadow:0 2px 6px rgba(0,0,0,.5);
  display:grid;place-items:center;font-size:15px;color:#3a0c06;animation:fx-stamp .42s var(--fx-out) both,fx-glow 1.6s .4s linear forwards}
.fx-wax::before{content:"✶"}
.status.ok.fx-ok{animation:fx-flick .3s var(--fx-out)}
.fx-mark{display:inline-block;animation:fx-pop .32s var(--fx-out) both;animation-delay:calc(var(--fx-i,0) * 70ms)}
.score{position:relative}
.score b{display:inline-block;font-variant-numeric:tabular-nums}
.score b.fx-bump{animation:fx-bump .4s var(--fx-out)}
.score.lead.fx-lead::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 18px rgba(240,160,64,.55),inset 0 0 0 1px var(--amber);animation:fx-glow 1.2s ease-out forwards}

button{transition:transform .12s var(--fx-out),filter .15s;-webkit-tap-highlight-color:transparent}
button:active:not(:disabled){transform:scale(.96);filter:brightness(1.12)}
input{transition:box-shadow .25s var(--fx-out),border-color .25s}
input:focus{box-shadow:0 0 0 3px rgba(240,160,64,.25),0 0 16px rgba(240,160,64,.22);border-color:var(--amber)}
@media (hover:hover){.teams button:hover{transform:translateY(-1px)}}
#pin>*{animation:fx-rise .3s var(--fx-out) both}

@media (prefers-reduced-motion:reduce){
  .fx-in,.card.fx-open,.card.fx-seal,.fx-mark,.score b.fx-bump,.status.ok.fx-ok,#pin>*{animation:none!important}
  .card.fx-open::after,.score.lead.fx-lead::after{animation-duration:.01s!important}
  .fx-wax{animation:fx-glow 1.2s linear forwards}
  button:active:not(:disabled){transform:none}
}