/* =====================================================================
   15 · tela — "A energia do evento ganha a tela". Tudo sob #tela.
   Um celular em CSS 3D de verdade: carcaça em 11 fatias (cantos arredondados
   com espessura), 4 laterais metálicas, moldura, ilha, vidro com reflexo que
   passa com a rolagem e sombra no chão. Geometria em cqi do .tl-rig
   (largura do aparelho = 100cqi): espessura 10cqi, raio 15cqi.
   ===================================================================== */
#tela .tl-stage { background: var(--ink); }

/* ---------- fundo: orla à noite (act-4) ou bokeh de reserva ---------- */
#tela .tl-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle 2.6vmax at 9% 70%, rgba(244, 178, 35, .34), transparent 100%),
    radial-gradient(circle 1.6vmax at 18% 78%, rgba(245, 238, 224, .22), transparent 100%),
    radial-gradient(circle 3.4vmax at 27% 66%, rgba(142, 68, 166, .34), transparent 100%),
    radial-gradient(circle 1.2vmax at 36% 74%, rgba(244, 178, 35, .30), transparent 100%),
    radial-gradient(circle 2.2vmax at 70% 72%, rgba(244, 178, 35, .26), transparent 100%),
    radial-gradient(circle 1.4vmax at 79% 64%, rgba(245, 238, 224, .2), transparent 100%),
    radial-gradient(circle 3vmax at 88% 76%, rgba(142, 68, 166, .32), transparent 100%),
    radial-gradient(circle 1.8vmax at 95% 60%, rgba(244, 178, 35, .24), transparent 100%),
    radial-gradient(120% 70% at 55% 30%, #211028 0%, #140a1a 55%, var(--ink) 100%);
}
#tela .tl-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(7px) saturate(.9) brightness(.5); transform: scale(1.06); }
#tela .tl-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 30% at 53% 100%, rgba(125, 85, 150, .2), transparent 72%); }
#tela .tl-scrim-l { background: linear-gradient(90deg, rgba(14, 7, 19, .9) 0%, rgba(14, 7, 19, .72) 28%, rgba(40, 5, 50, .3) 48%, rgba(40, 5, 50, 0) 62%); }
#tela .tl-scrim-r { background: linear-gradient(270deg, rgba(14, 7, 19, .88) 0%, rgba(14, 7, 19, .66) 24%, rgba(40, 5, 50, .24) 42%, rgba(40, 5, 50, 0) 56%); }
#tela .tl-scrim-b { background: linear-gradient(0deg, rgba(14, 7, 19, .8) 0%, rgba(14, 7, 19, 0) 34%); }
#tela .checker { z-index: 1; }

/* ---------- composição ---------- */
/* texto 10% maior (--ts): em tela larga a faixa cresce junto com a letra (1320 → 1452 px), mantendo ≥ 60 px de
   margem fora do gutter; abaixo de 1440 e com ?ts=1 fica exatamente a faixa do núcleo. Sem isso, a partir de ~1760 px
   o título ("A energia do evento ganha a tela", 61,6 px) não cabe em duas linhas na coluna de 5 e cai para três. */
