/* hero.css — Hero section styles + scroll indicator */
/* Color palette follows bot mascot: deep space purple bg, teal accent, magenta accent, WhatsApp green CTA */
/* Typography: Nunito (rounded, cartoon-friendly) via tokens.css --font-family-base */

/* [data-reveal] pre-hide — prevents FOUC before GSAP sets autoAlpha */
[data-reveal] {
  opacity: 0;
}

#hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--gutter);
  text-align: center;
  /* Transparent — canvas starfield shows through */
  background: transparent;
}

.hero__content {
  max-width: 720px;
  will-change: transform;
  /* Subtle vignette so text stays readable over the starfield */
  background: radial-gradient(ellipse at center, rgba(13, 8, 32, 0.55) 0%, transparent 75%);
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
}

.hero__headline {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-heading);
  color: var(--text-primary);
  margin-bottom: var(--space-6);
  /* Subtle letter-spacing for rounded font legibility at large sizes */
  letter-spacing: -0.02em;
}

/* Agitation span — teal accent matching bot body color */
.hero__headline--accent {
  color: var(--accent-primary);
}

.hero__sub {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-8);
  line-height: var(--line-height-body);
}

/* CTA button — WhatsApp green with cartoon styling */
/* Cartoon cues: thicker border-radius (already full), shadow, border outline, chunky feel */
.hero__cta {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  background: var(--accent-cta);
  color: #0d1a0f; /* near-black on green — better contrast than white */
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-extrabold);
  border-radius: var(--radius-full);
  text-decoration: none;
  /* Cartoon outline effect — white inner ring + dark outer shadow */
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.25),
    0 4px 20px rgba(37, 211, 102, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.4);
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background: var(--accent-cta-hover);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.35),
    0 6px 28px rgba(37, 211, 102, 0.45),
    0 3px 12px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

.hero__cta:active {
  transform: translateY(0);
}

/* Scroll indicator — teal color matching bot body */
.hero__scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  color: var(--accent-primary);
  animation: scroll-bounce 1.6s ease-in-out infinite;
  /* Subtle glow to match star sparkles in mascot illustration */
  filter: drop-shadow(0 0 6px var(--accent-primary));
}

.hero__scroll-indicator svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-indicator {
    animation: none;
  }
  [data-reveal] {
    opacity: 1;
  }
}