/* 09 · oakvillage — a visita pela expo feita de fotos reais. Tudo sob #oakvillage.
   As fotos são desenhadas pelo canvas WebGL do módulo (ou por camadas CSS sem WebGL2); aqui ficam a
   pele da transmissão (câmera, título, legendas, placar) e a galeria do movimento reduzido.
   Estado padrão do CSS = estado final completo (é o que o movimento reduzido mostra); o módulo apaga
   o que vai acender com a rolagem. */

#oakvillage .ov-stage {
  --ov-gx: max(var(--gutter), 4.5vw);                          /* margem de TV: fora da grade, medida na tela */
  --ov-top: calc(var(--hud-h) + clamp(14px, 2.6vh, 32px));
  --ov-bot: clamp(22px, 4.8vh, 56px);
  background: radial-gradient(60% 50% at 50% 42%, #1c0c26, var(--ink) 80%); /* reserva enquanto a foto não chega */
}

/* ---------- fotos ---------- */
#oakvillage .ov-gl { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; }
#oakvillage .ov-rooms { position: absolute; inset: 0; z-index: 0; overflow: hidden; transform-origin: 50% 50%; }
#oakvillage .ov-room { position: absolute; inset: 0; margin: 0; }
#oakvillage .ov-room__img { position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; background: var(--acai-dark); will-change: transform, opacity;
  -webkit-mask-composite: source-in; mask-composite: intersect; } /* camadas CSS (sem WebGL2): as duas faixas da borda suave se cruzam */
#oakvillage .ov-room__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* com WebGL a foto é desenhada no canvas: a caixa vira 1 px transparente (continua no leitor de tela, com o alt) */
html:not(.reduced) #oakvillage.ov--gl .ov-room__img { visibility: visible; opacity: 0; width: 1px; height: 1px; overflow: hidden; will-change: auto; }
html:not(.reduced) #oakvillage .ov-room__cap { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- véus ---------- */
#oakvillage .ov-scrim-b { z-index: 1; background: linear-gradient(0deg, rgba(14, 7, 19, .86) 0%, rgba(14, 7, 19, .52) 13%, rgba(14, 7, 19, 0) 34%); }
#oakvillage .ov-scrim-l { z-index: 1; }

/* ---------- a pele da transmissão ---------- */
#oakvillage .ov-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#oakvillage .ov-cam { position: absolute; left: var(--ov-gx); top: var(--ov-top); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
/* sobre parede branca, bandeira e céu de lona o rótulo sumia: plaqueta escura própria (texto sobre foto tem véu) */
html:not(.reduced) #oakvillage .ov-cam { padding: 6px 12px 6px 10px; color: var(--text); background: rgba(14, 7, 19, .6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* abertura: o título ocupa a esquerda, centrado na área livre abaixo da barra */
#oakvillage .ov-open { position: absolute; left: var(--ov-gx); top: var(--hud-h); bottom: 8vh; width: min(62%, 1180px); display: flex; flex-direction: column; justify-content: center; }
#oakvillage .ov-open__in { display: grid; gap: clamp(8px, 1.4vh, 18px); transform-origin: 0 50%; }
#oakvillage .ov-title { font-size: calc((clamp(72px, min(8.6vw, 17vh), 200px)) * var(--ts, 1)); line-height: 1.12; white-space: nowrap; } /* "OAKVILLAGE" ≈ 6,75 em: ≤ 58% da tela */
#oakvillage .ov-lede { max-width: 30ch; }

/* legendas de sala (lower third) e crédito: cópias das figcaption, uma por sala, empilhadas */
#oakvillage .ov-caps { position: absolute; inset: 0; }
#oakvillage .ov-cap { position: absolute; inset: 0; }
#oakvillage .ov-cap .lt, #oakvillage .ov-next { position: absolute; left: var(--ov-gx); bottom: var(--ov-bot); max-width: min(56%, 720px); }
#oakvillage .ov-cap .lt b, #oakvillage .ov-next b { font-size: calc((clamp(24px, 1.2vw + 12px, 40px)) * var(--ts, 1)); line-height: 1.12; text-shadow: 0 2px 14px rgba(14, 7, 19, .6); }
#oakvillage .ov-cap .lt span, #oakvillage .ov-next span { font-size: calc((clamp(11px, .2vw + 9px, 14px)) * var(--ts, 1)); color: var(--text-2); }
#oakvillage .ov-cap .lt::before, #oakvillage .ov-next::before { width: 6px; }
#oakvillage .ov-cap .credit { position: absolute; right: var(--ov-gx); bottom: calc(var(--ov-bot) + 2px); text-align: right; }
#oakvillage .credit > span { display: inline-block; }

