/* ==========================================================
   hero.css — SEÇÃO HERO (topo da página)
   Inclui o título principal, efeito glitch, badge de status
   e o subtítulo descritivo.
   ========================================================== */

/* ---------- LAYOUT DO HERO ---------- */
.hero {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  margin-bottom: 3rem;
}

/* Grid sutil concentrado atrás do título (reforça a textura global do base.css
   com um "spotlight" que esmaece nas bordas, só dentro do hero) */
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -10%;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 50% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 60% at 50% 45%, #000 0%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 1;
}

/* Wrapper em volta do h1 — necessário para o glitch funcionar com position */
.glitch-wrapper {
  position: relative;
  display: inline-block;
}

/* ---------- TÍTULO PRINCIPAL ---------- */
.hero h1 {
  font-family: var(--font-display);
  font-size: 2.2rem;   /* responsivo: mínimo / fluido / máximo */
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1;
  text-transform: uppercase;
  position: relative;
  margin-bottom: 0.75rem;
  transition: color var(--transition);
  display: inline-block;
}

.hero .logo {
  width: 200px;
  margin-bottom: 1.2rem;
}

/* ---------- EFEITO GLITCH ----------
   Funciona com dois pseudo-elementos coloridos (::before pink, ::after blue).
   Ficam invisíveis no estado normal e animam quando .glitch-active é adicionado via JS. */

/* Pseudo-elementos compartilham o texto "MANOLABS" */
.hero h1::before,
.hero h1::after {
  content: "MANOLABS";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Camada pink — ativa com .glitch-active */
.hero h1.glitch-active::before {
  color: var(--color-neon-pink);
  animation: glitch-1 1.3s linear;
  opacity: 0.8;
  z-index: -1;
}

/* Camada blue — ativa com .glitch-active */
.hero h1.glitch-active::after {
  color: var(--color-neon-blue);
  animation: glitch-2 1.1s linear;
  opacity: 0.8;
  z-index: -2;
}

/* Animação de skew no elemento pai (movimento geral) */
.hero h1.glitch-active {
  animation: glitch-skew 1.6s ease-in-out;
}

/* Keyframes do efeito glitch */
@keyframes glitch-skew {
  0%   { transform: skew(0deg); }
  20%  { transform: skew(-1deg); }
  40%  { transform: skew(1deg); }
  60%  { transform: skew(-0.5deg); }
  80%  { transform: skew(0.5deg); }
  100% { transform: skew(0deg); }
}

@keyframes glitch-1 {
  0%   { clip-path: inset(20% 0 30% 0); transform: translate(-2px, -1px); }
  12%  { clip-path: inset(50% 0 10% 0); transform: translate(2px,  1px);  }
  24%  { clip-path: inset(10% 0 60% 0); transform: translate(-1px, 2px);  }
  36%  { clip-path: inset(70% 0  5% 0); transform: translate(1px, -1px);  }
  48%  { clip-path: inset( 5% 0 70% 0); transform: translate(-2px, -2px); }
  60%  { clip-path: inset(30% 0 20% 0); transform: translate(0);          }
  72%  { clip-path: inset(45% 0 15% 0); transform: translate(2px, 1px);   }
  84%  { clip-path: inset(15% 0 55% 0); transform: translate(-1px, -1px); }
  100% { clip-path: inset(30% 0 20% 0); transform: translate(0);          }
}

@keyframes glitch-2 {
  0%   { clip-path: inset(40% 0 20% 0); transform: translate(2px,   1px); }
  12%  { clip-path: inset(10% 0 60% 0); transform: translate(-2px, -1px); }
  24%  { clip-path: inset(70% 0  5% 0); transform: translate(1px,  -2px); }
  36%  { clip-path: inset( 5% 0 70% 0); transform: translate(-1px,  2px); }
  48%  { clip-path: inset(60% 0 10% 0); transform: translate(2px,   1px); }
  60%  { clip-path: inset(20% 0 50% 0); transform: translate(0);          }
  72%  { clip-path: inset(35% 0 25% 0); transform: translate(-2px, 1px);  }
  84%  { clip-path: inset(55% 0 15% 0); transform: translate(1px, -1px);  }
  100% { clip-path: inset(20% 0 50% 0); transform: translate(0);          }
}

/* ---------- BADGE DE STATUS (●  STATUS: ONLINE) ---------- */
.status-badge {
  display: flex;
  align-items: center;
  gap: 8px;

  background: var(--status-bg);
  border: 1px solid var(--status-border);
  color: var(--status-text);

  padding: 0.4rem 1.4rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.4px;
  margin: 1.2rem 0 1.8rem;
  transition: all var(--transition);
}

/* Bolinha verde pulsante */
.status-dot {
  width: 9px;
  height: 9px;
  background: var(--color-status-ok);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--color-status-ok);
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0%   { opacity: 0.9; transform: scale(1);    }
  50%  { opacity: 0.4; transform: scale(0.85); }
  100% { opacity: 0.9; transform: scale(1);    }
}

/* ---------- SUBTÍTULO ---------- */
.subtitle {
  font-size: 1.2rem;
  max-width: 550px;
  font-weight: 300;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}