/* ==========================================================================
   Hero: section.hero + elements
   HTML: index.html:58-156
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 500vh; /* Odisseia completa em 5 atos */
  background-color: #0d0804;
  overflow: hidden;
}

.hero-bg {
  position: fixed; /* Fica travado no fundo */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Cobre a viewport sempre */
  background-color: #0d0804;
  z-index: 0;
  overflow: hidden;
  opacity: 1 !important; /* Força visibilidade total */
}

#c {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* Começa invisível para o GSAP animar */
  z-index: -1;
}

/* HUD corners */
.hud {
  position: absolute;
  z-index: 10;
  color: #fe5f55;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(8px, 1vw, 11px);
  letter-spacing: 0.12em;
  line-height: 1.4;
  opacity: 0; /* Começa invisível */
  pointer-events: none;
}
.hud-tl { top: 20px; left: 24px; }
.hud-tr { top: 20px; right: 24px; text-align: right; }
.hud-bl { bottom: 20px; left: 24px; }
.hud-br { bottom: 20px; right: 24px; text-align: right; }

.corner {
  position: absolute;
  z-index: 10;
  width: 22px; 
  height: 22px;
  opacity: 0; /* Começa invisível */
  pointer-events: none;
}
.corner svg { width: 100%; height: 100%; }
.c-tl { top: 16px; left: 16px; }
.c-tr { top: 16px; right: 16px; transform: scaleX(-1); }
.c-bl { bottom: 16px; left: 16px; transform: scaleY(-1); }
.c-br { bottom: 16px; right: 16px; transform: scale(-1); }

@keyframes blink { 0%,45%,55%,100%{opacity:0.55} 50%{opacity:0} }
.live { animation: blink 1.2s step-end infinite; }

/* Pausa a animação quando o hero sai da viewport (controlado via JS) */
.hero-bg.paused {
  animation-play-state: paused;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 1600px;
  min-height: 85vh;
  margin: 0 auto; /* Centralização absoluta */
  padding: 0 40px; /* Respiro mínimo lateral para segurança */
}

@media (min-width: 1024px) {
  .hero-content {
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
  }
  
  .hero-text-col {
    flex: 1.5;
  }
  
  .hero-visual-col {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }
  
  .hero-text-col {
    padding-right: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: clamp(80px, 12vh, 150px); /* Afasta da navbar no PC */
  }
}

.title-wrapper, .subtitle-wrapper, .desc-wrapper {
  overflow: hidden;
  padding-bottom: 12px;
}

.hero-subtitle, .hero-desc {
  transform: translateY(100%);
}

.hero-ctas {
  display: flex;
  gap: 20px;
  opacity: 0;
  transform: translateY(20px);
}

.cta-btn {
  font-family: 'Pixelify Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 32px;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  /* Sombra estilo pixel (blocada) */
  box-shadow: 4px 4px 0px rgba(0,0,0,0.3);
}

.cta-btn.primary {
  background-color: var(--color-vibrant-coral);
  color: var(--color-pure-white);
  position: relative;
  overflow: visible; /* Necessário para o glitch sair um pouco da borda */
}

.cta-btn.primary::before,
.cta-btn.primary::after {
  content: "Ver Projetos";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-vibrant-coral);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5; /* Visível sutilmente no idle */
  pointer-events: none;
  z-index: -1;
}

/* Estado Idle: Glitch mais frequente e intenso */
.cta-btn.primary::before {
  animation: pixelGlitch 2.5s step-end infinite;
  left: -2px;
  color: #00ffff;
}
.cta-btn.primary::after {
  animation: pixelGlitch 2.5s step-end reverse infinite;
  left: 2px;
  color: #ff00ff;
}

/* Estado Hover: Glitch ultra rápido */
.cta-btn.primary:hover::before {
  opacity: 1;
  animation: pixelGlitch 0.2s linear infinite;
  left: -4px;
}
.cta-btn.primary:hover::after {
  opacity: 1;
  animation: pixelGlitch 0.2s linear reverse infinite;
  left: 4px;
}

