/* =========================================================================
   Hero slogan - "DON'T GET LOST. GET LOS." with "LAURUS OPERATING SYSTEM"
   underneath. Sits at the top of the hero copy column, beside (desktop) or
   below (tablet/mobile) the approved LOS mark, which is left untouched.

   Same navy/gold palette and IBM Plex type as the rest of the site. The
   gold "GET LOS." line uses a one-shot sheen timed to finish alongside the
   logo's own "coming online" sweep (hero-logo.css), then settles to a
   static gradient - no repeating motion. The global prefers-reduced-motion
   rule in style.css collapses every animation here to its final state.
   ========================================================================= */

.hero-slogan {
  margin: 0 0 28px;
}

.hero h1.hero-slogan-title {
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 4.9vw, 4.15rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.hero-slogan-line {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  animation: hs-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-slogan-line + .hero-slogan-line { animation-delay: 0.22s; }

.hero-slogan-accent {
  /* Fallback for browsers without background-clip: text. */
  color: var(--gold);
  background: linear-gradient(100deg,
    var(--gold) 0%,
    var(--gold-bright) 22%,
    #fff6d8 30%,
    var(--gold-bright) 38%,
    var(--gold) 70%,
    #b98f2c 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hs-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.22s forwards,
             hs-sheen 1.8s ease-out 0.9s forwards;
}

.hero-slogan-sub {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  letter-spacing: 0.42em;
  line-height: 1.4;
  color: var(--gold-bright);
  opacity: 0;
  animation: hs-fade 1s ease-out 0.6s forwards;
}
/* Thin gold rule leading into the subline. */
.hero-slogan-sub::before {
  content: "";
  flex: 0 0 auto;
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

/* The original headline, kept as a supporting statement beneath the slogan. */
.hero-headline {
  max-width: 30ch;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--on-dark);
}

@keyframes hs-rise {
  to { opacity: 1; transform: none; }
}
@keyframes hs-fade {
  to { opacity: 1; }
}
@keyframes hs-sheen {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

/* Tablet: the hero stacks with the logo on top (style.css), so the slogan
   gets the full width. */
@media (max-width: 980px) {
  .hero h1.hero-slogan-title { font-size: clamp(2.4rem, 7.4vw, 4rem); }
}

@media (max-width: 720px) {
  .hero-slogan { margin-bottom: 22px; }
  .hero h1.hero-slogan-title { font-size: clamp(1.9rem, 10.4vw, 3rem); }
  .hero-slogan-sub {
    gap: 10px;
    margin-top: 16px;
    letter-spacing: 0.3em;
  }
  .hero-slogan-sub::before { width: 28px; }
}