/* ==========================================================================
   El Camino DT — Los grandes momentos, con foto (`scripts/escenas-con-foto.js`)
   --------------------------------------------------------------------------
   La banda de la vuelta olímpica, la coronación y la mudanza crece y lleva
   detrás fotos del momento que se funden con un acercamiento lento, bajo un
   velo con los colores del club; el escudo y los textos quedan encima, en
   blanco. El balance de fin de temporada, que no tenía banda, gana una
   cabecera igual.
   ========================================================================== */

.ecf { --ecf-a: var(--accent); --ecf-b: var(--accent); }

/* LA BANDA, CON FOTO */
.ecf-banda {
  position: relative;
  isolation: isolate;
  min-height: 15rem;
  align-items: flex-end;
  padding-top: 72px;
  color: #fff;
  background: none;
  overflow: hidden;
}
.ecf-banda > :not(.ecf__fotos) { position: relative; z-index: 1; }
.ecf-banda :is([class$='__titulo'], [class$='__club'], [class$='__eco']) { color: #fff; text-shadow: 0 2px 14px rgb(0 0 0 / 0.55); }
.ecf-banda img:not(.ecf__foto) { filter: drop-shadow(0 6px 18px rgb(0 0 0 / 0.5)); }

.ecf__fotos { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0b0d12; }
.ecf__foto {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06); transition: opacity 1400ms var(--ease);
}
.ecf__foto--on { opacity: 1; animation: ecf-acerca 10s linear both; }
@keyframes ecf-acerca { from { transform: scale(1.06); } to { transform: scale(1.14); } }
/* El velo: oscuro abajo, donde están el escudo y el título; la franja del
   club entra en diagonal por la izquierda, como en las bandas de antes. */
.ecf__fotos::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--ecf-b) 80%, transparent) 0 7%, transparent 7.4%),
    linear-gradient(180deg, rgb(8 10 14 / 0.15) 0%, rgb(8 10 14 / 0.35) 45%, rgb(8 10 14 / 0.88) 100%),
    linear-gradient(200deg, transparent 40%, color-mix(in srgb, var(--ecf-a) 45%, transparent) 100%);
}
/* El descenso, más gris: la foto pierde color. */
.ecf--descenso .ecf__foto { filter: saturate(0.55) brightness(0.85); }

/* EL BALANCE: una cabecera nueva que sangra hasta los bordes del diálogo. */
.ecf-cab {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; gap: var(--sp-5);
  min-height: 13rem;
  margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-5);
  padding: 72px var(--sp-6) var(--sp-5);
  border-radius: var(--r-md) var(--r-md) 0 0;
  color: #fff;
}
.ecf-cab > :not(.ecf__fotos) { position: relative; z-index: 1; }
.ecf-cab__escudo { width: 72px; height: 72px; object-fit: contain; flex: none; filter: drop-shadow(0 6px 18px rgb(0 0 0 / 0.5)); }
.ecf-cab__id { display: grid; gap: 4px; min-width: 0; }
.ecf-cab__club { font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgb(255 255 255 / 0.85); }
.ecf-cab .dialogo__titulo { margin: 0; font-size: var(--fs-3xl); font-weight: 800; font-stretch: var(--wd-condensed); line-height: 1; color: #fff; text-shadow: 0 2px 14px rgb(0 0 0 / 0.55); }

@media (max-width: 560px) {
  .ecf-banda { min-height: 12rem; padding-top: 56px; }
  .ecf-cab { min-height: 10rem; padding-top: 56px; }
  .ecf-cab__escudo { width: 52px; height: 52px; }
  .ecf-cab .dialogo__titulo { font-size: var(--fs-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  .ecf__foto--on { animation: none; }
}