/* ---------- o placar lateral ---------- */
#oakvillage .ov-board { position: absolute; right: var(--ov-gx); top: calc(var(--ov-top) + 2px); width: clamp(296px, min(26vw, 50vh), 520px); container-type: inline-size; display: grid; gap: 12px; }
#oakvillage .ov-board__plate {
  background: linear-gradient(180deg, rgba(24, 10, 32, .9), rgba(14, 7, 19, .92));
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  clip-path: inset(0 0% 0 0);
}
#oakvillage .ov-board__head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 3cqi; padding: 3.6cqi 4.6cqi 4.4cqi 6.2cqi; background: linear-gradient(100deg, var(--acai) 0%, var(--acai-dark) 100%); }
#oakvillage .ov-board__head::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1.4cqi; background: var(--honey); }
#oakvillage .ov-board__t b { display: block; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc(7.4cqi * var(--ts, 1)); line-height: 1.12; letter-spacing: .01em; text-transform: uppercase; color: var(--offwhite); }
#oakvillage .ov-board__t span { display: block; margin-top: .5cqi; font-family: var(--f-mono); font-size: calc((max(10.5px, 2.6cqi)) * var(--ts, 1)); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
#oakvillage .ov-board__k { font-family: var(--f-mono); font-weight: 700; font-size: calc((max(12px, 3.3cqi)) * var(--ts, 1)); letter-spacing: .04em; color: var(--text-3); font-variant-numeric: tabular-nums; padding-bottom: .2em; }
#oakvillage .ov-board__room { color: var(--honey); }
#oakvillage .ov-rail { position: absolute; left: 6.2cqi; right: 4.6cqi; bottom: 1.8cqi; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(245, 238, 224, .2) 0 calc(12.5% - 3px), transparent calc(12.5% - 3px) 12.5%); }
#oakvillage .ov-rail i { position: absolute; inset: 0; background: var(--honey); transform-origin: 0 50%;
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 calc(12.5% - 3px), transparent calc(12.5% - 3px) 12.5%);
  mask-image: repeating-linear-gradient(90deg, #000 0 calc(12.5% - 3px), transparent calc(12.5% - 3px) 12.5%); }

#oakvillage .ov-rows { padding: 1cqi 0 1.4cqi; }
#oakvillage .ov-row { position: relative; display: grid; grid-template-columns: 31cqi minmax(0, 1fr); align-items: center; column-gap: 4.4cqi; padding: 2.2cqi 4.6cqi 2.2cqi 6.2cqi; background-color: rgba(244, 178, 35, 0); }
#oakvillage .ov-row + .ov-row { border-top: 1px solid var(--line); }
#oakvillage .ov-row__bar { position: absolute; left: 0; top: 16%; bottom: 16%; width: 1.4cqi; background: var(--honey); transform-origin: 50% 100%; }
#oakvillage .ov-row__n { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 1.1em; font-size: calc(10.6cqi * var(--ts, 1)); line-height: 1; }
#oakvillage .ov-row__v { color: var(--offwhite); }
#oakvillage .ov-row__dash { position: absolute; right: .06em; top: 50%; width: .56em; height: .1em; margin-top: -.05em; background: rgba(245, 238, 224, .42); opacity: 0; }
#oakvillage .ov-row__l { font-family: var(--f-display); font-weight: 700; font-size: calc((max(14px, 4.3cqi)) * var(--ts, 1)); line-height: 1.16; letter-spacing: .06em; text-transform: uppercase; color: var(--text); text-wrap: balance; }
#oakvillage .ov-row__l small { display: block; margin-top: .35em; font-family: var(--f-body); font-weight: 500; font-size: calc((max(12px, 3.2cqi)) * var(--ts, 1)); line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--text-2); text-wrap: pretty; }
/* "Shows ao vivo" não é número: a casa do numeral leva o sinal de "ao vivo", não palavra */
#oakvillage .ov-live { display: inline-grid; place-items: center; width: .74em; height: .74em; border-radius: 50%; box-shadow: inset 0 0 0 .05em rgba(255, 75, 95, .5); }
#oakvillage .ov-live i { width: .3em; height: .3em; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 .07em rgba(255, 75, 95, .22), 0 0 .5em rgba(255, 75, 95, .5); animation: live 1.6s ease-in-out infinite; }

/* o herói: 33.900, numa tarja mel (entra por último, revelado na inclinação da tarja) */
#oakvillage .ov-hero {
  position: relative; padding: 3.4cqi 7cqi 4.2cqi 8.6cqi; background: var(--honey); color: var(--acai-dark);
  clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%); /* a inclinação da tarja, em % da própria caixa (o módulo anima estes números) */
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .35));
}
#oakvillage .ov-hero__n { font-size: calc(25cqi * var(--ts, 1)); line-height: 1; color: var(--acai-dark); }
#oakvillage .ov-hero__l { margin-top: .9cqi; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc((max(17px, 6cqi)) * var(--ts, 1)); line-height: 1.12; letter-spacing: .01em; text-transform: uppercase; }

