/* ════════════════════════════════════════════════════════════
   NARRADIVE — Home page styles
   ════════════════════════════════════════════════════════════ */

/* ═══ HERO ═══ */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;   /* heading pinned to top, portal pushed to the bottom line */
    /* Header wordmark overhangs to ~178px; clear it so hero content never tucks under the logo */
    padding-top: calc(var(--nav-h) + 3rem);
    padding-bottom: clamp(2rem, 5vh, 4rem);
    overflow: hidden;
    isolation: isolate;
}
/* Home hero already fills the viewport; drop the shared footer gap so the
   figures sit right above the footer with no dead band between them. */
body[data-page="home"] .site-footer { margin-top: 0; }
.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../Assets/images/locations/l8-war-background.webp');
    background-size: cover;
    background-position: center 45%;
    z-index: -3;
}

/* Scrim layers — dark left column + dark bottom for legible overlay text */
.hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(8, 9, 13, 0.72) 0%, rgba(8, 9, 13, 0.22) 24%, rgba(8, 9, 13, 0.42) 52%, rgba(8, 9, 13, 0.9) 86%, var(--bg) 100%),
        linear-gradient(90deg, rgba(8, 9, 13, 0.94) 0%, rgba(8, 9, 13, 0.6) 36%, rgba(8, 9, 13, 0.12) 68%, transparent 100%);
}
.hero-vignette {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    box-shadow: inset 0 0 220px 60px rgba(0, 0, 0, 0.7);
}
/* Bottom image-vignette overlay — desktop only (enabled in the >=681px block);
   hidden on phones so the mobile layout is untouched. */
.hero-botvig { display: none; }

/* Fire-spark video layer. `screen` blend drops the (assumed black) footage
   background so only the sparks light up over the war backdrop. */
.hero-fire {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Span only the character/content column, centered. object-fit: cover keeps
       the footage aspect, so narrowing crops the sides — it never squashes the
       spark shapes. Anchoring to the bottom with a reduced height makes the
       cover scale WIDTH-driven, which renders the sparks smaller. */
    /* Now a child of .portal (its containing block), so size against the
       viewport rather than the tall portal box. */
    width: min(var(--container), 100vw);
    height: 55svh;
    object-fit: cover;
    object-position: center bottom;
    z-index: 3;   /* inside .portal: above the characters (0), below the vignette (5) */
    pointer-events: none;
    /* Black footage background drops out via screen. Kept subtle (low opacity,
       gentle filter) and masked so sparks only glow along the bottom and fade
       out as they rise. */
    mix-blend-mode: screen;
    opacity: 1;
    /* Recolour the red footage toward the backdrop's muted amber torchlight:
       hue-rotate red → amber, ease the saturation down to the dusky palette,
       a touch of sepia for warmth. */
    filter: brightness(0.95) contrast(1.05) saturate(0.85) sepia(0.2) hue-rotate(18deg);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 20%, transparent 75%);
    mask-image: linear-gradient(to top, #000 0%, #000 20%, transparent 75%);
}
/* Desktop-only, and off when the visitor prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .hero-fire { display: none; }
}
@media (max-width: 768px) {
    .hero-fire { display: none; }
}

/* Hero content */
.hero-inner {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--s-3);
    position: relative;
    z-index: 2;
    flex: 1 1 auto;           /* fill the hero so the portal can sink to the bottom */
    display: flex;
    flex-direction: column;
}
.hero-head {
    margin-bottom: var(--s-3);
}
.hero-head .section-title {
    color: #fff;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.75);
}
.hero-head .section-sub {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}
/* Portal intro sits on one line on wide screens; wraps again on smaller ones */
.portal-sub {
    max-width: none;
    white-space: nowrap;
}
@media (max-width: 900px) {
    .portal-sub { white-space: normal; max-width: 52ch; }
}
.hero-eyebrow {
    margin-bottom: var(--s-3);
    color: var(--teal-bright);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}
