/* 21 · Sua marca na primeira edição — noite, cena fixada com f-fecho varrido (hora dourada → refletores →
   o drone sobe e recua até a arena inteira acesa à noite). Três quadros: o título com a marca na luz dourada;
   a noite com a data e a contagem; os créditos (realização, organização, contato). Véus da gramática: em cima
   e à esquerda para o texto, embaixo para os créditos (acende junto com eles). */
#fecho .fch-stage { background: #0b1822; }
#fecho .fch-fallback { position: absolute; inset: 0; background: linear-gradient(180deg, #2a3a5a 0%, #8d6a86 30%, #e6a489 44%, #3f5561 46%, #23343d 70%, #14212a 100%); }
#fecho .fch-fallback__night { position: absolute; inset: 0; opacity: 0; background: radial-gradient(40% 30% at 62% 64%, rgba(255, 246, 225, .28), transparent 70%), linear-gradient(180deg, #06101a 0%, #0c1c2b 34%, #122634 42%, #0a1822 44%, #0d1d27 70%, #081219 100%); }
#fecho .fch-film { object-position: 58% 50%; background: transparent; }
/* grade de crepúsculo (multiplica o filme; branco = sem efeito). O filme cobre a altura inteira em todas as telas
   (cover), então as faixas batem com o quadro: céu, Ilha e água em cima; a arena de ~35% para baixo.
   O JS apaga a da arena quando os refletores acendem e a do céu quando o próprio filme escurece. */
#fecho .fch-dusk { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; }
#fecho .fch-dusk--sky { background: linear-gradient(180deg, rgb(112, 128, 166) 0%, rgb(124, 138, 172) 26%, rgb(168, 176, 200) 36%, #fff 46%); }
#fecho .fch-dusk--arena { background: linear-gradient(180deg, #fff 22%, rgb(150, 160, 184) 32%, rgb(92, 106, 136) 44%, rgb(78, 92, 122) 100%); }

#fecho .fch-scrim-t { opacity: 0; background: linear-gradient(180deg, rgba(10, 24, 34, .88) 0%, rgba(10, 24, 34, .76) 22%, rgba(10, 24, 34, .42) 34%, rgba(10, 24, 34, 0) 50%); }
/* véu em L do título: forte no canto de cima à esquerda (céu dourado e as luzes da Ilha atrás da letra),
   solto à direita e embaixo (o céu dourado da direita e a arena ficam acesos) */
