/* ==========================================================================
   HG HomeClub - "next" homepage variant: the motion layer.

   Loaded ONLY on the page with slug `next` (see page-next.php). Everything
   here layers on top of style.css, which is still the source of truth for
   palette, type, spacing and every component this page reuses. No token is
   redefined, no existing selector is rewritten: the rules below either add
   motion state or scope a fix to body.hg-next.
   ========================================================================== */

body.hg-next {
    /* One curve for the whole page, matching the reference engine's feel:
       decelerate hard, never overshoot. Editorial, not springy. */
    --hg-ease: cubic-bezier(0.22, 1, 0.36, 1);
    /* Measured by next.js on load/resize; the fallback is the two-tier
       masthead's resting height. */
    --hg-mast-h: 92px;
}

/* style.css sets overflow-x: hidden on body and .hg-site-main as bleed
   insurance. overflow-x: hidden promotes the element to a scroll container,
   which silently kills position: sticky for anything inside it - the deck
   run lives inside .hg-site-main. `clip` gives the identical horizontal
   protection WITHOUT creating a scrollport, so the decks stick against the
   page the way they should. Scoped to this page only. */
body.hg-next,
body.hg-next .hg-site-main {
    overflow-x: clip;
}

/* --------------------------------------------------------------------------
   1. Reading progress: a 2px lit line along the very top edge, above the
   sticky masthead (which sits at z-index 50), with a small bright head dot.
   -------------------------------------------------------------------------- */
.hg-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    height: 2px;
    pointer-events: none;
}

.hg-progress-bar {
    position: absolute;
    inset: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, #2C6E96 0%, #3F93C8 58%, #BFE0F2 100%);
    box-shadow: 0 0 10px rgba(63, 147, 200, 0.55);
    will-change: transform;
}

.hg-progress-head {
    position: absolute;
    top: -3px;
    left: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 9px 3px rgba(63, 147, 200, 0.7);
    transform: translateX(0);
    opacity: 0;
    transition: opacity 0.3s var(--hg-ease);
    will-change: transform;
}

.hg-progress.is-on .hg-progress-head {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   2. Reveal on enter. The hidden state is guarded behind html.hg-js (the
   class is set by an inline script at the top of page-next.php), so with
   JavaScript off or next.js failing to load, every element is simply on
   screen - nothing is ever permanently hidden.
   -------------------------------------------------------------------------- */
html.hg-js .hg-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1s var(--hg-ease), transform 1s var(--hg-ease);
}

html.hg-js .hg-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* An element that both reveals AND drifts hands its transform to the drift
   engine, so it fades in without the slide instead of the two writers
   fighting over one property. */
html.hg-js .hg-reveal[data-drift] {
    transform: none;
    transition: opacity 1s var(--hg-ease);
}

/* --------------------------------------------------------------------------
   3. Typed headlines: per-character blur-in. Words stay whole because each
   word is wrapped in an inline-block .w that never breaks.
   -------------------------------------------------------------------------- */
html.hg-js [data-type] .w {
    display: inline-block;
    white-space: nowrap;
}

html.hg-js [data-type] .ch {
    display: inline-block;
    opacity: 0;
    filter: blur(6px);
    transform: translateY(4px);
    transition: opacity 0.32s var(--hg-ease), filter 0.5s var(--hg-ease), transform 0.5s var(--hg-ease);
}

html.hg-js [data-type].is-typed .ch {
    opacity: 1;
    filter: blur(0);
    transform: none;
}

/* --------------------------------------------------------------------------
   4. Parallax carriers. Travel is tiny and always clamped in JS; the extra
   scale on image carriers buys headroom so a drifting photo never exposes
   an edge inside its frame.
   -------------------------------------------------------------------------- */
/* The lead media frame already clips and rounds itself in style.css; the
   drift carrier just needs to fill it so the image keeps its object-fit. */
.hg-next-drift {
    width: 100%;
    height: 100%;
    will-change: transform;
}

.hg-next-drift img {
    transform: scale(1.16);
    transform-origin: 50% 50%;
}

/* style.css zooms the lead image to 1.02 on hover. Re-express that on top of
   the drift headroom instead of letting the hover shrink it back and expose
   the frame edge mid-drift. */
.hg-next-lead .hg-lead-main-link:hover .hg-lead-main-media img {
    transform: scale(1.19);
}

/* --------------------------------------------------------------------------
   4b. Variant masthead (header-next.php): ONE thin ink bar, logo pinned far
   left at its existing size, section links immediately to its right, search
   at the far end. Only the bar geometry is restyled; the logo, nav menu,
   search panel and mobile toggle all keep their style.css appearance and
   their existing hg-nav.js behavior.
   -------------------------------------------------------------------------- */
