/* ─────────────────────────────────────────────────────────────────────────
   hero.css
   Full-viewport landing section: name, typewriter title, tagline, CTAs,
   and the animated scroll indicator.
   ───────────────────────────────────────────────────────────────────────── */

#hero {
  min-height:      100vh;
  max-width:       100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0 24px;
  position:        relative;
}

.hero-inner {
  max-width: 900px;
  width:     100%;
  padding:   0;
}

/* ── Pre-name tag line ───────────────────────────────────────────────────── */

.hero-tag {
  font-family:    var(--font-mono);
  font-size:      0.8rem;
  color:          var(--green);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom:  16px;
  display:        flex;
  align-items:    center;
  gap:            10px;
  opacity:        0;
  animation:      fadeUp 0.6s 0.2s forwards;
}
.hero-tag::before {
  content:    '';
  display:    inline-block;
  width:      32px;
  height:     1px;
  background: var(--green);
}

/* ── Name ───────────────────────────────────────────────────────────────── */

.hero-name {
  font-family:    var(--font-display);
  font-size:      clamp(2.4rem, 6vw, 6rem);
  font-weight:    900;
  line-height:    1;
  color:          #fff;
  letter-spacing: -0.02em;
  margin-bottom:  8px;
  opacity:        0;
  animation:      fadeUp 0.6s 0.4s forwards;
}
.hero-name span {
  color:       var(--glow);
  text-shadow: 0 0 40px var(--glow), 0 0 80px rgba(0, 212, 255, 0.3);
}

/* ── Typewriter subtitle ─────────────────────────────────────────────────── */

.hero-title {
  font-family:   var(--font-retro);
  font-size:     clamp(1.4rem, 4vw, 2.4rem);
  color:         var(--glow2);
  letter-spacing: 0.05em;
  margin-bottom: 32px;
  opacity:       0;
  animation:     fadeUp 0.6s 0.6s forwards;
}

/* ── Description ────────────────────────────────────────────────────────── */

.hero-desc {
  font-family:   var(--font-mono);
  font-size:     clamp(0.85rem, 2vw, 1rem);
  color:         var(--muted);
  max-width:     520px;
  line-height:   1.8;
  margin-bottom: 48px;
  opacity:       0;
  animation:     fadeUp 0.6s 0.8s forwards;
}

/* ── CTA buttons ────────────────────────────────────────────────────────── */

.hero-ctas {
  display:    flex;
  gap:        16px;
  flex-wrap:  wrap;
  opacity:    0;
  animation:  fadeUp 0.6s 1s forwards;
}

.btn-primary {
  font-family:    var(--font-mono);
  font-size:      0.8rem;
  color:          var(--bg);
  background:     var(--glow);
  border:         none;
  padding:        14px 32px;
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:     box-shadow 0.2s, transform 0.2s;
  cursor:         none;
  position:       relative;
  overflow:       hidden;
}
.btn-primary::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform:  translateX(-100%);
  transition: transform 0.4s;
}
.btn-primary:hover {
  box-shadow: 0 0 30px var(--glow);
  transform:  translateY(-2px);
}
.btn-primary:hover::after {
  transform: translateX(100%);
}

.btn-secondary {
  font-family:    var(--font-mono);
  font-size:      0.8rem;
  color:          var(--glow);
  background:     transparent;
  border:         1px solid var(--glow);
  padding:        14px 32px;
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:     background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
  cursor:         none;
}
.btn-secondary:hover {
  background:  rgba(0, 212, 255, 0.1);
  box-shadow:  0 0 20px rgba(0, 212, 255, 0.3);
  transform:   translateY(-2px);
}

/* ── Scroll hint ────────────────────────────────────────────────────────── */

.scroll-hint {
  position:   absolute;
  bottom:     40px;
  left:       50%;
  transform:  translateX(-50%);
  display:    flex;
  flex-direction: column;
  align-items: center;
  gap:        8px;
  opacity:    0;
  animation:  fadeIn 1s 1.5s forwards;
}
.scroll-hint span {
  font-size:      0.65rem;
  color:          var(--muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.scroll-arrow {
  width:      1px;
  height:     40px;
  background: linear-gradient(to bottom, var(--glow), transparent);
  animation:  scrollPulse 1.5s ease-in-out infinite;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .hero-ctas {
    flex-direction: column;
  }
  .btn-primary,
  .btn-secondary {
    text-align: center;
  }
}