/* ==========================================================================
   GAMING — gaming-division.html (SPEC 5.4), scoped under .page-gaming
   The title card is the timeverse module (css/parts/timeverse.css). This part lays
   out what follows it, in the same deep space:
     01 The division   the statement and the two roles, We develop / We publish,
                       each with a blueprint glyph (the probe, the portal) that draws
                       on reveal; the probe's beam runs on, as a trace, into the portal
     02 Featured game  a closer crop of the key art as a plate (the title lettering
                       and the probe, the part portrait heroes leave out), one line
                       on it, the Steam CTA with the official badge (unaltered)
     Next              Blockchain
   Wide screens (21:9 and up, from 2400px): the two sections lean out of the content
   grid in turn: the roles run to the right edge, the plate bleeds off the left.
   ========================================================================== */

.page-gaming {
    --gaming-ground: #02050D;        /* = the hero's ground, so the title card has no edge */
    --gaming-portal: 46, 107, 255;   /* --accent-2 (Portal Blue) as an rgb list */
    --gaming-stars:
        radial-gradient(circle at 23% 37%, rgba(235, 242, 255, .8) 0 .6px, transparent 1.3px) 0 0 / 97px 89px,
        radial-gradient(circle at 71% 64%, rgba(200, 220, 255, .55) 0 .5px, transparent 1.1px) 0 0 / 131px 113px,
        radial-gradient(circle at 46% 12%, rgba(255, 249, 240, .7) 0 .75px, transparent 1.6px) 0 0 / 173px 151px,
        radial-gradient(circle at 15% 90%, rgba(255, 255, 255, .85) 0 1px, transparent 2.2px) 0 0 / 263px 241px,
        radial-gradient(circle at 62% 28%, rgba(170, 205, 255, .7) 0 .8px, transparent 2px) 0 0 / 389px 331px;
}


/* ---------- Deep space under the content ----------
   Faint stars and the portal's light continue below the title card, fading out
   before the footer so the page still ends on the substrate. It is also the
   container the wide layouts measure. */

/* Page measures for the wide layouts, resolved on each section against .gaming-space
   (registered, so they inherit as lengths: the .wrap grids inside are containers too) */
@property --gaming-inset {   /* the content grid's side margin */
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}
@property --gaming-half {    /* half the page width */
    syntax: '<length>';
    inherits: true;
    initial-value: 0px;
}

.page-gaming .gaming-space {
    --gaming-col-gap: clamp(2rem, 5vw, 6rem);
    position: relative;
    isolation: isolate;
    container: gaming-space / inline-size;
}

.page-gaming .gaming-space > .section {
    --gaming-inset: max(var(--gutter), (100cqw - var(--wrap-max)) / 2);
    --gaming-half: 50cqw;
}

