/* hero.css — sección 1 (header/hero). */

.sec--hero { text-align: center; }
.hero__glow {
  position: absolute; inset: 0;
  background: radial-gradient(60% 40% at 50% 38%, var(--gold-soft), transparent 70%);
  opacity: 0.5; pointer-events: none;
}
.hero__content { display: grid; justify-items: center; gap: var(--sp-4); }
.hero__eyebrow { font-size: var(--fs-sm); }
.hero__mono { margin-top: var(--sp-2); }
.hero__names { font-size: var(--fs-3xl); line-height: 1.02; }
.hero__and { color: var(--gold); font-style: italic; font-weight: 500; }
.hero__phrase { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); color: var(--gold-dark); line-height: 1.1; }
.hero__date { margin-top: var(--sp-2); }

.scroll-cue {
  position: absolute; left: 50%; bottom: var(--sp-6);
  transform: translateX(-50%);
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--gold-light); border-radius: 50%;
  display: grid; place-items: center;
  animation: cue-bounce 2s ease-in-out infinite;
  background: rgba(253,250,243,0.5);
}
.scroll-cue__chevron {
  width: 0.6rem; height: 0.6rem;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg) translate(-1px, -1px);
}
@keyframes cue-bounce { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,6px); } }