#tela .tl-wrap { position: relative; z-index: 3; height: 100%; max-width: max(var(--maxw), min(calc(var(--maxw) * var(--ts, 1)), 100% - 120px)); }
#tela .tl-cam { position: absolute; left: var(--gutter); top: calc(var(--hud-h) + 22px); z-index: 5; }
#tela .tl-lay {
  --ph: min(67vh, 700px);
  position: relative; height: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto; align-content: center; row-gap: clamp(26px, 4.4vh, 44px);
  padding-top: calc(var(--hud-h) + clamp(40px, 7vh, 72px)); padding-bottom: clamp(16px, 3vh, 36px);
}
@supports (height: 1svh) { #tela .tl-lay { --ph: min(67svh, 700px); } }
#tela .tl-left { grid-column: 1 / 6; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(20px, 4vh, 48px); }
#tela .tl-head { display: grid; gap: 12px; justify-items: start; }
#tela .tl-title { font-size: calc((clamp(38px, 3.8vw, 56px)) * var(--ts, 1)); max-width: 21ch; text-wrap: balance; }
#tela .tl-slot { grid-column: 6 / 9; grid-row: 1; position: relative; z-index: 2; display: grid; place-items: center; }
#tela .tl-list { grid-column: 9 / 13; grid-row: 1; align-self: center; display: grid; padding-left: clamp(0px, 1.4vw, 24px); }
#tela .tl-handle { grid-column: 4 / 11; grid-row: 2; justify-self: center; z-index: 5; }
#tela .tl-handle b { text-transform: none; letter-spacing: .005em; }

/* ---------- números ---------- */
#tela .tl-stat { position: relative; z-index: 4; }
#tela .tl-stat--hero { container-type: inline-size; }
#tela .tl-n { display: block; color: var(--offwhite); }
#tela .tl-orb { display: inline-flex; align-items: baseline; gap: .12em; transform-origin: 30% 60%; will-change: transform, opacity; }
#tela .tl-orb small { font-size: .38em; letter-spacing: .02em; text-transform: uppercase; color: var(--text-2); }
#tela .tl-stat--hero .tl-n { font-size: calc((min(29cqi, 176px)) * var(--ts, 1)); }
#tela .tl-stat--hero .tl-n { filter: drop-shadow(0 8px 30px rgba(244, 178, 35, .2)); }
#tela .tl-stat--hero .tl-odo { color: var(--honey); }
#tela .tl-stat--hero .tl-orb small { font-size: .34em; color: var(--offwhite); }
#tela .tl-stat--hero .stat__l { font-size: calc((clamp(18px, .8vw + 10px, 26px)) * var(--ts, 1)); color: var(--offwhite); max-width: none; }
#tela .tl-list .tl-n { font-size: calc((clamp(44px, 4.4vw, 80px)) * var(--ts, 1)); }
#tela .tl-list .tl-stat { --rule: 0; padding: clamp(12px, 2.2vh, 24px) 0; }
#tela .tl-list .tl-stat::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-2); transform-origin: 0 50%; transform: scaleX(var(--rule)); }
#tela .tl-list .stat__l { color: var(--text-2); }
/* o odômetro do núcleo recorta a coluna: folga para a inclinação do itálico */
#tela .tl-odo .odo__col { padding-right: .06em; margin-right: -.06em; }

/* ---------- o aparelho ---------- */
#tela .tl-rig {
  position: relative; width: min(calc(100% + var(--gap)), calc(var(--ph) * 9 / 19.5)); aspect-ratio: 9 / 19.5;
  container-type: inline-size; perspective: 1050px; perspective-origin: 50% 42%;
}
/* luz de fundo do aparelho (a tela acende o ambiente) */
#tela .tl-rig::before { content: ''; position: absolute; inset: -18% -95%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(244, 178, 35, .10), rgba(142, 68, 166, .22) 34%, rgba(125, 85, 150, .08) 60%, transparent 80%); }
#tela .tl-phone { position: absolute; inset: 0; z-index: 1; transform-style: preserve-3d; will-change: transform; transform: rotateY(-10deg) rotateX(4deg); }
#tela .tl-phone > i, #tela .tl-face { position: absolute; display: block; }