/* 2026-09-05: the sitewide header (style.css, .hg-header-bar--main) is the
   one-row layout now, and header-next.php renders the same markup, so this
   section carries no overrides. */

/* --------------------------------------------------------------------------
   4c. The three-column editorial lead, filled out. Columns stretch to a
   common height, the left one gains a Trending Now list under the Top 25
   card, and the right one trades small side thumbs for full-column media.
   -------------------------------------------------------------------------- */
@media (min-width: 1000px) {
    .hg-next-lead .hg-lead-grid {
        align-items: stretch;
    }
}

.hg-next-lead-left {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* .hg-lead-utility carries order: 3 in style.css for the mobile grid. It is
   a flex child here now, so that order has to be neutralised or the Trending
   list would jump above the card. */
.hg-next-lead-left .hg-lead-utility {
    order: 0;
}

@media (min-width: 1000px) {
    .hg-next-lead-left {
        order: 1;
    }
}

/* Trending Now: numbered text links, no images. Takes the column's leftover
   height and spreads its rows through it, which is what actually squares the
   left column off against the lead story. */
.hg-next-trending {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.hg-next-trending-eyebrow {
    display: block;
    font-family: var(--hg-font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hg-blue-dark);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--hg-ink);
}

.hg-next-trending-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    counter-reset: hg-trend;
}

.hg-next-trending-item {
    border-bottom: 1px solid var(--hg-border);
}

.hg-next-trending-item:last-child {
    border-bottom: none;
}

.hg-next-trending-link {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 13px 0;
    text-decoration: none;
    color: inherit;
}

.hg-next-trending-num {
    flex: 0 0 auto;
    font-family: var(--hg-font-ui);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--hg-blue);
    min-width: 1.6em;
}

.hg-next-trending-title {
    font-family: var(--hg-font-serif);
    font-size: 16px;
    line-height: 1.3;
    color: var(--hg-ink);
    transition: color 0.15s ease;
}

.hg-next-trending-link:hover .hg-next-trending-title {
    color: var(--hg-blue-dark);
}

/* Right column: Forbes-scale side stories. Full-column-width media stacked
   above the text instead of the 88px side thumb, and the three items spread
   to meet the lead story's bottom edge. */
.hg-next-lead .hg-lead-side-link {
    flex-direction: column;
    gap: 12px;
}

.hg-next-lead .hg-lead-side-media {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: var(--hg-radius-md);
}

.hg-next-lead .hg-lead-side-title {
    font-size: 21px;
}

@media (min-width: 1000px) {
    .hg-next-lead .hg-lead-side {
        justify-content: space-between;
    }
}

/* --------------------------------------------------------------------------
   5. Focus dimming on the About copy: the paragraph nearest the middle of
   the viewport reads at full ink, the others sit back. Opacity on the ink
   colour, on the light ground - at 0.25 the resting state is a soft grey
   that still passes as readable body copy rather than disappearing.
   -------------------------------------------------------------------------- */
.hg-next-about .hg-about-inner p {
    font-family: var(--hg-font-serif);
    font-size: 19px;
    line-height: 1.7;
    color: var(--hg-ink);
    margin: 0 0 18px 0;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
}

.hg-next-about .hg-about-inner p:last-child {
    margin-bottom: 0;
}

html.hg-js .hg-next-about [data-intro] {
    opacity: 0.25;
    transition: opacity 0.4s linear;
}

@media (min-width: 782px) {
    .hg-next-about .hg-about-inner p {
        font-size: 23px;
        line-height: 1.55;
    }
}

/* --------------------------------------------------------------------------
   6. Today's Highlights: the 3D ring carousel. A wheel of editorial cards
   lying nearly flat, tilted so you look ACROSS the plane, spinning around
   the vertical axis with the front card coming to center. The depth is the
   theater; the typography is still the star, so cards are billboarded
   upright (their own transform cancels the ring's rotations) and the front
   card lands square to the camera at full size and full contrast.

   Depth is genuine: cards ride translateZ on a real perspective, so the
   camera does the scaling. Nothing here fakes it with a blur pileup.

   The DEFAULT state below is the FLAT scroll-snap strip. Ring mode is opted
   into by next.js adding .is-ring, and only above 900px with motion allowed.
   That ordering is deliberate - with no JS, on a phone, or under
   prefers-reduced-motion, what renders is a readable horizontal card strip.
   -------------------------------------------------------------------------- */
.hg-next-ring-band {
    position: relative;
    padding-bottom: 40px;
}

/* Shared band-glow primitive: the whisper gradient canvas behind the ring,
   and the same element behind the Podcast band further down the page.
   `clip` (not hidden): the canvas inside is sticky, and a scrollport
   ancestor would pin it in place. */