.hero-title {
    font-size: clamp(2.6rem, 7vw, 5.4rem);
    line-height: 1.04;
    color: #fff;
    max-width: 16ch;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
    letter-spacing: 0.01em;
}
.hero-title .accent { color: var(--teal-bright); }
.hero-sub {
    margin-top: var(--s-3);
    max-width: 52ch;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    color: var(--text-dim);
    line-height: 1.75;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}
.hero-actions {
    margin-top: var(--s-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}
/* Image tiles — each sized to its own artwork ratio, image covers fully (no gaps) */
.hero-tile {
    position: relative;
    display: block;
    height: clamp(116px, 14vw, 160px);
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    background-color: #0c0d12;
    overflow: hidden;
    transition: transform 0.4s var(--ease), border-color 0.3s var(--ease), box-shadow 0.45s var(--ease);
}
.hero-tile--wybmd { aspect-ratio: 462 / 174; }
.hero-tile--cp { aspect-ratio: 420 / 280; }
.hero-tile-img {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
}
.hero-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
@media (max-width: 560px) {
    .hero-tile { height: clamp(104px, 30vw, 150px); }
}

/* Hero staggered entrance — hidden state gated on html.anim (visible by default) */
.hero-anim { opacity: 1; transform: none; }
html.anim .hero-anim {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
html.anim .hero.ready .hero-anim { opacity: 1; transform: none; }
.hero.ready .hero-anim.s1 { transition-delay: 0.15s; }
.hero.ready .hero-anim.s2 { transition-delay: 0.35s; }
.hero.ready .hero-anim.s3 { transition-delay: 0.55s; }
.hero.ready .hero-anim.s4 { transition-delay: 0.75s; }

/* ═══ CHARACTER PORTAL (three doorways) ═══ */
.portal {
    display: flex;
    justify-content: center;
    align-items: flex-end;   /* feet share one ground line */
    gap: clamp(0.5rem, 4vw, 3.5rem);
    margin-top: auto;        /* sink the figures to the hero's bottom line */
    width: 100%;
}
.portal-fig {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    flex: 0 1 auto;
    transition: transform 0.45s var(--ease);
}
.portal-art {
    position: relative;
    /* Isolate here (not on .portal-fig) so the character + its glow form one
       self-contained stacking context at the portal's base level, while the
       label bubbles up to the hero context — that lets the bottom vignette sit
       ABOVE the characters yet BELOW the hover labels. */
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* Height drives everything (char + glow are % of this box). The vw cap makes
       the whole figure shrink with viewport WIDTH too, so the glow never
       decouples from the character when the window narrows. */
    height: min(clamp(240px, 44svh, 520px), 42vw);
    transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
}
.portal-fig--lead .portal-art {
    height: min(clamp(300px, 56svh, 640px), 52vw);   /* Royal Guard stands taller */
}
.portal-char {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.6));
    transition: filter 0.45s var(--ease);
}
/* Every figure carries a real, colour-baked glow sprite. Royal Guard's pulses;
   the two side auras (gold = About, crimson = Command Pocket) are static. */
.portal-glow {
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    height: 118%;
    width: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.85;
    mix-blend-mode: screen;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.portal-fig--lead .portal-glow { animation: portal-pulse 4.5s var(--ease) infinite; }
/* Side figures: round radial PNGs — width-driven so they read as a soft halo
   behind the upper body rather than a full-height column. Non-animated. */
.portal-glow--static {
    height: auto;
    width: 172%;
    top: 40%;
    opacity: 1;
}
/* scaleY < 1 squashes the (tall) Royal Guard glow vertically so it hugs the
   torso instead of towering over the whole figure. */
@keyframes portal-pulse {
    0%, 100% { opacity: 0.62; transform: translate(-50%, -50%) scale(1, 0.78); }
    50%      { opacity: 0.95; transform: translate(-50%, -50%) scale(1.05, 0.82); }
}
/* Desktop-only lead aura: a tall, narrow column of light rising behind the
   torso/head rather than a wide fan (mobile keeps portal-pulse). */
@keyframes portal-pulse-lead {
    0%, 100% { opacity: 1;  transform: translate(-50%, -50%) scale(0.92, 0.7); }
    50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.1, 0.8); }
}
.portal-label {
    margin-top: var(--s-3);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.portal-name {
    font-family: var(--font-caps);
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.15;
    color: var(--text);
    font-size: clamp(0.85rem, 1.4vw, 1.05rem);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
    max-width: 16ch;
    transition: color 1s var(--ease);
}
.portal-fig--lead .portal-name {
    color: var(--gold);
    font-size: clamp(1rem, 1.8vw, 1.35rem);
}
.portal-go {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-caps);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-bright);
    opacity: 0.85;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
    transition: gap 0.3s var(--ease), opacity 0.3s var(--ease);
}
.portal-go svg { width: 15px; height: 15px; }

