/* Bad Bets — NFL Custom Card Animations */

/* --------- HELMET CLASH --------- */
.bbnfla-clash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.bbnfla-helmet {
  position: absolute;
  top: 50%;
  width: 60px; height: 60px;
  transform: translate(-50%, -50%) scale(1);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.bbnfla-helmet-away {
  left: -20%;
  animation: bbnfla-helmet-slide-in-left 320ms cubic-bezier(.28,.84,.42,1) forwards,
             bbnfla-helmet-clash-left 260ms cubic-bezier(.28,.84,.42,1) 320ms forwards,
             bbnfla-helmet-recoil-left 380ms cubic-bezier(.28,.84,.42,1) 580ms forwards;
}
.bbnfla-helmet-home {
  left: 120%;
  animation: bbnfla-helmet-slide-in-right 320ms cubic-bezier(.28,.84,.42,1) forwards,
             bbnfla-helmet-clash-right 260ms cubic-bezier(.28,.84,.42,1) 320ms forwards,
             bbnfla-helmet-recoil-right 380ms cubic-bezier(.28,.84,.42,1) 580ms forwards;
}
.bbnfla-helmet-svg { width: 100%; height: 100%; }

@keyframes bbnfla-helmet-slide-in-left {
  from { left: -20%; opacity: 0; }
  to   { left: 42%;  opacity: 1; }
}
@keyframes bbnfla-helmet-clash-left {
  0%   { left: 42%; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50%  { left: 50%; transform: translate(-50%, -50%) scale(1.18) rotate(-6deg); }
  100% { left: 48%; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
}
@keyframes bbnfla-helmet-recoil-left {
  0%   { left: 48%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
  100% { left: 25%; opacity: 0; transform: translate(-50%, -50%) scale(0.75) rotate(-15deg); }
}
@keyframes bbnfla-helmet-slide-in-right {
  from { left: 120%; opacity: 0; }
  to   { left: 58%;  opacity: 1; }
}
@keyframes bbnfla-helmet-clash-right {
  0%   { left: 58%; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50%  { left: 50%; transform: translate(-50%, -50%) scale(1.18) rotate(6deg); }
  100% { left: 52%; transform: translate(-50%, -50%) scale(1) rotate(3deg); }
}
@keyframes bbnfla-helmet-recoil-right {
  0%   { left: 52%; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(3deg); }
  100% { left: 75%; opacity: 0; transform: translate(-50%, -50%) scale(0.75) rotate(15deg); }
}

/* --------- SPARKS (kick out from the collision point) --------- */
.bbnfla-sparks {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 4px;
  pointer-events: none;
  z-index: 6;
}
.bbnfla-spark {
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--amber, #ffaa00);
  box-shadow: 0 0 6px 2px rgba(255, 170, 0, 0.8);
  opacity: 0;
  transform: rotate(calc(var(--i) * 45deg)) translateY(0);
  animation: bbnfla-spark-fly 500ms ease-out 480ms forwards;
}
@keyframes bbnfla-spark-fly {
  0%   { opacity: 1; transform: rotate(calc(var(--i) * 45deg)) translateY(0)   scale(1); }
  100% { opacity: 0; transform: rotate(calc(var(--i) * 45deg)) translateY(-70px) scale(0.4); }
}

/* --------- MASCOT COMMENTARY --------- */
.bbnfla-mascot {
  position: absolute;
  top: -14px; right: 10px;
  z-index: 12;
  pointer-events: none;
}
.bbnfla-mascot-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface-2, #1a1e26);
  border: 2px solid var(--amber, #ffaa00);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 200ms cubic-bezier(.28,.84,.42,1);
}
.bbnfla-mascot-avatar img { width: 100%; height: 100%; object-fit: cover; }

.bbnfla-mascot-bubble {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  transform-origin: bottom right;
  transform: scale(0) translateY(4px);
  opacity: 0;
  padding: 8px 12px;
  min-width: 120px;
  max-width: 200px;
  border-radius: 14px;
  background: var(--surface-2, #1a1e26);
  border: 2px solid var(--amber, #ffaa00);
  color: var(--text, #f4f6fb);
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-align: center;
  line-height: 1.3;
  white-space: normal;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  pointer-events: none;
}
.bbnfla-mascot-bubble.show {
  animation: bbnfla-bubble-pop 3.6s cubic-bezier(.28,.84,.42,1) forwards;
}
.bbnfla-mascot-bubble.bbnfla-tone-good { border-color: #42c883; }
.bbnfla-mascot-bubble.bbnfla-tone-bad  { border-color: var(--red, #ff3d3d); }
.bbnfla-mascot-bubble::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 100%;
  border: 6px solid transparent;
  border-top-color: var(--amber, #ffaa00);
}
.bbnfla-mascot-bubble.bbnfla-tone-good::after { border-top-color: #42c883; }
.bbnfla-mascot-bubble.bbnfla-tone-bad::after  { border-top-color: var(--red, #ff3d3d); }
.bbnfla-mascot .bbnfla-mascot-bubble.show ~ .bbnfla-mascot-avatar,
.bbnfla-mascot-bubble.show + .bbnfla-mascot-avatar {
  transform: scale(1.14) rotate(-6deg);
}
@keyframes bbnfla-bubble-pop {
  0%   { transform: scale(0)    translateY(6px); opacity: 0; }
  12%  { transform: scale(1.08) translateY(0);   opacity: 1; }
  22%  { transform: scale(1)    translateY(0);   opacity: 1; }
  88%  { transform: scale(1)    translateY(0);   opacity: 1; }
  100% { transform: scale(0.85) translateY(4px); opacity: 0; }
}

/* --------- MOMENTUM HEARTBEAT --------- */
.game-card {
  --bbnfla-hb-color: transparent;
}
.game-card.bbnfla-hb-calm {
  animation: bbnfla-heartbeat 3.2s ease-in-out infinite;
}
.game-card.bbnfla-hb-hot {
  animation: bbnfla-heartbeat 1.5s ease-in-out infinite;
}
.game-card.bbnfla-hb-thump {
  animation: bbnfla-thump 700ms ease-out !important;
}
@keyframes bbnfla-heartbeat {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.05),
                          0 0 0 0 var(--bbnfla-hb-color); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.05),
                          0 0 30px 4px var(--bbnfla-hb-color); }
}
@keyframes bbnfla-thump {
  0%   { box-shadow: 0 0 0 3px var(--bbnfla-hb-color), 0 0 60px 20px var(--bbnfla-hb-color);
         transform: scale(1.015); }
  60%  { box-shadow: 0 0 0 1px var(--bbnfla-hb-color), 0 0 30px 6px var(--bbnfla-hb-color);
         transform: scale(1); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent;
         transform: scale(1); }
}

/* Cards need to be positioning contexts so absolute overlays land inside */
.game-card { position: relative; }