/* Black Reville: direção visual em docs/design.md (Reeve, 2026-10-28). */

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fontes/barlow-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fontes/barlow-condensed-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fontes/barlow-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fontes/barlow-latin-500-italic.woff2") format("woff2");
}

:root {
  --cor-preto: #070909;
  --cor-branco: #f5f8f8;
  --cor-turquesa: #32c9d4;
  --cor-turquesa-funda: #44abb4;
  --cor-apagado: rgba(245, 248, 248, .80);
  --cor-apagado-2: rgba(245, 248, 248, .64);
  --veu: linear-gradient(180deg,
    rgba(7, 9, 9, .66) 0%,
    rgba(7, 9, 9, .77) 30%,
    rgba(7, 9, 9, .83) 62%,
    rgba(7, 9, 9, .93) 100%);

  --fonte-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, system-ui, sans-serif;
  --fonte-texto: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-titulo: clamp(2.5rem, 1.55rem + 3.9vw, 4rem);
  --t-black: clamp(3.6rem, 2.55rem + 5.9vw, 6.5rem);
  --t-apoio: clamp(1.2rem, 1.02rem + .75vw, 1.6rem);
  --t-texto: clamp(.95rem, .9rem + .22vw, 1.08rem);
  --t-botao: clamp(1rem, .95rem + .2vw, 1.12rem);
  --t-linha1: clamp(.8rem, .76rem + .16vw, .9rem);
  --t-linha2: clamp(.8rem, .77rem + .12vw, .88rem);

  --e-respiro-v: clamp(24px, 5vh, 64px);
  --e-respiro-h: 22px;
  --e-logo-titulo: clamp(26px, 4.2vh, 44px);
  --e-titulo-apoio: clamp(14px, 2.4vh, 22px);
  --e-apoio-texto: clamp(8px, 1.4vh, 14px);
  --e-texto-botao: clamp(22px, 3.6vh, 34px);
  --e-botao-linha1: clamp(18px, 2.8vh, 26px);
  --e-linha1-linha2: 8px;
  --largura-bloco: 600px;

  --largura-logo: clamp(168px, 40vw, 224px);
  --altura-botao: 56px;
  --raio-botao: 2px;

  --mov-entrada: .7s cubic-bezier(.2, .7, .2, 1);
  --mov-passo: .08s;
  --mov-faixa: .6s cubic-bezier(.65, 0, .25, 1);
  --mov-botao: .18s ease;
}

/* Tela baixa (navegador do Instagram, celular pequeno): os vãos e as letras encolhem para tudo caber. */
@media (max-height: 620px) {
  :root {
    --t-titulo: 2.2rem;
    --t-black: 3.5rem;
    --largura-logo: 156px;
    --e-logo-titulo: 18px;
    --altura-botao: 52px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Fundo só no html: com cor no body, ela pinta por cima das camadas de z-index negativo e o vídeo some. */
html {
  background: var(--cor-preto);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--cor-branco);
  font-family: var(--fonte-texto);
  -webkit-font-smoothing: antialiased;
}

/* Fundo: cor, imagem de reserva e vídeo */

.fundo {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--cor-preto);
  overflow: hidden;
}

.fundo__midia {
  position: absolute;
  inset: 0;
  background: url("../assets/fundo-poster.jpg") center / cover no-repeat;
}

.fundo__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}

.fundo__video.is-tocando {
  opacity: 1;
}

/* Tela larga: o vídeo (360 x 640) fica numa coluna em pé no centro, sem esticar. */
@media (min-aspect-ratio: 3/4) {
  .fundo__midia {
    left: 50%;
    right: auto;
    width: min(100vw, calc(100vh * 9 / 16));
    width: min(100vw, calc(100svh * 9 / 16));
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 78%, transparent 100%);
    filter: blur(1px) saturate(.9);
  }
}

.veu {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--veu);
}

/* Bloco central */

.palco {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--e-respiro-v) var(--e-respiro-h);
  padding:
    max(var(--e-respiro-v), env(safe-area-inset-top))
    max(var(--e-respiro-h), env(safe-area-inset-right))
    max(var(--e-respiro-v), env(safe-area-inset-bottom))
    max(var(--e-respiro-h), env(safe-area-inset-left));
}

.heroi {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--largura-bloco);
  text-align: center;
}

.heroi__logo {
  display: block;
  width: var(--largura-logo);
  height: auto;
  margin: 0 0 var(--e-logo-titulo);
}

.titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 var(--e-titulo-apoio);
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: var(--t-titulo);
  line-height: .92;
  letter-spacing: .01em;
}

.titulo__linha {
  display: block;
}

/* Faixa BLACK: trapézio no ângulo do V do símbolo RV; o turquesa varre da esquerda e revela a palavra em preto.
   O turquesa é fundo do próprio span (não pseudo-elemento) para os leitores de contraste enxergarem a cor real. */
.titulo__black {
  display: block;
  margin: .08em 0 .1em;
  padding: .07em .86em .02em;
  font-size: var(--t-black);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--cor-preto);
  background: linear-gradient(var(--cor-turquesa), var(--cor-turquesa)) left center / 100% 100% no-repeat;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - .74em) 100%, .74em 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - .74em) 100%, .74em 100%);
  animation: faixa-varre var(--mov-faixa) .45s backwards;
}

.heroi__apoio {
  margin: 0 0 var(--e-apoio-texto);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-apoio);
  line-height: 1.25;
}

.heroi__texto {
  max-width: 38ch;
  margin: 0 0 var(--e-texto-botao);
  font-size: var(--t-texto);
  line-height: 1.55;
  color: var(--cor-apagado);
  text-wrap: balance;
}

/* Botão do grupo VIP */

.botao-vip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 340px);
  min-height: var(--altura-botao);
  padding: 0 28px;
  border-radius: var(--raio-botao);
  background: var(--cor-turquesa);
  color: var(--cor-preto);
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: var(--t-botao);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color var(--mov-botao), transform var(--mov-botao);
}

.botao-vip__icone {
  flex: none;
  width: 20px;
  height: 20px;
}

.botao-vip__girador {
  display: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar .7s linear infinite;
}

.botao-vip.is-abrindo .botao-vip__icone {
  display: none;
}

.botao-vip.is-abrindo .botao-vip__girador {
  display: block;
}

@media (hover: hover) {
  .botao-vip:hover {
    background: var(--cor-branco);
    transform: translateY(-2px);
  }
}

.botao-vip:focus-visible {
  outline: 2px solid var(--cor-branco);
  outline-offset: 4px;
}

.botao-vip:active {
  background: var(--cor-turquesa-funda);
  transform: translateY(0);
}

.heroi__linha1 {
  max-width: 30ch;
  margin: var(--e-botao-linha1) 0 var(--e-linha1-linha2);
  font-family: var(--fonte-display);
  font-weight: 500;
  font-size: var(--t-linha1);
  line-height: 1.45;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-wrap: balance;
}

.heroi__linha2 {
  margin: 0;
  font-size: var(--t-linha2);
  line-height: 1.45;
  color: var(--cor-apagado-2);
}

/* Entrada em cascata dos 7 itens (logo .02s até linha 2 .50s) */

.heroi > * {
  animation: entrar var(--mov-entrada) backwards;
}

.heroi > :nth-child(1) { animation-delay: .02s; }
.heroi > :nth-child(2) { animation-delay: calc(.02s + var(--mov-passo)); }
.heroi > :nth-child(3) { animation-delay: calc(.02s + var(--mov-passo) * 2); }
.heroi > :nth-child(4) { animation-delay: calc(.02s + var(--mov-passo) * 3); }
.heroi > :nth-child(5) { animation-delay: calc(.02s + var(--mov-passo) * 4); }
.heroi > :nth-child(6) { animation-delay: calc(.02s + var(--mov-passo) * 5); }
.heroi > :nth-child(7) { animation-delay: calc(.02s + var(--mov-passo) * 6); }

@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes faixa-varre {
  from {
    background-size: 0% 100%;
  }
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* Movimento reduzido: sem vídeo, sem cascata, faixa inteira parada, botão sem subir, girador parado. */
@media (prefers-reduced-motion: reduce) {
  .fundo__video {
    display: none;
  }

  .heroi > *,
  .titulo__black {
    animation: none;
  }

  .botao-vip {
    transition: none;
  }

  .botao-vip:hover {
    transform: none;
  }

  .botao-vip__girador {
    width: 8px;
    height: 8px;
    margin: 6px;
    border: 0;
    background: currentColor;
    animation: none;
  }
}