/* tela baixa (1280×720 e afins): o placar completo + o herói não podem descer até o crédito */
@media (orientation: landscape) and (max-height: 820px) {
  #oakvillage .ov-board__head { padding: 2.6cqi 4.6cqi 3.6cqi 6.2cqi; }
  #oakvillage .ov-board__t b { font-size: calc(6.6cqi * var(--ts, 1)); }
  #oakvillage .ov-row { padding-block: 1.5cqi; }
  #oakvillage .ov-row__n { font-size: calc(9.6cqi * var(--ts, 1)); min-height: 1.05em; }
  #oakvillage .ov-hero { padding: 2.6cqi 7cqi 3cqi 8.6cqi; }
  #oakvillage .ov-hero__n { font-size: calc(21cqi * var(--ts, 1)); }
  #oakvillage .ov-hero__l { font-size: calc((max(15px, 5.2cqi)) * var(--ts, 1)); }
}

/* ---------- tablet em pé: o placar desce para o pé do quadro, em duas colunas ---------- */
@media (orientation: portrait) {
  #oakvillage .ov-open { width: calc(100% - 2 * var(--ov-gx)); bottom: 36vh; }
  #oakvillage .ov-title { font-size: calc((clamp(64px, 11.5vw, 150px)) * var(--ts, 1)); }
  /* em pé o placar fica no alto (cresce para baixo linha a linha); o pé do quadro é da legenda */
  #oakvillage .ov-board { left: var(--ov-gx); right: var(--ov-gx); top: calc(var(--ov-top) + 40px); width: auto; grid-template-columns: minmax(0, 1fr); }
  #oakvillage .ov-board__head { padding: 1.8cqi 2.6cqi 2.6cqi 3.4cqi; }
  #oakvillage .ov-board__head::before, #oakvillage .ov-row__bar { width: .8cqi; }
  #oakvillage .ov-board__t b { font-size: calc(3.8cqi * var(--ts, 1)); }
  #oakvillage .ov-board__t span { font-size: calc((max(11px, 1.3cqi)) * var(--ts, 1)); }
  #oakvillage .ov-board__k { font-size: calc((max(12px, 1.7cqi)) * var(--ts, 1)); }
  #oakvillage .ov-rail { left: 3.4cqi; right: 2.6cqi; bottom: 1cqi; }
  #oakvillage .ov-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .4cqi 0 .8cqi; }
  #oakvillage .ov-row { grid-template-columns: 15cqi minmax(0, 1fr); column-gap: 2.2cqi; padding: 1.5cqi 2.6cqi 1.5cqi 3.4cqi; border-top: 1px solid var(--line); }
  #oakvillage .ov-row:nth-child(-n + 2) { border-top: 0; }
  #oakvillage .ov-row:nth-child(even) { border-left: 1px solid var(--line); }
  #oakvillage .ov-row__n { font-size: calc(5.4cqi * var(--ts, 1)); }
  #oakvillage .ov-row__l { font-size: calc((max(14px, 2.1cqi)) * var(--ts, 1)); }
  #oakvillage .ov-row__l small { font-size: calc((max(12px, 1.55cqi)) * var(--ts, 1)); }
  #oakvillage .ov-hero { clip-path: polygon(2.6% 0%, 100% 0%, 97.4% 100%, 0% 100%); display: flex; align-items: baseline; gap: 3cqi; padding: 1.8cqi 4cqi 2.2cqi 4.6cqi; }
  /* o herói desce para o pé do quadro (acima da legenda): colado no placar ele cobria o rosto de quem
     está na última sala; assim o quadro final é placar no alto, gente no meio, 33.900 embaixo */
  html:not(.reduced) #oakvillage .ov-board { bottom: calc(var(--ov-bot) + 96px); grid-template-rows: auto minmax(0, 1fr); }
  html:not(.reduced) #oakvillage .ov-hero { align-self: end; }
  #oakvillage .ov-hero__n { font-size: calc(12cqi * var(--ts, 1)); }
  /* ao lado do número há largura de sobra: com a letra maior os 18ch deixavam "EXPO" sozinha na terceira linha */
  #oakvillage .ov-hero__l { font-size: calc((max(18px, 3.2cqi)) * var(--ts, 1)); max-width: 26ch; text-wrap: balance; }
  #oakvillage .ov-cap .lt, #oakvillage .ov-next { max-width: 62%; }
  #oakvillage .ov-scrim-b { background: linear-gradient(0deg, rgba(14, 7, 19, .86) 0%, rgba(14, 7, 19, .5) 9%, rgba(14, 7, 19, 0) 22%); }
}

