/* =====================================================================
   suertea-fx.css — capa de animaciones y micro-interacciones SUERTÉA v2
   Razón de ser: que cada toque y cada momento de la compra den sensación de
   recompensa (brillo, rebote, destello) sin cargar la página ni estorbar.
   Es AUTÓNOMA: se enlaza junto a js/fx.js y no depende de otro CSS.
   Reglas: solo transform / opacity / filter (compositor); nada parpadea >3/s;
   `prefers-reduced-motion` y Save-Data apagan el movimiento; cero CDN.
   Propiedades `scale` / `translate` individuales: componen con el transform
   que ya tenga el elemento (no lo pisan). Selectores base con :where() para
   que cualquier regla del proyecto gane siempre.
   ===================================================================== */
:root{
  --fx-oro:var(--oro,#f2c14e);            /* dorado base */
  --fx-oro-hi:#ffe08a;                    /* dorado brillante */
  --fx-oro-lo:var(--oro2,#c99a1e);        /* dorado profundo */
  --fx-verde:var(--verde,#1e8f3a);
  --fx-verde-hi:#2bd45a;                  /* verde brillo */
  --fx-txt:var(--texto,#f4f1e6);
  --fx-ease:cubic-bezier(.22,1,.36,1);    /* suave, sin brusquedad */
  --fx-spring:cubic-bezier(.34,1.56,.64,1);/* rebote corto */
}

/* ---------- 1. Botones: presión, rebote, hover (automático) ---------- */
:where(button,.btn,a.btn,[role=button],.fx-ripple){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:where(button,.btn,a.btn,[role=button]):where(:focus-visible){outline:2px solid var(--fx-oro);outline-offset:3px}
.fx-pressed,:where(button,.btn,a.btn,[role=button]):where(:active:not(:disabled)){scale:.96}
.fx-release{animation:fx-rebound .45s var(--fx-ease) 1}
@keyframes fx-rebound{0%{scale:.96}40%{scale:1.035}72%{scale:.994}100%{scale:1}}
@media (hover:hover) and (pointer:fine){
  :where(button:not(:disabled),.btn:not(.disabled),a.btn,[role=button]:not([aria-disabled=true])):where(:hover){
    translate:0 -2px;filter:brightness(1.07) drop-shadow(0 5px 12px rgba(242,193,78,.38))}
}

/* Ripple dorado: vive en la capa .fx-layer (no toca el DOM del botón) */
.fx-rip-clip{position:absolute;overflow:hidden;pointer-events:none}
.fx-rip{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,246,214,.62) 0,rgba(242,193,78,.34) 42%,rgba(242,193,78,0) 70%);
  transform:translate(-50%,-50%) scale(0);animation:fx-rip .65s var(--fx-ease) forwards}
@keyframes fx-rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ---------- 2. Bucles de atención / calma (clase o data-fx) ---------- */
:where(.fx-shimmer,[data-fx~=shimmer],.fx-loading){position:relative;overflow:hidden}
.fx-shimmer::after,[data-fx~=shimmer]::after,.fx-loading::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:55%;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5) 50%,transparent);
  transform:translateX(-130%) skewX(-18deg);animation:fx-shim 3.6s var(--fx-ease) 1.2s infinite}
@keyframes fx-shim{0%{transform:translateX(-130%) skewX(-18deg)}36%,100%{transform:translateX(290%) skewX(-18deg)}}

.fx-glow,[data-fx~=glow]{animation:fx-glow 3s ease-in-out infinite}
@keyframes fx-glow{0%,100%{filter:drop-shadow(0 0 3px rgba(242,193,78,.22))}50%{filter:drop-shadow(0 0 14px rgba(242,193,78,.62))}}

.fx-breathe,[data-fx~=breathe]{animation:fx-breathe 5.4s ease-in-out infinite}
@keyframes fx-breathe{0%,100%{scale:1;opacity:.93}50%{scale:1.045;opacity:1}}

.fx-float,[data-fx~=float]{animation:fx-float 6.5s ease-in-out infinite}
@keyframes fx-float{0%,100%{translate:0 0}50%{translate:0 -7px}}

.fx-spin{animation:fx-spin 1s linear infinite}
@keyframes fx-spin{to{rotate:360deg}}

/* ---------- 3. Eventos puntuales (clases que pone SuerteFX o B/C) ---------- */
.fx-pop{animation:fx-pop .5s var(--fx-spring) 1}
@keyframes fx-pop{0%{scale:1}40%{scale:1.16}100%{scale:1}}

