/* ============================================================
   FIFA EDGE — effects.css (aditivo)
   Animações e microinterações pra criar uma jornada imersiva.
   Todas as classes começam com `fx-` pra não conflitar com styles.css.

   Performance:
   - Anima só transform/opacity (GPU)
   - will-change só nos elementos animados ativos
   - prefers-reduced-motion respeitado em todas as keyframes
   ============================================================ */

/* ===== 1. ENTRY / STAGGER FADE ===== */
.fx-stagger > * {
  opacity: 0;
  transform: translateY(8px);
  animation: fx-stagger-up .42s cubic-bezier(.16,.86,.4,1) both;
}
.fx-stagger > *:nth-child(1) { animation-delay: .04s; }
.fx-stagger > *:nth-child(2) { animation-delay: .10s; }
.fx-stagger > *:nth-child(3) { animation-delay: .16s; }
.fx-stagger > *:nth-child(4) { animation-delay: .22s; }
.fx-stagger > *:nth-child(5) { animation-delay: .28s; }
.fx-stagger > *:nth-child(6) { animation-delay: .34s; }
.fx-stagger > *:nth-child(7) { animation-delay: .40s; }
.fx-stagger > *:nth-child(8) { animation-delay: .46s; }
.fx-stagger > *:nth-child(n+9) { animation-delay: .52s; }
@keyframes fx-stagger-up {
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 2. SKELETON SHIMMER (loading) ===== */
.fx-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.02) 0%,
    rgba(255,255,255,0.04) 50%,
    rgba(255,255,255,0.02) 100%);
  border-radius: 6px;
  min-height: 14px;
}
.fx-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245,185,66,0.10) 50%,
    transparent 100%);
  transform: translateX(-100%);
  animation: fx-skeleton-shine 1.6s ease-in-out infinite;
}
@keyframes fx-skeleton-shine {
  to { transform: translateX(100%); }
}

/* ===== 3. CARD HOVER LIFT + GLOW ===== */
.fx-lift {
  transition: transform .25s cubic-bezier(.16,.86,.4,1),
              box-shadow .25s ease,
              border-color .25s ease;
}
.fx-lift:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px -10px rgba(0,0,0,.55),
    0 0 0 1px rgba(245,185,66,.18),
    0 0 32px -8px rgba(245,185,66,.18);
}

/* ===== 4. GOLDEN SWEEP (novo sinal / card destaque) ===== */
.fx-sweep {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fx-sweep::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(245,185,66,.18) 48%,
    rgba(245,185,66,.30) 50%,
    rgba(245,185,66,.18) 52%,
    transparent 70%);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
  z-index: 1;
}
.fx-sweep.fx-sweep-once::before { animation: fx-sweep-fly 1.4s cubic-bezier(.5,0,.3,1) both; }
.fx-sweep.fx-sweep-loop::before { animation: fx-sweep-fly 3.2s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes fx-sweep-fly {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(120%) skewX(-18deg); }
}

/* ===== 5. (REMOVIDO — score tick/flash já coberto por goal-pop/goal-flash-bg/live-num-tick em styles.css) ===== */

/* ===== 6. EV BAR FILL ===== */
.fx-evbar {
  position: relative;
  height: 8px;
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  overflow: hidden;
}
.fx-evbar > .fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--fx-evbar-w, 0%);
  background: linear-gradient(90deg, #f5b942, #ffd06a);
  border-radius: 999px;
  transform-origin: left;
  animation: fx-evbar-grow .9s cubic-bezier(.16,.86,.4,1) both;
}
.fx-evbar > .fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-100%);
  animation: fx-evbar-shine 2s ease-in-out 1s infinite;
}
@keyframes fx-evbar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes fx-evbar-shine {
  to { transform: translateX(120%); }
}

/* ===== 7. (REMOVIDO — pulse glow ring já coberto por cta-pulse-glow/pulse-gold/live-halo em styles.css) ===== */

