claudetools/projects/radio-show/website/src/components/home/HeroSection.astro

---
---

<section class="hero">
  <div class="hero-bg-effects">
    <div class="hero-glow hero-glow--primary"></div>
    <div class="hero-glow hero-glow--secondary"></div>
    <div class="hero-ring"></div>
  </div>

  <div class="hero-content container">
    <span class="badge hero-badge">Returning 2026</span>
    <h1 class="hero-title">
      <span class="hero-title__line hero-title__line--1">The Computer</span>
      <span class="hero-title__line hero-title__line--2">Guru Show</span>
    </h1>
    <p class="hero-tagline">Helping you deal with all of your technology needs while treating you like a person in the process.</p>
    <p class="hero-description">
      Straight answers without the jargon or the drama. Hosted by Mike Swanson
      from Tucson, Arizona -- over 20 years of solving tech problems for home users
      and businesses alike. Tune in Saturdays at 9am on KVOI or call in at 520-790-2040.
    </p>
    <div class="hero-actions">
      <a href="/episodes" class="btn btn--primary btn--lg">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <polygon points="10 8 16 12 10 16 10 8" fill="currentColor" stroke="none"></polygon>
        </svg>
        Browse Episodes
      </a>
      <a href="/subscribe" class="btn btn--outline btn--lg">Subscribe</a>
    </div>
  </div>

  <div class="hero-scroll-hint" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="7 13 12 18 17 13"></polyline>
      <polyline points="7 6 12 11 17 6"></polyline>
    </svg>
  </div>
</section>