.hg-deck-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
    pointer-events: none;
}

.hg-deck-canvas {
    position: sticky;
    top: 0;
    display: block;
    width: 100%;
    height: 100vh;
    opacity: 0.9;
    filter: blur(38px);
}

.hg-next-ring-inner {
    position: relative;
    z-index: 1;
}

/* ---- Stage: flat scroll-snap strip by default ---- */
.hg-ring-stage {
    position: relative;
    margin-top: 26px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 4px 11% 16px 11%;
    scrollbar-width: none;
    /* Vertical scroll always belongs to the page. The browser keeps pan-y
       natively; only horizontal intent ever reaches the engine. */
    touch-action: pan-y;
    outline: none;
}

.hg-ring-stage::-webkit-scrollbar {
    display: none;
}

.hg-ring-stage:focus-visible {
    outline: 2px solid var(--hg-hl-blue);
    outline-offset: 8px;
    border-radius: var(--hg-radius-md);
}

.hg-ring {
    display: flex;
    gap: 16px;
}

.hg-ring-slot {
    flex: 0 0 78%;
    max-width: 340px;
    scroll-snap-align: center;
}

/* ---- Card: one design, both modes ---- */
.hg-ring-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--hg-radius-lg);
    overflow: hidden;
    background: #1E222A;
    border: 1px solid var(--hg-hl-card-border);
    box-shadow: 0 30px 70px -45px rgba(0, 0, 0, 0.9);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.hg-ring-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.hg-ring-card-media {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

.hg-ring-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hg-ring-card-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    text-align: center;
    background: linear-gradient(135deg, rgba(111, 184, 230, 0.16) 0%, rgba(111, 184, 230, 0.04) 100%);
}

.hg-ring-card-mark span {
    font-family: var(--hg-font-ui);
    font-size: clamp(20px, 3.4vw, 28px);
    font-weight: 800;
    color: var(--hg-hl-blue);
}

.hg-ring-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 22px 22px;
}

.hg-ring-card-eyebrow {
    display: block;
    font-family: var(--hg-font-ui);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hg-hl-blue);
    margin-bottom: 10px;
}

.hg-ring-card-title {
    font-family: var(--hg-font-serif);
    font-weight: 500;
    font-size: 21px;
    line-height: 1.22;
    letter-spacing: -0.005em;
    color: var(--hg-hl-text);
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hg-ring-card-dek {
    font-family: var(--hg-font-serif);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--hg-hl-text-soft);
    margin: 0 0 14px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hg-ring-card-date {
    margin-top: auto;
    font-family: var(--hg-font-ui);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hg-hl-text-faint);
}

/* Depth dim. A scrim of the band's own ink rather than filter: brightness()
   so every per-frame write stays a compositor property. No transition: the
   engine sets this on each frame and a transition would smear the drag. */
.hg-ring-card-scrim {
    position: absolute;
    inset: 0;
    background: var(--hg-ink);
    opacity: 0;
    pointer-events: none;
}

/* ---- Ring mode (added by next.js above 900px, motion allowed) ---- */
.hg-ring-stage.is-ring {
    display: block;
    /* Tall enough for the front card at its perspective scale (~1.3x) plus
       the ring's vertical spread. next.js lifts the ring half the tilt drop
       so the near and far edges balance around this box. */
    height: 700px;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
    perspective: 1500px;
    perspective-origin: 50% 44%;
    cursor: grab;
}

.hg-ring-stage.is-ring.is-dragging {
    cursor: grabbing;
}

.hg-ring-stage.is-ring .hg-ring {
    position: absolute;
    inset: 0;
    display: block;
    transform-style: preserve-3d;
    will-change: transform;
}

.hg-ring-stage.is-ring .hg-ring-slot {
    position: absolute;
    left: 50%;
    top: 50%;
    flex: none;
    width: 340px;
    max-width: none;
    height: 420px;
    margin: -210px 0 0 -170px;
    transform-style: preserve-3d;
}

.hg-ring-stage.is-ring .hg-ring-card {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.hg-ring-stage.is-ring .hg-ring-card.is-front {
    border-color: var(--hg-hl-blue-tint-border);
    box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.95);
}

/* ---- Controls: prev / position / next ---- */
.hg-ring-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 24px;
}

.hg-ring-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--hg-hl-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.hg-ring-btn:hover {
    background: var(--hg-blue);
    border-color: var(--hg-blue);
    color: #FFFFFF;
}