.page-gaming .gaming-space::before,
.page-gaming .gaming-space::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.page-gaming .gaming-space::before {   /* stars: dim, still */
    background: var(--gaming-stars);
    opacity: .32;
    -webkit-mask-image: linear-gradient(#000, #000 60%, transparent);
    mask-image: linear-gradient(#000, #000 60%, transparent);
}

.page-gaming .gaming-space::after {    /* the hero's ground melts into the page */
    --gaming-fade: 0px;
    top: calc(-1 * var(--gaming-fade));
    bottom: auto;
    height: calc(var(--gaming-fade) + min(40rem, 60svh));
    background: linear-gradient(rgba(2, 5, 13, 0), var(--gaming-ground) var(--gaming-fade), rgba(2, 5, 13, 0));
}

/* With the retract running, the stage only reaches this edge as it leaves: the title
   card then fades out over its last few lines instead of ending on a hard edge. (At rest,
   with motion off, the stage sits on this edge, so nothing overlaps it.) */
html.js:not(.motion-off) .page-gaming .gaming-space::after { --gaming-fade: min(7rem, 12svh); }


/* ---------- 01 · The division ---------- */

.page-gaming .gaming-division {
    padding-block: calc(var(--section) * .8) calc(var(--section) * .6);
}

.page-gaming .gaming-division-grid {
    display: grid;
    gap: clamp(2.5rem, 1.5rem + 5vmin, 6.5rem);
}

.page-gaming .gaming-statement {
    display: grid;
    gap: var(--space-m);
    container-type: inline-size;
    min-width: 0;
}

.page-gaming .gaming-statement-title {
    max-width: 26ch;
    font-size: min(var(--t-hero), 11cqi);
    line-height: 1;
    letter-spacing: -.015em;
}

@media (min-width: 768px) and (min-height: 601px) {
    .page-gaming .gaming-statement-title { font-weight: 200; }   /* thin only at display size */
}

.page-gaming .gaming-statement-lede {
    max-width: 42ch;
}

@container (min-width: 60rem) {
    .page-gaming .gaming-statement-lede {   /* editorial offset: the lede answers from the right */
        justify-self: end;
        width: min(42ch, 50%);
    }
}

/* the two roles; the trace bus wraps the list so the router's overlay stays out of it */
.page-gaming .gaming-roles-bus {
    --trace-color: rgba(var(--accent-rgb), .62);
    min-width: 0;
}

.page-gaming .gaming-roles {
    container: gaming-roles / inline-size;
    display: grid;
    gap: clamp(1.25rem, .75rem + 3vmin, 3.5rem);
}

@media (min-width: 600px) {
    .page-gaming .gaming-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599.98px) {
    .page-gaming .gaming-roles-bus > .trace-overlay { display: none; }   /* stacked: no beam through the text */
}

.page-gaming .gaming-role {
    --card-pad: clamp(1.25rem, .9rem + 1.6vmin, 2.5rem);
    gap: 0;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(var(--accent-rgb), .06), transparent 60%),
        linear-gradient(165deg, var(--panel), var(--panel-2));
}

.page-gaming .gaming-glyph {
    align-self: center;
    width: min(100%, 26rem, 52svh);   /* short screens keep the cards low */
    margin-bottom: var(--space-s);
}

.page-gaming .gaming-glyph::before {   /* a patch of blueprint grid under the drawing */
    content: "";
    position: absolute;
    inset: -12% -10%;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(var(--accent-rgb), .07) 1px, transparent 1px) 50% 50% / 1.25rem 1.25rem,
        linear-gradient(90deg, rgba(var(--accent-rgb), .07) 1px, transparent 1px) 50% 50% / 1.25rem 1.25rem;
    -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
    mask-image: radial-gradient(closest-side, #000 35%, transparent);
}

@media (min-width: 600px) {
    .page-gaming .gaming-glyph--probe { align-self: flex-end; }    /* the two drawings face each other */
    .page-gaming .gaming-glyph--portal { align-self: flex-start; }
}

.page-gaming .gaming-glyph svg {
    width: 100%;
    height: auto;
    overflow: visible;
    fill: none;
    stroke: rgba(242, 247, 255, .62);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.page-gaming .gaming-glyph path {
    vector-effect: non-scaling-stroke;
    stroke-width: clamp(1px, .08rem + .05vmin, 2px);
}

.page-gaming .gaming-glyph .gaming-glyph-hot {
    stroke: var(--accent);
    filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .55));
}

.page-gaming .gaming-glyph .gaming-glyph-solid {
    fill: rgba(4, 7, 20, .92);   /* the lamp housing hides the sphere's lines behind it */
}

.page-gaming .gaming-glyph .gaming-glyph-dust {
    stroke-width: clamp(2.5px, .15rem + .1vmin, 4px);
}

.page-gaming .gaming-glyph .gaming-glyph-mark {
    stroke: var(--line-strong);
}

.page-gaming .gaming-role-text {
    display: grid;
    gap: var(--space-xs);
    min-width: 0;
}

.page-gaming .gaming-role .card-kicker {
    color: var(--accent-text);
}

.page-gaming .gaming-role-name {
    font-size: min(var(--t-h2), 12cqi);
    font-weight: 300;
    line-height: 1.05;
}

.page-gaming .gaming-role-text p:last-child {
    max-width: 40ch;
    color: var(--text-2);
}

/* very wide cards: text beside the drawing, mirrored, so both drawings still meet at the gap */
@container gaming-roles (min-width: 115rem) {
    .page-gaming .gaming-role {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
        align-items: end;
        gap: var(--space-xl);
    }

    .page-gaming .gaming-role--publish { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); }
    .page-gaming .gaming-role--develop .gaming-glyph { order: 1; }
    .page-gaming .gaming-glyph { width: min(100%, 40rem); margin: 0; align-self: center; }
    .page-gaming .gaming-glyph--probe { justify-self: end; }
}

/* ultrawide: the statement holds the left, the roles the right */
@media (min-width: 1200px) and (min-aspect-ratio: 21/9) {
    .page-gaming .gaming-division-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: center;
    }

    .page-gaming .gaming-statement-lede {
        justify-self: start;
        width: auto;
    }
}


/* ---------- 02 · Featured game ---------- */

.page-gaming .gaming-feature {
    isolation: isolate;
    padding-top: calc(var(--section) * .5);
}