#fecho .fch-scrim-l { background: linear-gradient(90deg, rgba(10, 24, 34, .9) 0%, rgba(10, 24, 34, .84) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .5), rgba(10, 24, 34, .4) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .74), rgba(10, 24, 34, 0) calc(max(0px, (100% - var(--maxw)) / 2) + min(100%, var(--maxw)) * .92));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 max(36%, calc(var(--fch-veil, 0%) - 8%)), transparent max(60%, calc(var(--fch-veil, 0%) + 16%)));
  mask-image: linear-gradient(180deg, #000 0%, #000 max(36%, calc(var(--fch-veil, 0%) - 8%)), transparent max(60%, calc(var(--fch-veil, 0%) + 16%))); }
/* --fch-veil / --fch-veil-t: fim do bloco do título / da contagem (% da tela), medido pelo JS. Com "SUA MARCA" as paradas
   ficam onde sempre estiveram; marca longa deixa o título mais alto e o véu desce junto, na mesma relação com a letra. */
#fecho .fch-scrim-b { opacity: 0; background: linear-gradient(0deg, rgba(8, 18, 27, .96) 0%, rgba(8, 18, 27, .86) 13%, rgba(8, 18, 27, .5) 22%, rgba(8, 18, 27, 0) 33%); }

#fecho .fch-wrap { position: relative; z-index: 2; }
#fecho .fch-lay { height: 100%; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 0; padding-top: calc(var(--hud-h) + clamp(16px, 4vh, 52px)); padding-bottom: clamp(44px, 7.4vh, 84px); }

/* ---------- o título ---------- */
#fecho .fch-head { grid-area: 1 / 1 / 2 / 9; display: grid; gap: clamp(12px, 2vh, 22px); container-type: inline-size; }
#fecho .fch-k { display: flex; }
#fecho .fch-hour { font-weight: 700; color: var(--sand); }
#fecho .fch-title { display: grid; grid-template-columns: minmax(0, 1fr); font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -.02em; color: var(--sand); }
#fecho .fch-t1 { display: block; font-size: min(calc(9.2cqi * var(--ts, 1)), 10.1cqi); color: var(--sun); }
#fecho .fch-t2 { display: block; font-size: min(calc(6.4cqi * var(--ts, 1)), 7.04cqi); margin-top: .08em; white-space: nowrap; }
#fecho .fch-fit { display: inline-block; white-space: nowrap; padding-top: .06em; }
#fecho .fch-fit.is-wrap { white-space: normal; text-wrap: balance; overflow-wrap: anywhere; }
#fecho .fch-date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: min(calc((clamp(14px, 2.2cqi, 22px)) * var(--ts, 1)), max(15px, 2.5cqi)); letter-spacing: .08em; text-transform: uppercase; color: var(--sand); }
#fecho .fch-date b { font-weight: 800; }
#fecho .fch-date i { width: 7px; height: 7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px rgba(255, 200, 138, .7); }
#fecho .fch-date span { color: rgba(244, 239, 229, .9); } /* text-2 caía a 4,0:1 com marca longa (data mais baixa, sobre a arena) */

/* ---------- a contagem ---------- */
#fecho .fch-count { grid-area: 1 / 9 / 2 / 13; justify-self: end; align-self: start; display: grid; justify-items: end; text-align: right; gap: 4px; padding-top: clamp(40px, 6vh, 64px); }
#fecho .fch-count[hidden] { display: none; }
#fecho .fch-count__n { font-size: calc((clamp(60px, 6.6vw, 124px)) * var(--ts, 1)); filter: drop-shadow(0 4px 22px rgba(10, 24, 34, .7)); }
#fecho .fch-count__l { max-width: 16em; font-family: var(--f-display); font-stretch: 108%; font-weight: 700; font-size: calc((clamp(13px, .45vw + 9.4px, 17px)) * var(--ts, 1)); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: rgba(244, 239, 229, .92); text-shadow: 0 1px 10px rgba(10, 24, 34, .8); }
#fecho .fch-count__u { color: var(--sand); }

/* ---------- os créditos ---------- */
#fecho .fch-end { grid-area: 3 / 1 / 4 / 13; container-type: inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'event cred mail'; align-items: center; gap: clamp(16px, 2.4vh, 28px) clamp(20px, 2.4vw, 40px); padding-top: clamp(16px, 2.4vh, 26px); border-top: 1px solid var(--line-2); }
/* o emblema do evento abre a assinatura (o nome já está no HUD e no título) */
#fecho .fch-event { grid-area: event; width: min(calc((clamp(46px, 3.8vw, 64px)) * var(--ts, 1)), max(46px, 5.6cqi)); height: auto; /* ~90 px no projetor, par do "sportsland" */ aspect-ratio: 1; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
#fecho .fch-cred { grid-area: cred; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 14px clamp(18px, 2.2vw, 40px); }
#fecho .fch-cred__i { display: grid; gap: 6px; padding-left: clamp(16px, 1.6vw, 26px); border-left: 1px solid var(--line-2); }
#fecho .fch-cred dt { color: var(--text-2); } /* text-3 media 3,9:1 sobre a arena acesa a 1440 */
#fecho .fch-cred dd { margin: 0; max-width: 22ch; font-weight: 600; font-size: calc((clamp(15px, .4vw + 11px, 18px)) * var(--ts, 1)); line-height: 1.3; color: var(--sand); }
#fecho .fch-nw { white-space: nowrap; }
#fecho .fch-sl { display: block; margin-top: .2em; width: calc((clamp(110px, 9vw, 170px)) * var(--ts, 1)); height: auto; }
#fecho .fch-mail { grid-area: mail; justify-self: end; padding: 0 22px; font-size: calc(15px * var(--ts, 1)); text-transform: none; letter-spacing: .01em; font-stretch: 108%; gap: .7em; box-shadow: 0 10px 30px rgba(242, 151, 109, .28); }
#fecho .fch-mail svg { width: 20px; height: 20px; }

/* crédito solto no palco (fora de .photo): a plaqueta do núcleo não o pega, então leva a mesma aqui —
   sem ela, "gerada por IA" some sobre as tendas brancas do filme antes do véu de baixo acender */
#fecho .fch-credit { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(12px, 2.2vh, 22px); padding: 4px 10px 3px; border-radius: 999px; background: rgba(10, 24, 34, .62); color: rgba(244, 239, 229, .88); text-shadow: none; }

/* projetor (≥ 2400 × 1300): a assinatura sobe um degrau, com piso de ~2% da altura (28 px em 1440) */
@media (min-width: 2400px) and (min-height: 1300px) {
  #fecho .fch-cred dt { font-size: max(1.75vh, calc(17px * var(--ts, 1))); }
  #fecho .fch-cred dd { font-size: max(2vh, calc(20px * var(--ts, 1))); }
  #fecho .fch-mail { font-size: max(2vh, calc(17px * var(--ts, 1))); min-height: 2.6em; padding: 0 1.4em; }
  #fecho .fch-mail svg { width: 1.3em; height: 1.3em; }
}

@media (orientation: portrait) {
  #fecho .fch-film { object-position: 60% 50%; }
  #fecho .fch-head { grid-area: 1 / 1 / 2 / 13; }
  /* em pé a contagem fica no céu, logo abaixo do título (embaixo é a arena clara) */
  #fecho .fch-count { grid-area: 2 / 1 / 3 / 13; justify-self: start; align-self: start; display: grid; grid-template-columns: auto auto; grid-template-areas: 'k k' 'n l'; align-items: end; justify-items: start; column-gap: 18px; text-align: left; padding: clamp(28px, 4vh, 56px) 0 0; }
  #fecho .fch-count__k { grid-area: k; }
  #fecho .fch-count__n { grid-area: n; }
  #fecho .fch-count__l { grid-area: l; padding-bottom: .5em; }
  #fecho .fch-scrim-t { background: linear-gradient(180deg, rgba(10, 24, 34, .9) 0%, rgba(10, 24, 34, .8) max(30%, calc(var(--fch-veil-t, 0%) - 12%)), rgba(10, 24, 34, .5) max(42%, var(--fch-veil-t, 0%)), rgba(10, 24, 34, 0) max(56%, calc(var(--fch-veil-t, 0%) + 14%))); }
  #fecho .fch-scrim-l { background: linear-gradient(180deg, rgba(10, 24, 34, .9) 0%, rgba(10, 24, 34, .82) max(28%, calc(var(--fch-veil, 0%) - 2%)), rgba(10, 24, 34, .38) max(40%, calc(var(--fch-veil, 0%) + 10%)), rgba(10, 24, 34, 0) max(52%, calc(var(--fch-veil, 0%) + 22%))); -webkit-mask-image: none; mask-image: none; }
  #fecho .fch-scrim-b { background: linear-gradient(0deg, rgba(8, 18, 27, .96) 0%, rgba(8, 18, 27, .84) 22%, rgba(8, 18, 27, .4) 38%, rgba(8, 18, 27, 0) 52%); }
  #fecho .fch-end { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'event cred' 'mail mail'; }
  #fecho .fch-mail { justify-self: start; }
}