/* 10 · Elite — tarde forte. Filme varrido (ataque em câmera lenta) que CONGELA com a mão na bola no
   instante em que o título trava; a câmera avança devagar sobre o quadro congelado enquanto a faixa de
   baixo monta (texto do slide 9 + as cinco delegações previstas acendendo). No fim o lance se completa.
   O título mora no céu (canto superior esquerdo, o respiro do filme) e é medido pela coluna (cqi). */
#elite .eli-stage { background: #24497c; }

/* enquadramento: em paisagem o quadro é ampliado a partir do canto de cima à esquerda — a ação vai para a
   direita, o céu à esquerda fica maior e a bola desce abaixo do HUD. A câmera (GSAP) fica num invólucro. */
#elite .eli-frame { position: absolute; inset: 0; transform: scale(1.16); transform-origin: 0 0; }
#elite .eli-cam { position: absolute; inset: 0; will-change: transform; }
#elite .eli-fallback { position: absolute; inset: 0; background: linear-gradient(180deg, #1b3d70 0%, #3563a0 36%, #86a8cb 60%, #2a3f57 66%, #132a3b 100%); }
#elite .eli-film { background: transparent; }

/* a marca do quadro congelado (x/y e --br vêm do JS; filhos centrados sem transform: o GSAP escala) */
#elite .eli-mark { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; pointer-events: none; visibility: hidden; }
#elite.eli-has-film .eli-mark { visibility: visible; }
#elite .eli-halo { position: absolute; left: calc(var(--br, 30px) * -3.4); top: calc(var(--br, 30px) * -3.4); width: calc(var(--br, 30px) * 6.8); height: calc(var(--br, 30px) * 6.8); border-radius: 50%; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 241, 220, .5) 0%, rgba(255, 200, 138, .34) 24%, rgba(242, 151, 109, .14) 46%, rgba(242, 151, 109, 0) 70%); }
#elite .eli-ring { position: absolute; left: calc(var(--br, 30px) * -1.22); top: calc(var(--br, 30px) * -1.22); width: calc(var(--br, 30px) * 2.44); height: calc(var(--br, 30px) * 2.44); border-radius: 50%; opacity: 0;
  border: 1.5px solid rgba(255, 241, 220, .95); box-shadow: 0 0 0 5px rgba(242, 151, 109, .26), 0 0 26px rgba(255, 200, 138, .55), inset 0 0 18px rgba(255, 200, 138, .35); }

/* véus: o céu atrás do título (leve: o céu já é azul fundo) e o chão da faixa de baixo (forte: arquibancada e pernas) */
#elite .eli-sky { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(52% 56% at calc(max(0px, (100% - var(--maxw)) / 2) + var(--gutter) + 8%) 16%, rgba(10, 24, 34, .6) 0%, rgba(10, 24, 34, .38) 48%, rgba(10, 24, 34, 0) 100%); }
#elite .eli-floor { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .3;
  background: linear-gradient(0deg, rgba(10, 24, 34, .96) 0%, rgba(10, 24, 34, .92) 28%, rgba(10, 24, 34, .74) 38%, rgba(10, 24, 34, .3) 49%, rgba(10, 24, 34, 0) 60%); }
#elite .scrim--t { z-index: 1; }

#elite .eli-wrap { position: relative; z-index: 3; }
#elite .eli-lay { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 0; padding-top: calc(var(--hud-h) + clamp(14px, 4.2vh, 48px)); padding-bottom: clamp(54px, 9.5vh, 104px); }

#elite .eli-head { grid-area: 1 / 1 / 2 / 5; display: grid; gap: clamp(4px, 1vh, 12px); container-type: inline-size; }
#elite .eli-title { font-size: min(calc(25.5cqi * var(--ts, 1)), 29cqi); font-stretch: 125%; line-height: .96; letter-spacing: -.02em; color: var(--sand); padding-top: 0; text-shadow: none; white-space: nowrap; text-wrap: nowrap;
  filter: drop-shadow(0 2px 3px rgba(10, 24, 34, .45)) drop-shadow(0 8px 26px rgba(10, 24, 34, .5)); } /* a máscara das letras recorta text-shadow: halo no pai */

#elite .eli-copy { grid-area: 3 / 1 / 4 / 7; align-self: end; gap: clamp(10px, 1.6vh, 18px); }
#elite .eli-sub { font-size: calc((clamp(19px, 1.5vw, 28px)) * var(--ts, 1)); max-width: 26ch; text-wrap: balance; }
#elite .eli-body { max-width: 52ch; color: rgba(244, 239, 229, .88); }

#elite .eli-roster { grid-area: 3 / 7 / 4 / 13; align-self: end; gap: clamp(10px, 1.5vh, 16px); } /* 6 colunas: as cinco cápsulas cabem em 3 + 2 */
#elite .eli-rl { color: var(--sun); }
/* as delegações: a .chip do núcleo (mesmo tamanho das disputas do 12 Master) com a bandeira dentro */
#elite .eli-flags { gap: 10px; }
#elite .eli-chip { position: relative; isolation: isolate; padding-left: .36em; }
#elite .eli-chip b { display: inline-flex; align-items: center; gap: .55em; font: inherit; letter-spacing: inherit; }
#elite .eli-chip img { width: 1.9em; height: 1.9em; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(244, 239, 229, .5); }
#elite .eli-lit { position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; background: rgba(242, 151, 109, .16); box-shadow: inset 0 0 0 1.5px rgba(242, 151, 109, .85), 0 0 18px rgba(242, 151, 109, .25); }
#elite .eli-foot { color: var(--text-2); }

/* crédito sobre filme: plaqueta própria (text-shadow não segura sobre a arquibancada clara) */
#elite .eli-credit { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(16px, 3vh, 28px); padding: 4px 10px; border-radius: 999px; background: rgba(10, 24, 34, .62); color: var(--sand); text-shadow: none; }

/* tela quadrada ou em pé: sem ampliação (o vídeo já corta os lados), título desce para a pilha de baixo */
@media (orientation: portrait), (max-aspect-ratio: 5/4) {
  #elite .eli-frame { transform: none; }
  #elite .eli-film { object-position: 46% 50%; }
  #elite .eli-sky { display: none; }
  #elite .eli-lay { grid-template-rows: minmax(0, 1fr) auto auto auto; row-gap: clamp(18px, 2.4vh, 30px); }
  #elite .eli-head { grid-area: 2 / 1 / 3 / 8; }
  #elite .eli-copy { grid-area: 3 / 1 / 4 / 13; }
  #elite .eli-roster { grid-area: 4 / 1 / 5 / 13; }
  #elite .eli-floor { background: linear-gradient(0deg, rgba(10, 24, 34, .96) 0%, rgba(10, 24, 34, .9) 44%, rgba(10, 24, 34, .6) 56%, rgba(10, 24, 34, 0) 70%); }
}

/* tela baixa (≤ 760 px): a bola do quadro congelado encosta no HUD — fica só o halo, sem o aro */
@media (orientation: landscape) and (max-height: 760px) {
  #elite .eli-ring { display: none; }
}