<style>
  .hero {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(135deg, hsl(220 30% 6% / 0.95), hsl(200 40% 8% / 0.9)),
      radial-gradient(ellipse at 20% 50%, hsl(200 85% 55% / 0.12), transparent 50%),
      radial-gradient(ellipse at 80% 20%, hsl(270 60% 50% / 0.08), transparent 50%);
  }

  [data-theme="light"] .hero {
    background:
      linear-gradient(135deg, hsl(220 20% 95% / 0.95), hsl(200 30% 92% / 0.9)),
      radial-gradient(ellipse at 20% 50%, hsl(200 85% 55% / 0.08), transparent 50%),
      radial-gradient(ellipse at 80% 20%, hsl(270 60% 50% / 0.05), transparent 50%);
  }

  /* Background effects */
  .hero-bg-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  .hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
  }

  .hero-glow--primary {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -100px;
    background: radial-gradient(circle, hsl(200 85% 55% / 0.15), transparent 70%);
    animation: glowDrift 8s ease-in-out infinite alternate;
  }

  .hero-glow--secondary {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -50px;
    background: radial-gradient(circle, hsl(270 60% 50% / 0.1), transparent 70%);
    animation: glowDrift 10s ease-in-out infinite alternate-reverse;
  }

  .hero-ring {
    position: absolute;
    width: 500px;
    height: 500px;
    top: 50%;
    right: 5%;
    transform: translate(0, -50%);
    border: 1px solid hsl(200 85% 55% / 0.08);
    border-radius: 50%;
    animation: ringPulse 4s ease-in-out infinite;
  }

  .hero-ring::before {
    content: '';
    position: absolute;
    inset: 40px;
    border: 1px solid hsl(200 85% 55% / 0.06);
    border-radius: 50%;
    animation: ringPulse 4s ease-in-out infinite 0.5s;
  }

  .hero-ring::after {
    content: '';
    position: absolute;
    inset: 80px;
    border: 1px solid hsl(200 85% 55% / 0.04);
    border-radius: 50%;
    animation: ringPulse 4s ease-in-out infinite 1s;
  }

  [data-theme="light"] .hero-glow--primary {
    background: radial-gradient(circle, hsl(200 85% 55% / 0.08), transparent 70%);
  }

  [data-theme="light"] .hero-glow--secondary {
    background: radial-gradient(circle, hsl(270 60% 50% / 0.06), transparent 70%);
  }

  [data-theme="light"] .hero-ring {
    border-color: hsl(200 85% 55% / 0.12);
  }

  [data-theme="light"] .hero-ring::before {
    border-color: hsl(200 85% 55% / 0.08);
  }

  [data-theme="light"] .hero-ring::after {
    border-color: hsl(200 85% 55% / 0.05);
  }

  /* Content */
  .hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
  }

  .hero-badge {
    animation: fadeSlideIn 0.6s ease-out both;
  }

  .hero-title {
    margin-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .hero-title__line {
    display: block;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    background: linear-gradient(135deg, hsl(220 10% 92%) 30%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hero-title__line--1 {
    animation: fadeSlideIn 0.6s ease-out 0.15s both;
  }

  .hero-title__line--2 {
    animation: fadeSlideIn 0.6s ease-out 0.3s both;
    background: linear-gradient(135deg, var(--color-accent) 0%, hsl(220 70% 65%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  [data-theme="light"] .hero-title__line {
    background: linear-gradient(135deg, hsl(220 20% 15%) 30%, hsl(200 85% 35%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  [data-theme="light"] .hero-title__line--2 {
    background: linear-gradient(135deg, hsl(200 85% 35%) 0%, hsl(220 70% 40%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  [data-theme="light"] .hero-tagline {
    color: hsl(200 85% 35%);
  }

  [data-theme="light"] .hero-description {
    color: hsl(220 15% 35%);
  }

  .hero-tagline {
    font-size: var(--text-xl);
    color: var(--color-accent);
    font-weight: 600;
    margin-top: var(--space-4);
    animation: fadeSlideIn 0.6s ease-out 0.45s both;
    letter-spacing: 0.02em;
  }

  .hero-description {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    margin-top: var(--space-4);
    line-height: 1.7;
    max-width: 560px;
    animation: fadeSlideIn 0.6s ease-out 0.6s both;
  }

  .hero-actions {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-8);
    flex-wrap: wrap;
    animation: fadeSlideIn 0.6s ease-out 0.75s both;
  }

  .btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
  }

  .btn--outline {
    background: transparent;
    color: hsl(220 10% 92%);
    border: 1.5px solid hsl(200 85% 55% / 0.5);
    transition: all var(--transition-fast);
  }
  .btn--outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: hsl(200 85% 55% / 0.08);
  }

  [data-theme="light"] .btn--outline {
    color: hsl(220 20% 25%);
    border-color: hsl(200 85% 42% / 0.5);
  }
  [data-theme="light"] .btn--outline:hover {
    border-color: hsl(200 85% 42%);
    color: hsl(200 85% 42%);
    background: hsl(200 85% 42% / 0.08);
  }

  /* Scroll hint */
  .hero-scroll-hint {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-text-muted);
    animation: bounceDown 2s ease-in-out infinite;
    z-index: 1;
  }

  /* Keyframes */
  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes glowDrift {
    from {
      transform: translate(0, 0) scale(1);
    }
    to {
      transform: translate(30px, -20px) scale(1.1);
    }
  }

  @keyframes ringPulse {
    0%, 100% {
      opacity: 0.3;
      transform: translate(0, -50%) scale(1);
    }
    50% {
      opacity: 0.6;
      transform: translate(0, -50%) scale(1.05);
    }
  }

  @keyframes bounceDown {
    0%, 100% {
      transform: translateX(-50%) translateY(0);
      opacity: 0.4;
    }
    50% {
      transform: translateX(-50%) translateY(8px);
      opacity: 0.8;
    }
  }

  @media (max-width: 768px) {
    .hero {
      min-height: auto;
      padding-block: var(--space-16) var(--space-24);
    }

    .hero-ring {
      width: 300px;
      height: 300px;
      right: -80px;
      opacity: 0.5;
    }

    .hero-scroll-hint {
      display: none;
    }
  }

  @media (max-width: 480px) {
    .hero-title__line {
      font-size: clamp(2rem, 10vw, 3rem);
    }
  }
</style>