/* ============================================================
   HERO SECTION — Single Focal Point
   ============================================================ */

.hero {
  width: 100vw;
  height: 100vh;
  
  background: var(--gradient-background);
  box-shadow: var(--gradient-background-inset);
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  position: relative;
  overflow: hidden;
}

/* ── HERO CONTENT ─────────────────────────────────────────– */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  
  width: 100%;
  max-width: var(--container-content);
  padding: 0 var(--sp-5);
}

/* ── HERO IMAGE (Focal Point) ─────────────────────────────– */
.hero-image {
  width: var(--hero-width);
  height: var(--hero-height);
  
  object-fit: cover;
  border-radius: var(--radius-md);
  opacity: 0;
  
  animation: fadeInScale var(--dur-slow) var(--easing-spring) forwards;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 0.95;
    transform: scale(1);
  }
}

/* ── HERO TITLE ────────────────────────────────────────────– */
.hero-title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--color-frost);
  text-align: center;
  max-width: var(--container-content);
  
  opacity: 0;
  animation: slideInUp var(--dur-slow) var(--easing-spring) 0.1s forwards;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── HERO SUBTITLE ─────────────────────────────────────────– */
.hero-subtitle {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-relaxed);
  color: var(--color-whisper);
  text-align: center;
  max-width: 610px;
  
  opacity: 0;
  animation: slideInUp var(--dur-slow) var(--easing-spring) 0.2s forwards;
}

/* ── HERO CTA BUTTON ──────────────────────────────────────– */
.hero-cta {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  
  background: var(--color-gold);
  color: var(--color-deep-space);
  border: none;
  border-radius: var(--radius-sm);
  
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  cursor: pointer;
  
  transition: all var(--dur-normal) var(--easing-spring);
  opacity: 0;
  animation: slideInUp var(--dur-slow) var(--easing-spring) 0.3s forwards;
}

.hero-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3);
}

.hero-cta:active {
  transform: scale(0.95);
}

/* ── RESPONSIVE ───────────────────────────────────────────– */
@media (max-width: 890px) {
  .hero {
    height: auto;
    padding: var(--sp-5) 0;
  }
  
  .hero-content {
    gap: var(--sp-3);
  }
  
  .hero-image {
    width: 90vw;
    height: calc(90vw / 1.618);
    max-width: 500px;
    max-height: 309px;
  }
  
  .hero-title {
    font-size: var(--fs-h2);
  }
  
  .hero-subtitle {
    font-size: var(--fs-body);
  }
}

@media (max-width: 610px) {
  .hero-content {
    padding: 0 var(--sp-3);
    gap: var(--sp-3);
  }
  
  .hero-image {
    width: calc(100vw - var(--sp-6));
    height: auto;
    aspect-ratio: 1 / 1.618;
  }
  
  .hero-title {
    font-size: var(--fs-h3);
  }
  
  .hero-subtitle {
    font-size: var(--fs-body);
  }
  
  .hero-cta {
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-small);
  }
}