/* ==========================================================================
   Home page
   ========================================================================== */

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--space-9);
  padding-bottom: var(--space-9);
}

.hero__bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(45% 55% at 18% 22%, rgba(218, 112, 84, 0.28) 0%, rgba(218, 112, 84, 0) 60%),
    radial-gradient(50% 60% at 85% 15%, rgba(79, 122, 135, 0.16) 0%, rgba(79, 122, 135, 0) 65%),
    radial-gradient(60% 70% at 50% 100%, rgba(216, 203, 182, 0.55) 0%, rgba(216, 203, 182, 0) 70%),
    var(--paper);
  animation: heroDrift 22s ease-in-out infinite alternate;
}

@keyframes heroDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-2%, 1.5%, 0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; }
}

.hero__inner { position: relative; z-index: 1; max-width: 44rem; }
.hero h1 { margin-block: var(--space-5) var(--space-5); }
.hero .lede { font-size: var(--text-xl); max-width: 38ch; }
.hero__actions { display: flex; gap: var(--space-4); margin-top: var(--space-7); flex-wrap: wrap; }

/* Floating "scroll to explore" indicator */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  z-index: 1;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  animation: heroCueFloat 2.2s ease-in-out infinite;
}
.hero__scroll-cue svg { width: 16px; height: 16px; }

@keyframes heroCueFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue { animation: none; }
}

@media (max-width: 700px) {
  .hero { min-height: auto; padding-top: var(--space-8); }
  .hero__scroll-cue { display: none; }
}