/* 02 · historia — o numeral "22" é uma janela para a foto do pelotão; encolhe até o título e a
   foto se abre inteira atrás, com véu do lado do texto. Tudo sob #historia.
   A janela é uma máscara SVG (contorno da própria Barlow Condensed 900 itálico, em
   assets/ch/historia/22.svg), não texto com background-clip: SplitText não mexe nela e o
   WebKit desenha igual ao Chrome. O JS aplica a mesma câmera às duas fotos para que a
   janela fique sempre registrada com a foto de trás. */
/* --mw: largura do numeral cheio; --my: o numeral cheio fica centrado na área abaixo do HUD
   (o JS mede as duas). Todas as origens de transformação ficam nesse mesmo centro: é o que mantém
   a janela registrada com a foto de trás. */
#historia .hs-stage { --mw: 80vw; --my: 0px; --o: 50% calc(50% + var(--my)); background: var(--ink); }

/* as duas fotos: mesma caixa, mesmo recorte (ponto focal do catálogo: 55% 45%) */
#historia .hs-bg { position: absolute; inset: 0; background: var(--acai-dark); opacity: 0; }
#historia .hs-photo,
#historia .hs-win__photo { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 51% 40%; transform-origin: var(--o); }
#historia .hs-photo { will-change: transform; }

/* véu do lado do texto (esquerda) + pé; entram com a foto */
#historia .hs-scrim { opacity: 0; background: linear-gradient(90deg, rgba(14, 7, 19, .93) 0%, rgba(14, 7, 19, .84) 28%, rgba(14, 7, 19, .58) 44%, rgba(40, 5, 50, .2) 60%, rgba(40, 5, 50, 0) 74%); }
#historia .hs-scrim-b { opacity: 0; background: linear-gradient(0deg, rgba(14, 7, 19, .82) 0%, rgba(14, 7, 19, .42) 20%, rgba(14, 7, 19, 0) 42%); }

/* a janela */
#historia .hs-win {
  position: absolute; inset: 0; z-index: 2; transform-origin: var(--o); will-change: transform;
  -webkit-mask: url(../../assets/ch/historia/22.svg) center calc(50% + var(--my)) / var(--mw) auto no-repeat;
          mask: url(../../assets/ch/historia/22.svg) center calc(50% + var(--my)) / var(--mw) auto no-repeat;
}
#historia .hs-win__photo { will-change: transform; }
/* fio mel por dentro da letra: o traço é centrado no contorno e a máscara corta a metade de fora */
#historia .hs-win__key { position: absolute; left: 50%; top: calc(50% + var(--my)); width: var(--mw); height: auto; aspect-ratio: 926.2 / 712; translate: -50% -50%; overflow: visible; fill: none; stroke: var(--honey); stroke-width: 15; stroke-linejoin: round; opacity: 0; pointer-events: none; }

/* brilho de transmissão: uma faixa de luz atravessa o numeral da esquerda para a direita quando ele
   pousa (fica dentro da máscara, então só acende a letra) */
#historia .hs-win__glint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(104deg, rgba(255, 236, 196, 0) 36%, rgba(255, 236, 196, .2) 44%, rgba(255, 240, 214, .62) 50%, rgba(255, 236, 196, .2) 56%, rgba(255, 236, 196, 0) 64%); }

/* texto */
#historia .hs-wrap { position: relative; z-index: 3; height: 100%; display: grid; align-content: end; padding-top: calc(var(--hud-h) + clamp(16px, 3vh, 36px)); padding-bottom: clamp(36px, 8vh, 88px); }
#historia .hs-copy { --span: 1 / 7; display: grid; justify-items: start; gap: clamp(12px, 2.2vh, 24px); }
#historia .hs-lock { width: min(100%, 44vh); container-type: inline-size; display: grid; gap: clamp(4px, 1vh, 10px); }
#historia .hs-slot { width: 100%; aspect-ratio: 926.2 / 712; }
/* o título ocupa a largura do numeral: "22 / EDIÇÕES DE HISTÓRIA" é um bloco só */
#historia .hs-title { font-size: calc(13.2cqi * var(--ts, 1)); line-height: 1.12; padding-top: .04em; white-space: nowrap; }
#historia .hs-lede { max-width: 40ch; font-size: calc((clamp(18px, .5vw + 12px, 22px)) * var(--ts, 1)); color: var(--text); text-wrap: pretty; }
#historia .hs-lede b { color: var(--offwhite); font-weight: 600; }
#historia .hs-proj { gap: 6px; padding-left: 16px; border-left: 4px solid var(--honey); }
#historia .hs-proj__k { color: var(--text-2); }
#historia .hs-proj__v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .5em; }
#historia .hs-proj__n { font-size: calc((clamp(48px, 5.4vh + 12px, 84px)) * var(--ts, 1)); color: var(--honey); }
#historia .hs-proj__u { font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: calc((clamp(20px, 1.6vh + 10px, 30px)) * var(--ts, 1)); letter-spacing: .01em; color: var(--offwhite); }

/* legenda da foto (transmissão) e crédito */
#historia .hs-lt { position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(40px, 6vh, 64px); }
#historia .hs-credit { position: absolute; z-index: 3; right: 14px; bottom: 12px; }

/* telas largas (1920, 2560): a grade centrada de 1320 px punha o "22" e o título sobre o rosto e o número de
   peito da corredora (ela fica a ~45% da largura em 16:9). O bloco ancora perto da borda esquerda, medido
   pela tela. */
@media (min-width: 1600px) and (min-aspect-ratio: 4/3) {
  #historia .hs-wrap { max-width: none; padding-left: max(var(--gutter), 8vw); }
}

/* projetor 2560 (≥ 2400 × 1300): tarja, parágrafo, destaque, legenda e crédito sobem com a escala local (acima da
   página, como a capa). O "22" e o título ficam: são um bloco só, medido pela altura livre da tela */
@media (min-width: 2400px) and (min-height: 1300px) {
  #historia .hs-kicker, #historia .hs-lede, #historia .hs-proj, #historia .hs-lt, #historia .hs-credit { --ts: calc(var(--ts-page, 1.1) * 1.3); }
}

/* telas baixas (1366×768, 1280×800, 1280×720): numeral menor para o bloco caber inteiro abaixo do HUD —
   com o texto 10% maior o bloco passava da borda de cima da faixa livre */
@media (max-height: 820px) {
  #historia .hs-lock { width: min(100%, 40vh); }
  #historia .hs-copy { gap: 12px; }
}
@media (max-height: 760px) {
  #historia .hs-lt { display: none; }
}

/* tablet em pé e janelas estreitas: texto embaixo, véu de baixo para cima */
@media (max-aspect-ratio: 1/1), (max-width: 980px) {
  #historia .hs-scrim { background: linear-gradient(0deg, rgba(14, 7, 19, .95) 0%, rgba(14, 7, 19, .86) 34%, rgba(14, 7, 19, .5) 50%, rgba(14, 7, 19, 0) 64%); }
  #historia .hs-copy { --span: 1 / -1; }
  #historia .hs-lock { width: min(100%, 27vh); }
  #historia .hs-lede { max-width: 46ch; }
  #historia .hs-lt { display: none; }
}