/* ---------- movimento reduzido: galeria estática + placar completo ---------- */
.reduced #oakvillage .ov-stage { height: auto; overflow: visible; display: flex; flex-direction: column; gap: clamp(28px, 4vh, 48px); padding-block: clamp(104px, 15vh, 180px); }
.reduced #oakvillage .ov-gl, .reduced #oakvillage .ov-scrim-b, .reduced #oakvillage .ov-scrim-l, .reduced #oakvillage .ov-caps { display: none; }
.reduced #oakvillage .ov-ui { display: contents; }
.reduced #oakvillage .ov-cam, .reduced #oakvillage .ov-open, .reduced #oakvillage .ov-rooms, .reduced #oakvillage .ov-board, .reduced #oakvillage .ov-next {
  position: relative; inset: auto; width: min(var(--maxw), 100% - 2 * var(--gutter)); max-width: none; margin-inline: auto;
}
.reduced #oakvillage .ov-cam { order: 0; }
.reduced #oakvillage .ov-open { order: 1; display: block; }
.reduced #oakvillage .ov-rooms { order: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); overflow: visible; }
/* cada parada põe o bloco logo abaixo do HUD (topo − 86 px): o vão antes da galeria e do placar passa de 86 px para
   o fim do bloco anterior (legendas das fotos, a lede) sair do quadro em vez de ficar por baixo da barra */
.reduced #oakvillage .ov-rooms, .reduced #oakvillage .ov-board { margin-top: 60px; }
.reduced #oakvillage .ov-board { order: 3; container-type: normal; grid-template-columns: minmax(0, 560px) minmax(0, 500px); justify-content: start; align-items: start; gap: var(--gap); }
.reduced #oakvillage .ov-board__plate, .reduced #oakvillage .ov-hero { container-type: inline-size; }
.reduced #oakvillage .ov-hero { padding: 22px 40px 26px 48px; }
.reduced #oakvillage .ov-next { order: 4; }
/* o módulo põe "Oakvillage 2027" dentro do placar, embaixo do 33.900: na parada do placar ele ficava cortado no pé da tela */
.reduced #oakvillage .ov-board { grid-template-rows: auto minmax(0, 1fr); }
.reduced #oakvillage .ov-board__plate { grid-row: 1 / span 2; }
.reduced #oakvillage .ov-board > .ov-next { grid-column: 2; grid-row: 2; width: auto; margin: 8px 0 0 12px; }
.reduced #oakvillage .ov-room { position: relative; inset: auto; display: grid; gap: 12px; align-content: start; }
.reduced #oakvillage .ov-room__img { position: relative; width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; visibility: visible; transform: none !important; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-1); }
.reduced #oakvillage .ov-room__cap { display: grid; gap: 6px; }
.reduced #oakvillage .ov-room__cap .credit { color: var(--text-3); text-shadow: none; }
.reduced #oakvillage .ov-live i { animation: none; }
@media (orientation: portrait), (max-width: 1100px) {
  .reduced #oakvillage .ov-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reduced #oakvillage .ov-board { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .reduced #oakvillage .ov-board__plate, .reduced #oakvillage .ov-board > .ov-next { grid-column: auto; grid-row: auto; }
}