@keyframes pixelGlitch {
  /* 0% a 80%: Silêncio */
  0%, 80%, 100% { 
    clip-path: inset(0 0 100% 0); 
    transform: translate(0); 
    opacity: 0;
  }
  /* 81% a 99%: Glitch mais "nervoso" */
  81% { clip-path: inset(10% 0 80% 0); transform: translate(-4px, 4px); opacity: 1; }
  85% { clip-path: inset(40% 0 40% 0); transform: translate(4px, -4px); opacity: 1; }
  90% { clip-path: inset(60% 0 20% 0); transform: translate(-4px, -2px); opacity: 1; }
  95% { clip-path: inset(0 0 60% 0); transform: translate(4px, 2px); opacity: 1; }
}

.cta-btn.primary:hover {
  background-color: #ff766d;
  transform: translateY(-2px);
  box-shadow: 8px 8px 0px rgba(0,0,0,0.5);
}

.cta-btn.secondary {
  background-color: var(--color-deep-black);
  color: #25D366; /* Verde WhatsApp */
  border: 1px solid #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cta-btn.secondary:hover {
  background-color: #25D366;
  color: var(--color-deep-black);
  transform: translateY(-2px);
}

.btn-icon-custom {
  width: 18px;
  height: 18px;
  background-color: currentColor;
  display: inline-block;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.whatsapp-icon {
  -webkit-mask-image: url('../assets/icons/whatsapp.svg');
  mask-image: url('../assets/icons/whatsapp.svg');
}

.scroll-indicator {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(20px);
}

.scroll-text {
  font-family: var(--font-body);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-vibrant-coral);
  font-weight: 900;
  margin-bottom: 4px;
}

.scroll-icon {
  width: 20px;
  height: 20px;
  stroke: var(--color-vibrant-coral);
  stroke-width: 2.5px;
  animation: scrollBounce 2s infinite ease-in-out;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(10px); opacity: 1; }
}

.pixel-particle.white {
  background-color: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   Mobile Responsiveness
   ========================================================================== */
@media (max-width: 768px) {
  .hero {
    height: 500vh; /* Mantém os atos para o GSAP */
  }

  .hero-bg {
    height: 100vh;
  }

  #c {
    z-index: 1 !important;
    opacity: 1 !important;
  }

  .hero-content {
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 12px 24px 60px;
    gap: 60px;
    min-height: 100vh;
  }

  .hero-text-col {
    padding-right: 0;
    margin-top: clamp(50px, 6vh, 80px);
    align-items: center;
    width: 100%;
  }

  .hero-title {
    font-size: clamp(72px, 20vw, 8px);
    line-height: 1.05;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .name-line {
    justify-content: center;
  }

  .title-wrapper, .subtitle-wrapper, .desc-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: visible !important;
    height: auto !important;
    padding: 0 12px;
  }

  .hero-subtitle {
    font-size: 22px !important;
    line-height: 1.2;
    text-align: center;
    justify-content: center;
  }

  .laptop-break {
    display: none;
  }

  .hero-desc {
    font-size: 16px;
    line-height: 1.5;
    max-width: 100%;
    text-align: center;
    display: block;
    font-weight: 600;
  }

  .hero-ctas {
    flex-direction: column;
    width: 100%;
    gap: 16px;
  }

  .cta-btn {
    width: 100%;
    padding: 18px 0;
    justify-content: center;
  }

  .scroll-indicator {
    align-items: center;
    margin-top: 40px;
  }

  .hero-visual-col {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
  }

  .terminal-window {
    width: 100%;
    max-width: 340px;
    height: 280px;
  }

  /* HUD smaller for mobile */
  .hud {
    font-size: 8px;
  }
  .hud-tl, .hud-bl { left: 16px; }
  .hud-tr, .hud-br { right: 16px; }
}