/* css/hero-gl.css — hero com o efeito "picanha crua → assada" (hero-gl/).
 *
 * Só se aplica com #hero.has-gl, que hero-gl/main.js põe quando o browser
 * suporta WebGL2. Sem isso, o hero clássico (logo grande + foto) fica igual.
 */

.hero-gl-canvas,
.hero-gl-stage {
  display: none;
}

#hero.has-gl #hero-bg-img {
  display: none;
}

#hero.has-gl .hero-gl-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: var(--bg);
}

#hero.has-gl .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: 5.5rem 1.5rem 3.5rem;
  box-sizing: border-box;
}

#hero.has-gl .hero-subtitle {
  margin-bottom: 0.75rem;
}

#hero.has-gl .dp-hero-logo-wrap {
  width: clamp(88px, 15vh, 160px);
  height: clamp(88px, 15vh, 160px);
  margin: 0 auto;
}

/* Espaço onde o espeto é desenhado (o canvas lê a posição deste elemento). */
#hero.has-gl .hero-gl-stage {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 34vh;
  margin: 0.5rem 0;
}

#hero.has-gl .hero-tagline {
  max-width: 46ch;
  margin: 0 auto 1.5rem;
  font-size: 1.05rem;
}

#hero.has-gl .hero-gl-hint {
  display: block;
}

.hero-gl-hint {
  display: none;
  margin: 0 0 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}

@media (hover: none) {
  /* No telemóvel não há cursor: a mancha percorre a carne sozinha. */
  .hero-gl-hint {
    visibility: hidden;
  }
}

@media (max-width: 700px) {
  #hero.has-gl .hero-content {
    padding: 5rem 1rem 3rem;
  }

  #hero.has-gl .hero-tagline {
    font-size: 0.95rem;
  }
}

/* Desempenho: com o canvas animado por baixo, o desfoque (backdrop-filter)
   da barra fixa seria refeito a cada frame — pesado no telemóvel. Enquanto o
   hero está visível, a barra usa só a cor quase opaca (--nav-bg, 95%). */
html.hero-gl body.hero-active nav {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* O canvas é opaco: a animação do gradiente de fundo nunca se veria. */
#hero.has-gl::before {
  animation: none;
  display: none;
}

/* Diagnóstico do efeito (só com ?debug no endereço). */
.hero-gl-debug {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 99999;
  max-width: min(92vw, 420px);
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.82);
  color: #9ef0a4;
  font: 11px/1.45 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  pointer-events: none;
}