/* 01 · Abertura — filme do atleta holográfico controlado pelo scroll */
#abertura { min-height: 100svh; background: var(--space); }
#abertura .ab-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
#abertura .ab-media { position: absolute; inset: 0; }
#abertura .ab-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
#abertura .ab-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 8, 22, 0.92) 0%, rgba(2, 8, 22, 0.7) 30%, rgba(2, 8, 22, 0.08) 62%, rgba(2, 8, 22, 0.35) 100%),
    linear-gradient(0deg, rgba(2, 8, 22, 0.95) 0%, rgba(2, 8, 22, 0) 38%),
    linear-gradient(180deg, rgba(2, 8, 22, 0.6) 0%, rgba(2, 8, 22, 0) 22%);
}
#abertura .ab-grid { opacity: 0.35; }
#abertura .ab-scan { height: 36px; opacity: 0.22; animation: ab-scan 7s linear infinite; }
#abertura .ab-dim { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, rgba(2, 8, 22, 0.78), rgba(2, 8, 22, 0.35)); opacity: 0; }
@keyframes ab-scan { from { transform: translateY(0); } to { transform: translateY(calc(100svh + 240px)); } }

#abertura .ab-reticle { position: absolute; left: 58%; top: 46%; width: clamp(180px, 26vw, 420px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; }
#abertura .ab-reticle svg { width: 100%; height: 100%; overflow: visible; }
#abertura .ab-reticle circle, #abertura .ab-reticle path { fill: none; stroke: var(--teal-hi); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
#abertura .ab-reticle .r1 { stroke-dasharray: 2 6; opacity: 0.7; transform-origin: 100px 100px; animation: ab-spin 26s linear infinite; }
#abertura .ab-reticle .r2 { stroke: var(--cyan-hi); stroke-dasharray: 60 18 4 18; opacity: 0.55; transform-origin: 100px 100px; animation: ab-spin 18s linear infinite reverse; }
#abertura .ab-reticle .r4 { fill: var(--teal-hi); stroke: none; }
@keyframes ab-spin { to { transform: rotate(360deg); } }

#abertura .ab-telemetry { position: absolute; right: clamp(40px, 5vw, 96px); top: calc(var(--hud-h) + clamp(14px, 7vh, 96px)); list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; z-index: 3; }
#abertura .ab-telemetry li { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; justify-content: end; padding: 10px 14px 10px 16px; border-right: 2px solid var(--teal); background: linear-gradient(270deg, rgba(5, 20, 46, 0.72), rgba(5, 20, 46, 0)); text-align: right; }
#abertura .ab-telemetry span { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-3); }
#abertura .ab-telemetry b { font-family: var(--font-display); font-style: italic; font-weight: 850; font-stretch: 118%; font-size: clamp(26px, 2.4vw, 40px); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
#abertura .ab-telemetry i { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--teal); }
#abertura .ab-telemetry li:nth-child(even) { border-color: var(--cyan); }
#abertura .ab-sim { position: absolute; right: clamp(40px, 5vw, 96px); bottom: 28px; z-index: 3; margin: 0; font-size: 10px; color: rgba(230, 247, 255, 0.5); }

#abertura .ab-copy { position: absolute; left: 0; right: 0; bottom: clamp(92px, 12vh, 124px); z-index: 4; }
#abertura .ab-title { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 880; font-stretch: 125%; text-transform: uppercase; line-height: 0.84; letter-spacing: -0.02em; font-size: clamp(50px, 8.1vw, 150px); }
#abertura .ab-title > span { display: block; white-space: nowrap; }
#abertura .ab-title em { font-style: italic; background: none; color: inherit; }
#abertura .ab-title em .ab-ch, #abertura .ab-claim__txt em .ab-cw { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
#abertura .ab-l2 { margin-left: 0.04em; }
#abertura .ab-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: clamp(18px, 2.6vh, 30px) 0 0; font-family: var(--font-display); font-weight: 760; font-stretch: 108%; font-size: clamp(14px, 1.35vw, 21px); letter-spacing: 0.02em; text-transform: uppercase; }
#abertura .ab-sub b { color: var(--teal); font-size: 1.3em; line-height: 1; }
#abertura .ab-sub i { font-style: normal; color: var(--cyan); }
#abertura .ab-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(20px, 3vh, 34px); }
#abertura .ab-realizacao { display: inline-flex; align-items: center; gap: 12px; }
#abertura .ab-realizacao small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
#abertura .ab-realizacao img { width: clamp(110px, 9vw, 150px); height: auto; }

