/*
 * Noir's skin: a gold wave under the hero, a gold band of pill tiles, filled
 * number circles. Visitors only; style only (docs/design/16-panel-skins.md).
 * Every colour is a token, so light and dark follow the preset.
 */

/* Bands drawn past the column must never scroll the page sideways. */
html[data-theme="noir"] body.shop:not([data-signed-in]) { overflow-x: clip; }

/* The hero band: the card colour fading into the page, lit from the right. */
html[data-theme="noir"] body.shop:not([data-signed-in]) .hero-row,
html[data-theme="noir"] body.shop:not([data-signed-in]) .section:has(.auth-card) {
    position: relative; isolation: isolate;
    padding-block-end: calc(var(--space-8) + var(--space-7));
}
html[data-theme="noir"] body.shop:not([data-signed-in]) .hero-row:not([data-pe-hidden="1"])::before,
html[data-theme="noir"] body.shop:not([data-signed-in]) .section:has(.auth-card)::before {
    content: ""; position: absolute; z-index: -2; left: 50%; width: 100vw; translate: -50% 0;
    top: calc(-2 * var(--space-8)); bottom: 0;
    background:
        radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
        linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}

/* Two waves: a soft one behind, the solid gold in front. */
html[data-theme="noir"] body.shop:not([data-signed-in]) .hero-row:not([data-pe-hidden="1"])::after,
html[data-theme="noir"] body.shop:not([data-signed-in]) .section:has(.auth-card)::after {
    content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; translate: -50% 0;
    bottom: 0; height: clamp(3.5rem, 7vw, 6rem);
    background:
        linear-gradient(var(--primary), var(--primary)) bottom / 100% 55% no-repeat,
        linear-gradient(color-mix(in srgb, var(--primary) 35%, transparent), color-mix(in srgb, var(--primary) 35%, transparent));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C240 120 480 10 720 46 C960 82 1200 120 1440 60 V120 H0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 70 C240 120 480 10 720 46 C960 82 1200 120 1440 60 V120 H0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* The sign-in card floats over the band. */
html[data-theme="noir"] body.shop:not([data-signed-in]) .home-signin,
html[data-theme="noir"] body.shop:not([data-signed-in]) .auth-card {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    box-shadow: 0 1.5rem 3.5rem -1rem rgba(0, 0, 0, .45);
}

/* The band is the section's own background, run out to both edges by a
   shadow, which never scrolls the page, so a contrast check sees it. */
html[data-theme="noir"] body.shop:not([data-signed-in]) .section:has(.platform-tiles) {
    padding-block: var(--space-7); background: var(--primary);
    box-shadow: 0 0 0 100vmax var(--primary); clip-path: inset(0 -100vmax);
}
html[data-theme="noir"] body.shop:not([data-signed-in]) .section:has(.platform-tiles) :is(h2, p, .muted) { color: var(--primary-contrast); }
html[data-theme="noir"] body.shop:not([data-signed-in]) .platform-tile {
    border-radius: 999px; border-color: transparent; background: var(--surface); color: var(--text);
    box-shadow: 0 .4rem 1rem -.5rem rgba(0, 0, 0, .35);
}
/* The global focus ring is the primary colour, which is the band: ring the
   tile in its own ink instead, so a keyboard user sees where they are. */
html[data-theme="noir"] body.shop:not([data-signed-in]) .platform-tile:focus-visible {
    outline: 2px solid var(--primary-contrast); outline-offset: 2px;
}

/* How it works: filled number circles with a halo. */
html[data-theme="noir"] body.shop:not([data-signed-in]) .step-icon {
    background: var(--primary); color: var(--primary-contrast);
    box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--primary) 18%, transparent);
}