/* ============================================================
   ANIMAÇÕES — toda keyframe do app vive aqui
   ============================================================ */

/* Brilho atravessando o botão dourado */
@keyframes sheen {
  0%, 62%  { transform: translateX(-120%); }
  86%,100% { transform: translateX(120%); }
}

/* Varredura cônica do banner */
@keyframes sweep { to { transform: rotate(360deg); } }

/* Skeleton */
@keyframes shimmer { to { background-position: -200% 0; } }

/* Respiração do glow (box flutuando) */
@keyframes breathe {
  0%,100% { opacity: .55; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.06); }
}

/* Flutuar — o box pairando no ar */
@keyframes float-y {
  0%,100% { transform: translateY(0) rotate(-1.2deg); }
  50%     { transform: translateY(-11px) rotate(1.2deg); }
}

/* Balanço do pêndulo nos barbantes */
@keyframes swing {
  0%,100% { transform: rotate(var(--swing, 1.6deg)); }
  50%     { transform: rotate(calc(var(--swing, 1.6deg) * -1)); }
}

/* Barbante cortado: a parte de baixo cai e gira */
@keyframes drop-away {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  18%  { transform: translateY(-14px) rotate(-6deg); opacity: 1; }
  100% { transform: translateY(420px) rotate(26deg); opacity: 0; }
}

/* Prêmio sai pela boca do box e pousa no pódio.
   --to-x tem padrão: a descida é centrada, e sem o fallback o
   transform inteiro ficaria inválido quando só --to-y é passado. */
@keyframes descend {
  0%   { translate: -50% -50%; transform: translate(0, 0) scale(.28); opacity: 0; }
  12%  { opacity: 1; }
  70%  { transform: translate(var(--to-x, 0px), calc(var(--to-y) + 12px)) scale(1.07); }
  85%  { transform: translate(var(--to-x, 0px), calc(var(--to-y) - 6px)) scale(.98); }
  100% { translate: -50% -50%; transform: translate(var(--to-x, 0px), var(--to-y)) scale(1); opacity: 1; }
}

/* A corda respira enquanto espera o corte: sem isso a fase 3 fica
   estática e nada diz que ali é o alvo. */
@keyframes rope-breathe {
  0%, 100% { stroke-width: 1.7; opacity: .85; }
  50%      { stroke-width: 2.2; opacity: 1; }
}

/* O box engole os prêmios e dá um solavanco */
@keyframes box-pop {
  0%   { scale: 1; }
  38%  { scale: 1.14; filter: brightness(1.28); }
  100% { scale: 1; filter: brightness(1); }
}

/* Prêmio ganho: sobe e assenta no centro */
@keyframes lift-reveal {
  0%   { transform: translateY(26px) scale(.86); opacity: 0; }
  60%  { transform: translateY(-6px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Tesoura cruzando a linha */
@keyframes snip {
  0%   { transform: translate(-28px, 0) rotate(-24deg); opacity: 0; }
  35%  { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  55%  { transform: translate(0, 0) rotate(-16deg); opacity: 1; }
  100% { transform: translate(26px, 0) rotate(8deg); opacity: 0; }
}

/* Flash branco no instante do corte */
@keyframes cut-flash {
  0%   { opacity: 0; }
  12%  { opacity: .9; }
  100% { opacity: 0; }
}

/* Anel de energia expandindo (vitória) */
@keyframes ring-burst {
  0%   { transform: scale(.3); opacity: .85; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Confete caindo */
@keyframes confetti-fall {
  0%   { transform: translate3d(0, -40px, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), 760px, 0) rotate(var(--rot, 540deg)); opacity: 0; }
}

/* Toast */
@keyframes toast-in  { from { transform: translateY(-14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes toast-out { to { transform: translateY(-10px); opacity: 0; } }

/* Transição entre telas */
@keyframes screen-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes screen-in-back {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Pulso de atenção no CTA */
@keyframes pulse-gold {
  0%,100% { box-shadow: var(--glow-cta); }
  50%     { box-shadow: 0 6px 30px rgba(237,185,72,.6), inset 0 1px 0 rgba(255,255,255,.45); }
}

/* Contador numérico subindo */
@keyframes tick-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Entrada escalonada de lista */
@keyframes stagger-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Classes aplicáveis ---------- */
.anim-screen      { animation: screen-in var(--dur-base) var(--ease-out); }
.anim-screen-back { animation: screen-in-back var(--dur-base) var(--ease-out); }
.anim-float       { animation: float-y 5.5s ease-in-out infinite; }
.anim-breathe     { animation: breathe 3.4s ease-in-out infinite; }
.anim-pulse       { animation: pulse-gold 2.4s ease-in-out infinite; }
.anim-lift        { animation: lift-reveal var(--dur-reveal) var(--ease-back) both; }

/* Lista com entrada escalonada: cada filho atrasa 45ms */
.stagger > * { animation: stagger-in 360ms var(--ease-out) both; }
.stagger > *:nth-child(1){animation-delay:40ms}  .stagger > *:nth-child(2){animation-delay:85ms}
.stagger > *:nth-child(3){animation-delay:130ms} .stagger > *:nth-child(4){animation-delay:175ms}
.stagger > *:nth-child(5){animation-delay:220ms} .stagger > *:nth-child(6){animation-delay:265ms}
.stagger > *:nth-child(7){animation-delay:310ms} .stagger > *:nth-child(8){animation-delay:355ms}

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: currentColor;
  animation: spin .7s linear infinite;
}

/* Camada de confete (vitória) */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.confetti i {
  position: absolute; top: -20px;
  width: 7px; height: 12px; border-radius: 1px;
  background: var(--gold-300);
  animation: confetti-fall var(--dur, 2.6s) var(--ease-in) var(--delay, 0s) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .anim-float, .anim-breathe, .anim-pulse, .btn--primary::after, .banner::before,
  .confetti i, .skel, .arena__rays, .prize-tag, .prize-tag--epic .prize-tag__art::after,
  .rope-path { animation: none !important; }
  .stagger > * { animation: none !important; }
}