/* ==================================
   04. HERO SECTION
================================== */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 130px 0 110px;
  color: var(--white); overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0;
  background: linear-gradient(rgba(30, 15, 8, 0.65), rgba(30, 15, 8, 0.74)),
    url("../assets/images/hero-bg.jpg") center / cover no-repeat;
}
.hero-content { position: relative; z-index: 2; display: grid; gap: 18px; justify-items: center; }
.hero-kicker { font-family: var(--ff-script); font-size: 1.4rem; color: var(--gold); }

.hero-title-wrap { display: grid; gap: 14px; justify-items: center; }
.hero-title {
  font-family: var(--ff-display); font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 0.92; text-transform: uppercase; letter-spacing: 0.5px;
}
.hero-title .accent { color: var(--gold); }
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: inline-block; }
.js .hero-title .line-mask > span {
  transform: translateY(110%); animation: riseUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.js .hero-title .line-mask:nth-child(2) > span { animation-delay: 0.14s; }
@keyframes riseUp { to { transform: translateY(0); } }

.hero-subtitle-box {
  display: inline-block; rotate: -2deg; border: 3px solid rgba(255, 255, 255, 0.22);
  background: var(--red-brown); color: var(--milk); font-family: var(--ff-display);
  font-size: clamp(1.5rem, 4vw, 3rem); text-transform: uppercase; padding: 0.35em 0.8em;
  box-shadow: var(--shadow-lg);
}

.hero-text { max-width: 70ch; color: rgba(255, 255, 255, 0.86); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 22px; color: rgba(255, 255, 255, 0.9); }
.hero-points li { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.hero-points ion-icon { color: var(--gold); font-size: 1.1rem; }

.hero-marquee {
  position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(36, 19, 11, 0.9);
  border-top: 1px solid rgba(250, 234, 222, 0.12); padding: 12px 0; overflow: hidden; z-index: 3;
}
.marquee-track { display: flex; width: max-content; gap: 28px; animation: marquee 20s linear infinite; }
.marquee-track span { font-family: var(--ff-display); text-transform: uppercase; color: var(--milk); opacity: 0.88; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }