/* ============================================================
   FILTRO DE ALUNAS + ENTRADA CINEMATOGRÁFICA
   Estados (classes no <html>):
     gate-lock    → só o filtro aparece; página oculta e sem scroll
     gate-reveal  → animação revelando a página (página visível, inerte)
     (sem classe) → página liberada
   O <script> no <head> decide o estado antes do primeiro paint, e a regra
   que esconde a página está inline no <head> (sem flash mesmo se este
   arquivo atrasar).
   ============================================================ */

.gate { display: none; }

html.gate-lock .gate,
html.gate-reveal .gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: minmax(0, 460px);
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  color: var(--white);
}

/* Fundo opaco: preto com um calor vermelho muito discreto no alto */
.gate__curtain {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(161, 0, 0, .22), transparent 60%),
    var(--black);
}
.gate__curtain::after { /* vinheta, some quando a tela vira preto puro */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
}
.gate.is-dark .gate__curtain::after { opacity: 1; }

/* ---------------- CARD ---------------- */
.gate__card {
  position: relative;
  width: 100%;
  min-width: 0;                 /* nunca maior que a tela */
  max-width: 460px;
  padding: 40px clamp(18px, 5vw, 40px) 34px;
  background: var(--ink);
  border: 1px solid var(--white-10);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
  text-align: center;
  animation: gateIn .7s var(--ease-out) both;
}
.gate__card::before { /* fio vermelho no topo, como a faixa da campanha */
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  width: 64px; height: 2px;
  transform: translateX(-50%);
  background: var(--red);
}
/* entrada concluída: libera o transform para a inclinação (gate.js) */
.gate__card.is-in { animation: none; }
.gate__card.is-leaving {
  animation: gateOut .32s var(--ease-out) forwards;
}

/* ---------------- INTERAÇÃO: inclinação + brilho que segue o ponteiro ----------------
   Variáveis atualizadas pelo gate.js a cada frame (interpolação suave):
   --mx/--my = posição do ponteiro dentro do card; --ga = intensidade 0–1 */
html.gate-lock .gate { perspective: 1200px; }
.gate__card {
  --mx: 50%; --my: 0%; --ga: 0;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(161, 0, 0, calc(.26 * var(--ga))), transparent 62%),
    var(--ink);
  /* sem preserve-3d: o card gira como uma placa só (o hit-test dos botões
     fica correto mesmo com :active { transform } dentro dele) */
}
.gate__card::after { /* borda acesa perto do ponteiro */
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border: 1px solid transparent;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(227, 39, 30, calc(.85 * var(--ga))), transparent 70%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
/* brilho vermelho de fundo que acompanha o ponteiro */
.gate__glow {
  position: absolute;
  top: 0; left: 0;
  width: 70vmax; height: 70vmax;
  margin: -35vmax 0 0 -35vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(161, 0, 0, .42), rgba(161, 0, 0, .14) 45%, transparent 100%);
  pointer-events: none;
  will-change: transform;
  transition: opacity .5s var(--ease-out);
}
.gate.is-dark .gate__glow { opacity: 0; }

.gate__logo-sm {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: 0 auto 28px;
}

.gate__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.85rem, 7.4vw, 2.35rem);
  line-height: 1.04;
  letter-spacing: -.005em;
  color: var(--white);
  text-wrap: balance;
}
.gate__title em {
  font-style: italic;
  color: var(--red-hot);
}
.gate__desc {
  max-width: 34ch;
  margin: 14px auto 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--white-80);
  text-wrap: balance;
}

.gate__actions {
  container-type: inline-size;  /* base do tamanho da fonte dos botões */
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.gate__actions .btn {
  width: 100%;
  min-height: 52px;
  padding-block: 14px;
  white-space: nowrap;          /* texto sempre em uma linha */
  padding-inline: 10px;
  letter-spacing: .06em;
  /* a fonte acompanha a largura do botão para a frase caber inteira
     (≈24,5em de largura em caixa-alta); vw é o fallback */
  font-size: clamp(.6rem, 2.9vw, .8rem);
  font-size: min(.8rem, calc((100cqi - 24px) / 25.2));
}
.gate__secondary {
  background: transparent;
  color: var(--white-80);
  border: 1px solid var(--white-20);
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out);
}
@media (hover: hover) {
  .gate__secondary:hover { border-color: var(--white-60); color: var(--white); }
}
.gate__secondary:focus-visible,
.gate__actions .btn--red:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }

.gate__notice {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--white-10);
  background: var(--ink-2);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--white-80);
}
.gate__notice[hidden] { display: none; }

/* ---------------- PALCO DA ANIMAÇÃO ---------------- */
.gate__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  perspective: 1100px;
  pointer-events: none;
}
.gate__logo {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 49.96% 82.3%; /* centro do selo oval (passagem) */
}
.gate__piece {
  position: absolute;
  opacity: 0;
  backface-visibility: hidden;
}
.gate__piece svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* foco programático no início do conteúdo, ao liberar a página */
#conteudo:focus { outline: none; }
.gate__card:focus { outline: none; }

@keyframes gateIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes gateOut { to { opacity: 0; transform: scale(.965); } }

@media (prefers-reduced-motion: reduce) {
  .gate__card { animation-duration: .01ms; }
  .gate__card.is-leaving { animation: gateFade .25s linear forwards; }
}
@keyframes gateFade { to { opacity: 0; } }