/* home.css — depende das variáveis e da navbar base definidas em codex.css */

/* ---------- Variante "overlay" do nav (só na Home, sobre o vídeo) ---------- */
.site-nav.site-nav--overlay{
  background: linear-gradient(180deg, rgba(6,8,13,.92) 0%, rgba(6,8,13,.5) 70%, transparent 100%);
  border-bottom: none;
  backdrop-filter: none;
  transition: background .25s ease, backdrop-filter .25s ease, padding .25s ease;
}
.site-nav.site-nav--overlay.scrolled{
  background: rgba(10,13,20,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
  padding: .7rem 0;
}

/* ---------- Hero ---------- */
.hero-video-section{
  position: relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: var(--bg-vignette), var(--bg);
}
.hero-video-section video,
.hero-video-section .hero-fallback-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  z-index: 0;
}
.hero-fallback-bg{
  background:
    radial-gradient(ellipse 70% 55% at 50% 20%, rgba(157,124,240,.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(203,168,106,.08), transparent 60%),
    var(--bg);
}

/* Malha pontilhada por cima do vídeo -- disfarça a resolução baixa do
   vídeo comprimido (~5MB, ver home.php) sem pesar no carregamento: é um
   radial-gradient repetido em CSS puro, sem nenhuma imagem baixada.
   mix-blend-mode:overlay funde os pontos com o vídeo por baixo em vez de
   só sobrepor uma camada plana -- é o que faz o efeito ler como estilo
   proposital (tipo halftone/dither) em vez de parecer um defeito. Ajuste
   --hero-dot-size (espaçamento) e --hero-dot-opacity direto aqui se
   quiser mais/menos intensidade. */
.hero-video-section{
  --hero-dot-size: 6px;
  --hero-dot-opacity: .55;
}
.hero-video-section::before{
  content: "";
  position:absolute; inset:0;
  z-index: 1;
  pointer-events:none;
  background-image: radial-gradient(circle, rgba(255,255,255,.65) 1px, transparent 1.4px);
  background-size: var(--hero-dot-size) var(--hero-dot-size);
  mix-blend-mode: overlay;
  opacity: var(--hero-dot-opacity);
}

.hero-video-overlay{
  position:absolute; inset:0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(6,8,13,.55) 0%, rgba(6,8,13,.35) 35%, rgba(6,8,13,.75) 100%),
    radial-gradient(ellipse 60% 45% at 50% 45%, rgba(10,13,20,0) 0%, rgba(10,13,20,.6) 100%);
}
.hero-video-content{
  position:relative;
  z-index: 3;
  text-align:center;
  padding: 0 1.5rem;
  max-width: 900px;
}
.hero-video-eyebrow{
  font-family: var(--font-mono);
  font-size:.75rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.hero-video-title{
  font-family: var(--font-display);
  font-weight:700;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.08;
  color: var(--text-bright);
  text-shadow: 0 4px 30px rgba(0,0,0,.6);
  margin: 0 0 1.1rem;
}
.hero-video-title em{
  font-style: italic;
  color: var(--gold);
}
.hero-video-subtitle{
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--text);
  max-width: 560px;
  margin: 0 auto;
}
.hero-scroll-cue{
  position:absolute;
  bottom: 2rem; left:50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--text-dim);
  font-size: 1.4rem;
  animation: scroll-bounce 2.2s ease-in-out infinite;
}
@keyframes scroll-bounce{
  0%,100%{ transform: translate(-50%, 0); opacity:.6; }
  50%{ transform: translate(-50%, 10px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .hero-scroll-cue{ animation:none; }
}

/*
	MANTIDO APENAS PARA REFERÊNCIA FUTURA
Em telas menores o "cover" corta bastante das laterais -- ancorar pela
esquerda em vez de centralizar evita que o recorte fique arbitrário. * /
@media (max-width: 1199.98px){
  .hero-video-section video,
  .hero-video-section .hero-fallback-bg{
    object-position: left center;
  }
}
*/

/* ---------- Seção de navegação rápida (abaixo do hero) ---------- */
.quicklinks-section{
  padding: 4.5rem 0;
}
.quicklinks-heading{
  text-align:center;
  margin-bottom: 2.25rem;
}
.quicklinks-heading .eyebrow{
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--text-dim);
}
.quicklinks-heading h2{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 2rem;
  color: var(--text-bright);
  margin:.3rem 0 0;
}
.quicklink-card{
  background: var(--panel);
  border:1px solid var(--hairline);
  border-radius: 12px;
  padding: 1.6rem 1.4rem;
  height:100%;
  text-decoration:none;
  display:block;
  transition: border-color .18s ease, transform .18s ease;
}
.quicklink-card:hover{
  border-color: var(--accent-line);
  transform: translateY(-3px);
}
.quicklink-card i{
  font-size: 1.6rem;
  color: var(--accent);
  margin-bottom: .9rem;
  display:block;
}
.quicklink-card h3{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 1.25rem;
  color: var(--text-bright);
  margin: 0 0 .35rem;
}
.quicklink-card p{
  font-size: .88rem;
  color: var(--text-dim);
  margin: 0;
  line-height:1.5;
}