/* 01 · abertura — o filme de abertura sob a capa. Tudo sob #abertura. */
#abertura .ab-stage { background: var(--acai-dark); }
#abertura .ab-bg { position: absolute; inset: 0; background: radial-gradient(90% 70% at 70% 35%, #3a1d52 0%, #1a0a24 60%, var(--ink) 100%); }
#abertura .ab-bg img { width: 100%; height: 100%; object-fit: cover; transform-origin: 70% 40%; }
#abertura .ab-film { background: transparent; opacity: 0; transition: opacity .6s ease; }
#abertura .ab-film.is-ready { opacity: 1; }
#abertura .ab-scrim-l { background: linear-gradient(90deg, rgba(14, 7, 19, .9) 0%, rgba(14, 7, 19, .66) 30%, rgba(40, 5, 50, .22) 56%, rgba(40, 5, 50, 0) 74%); }

/* --ab-x: margem esquerda do texto. Na grade até 1600 px; acima disso, medida pela tela (ver o fim do arquivo) */
#abertura .ab-wrap { --ab-x: var(--gutter); position: relative; z-index: 3; height: 100%; }
#abertura .ab-cam { position: absolute; left: var(--ab-x); top: calc(var(--hud-h) + 26px); }

/* quadro 1 */
#abertura .ab-lockup { position: absolute; left: var(--ab-x); bottom: clamp(96px, 16vh, 170px); display: grid; justify-items: start; gap: clamp(16px, 2.4vh, 26px); width: min(700px, 60%); }
#abertura .ab-title { width: 100%; margin: 0; }
#abertura .ab-logo { width: 100%; height: auto; filter: drop-shadow(0 8px 40px rgba(14, 7, 19, .65)); }
#abertura .ab-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
#abertura .ab-date { font-family: var(--f-display); font-weight: 700; font-size: calc((clamp(18px, .8vw + 10px, 26px)) * var(--ts, 1)); letter-spacing: .08em; text-transform: uppercase; color: var(--offwhite); }
#abertura .ab-date i { color: var(--honey); font-style: normal; margin: 0 .2em; }

/* quadro 2 */
/* a frase sempre em três linhas, medida pela própria letra: "A mais tradicional" (7,36 em) inteira na
   primeira e nunca duas linhas compridas atravessando a ponte sem véu. A caixa em px (980) quebrava em
   quatro no 1920/2560 com o texto maior, com "A mais" sozinha em cima. */
#abertura .ab-claim { position: absolute; left: var(--ab-x); top: 50%; translate: 0 -50%; width: min(1100px, 90%); display: grid; justify-items: start; gap: 18px; }
#abertura .ab-claim__t { font-size: calc((clamp(56px, 7vw, 128px)) * var(--ts, 1)); max-width: 7.8em; text-wrap: balance; }
/* "de Florianópolis." numa linha só: o WebKit equilibrava como "corrida de rua de / Florianópolis."
   (o   não serve: o SplitText troca todo espaço por espaço comum) */
#abertura .ab-keep { white-space: nowrap; }

/* quadro 3 */
#abertura .ab-lt { position: absolute; right: var(--gutter); bottom: clamp(56px, 9vh, 96px); }

#abertura .ab-hint { position: absolute; right: var(--gutter); bottom: clamp(28px, 5vh, 48px); display: inline-flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 700; font-size: calc(14px * var(--ts, 1)); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
#abertura .ab-hint i { width: 44px; height: 2px; background: var(--honey); position: relative; overflow: hidden; }
#abertura .ab-hint i::after { content: ''; position: absolute; inset: 0; background: #fff; transform: translateX(-100%); animation: ab-run 1.6s var(--ease-io) infinite; }
@keyframes ab-run { to { transform: translateX(100%); } }

/* telas largas (1920, 2560): na grade centrada de 1320 px a frase terminava em cima da torre da ponte, sem
   véu (a 1920 a torre fica a ~73% da largura). O texto ancora perto da borda esquerda, medido pela tela —
   a mesma margem do capítulo 02 */
@media (min-width: 1600px) and (min-aspect-ratio: 4/3) {
  #abertura .ab-wrap { max-width: none; --ab-x: max(var(--gutter), 8vw); }
}
/* projetor 2560 (≥ 2400 × 1300): a capa ficava com um quarto da largura, logo depois de um pré-show que o núcleo
   já amplia nessas telas. Escala local acima da página (nunca abaixo) e o logo cresce junto */
@media (min-width: 2400px) and (min-height: 1300px) {
  #abertura { --ts: calc(var(--ts-page, 1.1) * 1.3); }
  #abertura .ab-lockup { width: min(910px, 60%); }
  #abertura .ab-claim { width: min(1440px, 90%); }
}

@media (max-width: 980px) {
  #abertura .ab-lockup { width: min(640px, 88%); }
  #abertura .ab-claim { width: 90%; }
}
.reduced #abertura .ab-hint i::after { animation: none; }

/* movimento reduzido: sem pin, a capa e a frase viram duas telas seguidas (com o texto maior as duas não
   cabem juntas numa tela só: a frase subia para trás do HUD). O fundo fica preso atrás das duas. */
.reduced #abertura .ab-stage { height: auto; }
.reduced #abertura .ab-bg,
.reduced #abertura .ab-film,
.reduced #abertura .ab-stage > .scrim { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; }
.reduced #abertura .ab-wrap { height: auto; padding-left: var(--ab-x); display: grid; grid-template-rows: repeat(2, 100vh); grid-template-rows: repeat(2, 100svh); }
.reduced #abertura .ab-lockup { position: relative; left: auto; bottom: auto; grid-row: 1; align-self: end; margin-bottom: clamp(96px, 16vh, 170px); }
.reduced #abertura .ab-claim { position: relative; left: auto; top: auto; translate: none; grid-row: 2; align-self: center; }