/* ============================================================
   Home brand hero — Phase 1b
   ============================================================ */

.home-hero {
    position: relative;
    padding-block: var(--space-7) var(--space-7);
    /* Clip horizontally so the map (shifted right, bleeding past the viewport)
     never adds a horizontal scrollbar. clip on one axis keeps the other axis
     visible, so the map/glow still bleed downward into the page. */
    overflow-x: clip;
}

/* The container is the positioning context for both the text and the map,
   so the map's right edge tracks the container's right edge exactly the way
   the text tracks the left edge — they never drift apart across resolutions. */
.home-hero__wrap {
    position: relative;
}

/* ---------- Ambient glow ----------
   A soft, full-width warm glow painted on the hero itself. Radial gradients
   fade to transparent well before the element edges, so there is no hard
   rectangular box — unlike a bounded fill, which showed visible edges once
   anchored to the container. The glow that hugs the map lives on the map
   (drop-shadow), so it can never drift out of sync with it. */
.home-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    /* Extends below the hero so the radial glow fades out past the boundary
     instead of being hard-cut at the bottom edge (which left a faint seam). */
    inset: 0 0 -160px 0;
    pointer-events: none;
    user-select: none;
    background:
        radial-gradient(
            900px 460px at 28% 8%,
            rgba(240, 160, 48, 0.12),
            transparent 68%
        ),
        radial-gradient(
            1100px 520px at 80% 30%,
            rgba(240, 160, 48, 0.1),
            transparent 66%
        );
}

/* ---------- Inner layout ---------- */
.home-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 600px;
}

/* Server world map — amber etched line-art (parchment removed in the asset).
   - max-width:none overrides the global `img{max-width:100%}`, which would
     otherwise cap the width on narrow screens while our fixed height forces
     a height → distorted (vertically stretched) aspect ratio.
   - The glow is two stacked drop-shadows: they follow the island shapes and
     move with the image exactly, so glow and map never drift apart on zoom.
   - blur() + lowered opacity make it read as a soft, faintly recognizable
     map on the background rather than a sharp foreground image.
   - A radial mask feathers every edge; the parent backdrop mask fades it down. */
.home-hero__map {
    position: absolute;
    z-index: -1;
    top: 30%;
    right: 0;
    height: clamp(480px, 56vw, 780px);
    width: auto;
    max-width: none;
    /* translateX shifts the dense island cluster toward the right so it bleeds
     off the right edge rather than over the left-hand text/video columns. It
     scales with the element size, so it tracks the container without drift. */
    transform: translate(20%, -45%);
    opacity: 0.3;
    filter: blur(1.1px) drop-shadow(0 0 50px rgba(245, 182, 92, 0.18))
        drop-shadow(0 0 120px rgba(245, 182, 92, 0.1));
    -webkit-mask-image: radial-gradient(
        62% 64% at 60% 45%,
        #000 32%,
        transparent 94%
    );
    mask-image: radial-gradient(62% 64% at 50% 40%, #000 32%, transparent 54%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ---------- Content ---------- */
.home-hero__eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-section);
    color: var(--accent);
}

.home-hero__title {
    font-family: var(--font-display);
    /* Fluid scaling between mobile (--fs-xl) and desktop (--fs-3xl) */
    font-size: clamp(var(--fs-xl), 4.5vw, var(--fs-3xl));
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    line-height: var(--lh-tight);
}

/* Voxel notch accent on the title — left border pseudo */
.home-hero__title::before {
    content: "";
    display: inline-block;
    width: var(--voxel-step);
    height: 0.7em;
    background: var(--accent);
    margin-right: var(--space-3);
    vertical-align: middle;
    flex-shrink: 0;
}

.home-hero__subtitle {
    font-size: var(--fs-md);
    color: var(--text-muted);
    max-width: 56ch;
    line-height: var(--lh-base);
}

.home-hero__season {
    align-self: flex-start;
}

/* ---------- FX: Embers (drifting spark dots) ----------
   The warm glow now lives on .home-hero__backdrop; this layer only adds
   the animated spark particles above it. */

/* Ember spark particles via box-shadow on a tiny dot */
.home-hero--fx-embers::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 3px;
    border-radius: var(--r-full);
    background: rgba(240, 160, 48, 0.9);
    pointer-events: none;
    user-select: none;
    box-shadow:
        322px 55px 3px 1px rgba(240, 160, 48, 0.7),
        490px 108px 2px 1px rgba(240, 160, 48, 0.55),
        634px 38px 3px 1px rgba(240, 160, 48, 0.65),
        762px 85px 2px 1px rgba(240, 160, 48, 0.5),
        862px 28px 3px 1px rgba(240, 160, 48, 0.6),
        964px 76px 2px 1px rgba(240, 160, 48, 0.45),
        1064px 48px 3px 1px rgba(240, 160, 48, 0.7),
        388px 148px 2px 1px rgba(240, 160, 48, 0.5),
        580px 130px 3px 1px rgba(240, 160, 48, 0.4),
        724px 162px 2px 1px rgba(240, 160, 48, 0.55),
        854px 115px 2px 1px rgba(240, 160, 48, 0.45),
        1102px 92px 3px 1px rgba(240, 160, 48, 0.35);
    animation: ember-drift 12s ease-in-out infinite alternate;
}

@keyframes ember-drift {
    0% {
        transform: translateY(0) translateX(0);
    }
    40% {
        transform: translateY(-8px) translateX(4px);
    }
    70% {
        transform: translateY(-5px) translateX(-2px);
    }
    100% {
        transform: translateY(-14px) translateX(6px);
    }
}

/* ---------- Entrance animation (CSS only, staggered) ---------- */
@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-hero__eyebrow,
.home-hero__title,
.home-hero__subtitle,
.home-hero__season {
    animation: hero-rise var(--dur-slow) var(--ease-out) both;
}

.home-hero__title {
    animation-delay: 60ms;
}
.home-hero__subtitle {
    animation-delay: 120ms;
}
.home-hero__season {
    animation-delay: 180ms;
}

/* The ambient glow fades in on load. The map is not opacity-animated — it has
   a breakpoint-specific resting opacity (0.3 / 0.12) that an animation with
   `both` fill would override. */
@keyframes glow-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.home-hero::after {
    animation: glow-in 900ms var(--ease-out) both;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .home-hero {
        padding-block: var(--space-7) var(--space-6);
    }

    /* Map: smaller and fainter on mobile so it never crowds the text or
     overflows the narrow viewport. max-width:none is inherited from the base
     rule above, so the aspect ratio stays intact (no vertical stretch). */
    .home-hero__map {
        height: clamp(260px, 64vw, 360px);
        opacity: 0.12;
    }

    /* Embers: fewer sparks visible on narrow screens */
    .home-hero--fx-embers::before {
        opacity: 0.7;
    }
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .home-hero--fx-embers::before {
        animation: none;
    }

    .home-hero__eyebrow,
    .home-hero__title,
    .home-hero__subtitle,
    .home-hero__season,
    .home-hero::after {
        animation: none;
    }
}