.fx-shake{animation:fx-shake .55s var(--fx-ease) 1}
@keyframes fx-shake{
  0%,100%{translate:0 0;filter:none}
  15%{translate:-6px 0;filter:drop-shadow(0 0 9px rgba(217,154,27,.6))}
  30%{translate:5px 0}45%{translate:-4px 0;filter:drop-shadow(0 0 9px rgba(217,154,27,.5))}
  60%{translate:3px 0}80%{translate:-1px 0}}

/* Ficha elegida: pop + anillo dorado que pulsa UNA vez */
:where(.fx-chip-selected){position:relative}
.fx-chip-selected{animation:fx-chip .6s var(--fx-spring) 1}
.fx-chip-selected::after{content:"";position:absolute;inset:-3px;border-radius:inherit;pointer-events:none;
  border:2px solid var(--fx-oro-hi);opacity:0;animation:fx-ring .75s var(--fx-ease) 1}
@keyframes fx-chip{0%{scale:1}35%{scale:1.2}100%{scale:1}}
@keyframes fx-ring{0%{opacity:.95;transform:scale(.85)}100%{opacity:0;transform:scale(1.65)}}

/* «Tragamonedas»: ficha recorrida / ficha final */
.fx-slot-on{scale:1.12;filter:brightness(1.4) saturate(1.1);position:relative;z-index:1;
  box-shadow:0 0 0 2px rgba(255,224,138,.9),0 0 12px rgba(242,193,78,.7)}
.fx-slot-lock{animation:fx-chip .6s var(--fx-spring) 1;position:relative;z-index:1;filter:brightness(1.25);
  box-shadow:0 0 0 2px var(--fx-oro-hi),0 0 16px 2px rgba(242,193,78,.65)}

/* Contador y dígito con giro */
:where([data-count],[data-fx~=flip],.countdown b){font-variant-numeric:tabular-nums}
.fx-flipping{animation:fx-flip .5s var(--fx-ease) 1}
@keyframes fx-flip{0%{transform:perspective(260px) rotateX(-88deg);opacity:.2}100%{transform:perspective(260px) rotateX(0);opacity:1}}

/* ---------- 4. Entradas: .fx-reveal y .fx-stagger (solo si hay JS) ---------- */
.fx-js .fx-reveal{opacity:0;translate:0 18px;
  transition:opacity .7s var(--fx-ease) var(--fx-d,0ms),translate .7s var(--fx-ease) var(--fx-d,0ms)}
.fx-js .fx-reveal.fx-in{opacity:1;translate:0 0}
.fx-js .fx-stagger:not(.fx-in)>*{opacity:0}
.fx-stagger>.fx-st{animation:fx-rise .6s var(--fx-ease) var(--fx-d,0ms) backwards}
@keyframes fx-rise{from{opacity:0;translate:0 14px;scale:.96}}

/* ---------- 5. Barra de progreso: <div class="fx-progress" style="--p:62"><span></span></div>
   --p = porcentaje sin unidad (0-100); también data-progress="62". ---------- */
.fx-progress{position:relative;height:10px;border-radius:999px;overflow:hidden;
  background:rgba(244,241,230,.1);box-shadow:inset 0 0 0 1px rgba(242,193,78,.16)}
.fx-progress>*{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden;
  transform-origin:0 50%;transform:scaleX(calc(var(--p,100) / 100));transition:transform 1.1s var(--fx-ease);
  background:linear-gradient(90deg,var(--fx-verde),var(--fx-verde-hi) 55%,var(--fx-oro-hi))}
.fx-progress>*::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  transform:translateX(-120%);animation:fx-trav 2.8s ease-in-out infinite}
@keyframes fx-trav{0%{transform:translateX(-120%)}62%,100%{transform:translateX(330%)}}
.fx-js .fx-progress:not(.fx-in)>*{transform:scaleX(0)}

/* ---------- 6. Estados: cargando, éxito ---------- */
.fx-loading{cursor:progress;pointer-events:none}
.fx-loading.fx-loading:disabled,.fx-loading.fx-loading[aria-disabled=true]{opacity:.92;filter:none}
.fx-loading::after{animation-duration:1.3s;animation-delay:0s}
.fx-loading::before{content:"";position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.8;
  animation:fx-spin .8s linear infinite}

.fx-ok{position:absolute;inset:0;z-index:3;display:grid;place-items:center;border-radius:inherit;overflow:hidden;
  pointer-events:none;color:var(--fx-txt);
  background:linear-gradient(135deg,var(--fx-verde),var(--fx-verde-hi));
  animation:fx-okin .3s var(--fx-ease) both}