/* ===== 8. STAMP ✓ (confirmed) ===== */
.fx-stamp {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font: 700 11px/1 var(--f-mono, ui-monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(54,211,153,.12);
  color: #36d399;
  border: 1px solid rgba(54,211,153,.35);
  animation: fx-stamp-in .55s cubic-bezier(.34,1.56,.64,1) both;
  transform-origin: center;
}
@keyframes fx-stamp-in {
  0%   { transform: scale(1.6) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(.94) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ===== 9. RESULT REVEAL (V/D) ===== */
.fx-reveal {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.fx-reveal > .label {
  display: inline-block;
  animation: fx-reveal-rise .5s cubic-bezier(.16,.86,.4,1) both;
}
.fx-reveal::before {
  content: "";
  position: absolute; inset: 0;
  background: currentColor;
  transform: translateX(-100%);
  animation: fx-reveal-wipe .55s cubic-bezier(.5,0,.2,1) both;
}
@keyframes fx-reveal-wipe {
  to { transform: translateX(100%); }
}
@keyframes fx-reveal-rise {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

/* ===== 10. NUMBER COUNTUP — usa animation-delay no JS ===== */
.fx-countup {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  animation: fx-countup-pop .3s ease-out both;
}
@keyframes fx-countup-pop {
  0%   { transform: scale(.92); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

/* ===== 11. SPARKLINE DRAW (SVG path) ===== */
.fx-spark path,
.fx-spark-line {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: fx-spark-draw 1.4s cubic-bezier(.5,0,.3,1) .2s forwards;
}
@keyframes fx-spark-draw {
  to { stroke-dashoffset: 0; }
}

/* ===== 12. TAB INDICATOR SLIDE (FLIP-style) ===== */
.fx-tab-indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #f5b942, #ffd06a);
  border-radius: 2px 2px 0 0;
  transition: transform .35s cubic-bezier(.5,0,.2,1),
              width .35s cubic-bezier(.5,0,.2,1);
  box-shadow: 0 0 14px rgba(245,185,66,.4);
}

/* ===== 13. BADGE POP-IN ===== */
.fx-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e25555;
  color: #fff;
  font: 700 10px/1 var(--f-mono, ui-monospace);
  animation: fx-badge-pop .45s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes fx-badge-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ===== 14. EMPTY STATE BREATHE ===== */
.fx-empty {
  animation: fx-empty-breathe 2.6s ease-in-out infinite;
  opacity: .45;
}
@keyframes fx-empty-breathe {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.02); }
}

/* ===== 15. TOAST SLIDE-IN ===== */
.fx-toast {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--bg-2, #131720);
  border: 1px solid var(--line-2, #1f1f28);
  border-left: 3px solid var(--brand-gold, #f5b942);
  font-family: var(--f-ui, system-ui);
  color: var(--text-0, #fff);
  animation: fx-toast-in .45s cubic-bezier(.34,1.56,.64,1) both;
  overflow: hidden;
}
.fx-toast.success { border-left-color: #36d399; }
.fx-toast.error   { border-left-color: #e25555; }
.fx-toast::after {
  content: "";
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: currentColor;
  opacity: .35;
  animation: fx-toast-progress 4s linear forwards;
  transform-origin: left;
}
@keyframes fx-toast-in {
  0%   { transform: translateX(110%); opacity: 0; }
  60%  { transform: translateX(-4%); opacity: 1; }
  100% { transform: translateX(0); }
}
@keyframes fx-toast-progress {
  to { transform: scaleX(0); }
}

/* ===== League badge (Battle 8min vs 12min) ===== */
.sq-league-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font: 700 9px/1.4 var(--f-mono, ui-monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
/* Battle 8min — azul */
.sq-league-badge.b8 {
  background: rgba(74,158,255,0.12);
  color: #7cb8ff;
  border: 1px solid rgba(74,158,255,0.30);
}
/* Battle 12min — gold (novo, destacar) */
.sq-league-badge.b12 {
  background: rgba(245,185,66,0.14);
  color: #f5b942;
  border: 1px solid rgba(245,185,66,0.40);
  box-shadow: 0 0 8px rgba(245,185,66,0.18);
}

/* ===== Toast Host (canto inferior direito) ===== */
.fx-toast-host {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex; flex-direction: column; gap: 10px;
  width: min(340px, 90vw);
  pointer-events: none;
}
.fx-toast-host > * { pointer-events: auto; }

/* ===== 16. CROSS-FADE VIEW SWITCH ===== */
.fx-view-enter {
  animation: fx-view-fade .35s cubic-bezier(.16,.86,.4,1) both;
}
@keyframes fx-view-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== 17. (REMOVIDO — modal enter já coberto por h2hFadeIn + h2hSlideIn em styles.css) ===== */

/* ===== 18. BUTTON PRESS (use em qualquer botão) ===== */
.fx-press {
  transition: transform .12s cubic-bezier(.4,0,.6,1),
              filter .12s ease;
}
.fx-press:active {
  transform: scale(.96);
  filter: brightness(1.08);
}

/* ===== 19. MAGNET BUTTON (segue cursor) ===== */
.fx-magnet {
  transition: transform .35s cubic-bezier(.16,.86,.4,1);
  transform-style: preserve-3d;
}

/* ===== 20. AMBIENT GOLD PARTICLES ===== */
.fx-particles {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.fx-particles span {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(245,185,66,.5);
  box-shadow: 0 0 8px rgba(245,185,66,.4);
  animation: fx-particle-drift linear infinite;
}
@keyframes fx-particle-drift {
  0%   { transform: translate3d(0, 110vh, 0) scale(0); opacity: 0; }
  10%  { transform: translate3d(0, 100vh, 0) scale(1); opacity: 1; }
  90%  { opacity: .8; }
  100% { transform: translate3d(0, -10vh, 0) scale(.6); opacity: 0; }
}

/* ===== 21. BG BREATHE GRADIENT ===== */
.fx-bg-breathe {
  position: relative;
}
.fx-bg-breathe::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 320px at 20% 0%, rgba(245,185,66,.06) 0%, transparent 60%),
    radial-gradient(700px 280px at 80% 100%, rgba(74,158,255,.05) 0%, transparent 65%);
  animation: fx-bg-pulse 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes fx-bg-pulse {
  0%, 100% { opacity: .8; transform: scale(1); }
  50%      { opacity: 1.0; transform: scale(1.04); }
}

/* ===== 22. FORM CHIP CASCADE ===== */
.fx-cascade > * {
  opacity: 0;
  animation: fx-chip-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}
.fx-cascade > *:nth-child(1) { animation-delay: .03s; }
.fx-cascade > *:nth-child(2) { animation-delay: .07s; }
.fx-cascade > *:nth-child(3) { animation-delay: .11s; }
.fx-cascade > *:nth-child(4) { animation-delay: .15s; }
.fx-cascade > *:nth-child(5) { animation-delay: .19s; }
.fx-cascade > *:nth-child(6) { animation-delay: .23s; }
.fx-cascade > *:nth-child(7) { animation-delay: .27s; }
.fx-cascade > *:nth-child(8) { animation-delay: .31s; }
.fx-cascade > *:nth-child(9) { animation-delay: .35s; }
.fx-cascade > *:nth-child(10){ animation-delay: .39s; }
@keyframes fx-chip-pop {
  0%   { transform: scale(.4) rotate(-8deg); opacity: 0; }
  70%  { transform: scale(1.1) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ===== 23. ELO BAR FILL FROM CENTER ===== */
.fx-elobar {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  display: flex;
}
.fx-elobar > .left,
.fx-elobar > .right {
  flex: var(--w, 1);
  border-radius: 999px;
  transform: scaleX(0);
  animation: fx-elobar-grow .9s cubic-bezier(.16,.86,.4,1) both;
}
.fx-elobar > .left  { background: linear-gradient(90deg, #4a9eff, #7cb8ff); transform-origin: right; }
.fx-elobar > .right { background: linear-gradient(270deg, #f5b942, #ffd06a); transform-origin: left; animation-delay: .15s; }
@keyframes fx-elobar-grow {
  to { transform: scaleX(1); }
}

/* ===== 24. NUMBER ARROW (variation) ===== */
.fx-arrow {
  display: inline-flex; align-items: center; gap: 3px;
  font: 700 11px/1 var(--f-mono, ui-monospace);
  animation: fx-arrow-bounce .9s cubic-bezier(.34,1.56,.64,1) both;
}
.fx-arrow.up   { color: #36d399; }
.fx-arrow.down { color: #e25555; }
.fx-arrow .glyph {
  display: inline-block;
  animation: fx-arrow-glyph 1.4s ease-in-out infinite;
}
@keyframes fx-arrow-bounce {
  0%   { transform: translateY(8px); opacity: 0; }
  60%  { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); }
}
@keyframes fx-arrow-glyph {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ===== 25. RIPPLE on click ===== */
.fx-ripple {
  position: relative;
  overflow: hidden;
}
.fx-ripple::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transform: scale(0);
  pointer-events: none;
  top: var(--rip-y, 50%); left: var(--rip-x, 50%);
  margin: -6px;
}
.fx-ripple.fx-ripple-trig::after {
  animation: fx-ripple-spread .6s ease-out;
}
@keyframes fx-ripple-spread {
  to { transform: scale(30); opacity: 0; }
}

/* ===== reduced motion respect ===== */
@media (prefers-reduced-motion: reduce) {
  .fx-stagger > *, .fx-cascade > *, .fx-toast,
  .fx-evbar > .fill, .fx-elobar > .left, .fx-elobar > .right,
  .fx-stamp, .fx-reveal > .label, .fx-countup, .fx-arrow,
  .fx-view-enter, .fx-badge {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .fx-bg-breathe::before, .fx-particles span,
  .fx-sweep.fx-sweep-loop::before, .fx-empty {
    animation: none !important;
  }
  .fx-skeleton::after { display: none; }
}