.hg-ring-counter {
    min-width: 76px;
    text-align: center;
    font-family: var(--hg-font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--hg-hl-text-faint);
    font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   6b. The lower-half moment: an oversized typographic divider, then the
   Podcast rail lifted onto a dark ink band. Same band grammar as Today's
   Highlights (ink ground, light type, the same whisper gradient canvas at
   the same restraint), but it stays a HORIZONTAL scroller - sideways
   movement is opt-in, so it never holds up a reader heading down the page.
   The rail itself still renders through template-parts/rail.php untouched;
   everything below is a scoped restyle of that output.
   -------------------------------------------------------------------------- */
.hg-next-divider {
    padding: 56px 0 40px 0;
}

.hg-next-divider-line {
    font-family: var(--hg-font-serif);
    font-weight: 500;
    font-size: clamp(34px, 6.4vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--hg-ink);
    margin: 0;
    max-width: 16ch;
}

@media (min-width: 782px) {
    .hg-next-divider {
        padding: 88px 0 64px 0;
    }
}

.hg-next-band {
    position: relative;
    background: var(--hg-ink);
    padding: 52px 0 56px 0;
}

@media (min-width: 782px) {
    .hg-next-band {
        padding: 84px 0 88px 0;
    }
}

.hg-next-band-inner {
    position: relative;
    z-index: 1;
}

/* The banded rail drops its light-page furniture: no bottom rule, no section
   padding of its own, the band owns both. */
.hg-next-band .hg-rail {
    padding: 0;
    border-bottom: none;
}

.hg-next-band .hg-rail-head {
    margin-bottom: 26px;
}

.hg-next-band .hg-rail-title {
    font-size: clamp(26px, 3vw, 34px);
    color: var(--hg-hl-text);
}

.hg-next-band .hg-rail-viewall {
    color: var(--hg-hl-blue);
}

.hg-next-band .hg-rail-viewall:hover {
    color: var(--hg-hl-text);
}

/* Bigger cards than a standard rail: this is the moment, not a filler row. */
.hg-next-band .hg-scroller-item {
    width: 300px;
}

@media (min-width: 620px) {
    .hg-next-band .hg-scroller-item {
        width: 360px;
    }
}

.hg-next-band .hg-card {
    background: #1E222A;
    border-color: var(--hg-hl-card-border);
    box-shadow: 0 30px 70px -45px rgba(0, 0, 0, 0.9);
}

.hg-next-band .hg-card:hover {
    border-color: var(--hg-hl-blue-tint-border);
    box-shadow: 0 36px 80px -40px rgba(0, 0, 0, 0.95);
}

.hg-next-band .hg-card-title {
    font-size: 24px;
    color: var(--hg-hl-text);
}

.hg-next-band .hg-card-excerpt {
    font-size: 15px;
    color: var(--hg-hl-text-soft);
}

.hg-next-band .hg-card-date {
    color: var(--hg-hl-text-faint);
}

.hg-next-band .hg-badge {
    background: var(--hg-hl-blue-tint-bg);
    color: var(--hg-hl-blue);
}

.hg-next-band .hg-card-thumb {
    background: rgba(255, 255, 255, 0.04);
}

/* card-article.php asks for the light-surface ghost shares; on ink they need
   the dark treatment back. */
.hg-next-band .hg-share-ghost-row--light .hg-share-ghost {
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.55);
}

.hg-next-band .hg-share-ghost-row--light .hg-share-ghost:hover {
    color: var(--hg-hl-blue);
    border-color: var(--hg-hl-blue);
}

@media (min-width: 900px) {
    .hg-next-band .hg-scroll-btn {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.16);
        color: var(--hg-hl-text);
        box-shadow: none;
    }

    .hg-next-band .hg-scroll-btn:hover {
        background: var(--hg-blue);
        border-color: var(--hg-blue);
        color: #FFFFFF;
    }
}

/* --------------------------------------------------------------------------
   7. Reduced motion: no drift, no reveal offsets, no typed stagger. The page
   reads as the static editorial front it already is. The engine additionally
   skips Lenis and paints the canvas once.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.hg-js .hg-reveal,
    html.hg-js .hg-reveal[data-drift] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html.hg-js [data-type] .ch {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }

    html.hg-js .hg-next-about [data-intro] {
        opacity: 1;
        transition: none;
    }

    .hg-next-drift,
    .hg-next-divider-line,
    [data-drift] {
        transform: none !important;
        filter: none !important;
    }

    .hg-next-drift img {
        transform: none;
    }

    /* The ring never enters 3D mode here (next.js refuses), so this is just
       belt and braces: the flat strip jumps instead of gliding, and no card
       is left carrying an engine-written transform or dim. */
    .hg-ring-stage {
        scroll-behavior: auto;
    }

    .hg-ring-card {
        transform: none !important;
        opacity: 1 !important;
    }

    .hg-ring-card-scrim {
        opacity: 0 !important;
    }
}