/* carcaça: fatias de -5cqi a +5cqi */
#tela .tl-slice {
  inset: 0; border-radius: 15cqi;
  background: linear-gradient(180deg, #5a5262 0%, #2a2431 18%, #4d4555 50%, #231e29 82%, #57505f 100%);
  transform: translateZ(calc((var(--i) / 10 - .5) * 8.6cqi));
}
/* laterais (trecho reto): trilho metálico polido */
#tela .tl-side { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
#tela .tl-side--l, #tela .tl-side--r { top: 15cqi; width: 10.4cqi; height: calc(100% - 30cqi);
  background: linear-gradient(90deg, #211c26 0%, #6f6677 22%, #d7cedc 48%, #8b8292 58%, #2a2430 100%); }
#tela .tl-side--l { left: -5.2cqi; transform: rotateY(-90deg); }
#tela .tl-side--r { left: calc(100% - 5.2cqi); transform: rotateY(90deg); }
#tela .tl-side--t, #tela .tl-side--b { left: 15cqi; height: 10.4cqi; width: calc(100% - 30cqi);
  background: linear-gradient(180deg, #211c26 0%, #6f6677 22%, #cfc6d4 48%, #8b8292 58%, #2a2430 100%); }
#tela .tl-side--t { top: -5.2cqi; transform: rotateX(90deg); }
#tela .tl-side--b { top: calc(100% - 5.2cqi); transform: rotateX(-90deg); }
/* botões: ação + volume na esquerda, lateral na direita */
#tela .tl-side--l::before, #tela .tl-side--l::after, #tela .tl-side--r::before { content: ''; position: absolute; left: 22%; right: 22%; border-radius: 2cqi; background: linear-gradient(90deg, #3b3442, #a79eae 50%, #3b3442); box-shadow: 0 0 0 .3cqi rgba(0, 0, 0, .45); }
#tela .tl-side--l::before { top: 6%; height: 7%; }
#tela .tl-side--l::after { top: 17%; height: 22%; }
#tela .tl-side--r::before { top: 14%; height: 14%; }

/* frente: moldura metálica › borda preta › tela */
#tela .tl-face {
  inset: 0; border-radius: 15cqi; padding: 1.25cqi;
  transform: translateZ(5.2cqi); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: conic-gradient(from 200deg at 50% 50%, #6d6475, #ddd4e2 7%, #4a4251 16%, #29232f 33%, #8f8697 49%, #39323f 64%, #d4cbd9 79%, #544c5c 91%, #6d6475);
  box-shadow: inset 0 0 0 .35cqi rgba(255, 255, 255, .16);
}
#tela .tl-bezel { height: 100%; border-radius: 13.8cqi; padding: 3cqi; background: #040205; box-shadow: inset 0 0 0 .4cqi rgba(0, 0, 0, .9), inset 0 0 2cqi rgba(125, 85, 150, .12); }
#tela .tl-screen { position: relative; height: 100%; border-radius: 10.8cqi; overflow: hidden; background: #120718; isolation: isolate; }
#tela .tl-screen > * { position: absolute; }

/* tela de reserva: hora azul → sol mel no horizonte, a avenida e a linha amarela */
#tela .tl-feed { inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(90% 26% at 50% 52%, rgba(255, 214, 107, .95) 0%, rgba(244, 178, 35, .5) 30%, rgba(244, 178, 35, 0) 70%),
    linear-gradient(180deg, #13071f 0%, #2b0f3d 20%, #5b2878 36%, #a3528f 46%, #eea04c 51.5%, #2a1236 52.5%, #1a0b22 70%, #0e0713 100%); }
#tela .tl-feed__sun { left: 50%; top: 52%; width: 34cqi; aspect-ratio: 1; margin: -17cqi 0 0 -17cqi; border-radius: 50%; position: absolute; background: radial-gradient(closest-side, #fff4d6 0%, #ffd66b 34%, rgba(244, 178, 35, 0) 100%); clip-path: inset(0 0 50% 0); }
#tela .tl-feed__road { position: absolute; inset: 0; width: 100%; height: 100%; }
#tela .tl-feed__edge { fill: none; stroke: rgba(245, 238, 224, .28); stroke-width: .5; vector-effect: non-scaling-stroke; }
#tela .tl-feed__line { fill: none; stroke: var(--honey); stroke-width: 3; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(244, 178, 35, .7)); }
#tela .tl-feed__streaks { position: absolute; left: -60%; right: -60%; top: 55%; bottom: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 7cqi, rgba(245, 238, 224, .16) 7cqi 7.5cqi, transparent 7.5cqi 19cqi, rgba(244, 178, 35, .28) 19cqi 19.6cqi, transparent 19.6cqi 31cqi);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 18%, transparent 18% 34%, #000 34% 44%, transparent 44% 60%); mask-image: repeating-linear-gradient(90deg, #000 0 18%, transparent 18% 34%, #000 34% 44%, transparent 44% 60%);
  animation: tl-streak 1.6s linear infinite paused; }
@keyframes tl-streak { to { transform: translateX(-33.3%); } }
#tela .tl-poster, #tela .tl-reel { inset: 0; width: 100%; height: 100%; object-fit: cover; }
#tela .tl-poster { z-index: 1; }
#tela .tl-reel { z-index: 2; background: transparent; opacity: 0; transition: opacity .6s ease; }
#tela .tl-reel.is-on { opacity: 1; }

/* interface do vídeo vertical (sem marca de terceiro: só barra de progresso e o perfil) */
#tela .tl-ui { inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; padding: 13cqi 5cqi 6.5cqi; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .62) 100%); }
#tela .tl-ui__bars { display: flex; gap: 1.4cqi; }
#tela .tl-ui__bars i { position: relative; flex: 1; height: .9cqi; border-radius: 1cqi; background: rgba(255, 255, 255, .34); overflow: hidden; }
#tela .tl-ui__bars i:first-child { background: rgba(255, 255, 255, .95); }
#tela .tl-ui__bars i:nth-child(2)::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(.42); animation: tl-bar 8s linear infinite paused; }
@keyframes tl-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#tela .tl-ui__who { display: flex; align-items: center; gap: 2.2cqi; min-width: 0; font-family: var(--f-body); font-weight: 600; font-size: calc(3.6cqi * var(--ts, 1)); line-height: 1.2; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
#tela .tl-ui__who b { font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tela .tl-ui__av { flex: none; width: 8.4cqi; height: 8.4cqi; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 30%, var(--violet), var(--acai-dark)); box-shadow: 0 0 0 .5cqi #fff, 0 0 0 1cqi var(--honey); }
#tela .tl-ui__av img { width: 100%; height: 100%; object-fit: cover; }

#tela .tl-island { z-index: 5; left: 50%; top: 2.8cqi; width: 30cqi; height: 8.8cqi; margin-left: -15cqi; border-radius: 99px; background: #000; box-shadow: 0 0 0 .2cqi rgba(255, 255, 255, .04); }
#tela .tl-island::after { content: ''; position: absolute; right: 3.2cqi; top: 50%; width: 3.6cqi; height: 3.6cqi; margin-top: -1.8cqi; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #3a4a78 0%, #0c1024 55%, #000 100%); }
#tela .tl-off { inset: 0; z-index: 6; background: #030104; opacity: 0; pointer-events: none; }
/* vidro: brilho fixo no canto + faixa de reflexo que a rolagem arrasta */
#tela .tl-glare { inset: 0; z-index: 7; overflow: hidden; pointer-events: none; border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 26%, rgba(255, 255, 255, 0) 40%); }
#tela .tl-glare b { position: absolute; top: -12%; bottom: -12%; left: 0; width: 64%;
  background: linear-gradient(104deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, .34) 47%, rgba(255, 255, 255, .08) 55%, rgba(255, 255, 255, 0) 74%);
  transform: translateX(-130%); will-change: transform; }

