/* Escena de festejo con clip (TV y vista previa de la mesa). Coordenadas del escenario de 1920×1080.
   Mismas reglas que el resto de las celebraciones: solo transform y opacity, versión -webkit- de todo,
   sin sombras ni desenfoques, y el estado final es el visible si una TV no anima. */

.fx-clip { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; z-index: 4; pointer-events: none;
  font-family: var(--font-score); color: #151a42; -webkit-font-smoothing: antialiased; text-align: left; }
.fx-clip-bg { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: #0d1130;
  animation: fxc-fade-in 220ms ease both; -webkit-animation: fxc-fade-in 220ms ease both; }

/* El clip */
.fx-clip-frame { position: absolute; z-index: 1; left: 0; top: 0; width: 1920px; height: 1080px; }
.fx-clip-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; background: #0d1130;
  opacity: 0; transition: opacity 320ms ease; -webkit-transition: opacity 320ms ease; }
.fx-clip-video.is-playing { opacity: 1; }

/* Franja inclinada con quién ganó y el marcador */
.fx-clip-band { position: absolute; z-index: 2; left: -160px; right: 120px; bottom: 60px; height: 224px; background: #f3f5fb;
  transform: skewX(-8deg); -webkit-transform: skewX(-8deg);
  animation: fxc-band-in 620ms cubic-bezier(0.23, 1, 0.32, 1) 140ms both; -webkit-animation: fxc-band-in 620ms cubic-bezier(0.23, 1, 0.32, 1) 140ms both; }
