/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero {
    position: relative; min-height: 50vh;
    display: flex; align-items: center;
    overflow: hidden;
    background: var(--bg-deep);
}
.hero__media {
    position: absolute; inset: 0; z-index: 0;
}
.hero__media img, .hero__media video {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.04);
    animation: heroZoom 20s var(--ease) infinite alternate;
}
/* The video sits above the poster but is transparent until it's buffered and
   playing (main.js adds .is-playing), so the poster is what paints first. */
.hero__video, .page-hero__video { opacity: 0; transition: opacity .8s var(--ease); }
.hero__video.is-playing, .page-hero__video.is-playing { opacity: 1; }
@keyframes heroZoom {
    from { transform: scale(1.04); }
    to { transform: scale(1.12); }
}
.hero__media::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(11, 61, 46, 0.35), transparent 60%),
        linear-gradient(180deg, rgba(20,18,15,.45) 0%, rgba(20,18,15,.78) 100%);
}
.hero__content { position: relative; z-index: 2; padding: 72px 0 64px; max-width: 780px; margin: 0 auto; text-align: center; }
.hero h1 {
    font-size: clamp(2.4rem, 5.5vw, 4.25rem);
    line-height: 1.02; margin-bottom: 24px;
}
.hero h1 em {
    font-style: normal; color: var(--gold);
    font-weight: 700;
}
.hero__sub {
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    color: var(--text-muted);
    max-width: 52ch; margin-bottom: 36px;
    margin-left: auto; margin-right: auto;
    text-wrap: balance;
}
.hero__ctas { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 720px) {
    /* Immersive but not cavernous; svh keeps it stable as the URL bar shows/
       hides. align-items:center (on .hero) vertically centres the content. */
    .hero { min-height: 70vh; min-height: 70svh; }
    /* One tidy column: title, sub and buttons share the same width frame so
       their edges line up, instead of a loose centred cluster. */
    .hero__content { padding: 36px 0; }
    .hero h1 {
        font-size: clamp(2.1rem, 9vw, 3rem); line-height: 1.06; margin-bottom: 14px;
        letter-spacing: -.01em;
    }
    .hero__sub {
        font-size: 1rem; line-height: 1.55;
        max-width: 22rem; margin-bottom: 26px;
    }
    .hero__ctas {
        flex-direction: column; align-items: stretch; gap: 10px;
        max-width: 22rem; margin-left: auto; margin-right: auto;
    }
    .hero__ctas .btn { justify-content: center; width: 100%; padding: 15px 24px; }
    /* Frosted-glass secondary CTA: legible over any video frame. */
    .hero__ctas .btn--ghost {
        background: rgba(16, 19, 15, .26);
        -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
        border-color: rgba(255, 255, 255, .5); color: #fff;
    }
}

.hero__scroll {
    position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
    z-index: 3; color: var(--text-muted); font-size: .75rem;
    letter-spacing: .3em; text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.hero__scroll::after {
    content: ''; width: 1px; height: 40px; background: var(--gold);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { transform: scaleY(.4); opacity: .4; transform-origin: top; }
    50% { transform: scaleY(1); opacity: 1; }
}


/* ==========================================================================
   Page hero (interior)
   ========================================================================== */
.page-hero {
    position: relative;
    padding: 140px 0 80px;
    background: var(--bg-deep);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
/* Compact variant — a shorter band (e.g. the contact page). */
.page-hero--sm { padding: 112px 0 52px; }
.page-hero__media {
    position: absolute; inset: 0; z-index: 0;
}
.page-hero__media img,
.page-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(11, 61, 46, 0.45), transparent 60%),
        linear-gradient(180deg, rgba(14,17,22,.55) 0%, rgba(14,17,22,.85) 100%);
}
.page-hero__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; }
.page-hero__inner .lede { margin-left: auto; margin-right: auto; max-width: 48ch; }
.page-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 16px; }
.page-hero h1 em { font-style: normal; color: var(--gold); }

/* Desktop: give interior heroes real vertical presence so a minimal-content hero
   (e.g. the simulators "Two ways to play") reads as immersive, not a thin band.
   Content is centred within the min-height; the compact --sm variant opts out. */
@media (min-width: 1025px) {
    .page-hero:not(.page-hero--sm) {
        display: flex; align-items: center;
        min-height: clamp(460px, 52vh, 600px);
    }
    .page-hero:not(.page-hero--sm) .page-hero__inner { width: 100%; }
}

/* Tablet: the base padding (140/80) is a desktop scale — trim it so interior
   heroes aren't unnecessarily tall, and hold the lede to a comfortable measure. */
@media (min-width: 721px) and (max-width: 1024px) {
    .page-hero { padding: 118px 0 64px; }
    .page-hero--sm { padding: 100px 0 48px; }
    .page-hero h1 { font-size: clamp(2.6rem, 4.6vw, 3.4rem); }
    .page-hero__inner .lede { max-width: 44ch; }
}

@media (max-width: 720px) {
    .page-hero { padding: 100px 0 56px; }
    .page-hero--sm { padding: 84px 0 40px; }
    .page-hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
    .page-hero__inner .lede { max-width: 38ch; }
}