/* sombra no chão */
#tela .tl-shadow { position: absolute; left: 6%; right: 6%; bottom: -8%; height: 11%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .78), rgba(0, 0, 0, .38) 55%, rgba(0, 0, 0, 0) 100%); filter: blur(9px); transform-origin: 50% 50%; }

/* órbita: meia elipse atrás do aparelho, meia na frente */
#tela .tl-ring { position: absolute; left: 50%; top: 50%; width: 250%; max-width: none; height: auto; aspect-ratio: 1000 / 240; translate: -50% -50%; overflow: visible; pointer-events: none; fill: none; }
#tela .tl-ring--back { z-index: 0; }
#tela .tl-ring--front { z-index: 2; }
#tela .tl-ring path { stroke: var(--honey); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .55; }
#tela .tl-ring .tl-ring__2 { stroke: var(--offwhite); stroke-width: 1; opacity: .22; stroke-dasharray: 2 7; }
#tela .tl-ring--back path { opacity: .28; }
#tela .tl-ring--back .tl-ring__2 { opacity: .12; }

/* laços só rodam com o capítulo na tela */
#tela.is-live .tl-feed__streaks, #tela.is-live .tl-ui__bars i:nth-child(2)::after { animation-play-state: running; }
.reduced #tela .tl-feed__streaks, .reduced #tela .tl-ui__bars i:nth-child(2)::after { animation: none; }

/* ---------- tela baixa (1280×720, 1280×800): com o texto 10% maior a coluna da esquerda encostava o sobretítulo na
   linha da CAM (14 px). O aparelho encolhe um pouco (67 → 62vh) e o conteúdo, centrado, volta a respirar (~30 px). */
@media (max-height: 820px) and (orientation: landscape) {
  #tela .tl-lay { --ph: min(62vh, 700px); }
  @supports (height: 1svh) { #tela .tl-lay { --ph: min(62svh, 700px); } }
}

/* ---------- tablet em pé / janela estreita: título em cima, herói ao lado do aparelho, os três embaixo ---------- */
@media (orientation: portrait), (max-width: 980px) {
  #tela .tl-lay { --ph: min(44vh, 600px); grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; row-gap: clamp(20px, 3vh, 40px); padding-top: calc(var(--hud-h) + clamp(48px, 6vh, 80px)); }
  @supports (height: 1svh) { #tela .tl-lay { --ph: min(44svh, 600px); } }
  #tela .tl-left { display: contents; }
  #tela .tl-head { grid-column: 1 / -1; grid-row: 1; }
  #tela .tl-stat--hero { grid-column: 1 / 7; grid-row: 2; align-self: center; }
  #tela .tl-slot { grid-column: 7 / 13; grid-row: 2; }
  #tela .tl-list { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); padding-left: 0; }
  #tela .tl-list .tl-n { font-size: calc((clamp(40px, 5.6vw, 64px)) * var(--ts, 1)); }
  #tela .tl-handle { grid-column: 1 / -1; grid-row: 4; }
}