/* Nintendo Switch landing page (/nintendo-switch). Scoped to .nsw, layered on pc_games.css.

   Three things live here and nowhere else:
     1. the palette and the two full-bleed colour bands
     2. the section heading scale - the thing that makes the page read as a page
     3. the character layer (.nsw-stage / .nsw-sticker)

   Logical properties throughout, so anchors mirror under dir="rtl"; nintendo-switch.rtl.css
   holds the entrance transforms, which are physical directions and cannot mirror themselves. */

.pcg.nsw {
    --pcg-bg: #14161c;
    --pcg-surface: #1c1f27;
    --pcg-surface-2: #1c1f27;
    --pcg-deep: #0d0d0f;
    --pcg-border: #2a2e38;
    --pcg-text: #f3f1ec;
    --pcg-muted: #9a958c;
    --pcg-brand: #e60012;
    --pcg-brand-light: #ff3c28;
    --pcg-on-brand: #ffffff;
    --pcg-focus: #00c3e3;

    --nsw-bg: #14161c;
    --nsw-surface: #1c1f27;
    --nsw-deep: #0d0d0f;
    --nsw-red: #e60012;
    --nsw-blue: #00c3e3;
    --nsw-yellow: #ffe600;
    --nsw-text: #f3f1ec;
    --nsw-muted: #9a958c;
}

/* ---------- Accent ---------- */

.nsw .pcg-btn {
    background: var(--nsw-red);
    border-color: var(--nsw-red);
    color: #fff !important;
}

.nsw .pcg-btn:hover {
    background: var(--nsw-yellow);
    border-color: var(--nsw-yellow);
    color: #14161c !important;
}

.nsw .pcg-btn--ghost {
    background: transparent;
    color: var(--nsw-text) !important;
    border-color: var(--pcg-border);
}