#abertura .ab-claim { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: clamp(18px, 3vh, 32px); padding-inline: var(--gutter); text-align: center; pointer-events: none; visibility: hidden; }
#abertura .ab-claim__txt { margin: 0; max-width: 16ch; font-family: var(--font-display); font-style: italic; font-weight: 860; font-stretch: 122%; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.02em; font-size: clamp(38px, 6.4vw, 118px); text-shadow: 0 10px 60px rgba(0, 0, 0, 0.6); }
#abertura .ab-claim__txt span { display: block; }
#abertura .ab-claim__txt em { font-style: italic; }
/* Linha de largada: trilho + traço que se desenha + "luz de ritmo" que corre na frente do traço */
#abertura .ab-startline { position: relative; width: min(760px, 80vw); height: 24px; margin-block: -11px; overflow: hidden; }
#abertura .ab-startline::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: rgba(126, 170, 232, 0.2); }
#abertura .ab-startline i { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--grad-brand); box-shadow: 0 0 18px var(--teal); transform-origin: 0 50%; transform: scaleX(0); }
#abertura .ab-startline b { position: absolute; inset: 0; transform: translateX(-100%); }
#abertura .ab-startline b::after { content: ''; position: absolute; right: 1px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(111, 211, 255, 0.35), 0 0 10px var(--cyan-hi), 0 0 4px #fff; }
#abertura .ab-claim__meta { margin: 0; color: var(--ink-2); }

#abertura .ab-cue { position: absolute; left: 50%; bottom: 22px; z-index: 6; display: grid; justify-items: center; gap: 10px; transform: translateX(-50%); color: var(--ink-2); }
#abertura .ab-cue i { width: 1px; height: 44px; background: linear-gradient(180deg, var(--teal), transparent); position: relative; overflow: hidden; }
#abertura .ab-cue i::after { content: ''; position: absolute; left: -2px; top: -10px; width: 5px; height: 10px; border-radius: 3px; background: var(--teal-hi); box-shadow: 0 0 10px var(--teal-hi); animation: ab-cue 1.8s var(--ease-io) infinite; }
@keyframes ab-cue { to { transform: translateY(58px); } }

@media (max-height: 800px) and (min-width: 821px) {
  #abertura .ab-cue { bottom: 16px; gap: 8px; }
  #abertura .ab-cue i { height: 30px; }
}
@media (max-width: 1080px) {
  #abertura .ab-telemetry { right: 20px; gap: 8px; }
  #abertura .ab-telemetry li { padding: 7px 10px; }
  #abertura .ab-telemetry .tl-4 { display: none; }
}
@media (max-width: 820px) {
  #abertura .ab-film { object-position: 58% 40%; }
  #abertura .ab-shade { background: linear-gradient(0deg, rgba(2, 8, 22, 0.97) 0%, rgba(2, 8, 22, 0.75) 42%, rgba(2, 8, 22, 0.05) 70%), linear-gradient(180deg, rgba(2, 8, 22, 0.6), transparent 25%); }
  #abertura .ab-reticle { left: 56%; top: 34%; width: 62vw; }
  #abertura .ab-telemetry { top: calc(var(--hud-h) + 14px); transform: none; right: 12px; grid-template-columns: repeat(3, auto); gap: 6px; }
  #abertura .ab-telemetry li { padding: 6px 8px; border-right-width: 1px; }
  #abertura .ab-telemetry b { font-size: 20px; }
  #abertura .ab-telemetry span { font-size: 10px; letter-spacing: 0.04em; }
  #abertura .ab-sim { left: var(--gutter); right: var(--gutter); bottom: 12px; letter-spacing: 0.08em; text-wrap: balance; }
  #abertura .ab-copy { bottom: 64px; }
  #abertura .ab-title { font-size: clamp(28px, 8.4vw, 72px); }
  #abertura .ab-sub { font-size: 13px; gap: 4px 10px; }
  #abertura .ab-meta { gap: 12px 18px; margin-top: 16px; }
  #abertura .ab-meta .chip { font-size: 10px; letter-spacing: 0.1em; }
  #abertura .ab-cue { display: none; }
}
/* Movimento reduzido e sem JS: duas telas em fluxo — capa (título) e manifesto sobre o último quadro do filme */
.reduced #abertura .ab-pin, .no-js #abertura .ab-pin { height: auto; min-height: 100svh; display: flex; flex-direction: column; }
.reduced #abertura .ab-media, .no-js #abertura .ab-media { bottom: auto; height: 100vh; height: 100svh; }
.reduced #abertura .ab-reticle, .no-js #abertura .ab-reticle { top: 46vh; top: 46svh; }
.reduced #abertura .ab-sim, .no-js #abertura .ab-sim { bottom: auto; top: calc(100svh - 40px); }
.reduced #abertura .ab-cue, .no-js #abertura .ab-cue { bottom: auto; top: calc(100svh - 84px); }
.reduced #abertura .ab-copy, .no-js #abertura .ab-copy {
  position: relative; bottom: auto; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(92px, 12vh, 124px);
}
.reduced #abertura .ab-claim, .no-js #abertura .ab-claim {
  position: relative; inset: auto; visibility: visible; min-height: 86vh; min-height: 86svh; padding-block: 14vh;
  background: linear-gradient(180deg, var(--space) 0%, rgba(2, 8, 22, 0.55) 22%, rgba(2, 8, 22, 0.55) 78%, var(--space) 100%), url("../../assets/img/hero-film-end.webp") 50% 40% / cover no-repeat;
}
.reduced #abertura .ab-claim__txt em, .no-js #abertura .ab-claim__txt em { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.reduced #abertura .ab-startline i, .no-js #abertura .ab-startline i { transform: scaleX(1); }
@media (max-width: 820px) {
  .reduced #abertura .ab-copy, .no-js #abertura .ab-copy { padding-bottom: 64px; }
}