/* ============================================================
   THE BROKEN TAVERN — animations.css
   Site-wide tasteful motion: additive, ax- namespaced utilities.
   Wired into every site page via @import at the top of /styles.css
   and linked directly from games/*.html (they don't use styles.css).

   DURATIONS: 150-350ms, ease-out curves. Nothing here delays
   interaction or content. JS companion: /animations.js (game pages)
   and the AX-ANIMATIONS section at the end of /site.js (site pages).

   CARD-GAME WORKER: the .kg-* utilities below (kg-scene, kg-card,
   kg-face, kg-back, kg-flipped, kg-flip, kg-flip-back, kg-draw,
   kg-play, kg-discard, kg-shake) are yours to use. None of these
   names collide with accounts.js (kg-auth, kg-close, kg-err, kg-go,
   kg-note, kg-ok, kg-session, kg-sub, kg-switch) or any game CSS.
   ============================================================ */

/* ---------- keyframes (all ax- prefixed: no collisions) ---------- */
@keyframes ax-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ax-fade{from{opacity:0}to{opacity:1}}
@keyframes ax-pop{0%{opacity:0;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
@keyframes ax-slide-l{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes ax-slide-r{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes ax-toast-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ax-modal-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ax-tab-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* card-game keyframes */
@keyframes ax-flip{from{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}
@keyframes ax-flip-back{from{transform:rotateY(180deg)}to{transform:rotateY(360deg)}}
@keyframes ax-draw{0%{opacity:0;transform:translateY(-26px) rotate(-4deg) scale(.92)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes ax-play{0%{transform:translateY(-14px) scale(1.06)}100%{transform:none}}
@keyframes ax-discard{to{opacity:0;transform:translateX(44px) rotate(8deg)}}
@keyframes ax-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}

/* ---------- reveal-on-scroll ----------
   HTML: <section class="ax-reveal">, optional .ax-d1..ax-d6 stagger.
   animations.js adds .ax-in on intersection, then removes the ax-*
   classes so the element keeps its natural styles afterwards.
   (The older .reveal system in styles.css/site.js is untouched.) */
html.ax-js .ax-reveal,html.ax-js .ax-fade,html.ax-js .ax-pop,
html.ax-js .ax-slide-l,html.ax-js .ax-slide-r{opacity:0;
  transition:opacity .3s ease-out,transform .3s ease-out}
html.ax-js .ax-reveal{transform:translateY(18px)}
html.ax-js .ax-slide-l{transform:translateX(-22px)}
html.ax-js .ax-slide-r{transform:translateX(22px)}
html.ax-js .ax-pop{transform:scale(.94)}
.ax-reveal.ax-in,.ax-fade.ax-in,.ax-pop.ax-in,
.ax-slide-l.ax-in,.ax-slide-r.ax-in{opacity:1;transform:none}
/* stagger delays (60ms steps, cap 360ms) */
.ax-d1{transition-delay:.06s}.ax-d2{transition-delay:.12s}
.ax-d3{transition-delay:.18s}.ax-d4{transition-delay:.24s}
.ax-d5{transition-delay:.3s}.ax-d6{transition-delay:.36s}

/* ---------- game-room entrance ----------
   animations.js adds .ax-entrance to HUD/panel chrome on
   body.ax-room pages (games) with staggered delays, then adds
   .ax-in and removes .ax-entrance so natural styles return. */
html.ax-js .ax-entrance{opacity:0;transform:translateY(14px);
  transition:opacity .3s ease-out,transform .3s ease-out}
.ax-entrance.ax-in{opacity:1;transform:none}

/* ---------- buttons: hover lift/glow + press-down ---------- */
.ax-btn{transition:transform .18s ease-out,box-shadow .18s ease-out}
.ax-btn:hover{transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 18px rgba(201,162,39,.22)}
.ax-btn:active{transform:translateY(1px) scale(.97);
  box-shadow:0 3px 10px rgba(0,0,0,.4)}
/* press-down for the existing site-wide .btn (beats .btn-*:hover, same specificity wins by order) */
a.btn:active,button.btn:active{transform:translateY(1px) scale(.97)}

/* ---------- modal open pop (site #overlay modal already slides) ---------- */
#overlay.open .modal{animation:ax-modal-in .28s ease-out}

/* ---------- toast slide/fade utility ---------- */
.ax-toast-in{animation:ax-toast-in .25s ease-out}

/* ---------- generic tab panels (opt-in, no existing tabs on site) ---------- */
.ax-tabpanel{display:none}
.ax-tabpanel.ax-active{display:block;animation:ax-tab-in .22s ease-out}

/* ============================================================
   CARD-GAME UTILITIES (.kg-*) — for the Karma's Gambit worker
   Two flip styles: state-based (.kg-flipped, reversible) or
   one-shot (.kg-flip / .kg-flip-back, re-trigger by re-adding).
   ============================================================ */
.kg-scene{perspective:1200px}
.kg-card{position:relative;transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.2,.7,.3,1.15)}
.kg-face{position:absolute;inset:0;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;border-radius:inherit;overflow:hidden}
.kg-face.kg-back{transform:rotateY(180deg)}
/* state flip: toggle .kg-flipped on .kg-card */
.kg-card.kg-flipped{transform:rotateY(180deg)}
/* one-shot animations (re-add the class to replay) */
.kg-flip{animation:ax-flip .32s ease-in-out}
.kg-flip-back{animation:ax-flip-back .32s ease-in-out}
.kg-draw{animation:ax-draw .3s ease-out}
.kg-play{animation:ax-play .28s ease-out}
.kg-discard{animation:ax-discard .3s ease-in forwards}
.kg-shake{animation:ax-shake .3s ease-in-out}

/* ============================================================
   REDUCED MOTION KILL-SWITCH — disables ALL of it, including
   pre-existing site animations (bob, orbPulse, diaPulse, toast,
   modal, reveal, marquee-style loops).
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  html.ax-js .ax-reveal,html.ax-js .ax-fade,html.ax-js .ax-pop,
  html.ax-js .ax-slide-l,html.ax-js .ax-slide-r,
  html.ax-js .ax-entrance{opacity:1!important;transform:none!important}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}