.page-gaming .gaming-feature::before {   /* light from the portal, behind the plate */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42% 46% at 30% 42%, rgba(var(--gaming-portal), .16), transparent 70%),
        radial-gradient(26% 30% at 38% 46%, rgba(var(--accent-rgb), .07), transparent 70%);
}

.page-gaming .gaming-feature-grid {
    display: grid;
    grid-template-areas: "head" "plate" "body";
    gap: clamp(1.5rem, 1rem + 3vmin, 4rem) var(--gaming-col-gap);
}

.page-gaming .gaming-feature-head,
.page-gaming .gaming-feature-body {
    display: grid;
    gap: var(--space-m);
    justify-items: start;
    align-content: start;
    container-type: inline-size;
    min-width: 0;
}

.page-gaming .gaming-feature-head { grid-area: head; }
.page-gaming .gaming-feature-body { grid-area: body; }

/* The plate frames the left of the art (its title lettering and the probe) at 16:10;
   the hero has just shown the whole frame. */
.page-gaming .gaming-plate {
    --plate-ratio: 16 / 10;
    --plate-focus: 0% 45%;
    --plate-max: calc(72svh * 1.6);
    grid-area: plate;
    justify-self: start;
    width: calc(100% - 2 * var(--tick-gap));
}

.page-gaming .gaming-plate .plate-frame {
    transition: box-shadow var(--dur-3) var(--ease-out);
}

.page-gaming .gaming-plate:hover .plate-frame {
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45), 0 30px 90px -40px rgba(var(--gaming-portal), .6);
}

.page-gaming .gaming-feature-title {
    font-size: min(var(--t-h1), 12cqi);
    line-height: 1;
}

.page-gaming .gaming-logline {
    font-size: var(--t-lead);
    line-height: 1.5;
    color: var(--text-2);
    max-width: 30ch;
}

/* Steam CTA: one link holding the label and the official badge (unaltered) */
.page-gaming .gaming-steam {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs) var(--space-m);
    max-width: 100%;
    margin-top: var(--space-2xs);
    padding: .5rem 1.4rem .5rem .5rem;
    border-radius: var(--r-md);
    color: var(--plasma);
    font-weight: 500;
    background: rgba(var(--accent-rgb), .05);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    transition: background-color var(--dur-2), box-shadow var(--dur-2);
}

.page-gaming .gaming-steam::before {   /* the running border current, as on .btn */
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--angle), transparent 0 62%, rgba(var(--accent-rgb), .2) 72%, var(--accent) 86%, #fff 88%, transparent 92%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity var(--dur-2);
    animation: btn-current 2.2s linear infinite paused;
    pointer-events: none;
}

.page-gaming .gaming-steam:hover {
    background: rgba(var(--accent-rgb), .1);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45), var(--glow-soft);
}

.page-gaming .gaming-steam:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .45), var(--focus-halo);
}

.page-gaming .gaming-steam:hover::before,
.page-gaming .gaming-steam:focus-visible::before {
    opacity: 1;
    animation-play-state: running;
}

.page-gaming .gaming-steam-badge {
    flex: none;
    width: auto;
    height: clamp(2.75rem, 2.25rem + 1vmin, 3.75rem);
    border-radius: 6px;
}

.page-gaming .gaming-steam-label {
    min-width: 0;
    font-size: 1rem;
    line-height: 1.3;
}

.page-gaming .gaming-nowrap { white-space: nowrap; }   /* the arrow, and "opens in a new tab", never wrap alone */

/* narrow phones: the badge over the label */
@media (max-aspect-ratio: 5/4) {
    @container (max-width: 19.99rem) {
        .page-gaming .gaming-steam {
            flex-direction: column;
            align-items: flex-start;
            padding: .5rem .5rem .85rem;
        }

        .page-gaming .gaming-steam-label { padding-inline: .5rem; }
    }
}

.page-gaming .gaming-steam-hint {
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--text-3);
}

/* portrait and square, from tablet width: the line on the left, the CTA under the plate's right edge */
@media (min-width: 640px) and (max-aspect-ratio: 5/4) {
    .page-gaming .gaming-feature-body {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: var(--gaming-col-gap);
        padding-right: var(--tick-gap);
    }

    .page-gaming .gaming-logline { grid-row: span 2; }
    .page-gaming .gaming-steam { margin-top: 0; }
    .page-gaming .gaming-steam,
    .page-gaming .gaming-steam-hint { justify-self: end; }
}