.fx-ok::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:radial-gradient(circle,rgba(255,224,138,.9),rgba(242,193,78,0) 65%);animation:fx-flash .75s ease-out}
.fx-ok svg{position:relative;width:1.5em;height:1.5em;max-height:70%;fill:none;stroke:currentColor;
  stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fx-ok path{stroke-dasharray:30;stroke-dashoffset:30;animation:fx-draw .45s .1s var(--fx-ease) forwards}
.fx-ok.fx-out{animation:fx-okout .3s ease forwards}
@keyframes fx-okin{from{opacity:0;scale:.9}}
@keyframes fx-okout{to{opacity:0}}
@keyframes fx-flash{0%{opacity:.95;transform:scale(.4)}100%{opacity:0;transform:scale(1.7)}}
@keyframes fx-draw{to{stroke-dashoffset:0}}

/* ---------- 7. Capa global de partículas y confeti ---------- */
.fx-layer{position:fixed;inset:0;z-index:99990;pointer-events:none;overflow:hidden}
.fx-confetti{position:fixed;left:0;top:0;width:100%;height:100%;z-index:99991;pointer-events:none}
.fx-p{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;will-change:transform,opacity}
.fx-p.g{background:radial-gradient(circle at 35% 30%,#fff4c2,var(--fx-oro) 60%,#c99a1e)}
.fx-p.v{background:radial-gradient(circle at 35% 30%,#b6f7c3,var(--fx-verde-hi) 60%,#1e8f3a)}
.fx-p.s{border-radius:0;background:var(--fx-oro-hi);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}

/* ---------- 8. Botón de sonido (opcional) ---------- */
.fx-sound{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  color:var(--fx-oro-hi);background:rgba(12,31,19,.92);border:1px solid rgba(240,190,60,.35)}
.fx-sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.fx-sound .fx-sp{fill:currentColor;stroke:none}
.fx-sound .fx-slash{stroke-width:2.4}
.fx-sound-float{position:fixed;left:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:90}
.fx-sound[aria-pressed=true] .fx-slash,.fx-sound[aria-pressed=false] .fx-waves{display:none}

/* ---------- 9. Ahorro de datos y pestaña oculta ---------- */
.fx-lite .fx-shimmer::after,.fx-lite [data-fx~=shimmer]::after,.fx-lite .fx-progress>*::after{display:none}
.fx-lite .fx-glow,.fx-lite [data-fx~=glow],.fx-lite .fx-breathe,.fx-lite [data-fx~=breathe],
.fx-lite .fx-float,.fx-lite [data-fx~=float]{animation:none}
.fx-paused .fx-shimmer::after,.fx-paused [data-fx~=shimmer]::after,.fx-paused .fx-progress>*::after,
.fx-paused .fx-glow,.fx-paused [data-fx~=glow],.fx-paused .fx-breathe,.fx-paused [data-fx~=breathe],
.fx-paused .fx-float,.fx-paused [data-fx~=float],.fx-paused .fx-spin,.fx-paused .fx-loading::before,
.fx-paused .fx-loading::after{animation-play-state:paused}

/* ---------- 10. Movimiento reducido: solo color/opacidad, instantáneo ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-shimmer::after,[data-fx~=shimmer]::after,.fx-progress>*::after,.fx-loading::after,.fx-rip-clip{display:none}
  .fx-glow,[data-fx~=glow],.fx-breathe,[data-fx~=breathe],.fx-float,[data-fx~=float],
  .fx-pop,.fx-release,.fx-chip-selected,.fx-chip-selected::after,.fx-flipping,.fx-slot-lock,.fx-stagger>.fx-st{animation:none}
  .fx-spin,.fx-loading::before{animation:fx-fade 1.4s ease-in-out infinite}
  .fx-pressed,:where(button,.btn,a.btn,[role=button]):where(:active:not(:disabled)){scale:1;filter:brightness(.9)}
  .fx-slot-on{scale:1}
  :where(button:not(:disabled),.btn,a.btn,[role=button]):where(:hover){translate:none}
  .fx-js .fx-reveal{opacity:1;translate:none;transition:none}
  .fx-js .fx-stagger:not(.fx-in)>*{opacity:1}
  .fx-progress>*{transition:none}
  .fx-js .fx-progress:not(.fx-in)>*{transform:scaleX(calc(var(--p,100) / 100))}
  .fx-shake{animation:none;outline:2px solid #d99a1b;outline-offset:2px}
  .fx-ok,.fx-ok::before,.fx-ok path{animation:none}
  .fx-ok::before{display:none}
  .fx-ok path{stroke-dashoffset:0}
}
@keyframes fx-fade{0%,100%{opacity:.45}50%{opacity:1}}