.nsw .pcg-badge--platform { background: var(--nsw-red); color: #fff; letter-spacing: .06em; }
.nsw .pcg-badge--discount { background: var(--nsw-yellow); color: #14161c; }

.nsw .pcg-breadcrumb,
.nsw .pcg-breadcrumb a { color: var(--nsw-muted); }
.nsw .pcg-breadcrumb a:hover { color: var(--nsw-yellow); }
.nsw .pcg-head__lead { color: var(--nsw-muted); }

/* The site-wide sheet carries a bare `p { color: #d5d5d5 }`, and a type selector beats
   inheritance - so a band that sets its own text colour is overruled in its paragraphs unless
   they are handed back to it. */
.nsw p { color: inherit; }

/* ---------- Section headings ----------
   Every theme names its section heading differently and none of them are sized for a page that
   has to carry itself on six words. One scale, stated once, across all of them. */

.nsw .theme_1 .card__header h2,
.nsw .theme_default_container .card__header h2,
.nsw .theme_8_head h2,
.nsw .theme_9_head h2,
.nsw .theme_3 .hero h2,
.nsw .theme_10_body h2,
.nsw-stage h2:not(.pcg-sr) {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    /* 1.12 rather than 1.05, plus the padding: at this size a tight line-height puts the tail of
       a g or a ج outside whatever box the heading sits in, and it gets clipped. */
    line-height: 1.12;
    padding-block-end: 0.08em;
    overflow: visible;
    text-transform: none;
    margin-block-end: 10px;
    max-width: 18ch;
}

/* The subtitle is the counterweight: small, quiet, one line where it can be. */
.nsw .theme_1 .section-sub,
.nsw .theme_1 .card__header p,
.nsw .theme_default_container .card__header p,
.nsw .theme_8_head p,
.nsw .theme_9_head p {
    font-size: 15px;
    color: var(--nsw-muted);
    opacity: 1;
    max-width: 52ch;
}

/* The comparison and the spotlight centre their heading block, so the measure has to release. */
.nsw .theme_8_head h2,
.nsw .theme_9_head h2 { max-width: none; }

/* The subtitle rule above gives every section subtitle a 52ch measure. Under a centred heading
   that measure is a box pinned to the start edge, so "No other machine plays these." was
   centred inside a box sitting at the far left - which reads as left-aligned. The box has to be
   centred too, not just the text inside it. */
.nsw .theme_8_head p {
    text-align: center !important;
    margin-inline: auto;
    max-width: 60ch;
}

/* ---------- Card text ----------
   custom.css lands after the theme sheet with `.theme_default a.slide_product_title { #fff }`
   and `.theme_default .product__price { #ffdc11 }`, which also match inside theme 1. Both are
   close enough to this palette to pass unnoticed and wrong enough to drift, so the bands' own
   values are restated at a specificity those rules cannot reach. */

.nsw .theme_default a.slide_product_title,
.nsw .theme_1 a.slide_product_title,
.nsw .theme_default .slide_product_title { color: var(--products-text, var(--nsw-text)); }

.nsw .theme_default a.slide_product_title:hover,
.nsw .theme_1 a.slide_product_title:hover { color: var(--nsw-yellow); }

.nsw .theme_default .product__price,
.nsw .theme_default .product__price .int_price,
.nsw .theme_default .product__price .float_price,
.nsw .theme_default .product__price .price_currency { color: var(--price, #ffffff); }

.nsw .on-sale-product .product__price,
.nsw .on-sale-product .product__price .int_price,
.nsw .on-sale-product .product__price .float_price,
.nsw .on-sale-product .product__price .price_currency { color: var(--offprice, var(--nsw-yellow)); }

.nsw .price_before .old_price,
.nsw .price_before .old_price small,
.nsw .theme_default .old_price { color: var(--nsw-muted); }

/* Theme 0 reads none of the colour parameters - its cards are the site-wide ones - so the two
   theme 0 bands are dressed here instead. */

.nsw .theme_default_container .card,
.nsw .theme_default_container .card .card__header { color: var(--nsw-text); }

.nsw .theme_default_container .swiper-slide.card {
    background-color: var(--nsw-surface) !important;
    border: 1px solid var(--pcg-border);
    border-radius: var(--pcg-radius);
    overflow: hidden;
}

.nsw .theme_default_container .image_container { background: var(--nsw-deep); }

/* The fixed card image box that used to live here is now in pc_games.css, applied to all four
   landing pages - the overflowing art and the uneven card heights were not unique to this one. */
.nsw .theme_default_container .slider_footer { padding: 10px 12px 12px; }
.nsw .theme_default_container .product__category a,
.nsw .theme_default_container .product__category { color: var(--nsw-muted); }
.nsw .theme_default_container .percentage_off { color: #14161c; background-color: var(--nsw-yellow); }

/* The second theme 0 band (eShop and digital) is the raised surface, so the two do not run
   together. A general sibling combinator rather than an adjacent one: theme 0 emits its own
   <style> block ahead of the band, so the two containers are never adjacent. */
.nsw .theme_default_container ~ .theme_default_container {
    background: var(--nsw-surface);
    border-radius: var(--pcg-radius);
    padding-block: 4px 12px;
}

/* ---------- The two full-bleed colour bands ----------
   Flat saturated colour with hard edges. The themes paint themselves from their gradient, which
   the view sets to one colour at both ends; these rules are what take the band out to the edge
   of the window and stop anything softening the join. */

.nsw .theme_10,
.nsw .theme_8 {
    border-radius: 0;
    margin-inline: calc(50% - 50vw);
    padding-inline: max(16px, calc(50vw - 50%));
    clip-path: none !important; /* the diagonal edge is a gradient into the neighbour by another name */
}

/* Theme 8's backdrop is the top product's key art, blurred behind the band. On a flat colour
   field it is exactly the gradient this page is not supposed to have. */
.nsw .theme_8_backdrop { display: none; }
.nsw .theme_8.has-backdrop::before { background: none; }

/* ---------- Section header above the rail ----------
   The heading block and the swiper were overlapping - the rail was being pulled up over the
   heading, so the art sat on top of the words. The header gets its own row, stays in flow, and
   the track starts below it. */

.nsw .theme_1 .card__header,
.nsw .theme_default_container .card__header {
    position: static;
    z-index: auto;
    margin-block-end: 14px;
}

.nsw .theme_1 .card__content,
.nsw .theme_default_container .card__content {
    margin-block-start: 0;
}

/* ---------- Promo bar sweep ----------
   The same slow highlight the red showcase band uses, on the two promo bars that carry an offer
   worth reading: "Pre-order" and "Switch 2 exclusives". Both of those bands are direct children
   of the container; the party and pre-owned bars sit inside a .nsw-stage and are deliberately
   left alone, so the movement on the page stays rationed. */

.nsw > .container > .theme_1 .promo-bar {
    position: relative;
    overflow: hidden;
}

.nsw > .container > .theme_1 .promo-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .18) 48%, transparent 66%);
    transform: translateX(-100%);
    animation: nsw-sweep 3.6s ease-in-out infinite;
}

@keyframes nsw-sweep {
    to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .nsw > .container > .theme_1 .promo-bar::after { animation: none; }
}

/* ---------- The character layer ---------- */

/* The wrapper's only job is to give the cutouts something to be absolute against. */
.nsw-stage { position: relative; }

.nsw-sticker {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    height: auto;
    will-change: transform, opacity;
    /* Slow enough to be watched, with an easing that overshoots slightly and settles. */
    transition: opacity .6s ease, transform 1.1s cubic-bezier(.16, .84, .30, 1);

    /* Out in the page gutter where there is one. On this site there very nearly is not: the
       container is fluid, not a centred 1320px column, and it leaves about 45px either side at
       any window width - so in practice this resolves to the max() floor and the cutout stands
       at the edge of the column. That is why each one is placed against a band with vertical
       room to spare, and why the one dense rail below is given a strip of its own. */
    inset-inline-start: max(8px, calc((100% - var(--nsw-container, 1320px)) / 2 - 150px));
}

/* Far enough to be seen, and tilted, so the eye reads it as a character walking in rather than
   as a picture fading up. People shown the page did not notice 60px over .6s at all. */
.nsw-sticker--above { transform: translateY(-160px) rotate(-8deg); }
.nsw-sticker--below { transform: translateY(160px) rotate(8deg); }
.nsw-sticker--side-start { transform: translateX(-160px) rotate(-8deg); }
.nsw-sticker--side-end { transform: translateX(160px) rotate(8deg); }

/* The float is delayed by the length of the entrance transition. Without the delay the
   animation owns `transform` from the first frame and the slide-in never renders. */
.nsw-sticker.is-in {
    opacity: 1;
    transform: none;
    animation: nsw-float 3.5s ease-in-out 1.1s infinite alternate;
}

@keyframes nsw-float {
    from { transform: translateY(0) rotate(-2deg); }
    to { transform: translateY(-12px) rotate(2deg); }
}

/* Placement. Width only - the art is trimmed to the silhouette - and a vertical anchor that
   keeps each one in its band's own padding rather than up against the rail. */

.nsw-sticker--mario {
    width: 200px;
    inset-block-end: 12%;
}

.nsw-sticker--donkey-kong {
    width: 190px;
    inset-block-end: 0;
    inset-inline-start: auto;
    inset-inline-end: max(8px, calc((100% - var(--nsw-container, 1320px)) / 2 - 150px));
}

/* Luigi's band is a twelve-card rail with 20px under it - the only one of the three with no
   room at its foot. He is the smallest of the three and his band gives up a strip, so he stands
   below the cards instead of across their prices. */
.nsw-sticker--kirby {
    width: 140px;
    inset-block-end: 0;
}

/* ---------- The coin ----------
   The one small mark left. The star, the mushroom and Yoshi went: three placements that read as
   deliberate beat six that read as clip art dropped wherever there was room.

   It sits level with the section heading rather than beside the card row, so it reads as part of
   the band's title line instead of as something floating next to the products. */

.nsw-deco {
    position: absolute;
    z-index: 2;
    width: 52px;
    height: auto;
    pointer-events: none;
    opacity: .85;
    will-change: transform;
}

.nsw-deco--coin {
    inset-block-start: 6px;
    inset-inline-end: max(8px, calc((100% - var(--nsw-container, 1320px)) / 2 - 150px));
    /* One keyframe does the drift and the turn together: two animations would both be writing
       `transform` and the second would simply win. */
    animation: nsw-coin 12s linear infinite;
}

@keyframes nsw-coin {
    0% { transform: translateY(0) rotateY(0); }
    25% { transform: translateY(-10px) rotateY(90deg); }
    50% { transform: translateY(0) rotateY(180deg); }
    75% { transform: translateY(-10px) rotateY(270deg); }
    100% { transform: translateY(0) rotateY(360deg); }
}

.nsw-sticker--luigi {
    width: auto;
    max-width: 120px;
    /* Capped by height as well as width: the art is not on disk and its aspect ratio is not
       something this sheet can know, so the height cap is what actually holds him inside the
       strip whatever shape the PNG turns out to be. */
    max-height: 175px;
    inset-block-end: 0;
}

@media (min-width: 1200px) {
    .nsw-stage--luigi > .theme_1 { padding-block-end: 180px; }
}

@media (prefers-reduced-motion: reduce) {
    .nsw-sticker {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .nsw-sticker.is-in { animation: none; }
    .nsw-deco,
    .nsw-deco--coin { animation: none; }
}

/* Below 1200px there is no gutter at all and nowhere to stand that is not on top of a card.
   The characters are a desktop flourish; on a phone they are noise. */
@media (max-width: 1199.98px) {
    .nsw-sticker,
    .nsw-deco { display: none; }
}

/* ---------- Hero ---------- */

/* The slide description sat in near-black over dark key art and could not be read. The text
   block gets a scrim of its own, running from the reading edge outwards; nintendo-switch.rtl.css
   turns the gradient round, because an angle is a physical direction. */
.nsw .pcg-hero__text {
    background: linear-gradient(90deg, rgba(20, 22, 28, .92) 0%, rgba(20, 22, 28, .65) 45%, transparent 75%);
    padding-inline: 18px 24px;
    padding-block: 14px;
    margin-inline-start: -18px;
    border-radius: 8px;
}

.nsw .pcg-hero__desc {
    color: #f3f1ec;
    opacity: .85;
}

.nsw .pcg-hero__publisher { color: var(--nsw-muted); }

@media (min-width: 768px) {
    .nsw .pcg-hero__body {
        flex-direction: row-reverse; /* mirrors on its own under dir="rtl" */
        justify-content: space-between;
        gap: clamp(20px, 4vw, 56px);
    }

    .nsw .pcg-hero__text { flex: 1 1 auto; max-width: 58ch; }
    .nsw .pcg-hero__cover { width: 230px; align-self: flex-end; }
    .nsw .pcg-hero__desc { max-width: none; }
}

@media (min-width: 1200px) {
    .nsw .pcg-hero__cover { width: 300px; }
}

/* ---------- Written-out comparison (theme 9, static columns) ----------
   Console renders on a transparent panel, short titles, eight rows: the product-driven layout's
   tall image well and three-line title slot are wrong for hardware. */

.theme_9--static .theme_9_card { grid-template-rows: auto auto 1fr; }
.theme_9--static .theme_9_media { background: transparent; }

    .theme_9--static .theme_9_media img {
        display: block;
        width: 100%;
        height: 150px;
        object-fit: contain;
        padding: 4px;
    }

.theme_9--static .theme_9_title {
    min-height: 0;
    text-align: center;
    font-size: 17px;
}

.theme_9--static .theme_9_spec { min-height: 40px; }

    .theme_9--static .theme_9_spec dd {
        font-weight: 600;
        font-size: 12.5px;
    }

@media (min-width: 768px) {
    .theme_9--static .theme_9_media img { height: 190px; }
}

.nsw .theme_9_title,
.nsw .theme_9_title a { color: var(--card-text, var(--nsw-text)); }

/* ---------- Closing copy ---------- */

.nsw-about {
    position: relative;
    background: var(--nsw-surface);
    border: 1px solid var(--pcg-border);
    color: #d9d5cd;
}

.nsw-about h2 {
    color: var(--nsw-text);
    border-inline-start: 4px solid var(--nsw-red);
    padding-inline-start: 10px;
}

.nsw-about p {
    max-width: 72ch;
    font-size: 15px;
    line-height: 1.7;
}

.nsw-about p:last-child { margin-bottom: 0; }

/* ---------- One spacing scale ----------
   Every band is a direct child of the container (or of a .nsw-stage that is), so the gap between
   them is set in one place instead of depending on whichever theme happens to sit there. */

.pcg.nsw { --nsw-band-gap: 26px; }

@media (min-width: 768px) {
    .pcg.nsw { --nsw-band-gap: 40px; }
}

.nsw > .container > * { margin-block: 0; }
.nsw > .container > *:not(style):not(script) { margin-block-start: var(--nsw-band-gap); }
.nsw > .container > *:first-child { margin-block-start: 0; }

/* theme 1 sets margin:0 !important in the shared theme sheet, so the page scale has to say it
   louder for a theme 1 band that is a direct child. */
.nsw > .container > .theme_1 { margin-block-start: var(--nsw-band-gap) !important; }
.nsw > .container > .theme_1:first-child { margin-block-start: 0 !important; }
.nsw-stage > *:not(.nsw-sticker) { margin-block: 0 !important; }

/* With one gap between every band, the section separators are a second, competing rhythm. */
.pcg.nsw .pcg-hr { display: none; }

/* The floating chat button and the back-to-top button sit over the bottom-inline corner, so the
   last band needs room under it or they land on a card. */
.pcg.nsw { padding-block-end: 96px; }

/* ---------- Mobile ---------- */

@media (max-width: 767.98px) {
    .nsw > .container { padding-inline: 16px; }

    .nsw .pcg-head__title {
        font-size: clamp(1.15rem, .85rem + 1.7vw, 1.5rem);
        line-height: 1.25;
        margin-bottom: 6px;
    }

    .nsw .pcg-head__lead { font-size: 14px; margin-bottom: 0; }

    .nsw .pcg-hero__body { gap: 16px; padding: 20px 18px 24px; }
    .nsw .pcg-hero__badges { margin-block-end: 12px; gap: 8px; }
    .nsw .pcg-hero__title { margin-block-end: 10px; line-height: 1.25; }
    .nsw .pcg-hero__publisher { margin-block-end: 10px; }
    .nsw .pcg-hero__desc { margin-block-end: 16px; line-height: 1.55; }

    .nsw .pcg-hero__buy { gap: 12px; width: 100%; justify-content: center; }
    .nsw .pcg-hero__buy .pcg-btn { flex: 1 1 auto; min-width: 160px; }
    .nsw .pcg-hero__controls { margin-block-start: 14px; }

    .nsw-about p { font-size: 14.5px; }
}


/* ---------- Pre-order cards: the PS5 badge, in Nintendo red ----------
   Replaces the bare, oversized "Pre-Order" that stood where the price would be. Same markup and
   sweep as /playstation-5 (list_product_themes.css), recoloured; the shorter wording and the
   "Cancel anytime" line under it are switched on here only. */
.nsw .theme_1 .preorder_badge { background: #e60012; color: #fff; margin-block-end: 3px; }
.nsw .theme_1 .preorder_badge::after {
    background: linear-gradient(100deg, transparent 32%, rgba(255,255,255,.4) 50%, transparent 68%);
}
.nsw .theme_1 .preorder_badge__text { display: none; }
.nsw .theme_1 .preorder_badge__text--short { display: inline; }
.nsw .theme_1 .preorder_badge_note {
    display: block; margin: 0 0 8px; font-size: 12px; line-height: 1.3; opacity: .62;
}
/* Said once, under the badge - not again in the release line. */
.nsw .theme_1 .preorder_meta .preorder_free { display: none; }

@media (prefers-reduced-motion: reduce) {
    .nsw .theme_1 .preorder_badge::after { animation: none; }
}

/* ---------- Phones: the characters come back, small, on the heading line ----------
   Hidden below 1200px because there is no gutter to stand in. On a phone each one stands at the
   inline-end of its section's heading row instead, 68px wide, and the heading (and the line
   under it) gives up 80px on that side so no text ever runs underneath. The entrance, the float
   and the reduced-motion block above are unchanged. The offsets are each heading's distance
   from the top of its .nsw-stage. */
@media (max-width: 575.98px) {
    .site-content.nsw .nsw-sticker,
    .site-content.nsw .nsw-deco { display: block; }

    .site-content.nsw .nsw-sticker {
        width: 68px; max-width: 68px; height: auto; max-height: 72px; object-fit: contain;
        inset-inline-start: auto; inset-inline-end: 0; inset-block-end: auto;
    }
    .site-content.nsw .nsw-deco--coin {
        width: 36px; inset-inline-start: auto; inset-inline-end: 16px; inset-block-end: auto;
    }

    .site-content.nsw .nsw-stage--switch2 .nsw-sticker--donkey-kong { inset-block-start: 38px; }
    .site-content.nsw .nsw-stage--mario .nsw-sticker--mario { inset-block-start: 26px; }
    .site-content.nsw .nsw-stage--luigi .nsw-sticker--luigi { inset-block-start: 104px; }
    .site-content.nsw .nsw-stage--preowned .nsw-sticker--kirby { inset-block-start: 50px; }
    .site-content.nsw .nsw-stage--eshop .nsw-deco--coin { inset-block-start: 16px; }

    .site-content.nsw .nsw-stage--switch2 .theme_10_body h2,
    .site-content.nsw .nsw-stage--switch2 .theme_10_copy,
    .site-content.nsw .nsw-stage--luigi .card__header h2,
    .site-content.nsw .nsw-stage--luigi .section-sub,
    .site-content.nsw .nsw-stage--preowned .theme_3 .hero h2,
    .site-content.nsw .nsw-stage--preowned .theme_3 .hero h2 + p,
    .site-content.nsw .nsw-stage--eshop .card__header h2,
    .site-content.nsw .nsw-stage--eshop .card__header h2 + p { padding-inline-end: 80px; }
    /* Theme 8's heading is centred, so it gives up the room on both sides to stay centred. */
    .site-content.nsw .nsw-stage--mario .theme_8_head h2,
    .site-content.nsw .nsw-stage--mario .theme_8_head p { padding-inline: 80px; }
}