/* hero.css — 100vh fold: centered pitch, corner scroll cue */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 5vw;
    position: relative;
}

.hero-center { max-width: 1000px; }

.hero-eyebrow {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.5rem;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 5.2rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
}

.hero-sub {
    font-size: 1.15rem;
    color: var(--muted);
    max-width: 560px;
    margin: 0 auto 2.5rem;
}

/* Scroll cue — lives in the fixed footer bar, bottom-left. At true
   bottom it multiplies into the swarm (body.at-bottom) */
.scroll-cue {
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cue-bob 1.8s ease-in-out infinite;
    transition: background 0.2s, color 0.2s, opacity 0.3s;
}
.scroll-cue:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
body.at-bottom .scroll-cue { opacity: 0; pointer-events: none; }

@keyframes cue-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

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