.is-set .fx-clip-band, .is-match .fx-clip-band { background: #f4e93b; }
.fx-clip-in { position: absolute; left: 160px; right: 0; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 56px 0 96px;
  transform: skewX(8deg); -webkit-transform: skewX(8deg); }
.fx-clip-txt { flex: 1; min-width: 0; }
.fx-clip-label { font-size: 46px; font-weight: 700; line-height: 1.05; color: #2e3775; white-space: nowrap;
  animation: fxc-x 520ms cubic-bezier(0.23, 1, 0.32, 1) 380ms both; -webkit-animation: fxc-x 520ms cubic-bezier(0.23, 1, 0.32, 1) 380ms both; }
.fx-clip-team { margin-top: 4px; height: 112px; display: flex; align-items: center; font-size: 106px; font-weight: 800; line-height: 1;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; letter-spacing: 0.005em;
  animation: fxc-x 520ms cubic-bezier(0.23, 1, 0.32, 1) 440ms both; -webkit-animation: fxc-x 520ms cubic-bezier(0.23, 1, 0.32, 1) 440ms both; }
.fx-clip-score { flex: none; display: flex; align-items: center; margin-left: 48px;
  animation: fxc-pop 520ms cubic-bezier(0.23, 1, 0.32, 1) 520ms both; -webkit-animation: fxc-pop 520ms cubic-bezier(0.23, 1, 0.32, 1) 520ms both; }
.fx-clip-chip { display: flex; align-items: center; height: 168px; padding: 0 38px; border-radius: 22px; background: #151a42; color: #f4e93b;
  font-size: 152px; font-weight: 800; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-clip-chip + .fx-clip-chip { margin-left: 16px; }
.fx-clip-score.is-multi .fx-clip-chip { height: 128px; padding: 0 26px; border-radius: 18px; font-size: 98px; }

/* Patrocinador, en una placa propia para que se lea sobre cualquier imagen */
.fx-clip-bug { position: absolute; z-index: 4; right: 64px; top: 56px; display: flex; align-items: center; height: 92px; padding: 0 30px; border-radius: 18px; background: #151a42;
  animation: fxc-fade-in 400ms ease 600ms both; -webkit-animation: fxc-fade-in 400ms ease 600ms both; }
.fx-clip-bug img { display: block; height: 50px; width: auto; max-width: 340px; }

/* Clip vertical o cuadrado: tarjeta a la izquierda, franja hacia la derecha por detrás */
.fx-clip.is-card .fx-clip-frame { z-index: 3; left: 120px; top: 60px; width: 540px; height: 960px;
  animation: fxc-card-in 640ms cubic-bezier(0.23, 1, 0.32, 1) 60ms both; -webkit-animation: fxc-card-in 640ms cubic-bezier(0.23, 1, 0.32, 1) 60ms both; }
.fx-clip.is-card .fx-clip-video { border-radius: 28px; object-position: 50% 30%; }
.fx-clip.is-lite .fx-clip-video { border-radius: 0; }
.fx-clip.is-card .fx-clip-band { left: 570px; right: -160px; top: 428px; bottom: auto; height: 224px;
  animation-name: fxc-band-in-r; -webkit-animation-name: fxc-band-in-r; }
.fx-clip.is-card .fx-clip-in { left: 0; right: 160px; padding-left: 162px; }

/* Salida: la franja sigue su camino hacia la derecha y el clip se apaga. Más rápida que la entrada. */
.fx-clip.is-out .fx-clip-band { animation: fxc-band-out 460ms cubic-bezier(0.77, 0, 0.175, 1) both; -webkit-animation: fxc-band-out 460ms cubic-bezier(0.77, 0, 0.175, 1) both; }
.fx-clip.is-out .fx-clip-frame, .fx-clip.is-out .fx-clip-bg { animation: fxc-fade-out 420ms ease 140ms both; -webkit-animation: fxc-fade-out 420ms ease 140ms both; }
.fx-clip.is-out .fx-clip-bug { animation: fxc-fade-out 300ms ease both; -webkit-animation: fxc-fade-out 300ms ease both; }

/* TV sin animaciones (Ajustes) y vista previa de la mesa: todo en su lugar, solo el clip se mueve */
.fx-clip.is-still .fx-clip-bg, .fx-clip.is-still .fx-clip-band, .fx-clip.is-still .fx-clip-label, .fx-clip.is-still .fx-clip-team,
.fx-clip.is-still .fx-clip-score, .fx-clip.is-still .fx-clip-bug, .fx-clip.is-still .fx-clip-frame { animation: none; -webkit-animation: none; }
.fx-clip.is-still.is-out { opacity: 0; transition: opacity 300ms ease; -webkit-transition: opacity 300ms ease; }

@media (prefers-reduced-motion: reduce) {
  .fx-clip-band, .fx-clip.is-card .fx-clip-band, .fx-clip-label, .fx-clip-team, .fx-clip-score, .fx-clip.is-card .fx-clip-frame {
    animation: fxc-fade-in 240ms ease both; -webkit-animation: fxc-fade-in 240ms ease both; }
  .fx-clip.is-out .fx-clip-band { animation: fxc-fade-out 300ms ease both; -webkit-animation: fxc-fade-out 300ms ease both; }
}

@keyframes fxc-fade-in { 0% { opacity: 0; } 100% { opacity: 1; }}
@-webkit-keyframes fxc-fade-in { 0% { opacity: 0; } 100% { opacity: 1; }}
@keyframes fxc-fade-out { 0% { opacity: 1; } 100% { opacity: 0; }}
@-webkit-keyframes fxc-fade-out { 0% { opacity: 1; } 100% { opacity: 0; }}
@keyframes fxc-band-in { 0% { transform: translate3d(-118%, 0, 0) skewX(-8deg); } 100% { transform: translate3d(0, 0, 0) skewX(-8deg); }}
@-webkit-keyframes fxc-band-in { 0% { -webkit-transform: translate3d(-118%, 0, 0) skewX(-8deg); } 100% { -webkit-transform: translate3d(0, 0, 0) skewX(-8deg); }}
@keyframes fxc-band-in-r { 0% { transform: translate3d(100%, 0, 0) skewX(-8deg); } 100% { transform: translate3d(0, 0, 0) skewX(-8deg); }}
@-webkit-keyframes fxc-band-in-r { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-8deg); } 100% { -webkit-transform: translate3d(0, 0, 0) skewX(-8deg); }}
@keyframes fxc-band-out { 0% { transform: translate3d(0, 0, 0) skewX(-8deg); } 100% { transform: translate3d(118%, 0, 0) skewX(-8deg); }}
@-webkit-keyframes fxc-band-out { 0% { -webkit-transform: translate3d(0, 0, 0) skewX(-8deg); } 100% { -webkit-transform: translate3d(118%, 0, 0) skewX(-8deg); }}
@keyframes fxc-x { 0% { opacity: 0; transform: translate3d(-60px, 0, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); }}
@-webkit-keyframes fxc-x { 0% { opacity: 0; -webkit-transform: translate3d(-60px, 0, 0); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }}
@keyframes fxc-pop { 0% { opacity: 0; transform: scale(0.82); } 100% { opacity: 1; transform: scale(1); }}
@-webkit-keyframes fxc-pop { 0% { opacity: 0; -webkit-transform: scale(0.82); } 100% { opacity: 1; -webkit-transform: scale(1); }}
@keyframes fxc-card-in { 0% { opacity: 0; transform: translate3d(-80px, 0, 0) scale(0.96); } 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }}
@-webkit-keyframes fxc-card-in { 0% { opacity: 0; -webkit-transform: translate3d(-80px, 0, 0) scale(0.96); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); }}

/* Videos listos para la siguiente celebración: cargados, fuera de la vista */
.fx-clip-cache { position: fixed; left: 0; top: 0; width: 2px; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; }
.fx-clip-cache video { width: 2px; height: 2px; }