/* Hover / keyboard focus — lift, brighten, pull the arrow */
.portal-fig:hover,
.portal-fig:focus-visible {
    transform: translateY(-10px);
    outline: none;
}
.portal-fig:hover .portal-char,
.portal-fig:focus-visible .portal-char {
    filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 18px rgba(224, 169, 59, 0.45));
}
.portal-fig:hover .portal-glow--static,
.portal-fig:focus-visible .portal-glow--static { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
.portal-fig:hover .portal-name,
.portal-fig:focus-visible .portal-name { color: var(--gold); }
.portal-fig:hover .portal-go,
.portal-fig:focus-visible .portal-go { gap: 0.7rem; opacity: 1; }
.portal-fig--lead:hover .portal-name,
.portal-fig--lead:focus-visible .portal-name { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
    .portal-glow { animation: none; }
}

/* ═══ DESKTOP: cinematic oversize figures, cropped at the bottom fold, with the
   name overlaid on the art (revealed on hover) — matching home-referans.png.
   Everything here is gated to >=961px so the stacked layout (<=960px, below) is
   used the moment the header collapses to the hamburger menu (also <=960px). ═══ */
@media (min-width: 961px) {
    /* Anchor the whole portal to the hero so it can hang past the bottom edge;
       .hero's overflow:hidden then crops the feet. Bottom-aligned, so all three
       share one off-screen ground line: the taller Royal Guard art rises highest
       and the side characters sit lower, as in the reference. */
    .hero-inner { position: static; }
    .portal {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        /* Generous inline padding compacts the trio toward the centre (matching
           the reference grouping) without any per-figure horizontal push. */
        padding: 0 clamp(2rem, 7vw, 9rem);
        /* Grid over flex so the lead sits in a dead-centre column and the two
           side figures get symmetric 1fr columns — guarantees the trio is
           balanced regardless of each cut-out's asymmetric transparent padding
           (the Royal Guard's wings would skew a flex pack). */
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: end;
        justify-items: center;
        gap: 0;
        /* Own stacking context so the internal paint order is deterministic and
           immune to the entrance-animation SC quirk: characters (0) < bottom
           vignette (5) < labels (30), all resolved here inside the portal. */
        isolation: isolate;
    }
    /* Feet sit at the fold (bottom:0); the crop/lower-shift is done by pushing
       the ART down by a PERCENTAGE OF ITS OWN HEIGHT — so it crops the same
       proportion of the figure on any window shape (vh here would balloon on
       tall/square windows and shove the characters off-screen). All three are
       pushed down far enough that only the knee-up reads (matching the
       reference); the lead is bigger and sits lowest, the most imposing. */
    .portal-fig--side .portal-art { height: min(88svh, 62vw); transform: translateY(42%); }
    .portal-fig--lead .portal-art { height: min(122svh, 85vw); transform: translateY(44%); }
    /* Keep the side figures grouped close to the centre by hugging their inner
       edge against the lead's column — an alignment, not an outward/inward push. */
    .portal-fig--side:first-child { justify-self: end; }
    .portal-fig--side:last-child  { justify-self: start; }

    /* Name overlays the lower third of the figure instead of sitting beneath it.
       All three labels share the same off-ground baseline, so they line up. */
    .portal-label {
        position: absolute;
        left: 50%;
        bottom: clamp(4rem, 15vh, 11rem);
        transform: translate(-50%, 14px);
        margin: 0;
        width: max-content;
        max-width: 44vw;
        z-index: 30;   /* inside .portal: above the characters (0) and the bottom vignette (5) — text always frontmost */
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
    }
    /* Big gilded display script, echoing the in-game title treatment */
    .portal-name {
        font-family: var(--font-display);
        font-weight: 400;
        letter-spacing: 0.01em;
        color: var(--gold);
        font-size: clamp(1.5rem, 2.6vw, 2.5rem);
        max-width: 20ch;
        text-shadow: 0 3px 24px rgba(0, 0, 0, 0.92);
    }
    .portal-fig--lead .portal-name { font-size: clamp(1.9rem, 3.4vw, 3.3rem); }
    .portal-go { font-size: 0.74rem; }

    /* Auras (desktop): the two side halos are the new soft bg-effect sprites —
       enlarged so they fan out broadly behind each character. The lead aura is a
       tall, narrow column of light lifted a little to haloe the torso/head. */
    .portal-glow--static { width: 250%; top: 36%; }
    .portal-fig--lead .portal-glow { animation-name: portal-pulse-lead; top: 43%; }

    /* Reveal name + go-link on hover / keyboard focus */
    .portal-fig:hover .portal-label,
    .portal-fig:focus-visible .portal-label { opacity: 1; transform: translate(-50%, 0); }
    /* No lift (cropped art would expose a gap): hold each figure steady through
       hover so nothing jumps. Placement now lives on .portal-art / justify-self,
       so the figure itself simply carries no transform. */
    .portal-fig:hover,
    .portal-fig:focus-visible { transform: none; }

    /* Bottom vignette: sits ABOVE the characters (fades their cropped lower
       bodies to black, so only the knee-up reads) but BELOW the hover labels.
       The image is a transparent-top → black-bottom alpha gradient, so a normal
       blend lays a clean fade over the lower scene. */
    .hero-botvig {
        display: block;
        position: absolute;
        /* Full viewport width regardless of the portal's inline padding. */
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        bottom: 0;
        height: 52vh;
        background: url('../Assets/images/home-bottom-vignette.webp') center bottom / 100% 100% no-repeat;
        z-index: 5;   /* inside .portal: above the characters (0), below the labels (30) */
        pointer-events: none;
    }
}
/* Touch screens (>=961 but no hover, e.g. large tablets) can't reveal on hover — keep
   the names visible. Since all three then show at once, shrink them and pin each
   within its own column (wrapping allowed) so the long centre title can't collide
   with its neighbours. */
@media (min-width: 961px) and (hover: none) {
    .portal-label { opacity: 1; transform: translate(-50%, 0); max-width: 30vw; }
    .portal-name { font-size: clamp(1rem, 2.1vw, 1.5rem); white-space: normal; }
    .portal-fig--lead .portal-name { font-size: clamp(1.15rem, 2.5vw, 1.7rem); }
}
@media (min-width: 961px) and (prefers-reduced-motion: reduce) {
    .portal-label { transition: opacity 0.45s var(--ease); }
    .portal-fig:hover .portal-label,
    .portal-fig:focus-visible .portal-label { transform: translate(-50%, 0); }
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 960px) {
    .hero { padding-top: calc(var(--nav-h) + 1.5rem); }
    .portal { gap: clamp(0.35rem, 2.5vw, 1.5rem); }
}
/* Collapsed-header widths: stack the lead on top (full width) with the two side
   figures below, so nothing is squeezed into a thin third and every character
   reads larger. Kicks in at <=960px, the same width the header goes hamburger. */
@media (max-width: 960px) {
    .portal {
        flex-wrap: wrap;
        align-items: flex-end;
        gap: var(--s-2);
        row-gap: var(--s-4);
    }
    .portal-fig--lead {
        order: -1;
        flex: 0 0 100%;
    }
    .portal-fig--side {
        flex: 1 1 42%;
    }
    .portal-fig--lead .portal-art { height: min(clamp(300px, 82vw, 480px), 60svh); }
    .portal-fig--side .portal-art { height: min(clamp(230px, 60vw, 380px), 46svh); }
    .portal-go { font-size: 0.62rem; letter-spacing: 0.1em; }
    .portal-go svg { width: 13px; height: 13px; }
}