/* landscape: the plate | the head over the body */
@media (min-width: 768px) and (min-aspect-ratio: 5/4) {
    .page-gaming .gaming-feature-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-rows: auto auto;   /* head and body meet at the plate's middle */
        grid-template-areas: "plate head" "plate body";
        row-gap: var(--space-l);
    }

    .page-gaming .gaming-plate { align-self: center; }
    .page-gaming .gaming-feature-head { align-self: end; }
    .page-gaming .gaming-feature-body { align-self: start; }
}

/* short landscape (phones on their side, low windows): two columns, so the plate and the
   CTA share the screen and the CTA keeps its row */
@media (min-width: 560px) and (max-height: 600px) and (min-aspect-ratio: 5/4) {
    .page-gaming .gaming-feature-grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        grid-template-rows: auto auto;
        grid-template-areas: "plate head" "plate body";
        row-gap: var(--space-m);
    }

    .page-gaming .gaming-plate { --plate-max: calc(70svh * 1.6); align-self: center; }
    .page-gaming .gaming-feature-head { align-self: end; gap: var(--space-xs); }
    .page-gaming .gaming-feature-body { align-self: start; gap: var(--space-s); }
    .page-gaming .gaming-steam-badge { height: 2.25rem; }
    .page-gaming .gaming-steam { column-gap: var(--space-s); padding-right: 1rem; }
}

@media (min-width: 1024px) and (min-aspect-ratio: 21/9) {
    .page-gaming .gaming-feature-grid {   /* ultrawide: the extra width goes to the picture */
        grid-template-columns: minmax(0, 1fr) minmax(0, 36rem);
    }
}

/* Wide screens: the sections lean out of the content grid in turn. 01: the statement
   keeps the grid's left half, the roles run on to the right edge. 02: the plate bleeds
   off the left edge to the centre line, the copy keeps the grid's right half. */
@media (min-width: 2400px) and (min-aspect-ratio: 21/9) {
    .page-gaming .gaming-division-grid {
        width: auto;
        margin-inline: var(--gaming-inset) var(--gutter);
        grid-template-columns: calc(var(--gaming-half) - var(--gaming-inset) - var(--gaming-col-gap) / 2) minmax(0, 1fr);
        column-gap: var(--gaming-col-gap);
    }

    .page-gaming .gaming-feature-grid {
        width: auto;
        margin-inline: 0 var(--gaming-inset);
        grid-template-columns: calc(var(--gaming-half) - var(--gaming-col-gap) / 2) minmax(0, 1fr);
    }

    .page-gaming .gaming-plate {
        max-width: none;
        width: calc(100% + 6px - var(--tick-gap));
        margin-left: -6px;   /* the frame's edge and ticks go off-screen: a true bleed */
    }

    .page-gaming .gaming-plate .plate-frame img {
        aspect-ratio: auto;
        height: min(68svh, (var(--gaming-half) - var(--gaming-col-gap) / 2) / 1.6);
    }

    .page-gaming .gaming-plate .plate-caption { padding-left: calc(var(--gaming-inset) + 6px); }
}

/* Next */
.page-gaming .gaming-next {
    display: flex;
    justify-content: flex-end;
    margin-top: clamp(4rem, 11vmin, 10rem);
    padding-top: clamp(2rem, 5vmin, 4rem);
    border-top: 1px solid var(--line);
}

@media (max-aspect-ratio: 5/4) {
    .page-gaming .gaming-next { margin-top: clamp(3rem, 7vmin, 6rem); }
}

@media (max-width: 479.98px) {
    .page-gaming .gaming-next { justify-content: flex-start; }
}


/* ---------- Modes ---------- */


@media (forced-colors: active) {
    .page-gaming .gaming-space::before,
    .page-gaming .gaming-space::after,
    .page-gaming .gaming-feature::before,
    .page-gaming .gaming-steam::before { display: none; }
    .page-gaming .gaming-glyph::before { display: none; }
    .page-gaming .gaming-glyph svg { stroke: CanvasText; }
    .page-gaming .gaming-glyph .gaming-glyph-hot { stroke: Highlight; filter: none; }
    .page-gaming .gaming-glyph .gaming-glyph-solid { fill: Canvas; }
    .page-gaming .gaming-glyph .gaming-glyph-mark { stroke: GrayText; }
    .page-gaming .gaming-steam { border: 1px solid LinkText; }
}

@media (prefers-contrast: more) {
    .page-gaming .gaming-space::before { opacity: .15; }
    .page-gaming .gaming-glyph .gaming-glyph-hot { filter: none; }
}

@media print {
    .page-gaming .gaming-space::before,
    .page-gaming .gaming-space::after,
    .page-gaming .gaming-feature::before { display: none; }
}