/* Historia animada pre-partido (#/historia/:id). Beats que se reproducen solos
   sobre un escenario, y un cierre con CTA pulsante. Todo CSS/SVG, sin librerías. */
.hist-view {
  max-width: 560px; margin: 0 auto; padding: 18px 16px 30px;
  text-align: center; position: relative;
}

/* Escenario donde se turnan los beats (absolutos, se desvanecen entre sí). */
.hist-stage { position: relative; min-height: 272px; display: grid; place-items: center; }
.hist-stage--done { min-height: 0; height: 0; overflow: hidden; }

.hist-beat {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  opacity: 0; pointer-events: none; transform: translateY(12px) scale(.98);
}
.hist-beat.is-on { opacity: 1; transform: none; pointer-events: auto; animation: hist-in .5s var(--ease, ease) both; }
@keyframes hist-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.hist-line { margin: 0; }
.hist-line--big { font-family: var(--font-display, inherit); font-size: 1.65rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.hist-sub { color: var(--ink-2); font-size: .98rem; max-width: 30ch; }
.hist-sub--dare { font-weight: 700; color: var(--ink); }

/* Beat 1 — balón nervioso (rebota + gotita de sudor). */
.hist-ball { position: relative; line-height: 0; }
.hist-ball .gz-ico { width: 66px; height: 66px; color: var(--ink); animation: hist-bounce .9s var(--ease, ease) infinite; }
@keyframes hist-bounce { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-15px) rotate(6deg); } }
.hist-ball__sweat {
  position: absolute; top: 8px; right: -3px; width: 6px; height: 9px;
  background: var(--blue, #0B5FCE); border-radius: 0 60% 60% 60%; transform: rotate(45deg);
  opacity: 0; animation: hist-sweat 1.3s ease-in-out infinite;
}
@keyframes hist-sweat { 0%, 55% { opacity: 0; transform: translateY(0) rotate(45deg); } 68% { opacity: .9; } 100% { opacity: 0; transform: translateY(18px) rotate(45deg); } }

/* Beat 2 — duelo: escudos entran de los lados y chocan. */
.hist-duel { display: flex; align-items: center; gap: 16px; }
.hist-duel__team { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.hist-duel__team b { font-size: .92rem; }
.hist-beat--2.is-on .hist-duel__team--l { animation: hist-slide-l .55s var(--ease, ease) both; }
.hist-beat--2.is-on .hist-duel__team--r { animation: hist-slide-r .55s var(--ease, ease) both; }
@keyframes hist-slide-l { from { transform: translateX(-64px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hist-slide-r { from { transform: translateX(64px); opacity: 0; } to { transform: none; opacity: 1; } }
.hist-duel__vs .gz-ico { width: 28px; height: 28px; color: var(--red, #DE301E); }
.hist-beat--2.is-on .hist-duel__vs { display: inline-flex; animation: hist-clash .5s .32s var(--ease, ease) both; }
@keyframes hist-clash { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 60% { transform: scale(1.35) rotate(10deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }

/* Beat 3 — el robot reta con burbuja. */
.hist-robot .gz-ico { width: 56px; height: 56px; color: var(--blue, #0B5FCE); animation: hist-bob 1.4s var(--ease, ease) infinite; }
@keyframes hist-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hist-bubble {
  position: relative; background: var(--ink, #0C1019); color: #fff;
  padding: 11px 15px; border-radius: 14px; font-weight: 700; max-width: 300px; font-size: .95rem;
}
.hist-bubble b { color: #FCD34D; }
.hist-bubble::after {
  content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  border: 8px solid transparent; border-bottom-color: var(--ink, #0C1019); border-top: 0;
}

/* Cierre — CTA pulsante + cuenta regresiva. */
.hist-final { opacity: 0; transform: translateY(12px); pointer-events: none; }
.hist-final.is-on { opacity: 1; transform: none; pointer-events: auto; animation: hist-in .5s var(--ease, ease) both; }
.hist-final__match { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 4px; }
.hist-final__vs { color: var(--ink-3); font-weight: 700; }
.hist-final__when { color: var(--ink-3); font-size: .85rem; margin: 10px 0 2px; }
.hist-count { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 700; margin: 6px 0 14px; }
.hist-count__t { color: var(--ink); }
.hist-cta__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--grad-brand, var(--brand-1)); color: #fff; border: 0; border-radius: var(--r-pill);
  padding: 14px 26px; font-size: 1.05rem; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-md);
  animation: hist-cta-pulse 1.6s var(--ease, ease) infinite;
}
.hist-cta__btn .gz-ico { width: 18px; height: 18px; }
@keyframes hist-cta-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.hist-cta__hint { color: var(--ink-3); font-size: .8rem; margin-top: 9px; }

.hist-skip { position: absolute; top: 8px; right: 10px; background: none; border: 0; color: var(--ink-3); font-size: .8rem; font-weight: 600; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .hist-ball .gz-ico, .hist-ball__sweat, .hist-robot .gz-ico, .hist-cta__btn { animation: none; }
  .hist-beat.is-on, .hist-final.is-on { animation: none; }
}