/* Finalized homepage hero, based on the ticket-transfer page. */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/space-grotesk-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.hero-alternative {
    background: #0a2118;
    color: #ffffff;
    isolation: isolate;
}

.hero-alternative ::selection {
    background: #2bbf78;
    color: #0a2118;
}

.hero-alternative-band {
    position: relative;
    overflow: hidden;
    background: #0a2118;
    color: #ffffff;
    padding: 36px 0 80px;
}

.hero-alternative-band::before,
.hero-alternative-band::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-alternative-band::before {
    background:
        linear-gradient(135deg, rgb(43 191 120 / 22%), transparent 52%),
        radial-gradient(circle at 92% 0%, rgb(43 191 120 / 20%), transparent 42%);
}

.hero-alternative-band::after {
    background: repeating-radial-gradient(circle at 88% 0%, rgb(255 255 255 / 7%) 0 1px, transparent 1px 90px);
}

.hero-alternative-brand-row,
.hero-alternative-inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 72px);
    position: relative;
}

.hero-alternative-brand-row { z-index: 2; margin-bottom: 60px; }
.hero-alternative-brand-slot { height: 92px; }

.hero-alternative-inner {
    z-index: 1;
    isolation: isolate;
}

.hero-alternative-body {
    position: relative;
    z-index: 1;
    margin-top: 28px;
}

.hero-alternative-heading {
    position: relative;
    z-index: 1;
    max-width: 25.5ch;
    margin: 0;
    font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.hero-alternative-lead {
    max-width: 50ch;
    margin: 0;
    color: #c3d8cc;
    font-size: clamp(18px, 1.6vw, 21px);
    line-height: 1.65;
    text-wrap: pretty;
}

.hero-alternative-text .hero-alternative-heading { max-width: 32ch; }
.hero-alternative-text .hero-alternative-lead { max-width: 72ch; }

.hero-alternative-conversion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 32px;
}

.hero-alternative a:focus-visible { outline: 2px solid #8ce6b9; outline-offset: 5px; }

@media (max-width: 1100px) {
    .hero-alternative-band { padding-top: 100px; }
}

@media (max-width: 700px) {
    html { scroll-padding-top: 24px; }
    .hero-alternative-brand-row { margin-bottom: 44px; }
    .hero-alternative-brand-slot { height: 81px; }
    .hero-alternative-brand-slot .hero-wordmark { width: min(310px, calc(100vw - 40px)); }
    .hero-alternative-band { padding-top: 40px; padding-bottom: 56px; }
    .hero-alternative-heading { font-size: clamp(34px, 6.5vw, 46px); overflow-wrap: anywhere; }
    .hero-alternative-lead { max-width: 42ch; }
    .hero-alternative-conversion { margin-top: 28px; gap: 20px; }
}

/* Same blur/scale entrance and stagger as the supplied transfer-page hero. */
@media (prefers-reduced-motion: no-preference) {
    .hero-alternative-brand-slot { animation: alternative-enter .7s ease .25s both; }
    .hero-alternative-heading { animation: alternative-enter .85s ease .48s both; }
    .hero-alternative-lead { animation: alternative-enter .85s ease .56s both; }
    .hero-alternative-conversion { animation: alternative-enter .85s ease .64s both; }
}

@keyframes alternative-enter {
    from { opacity: 0; filter: blur(7px); transform: scale(1.012); }
    to { opacity: 1; filter: blur(0); transform: none; }
}