/* ==========================================================================
   Gradyent website -- coming-soon landing page
   Layout follows Design-references/Gradyent Cardstand Coming Soon.png;
   typography is the approved "Option A -- Archivo Expanded" direction
   (Design-references/Typography-Comparisons/).
   Fonts are self-hosted (SIL Open Font License, see assets/fonts/OFL-*.txt)
   so the Content-Security-Policy in _headers can stay same-origin only.
   ========================================================================== */

/* Archivo variable font: weight 100-900, width 62-125%. One file covers
   every weight and width used on the site. */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url("/assets/fonts/archivo-latin-standard-normal.woff2") format("woff2");
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
    /* Brand palette */
    --brand-orange: #FF6B24;
    --brand-orange-deep: #CE4E13;
    --brand-charcoal: #2B2B2E;
    --brand-black: #111214;
    --brand-white: #FFFFFF;

    --text: #F2F2F3;
    --text-soft: #ABABB3;

    --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Master scale: the G logo's width. Everything in the composition is
       derived from it, so the page scales like the concept poster. It follows
       viewport HEIGHT on desktop (so the whole page fits on screen) and is
       capped by viewport WIDTH on phones. */
    --g: clamp(88px, min(16.5vh, 32vw), 205px);
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--brand-black);
    /* Faint warm light behind the logo, as in the concept. */
    background-image: radial-gradient(ellipse 60% 420px at 50% 0, rgba(255, 107, 36, 0.07), transparent 70%);
    background-repeat: no-repeat;
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

p,
h1 {
    margin: 0;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--brand-orange);
    outline-offset: 4px;
    border-radius: 4px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Landing column -- one centred stack, vertically centred in the viewport
   ========================================================================== */

.landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(16px, 3vh, 40px) 16px;
    text-align: center;
    /* Keeps the oversized product glow from causing horizontal or vertical
       scroll; the glow is near-transparent where it meets the page edge. */
    overflow: clip;
}

/* --- Brand block -------------------------------------------------------- */

.brand-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.brand-g {
    width: var(--g);
    height: auto;
    /* Optical centring: the charcoal rear layer nearly disappears on the dark
       background, so the visible mass of the mark sits right of its bounding
       box. Nudge it left slightly; the SVG artwork itself is untouched. */
    transform: translateX(-3%);
    /* Soft orange halo around the official mark. */
    filter: drop-shadow(0 0 calc(var(--g) * 0.18) rgba(255, 107, 36, 0.22));
}

.wordmark {
    margin-top: calc(var(--g) * 0.12);
    font-weight: 700;
    font-stretch: 125%;
    font-size: calc(var(--g) * 0.245);
    line-height: 1;
    letter-spacing: 0.06em;
    /* letter-spacing adds trailing space after the last letter; pull it back
       so the word stays optically centred. Same pattern on all tracked text. */
    margin-right: -0.06em;
    white-space: nowrap;
    /* Very subtle top-to-bottom sheen, echoing the concept's brushed wordmark. */
    color: var(--brand-white);
    background: linear-gradient(180deg, #FFFFFF 40%, #D4D4D8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Thin orange rule: brightest at the centre, fading out to both ends. */
.divider {
    position: relative;
    width: min(calc(var(--g) * 2.9), 92vw);
    height: 2px;
    margin-top: calc(var(--g) * 0.16);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(206, 78, 19, 0.45) 22%,
        var(--brand-orange) 50%,
        rgba(206, 78, 19, 0.45) 78%,
        transparent 100%);
}

.divider::after {
    content: "";
    position: absolute;
    inset: -3px 20%;
    background: radial-gradient(closest-side, rgba(255, 107, 36, 0.55), transparent);
    filter: blur(4px);
}

/* --- Product intro ------------------------------------------------------ */

.intro {
    /* Above the product's light layers, which spread up behind this text. */
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(var(--g) * 0.2);
}

.product-name {
    font-weight: 250;
    font-stretch: 125%;
    font-size: calc(var(--g) * 0.215);
    line-height: 1;
    letter-spacing: 0.3em;
    margin-right: -0.3em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--brand-white);
}

.product-name::first-letter {
    font-size: 1.14em;
}

.product-tagline {
    margin-top: calc(var(--g) * 0.12);
    font-weight: 330;
    font-stretch: 112%;
    font-size: max(14px, calc(var(--g) * 0.098));
    line-height: 1.3;
    letter-spacing: 0.08em;
    margin-right: -0.08em;
    color: var(--text-soft);
}

.coming-soon {
    margin-top: calc(var(--g) * 0.13);
    font-weight: 500;
    font-stretch: 125%;
    font-size: max(12px, calc(var(--g) * 0.079));
    line-height: 1.3;
    letter-spacing: 0.45em;
    margin-right: -0.45em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--brand-orange);
}

/* --- Product silhouette ------------------------------------------------- */

.product {
    position: relative;
    display: flex;
    justify-content: center;
    /* The device's top corner sits close to the image's top edge, so keep a
       small gap below COMING SOON rather than overlapping the glow. */
    margin-top: calc(var(--g) * 0.05);
}

/* Light layers behind the product image. Positions are percentages of the
   image box: the floor line sits ~81% down. */

/* Bloom: soft light that continues the image's own glow dome outward, so
   the dome's sides dissolve into the background instead of ending at an
   edge. It is LIGHT ONLY: an orange fill shaped by the silhouette image's
   alpha (the artwork file is unchanged, used here purely as a mask) with
   the device mostly cut out (cardstand-bloom-mask.svg), so no blurred copy
   of the dark hardware or of dark edge pixels can appear. Masks apply after filters on one element, so
   the shaping happens on ::before and the blur on the wrapper. The sharp
   image's mask tapers its glow out early (cardstand-silhouette-mask.svg)
   and hands off to this layer, keeping overall brightness about the same. */
.product-bloom {
    position: absolute;
    /* 2x the image box, so the edge mask below covers the full blur spread;
       the light itself (::before) sits in the middle at the image's position. */
    inset: -50%;
    filter: blur(calc(var(--g) * 0.5));
    opacity: 0.55;
    pointer-events: none;
    /* Applied after the blur: fades the bloom to zero at the device outline so
       its light doesn't start abruptly beside the opaque hardware (which drew a
       glowing second shape behind the device's right edge). */
    -webkit-mask-image: url("/assets/images/cardstand/cardstand-bloom-edge-mask.svg");
    mask-image: url("/assets/images/cardstand/cardstand-bloom-edge-mask.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.product-bloom::before {
    content: "";
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: #FF5803;
    -webkit-mask-image: url("/assets/images/cardstand/cardstand-silhouette.webp"), url("/assets/images/cardstand/cardstand-bloom-mask.svg");
    mask-image: url("/assets/images/cardstand/cardstand-silhouette.webp"), url("/assets/images/cardstand/cardstand-bloom-mask.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* Thin horizon glow along the floor line, extending well beyond the image. */
.product::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 81.4%;
    width: 270%;
    height: 16%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse closest-side,
        rgba(255, 112, 40, 0.30) 0%,
        rgba(255, 107, 36, 0.20) 14%,
        rgba(240, 96, 30, 0.12) 28%,
        rgba(222, 86, 24, 0.065) 42%,
        rgba(206, 78, 19, 0.032) 56%,
        rgba(206, 78, 19, 0.013) 72%,
        rgba(206, 78, 19, 0.004) 86%,
        transparent 100%);
    pointer-events: none;
}

.product-image {
    position: relative;
    z-index: 1;
    /* Sized by height so it scales with the viewport; artwork is unchanged. */
    height: calc(var(--g) * 2.75);
    width: auto;
    max-width: none;
    /* Ease the baked glow out at the sides and top, handing off to the CSS
       light layers, while the device itself stays fully opaque. See the
       comments in the mask SVG. */
    -webkit-mask-image: url("/assets/images/cardstand/cardstand-silhouette-mask.svg");
    mask-image: url("/assets/images/cardstand/cardstand-silhouette-mask.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* --- Social links ------------------------------------------------------- */

.socials {
    /* Above the product image, which it overlaps slightly, so the whole link
       area stays clickable. */
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px clamp(20px, calc(var(--g) * 0.22), 40px);
    /* The image's bottom ~12% is a soft floor fade; overlap it slightly. */
    margin-top: calc(var(--g) * -0.12);
}

.social {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    font-weight: 400;
    font-stretch: 105%;
    font-size: clamp(15px, calc(var(--g) * 0.12), 18px);
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--text);
    transition: color 0.15s ease;
}

.social:hover {
    color: var(--brand-orange);
}

.social-icon {
    width: clamp(22px, calc(var(--g) * 0.19), 28px);
    height: clamp(22px, calc(var(--g) * 0.19), 28px);
    flex-shrink: 0;
}

.social-divider {
    width: 1px;
    height: clamp(28px, calc(var(--g) * 0.3), 42px);
    background: linear-gradient(180deg, transparent, var(--brand-orange-deep) 30%, var(--brand-orange-deep) 70%, transparent);
}

/* ==========================================================================
   404
   ========================================================================== */

.not-found {
    --g: clamp(96px, min(14vh, 30vw), 150px);
}

.not-found-title {
    margin-top: calc(var(--g) * 0.3);
    font-weight: 400;
    font-stretch: 125%;
    font-size: clamp(18px, 2.4vw, 24px);
    letter-spacing: 0.18em;
    margin-right: -0.18em;
    text-transform: uppercase;
    color: var(--brand-white);
}

.not-found-text {
    margin-top: 14px;
    font-weight: 330;
    font-stretch: 112%;
    letter-spacing: 0.04em;
    color: var(--text-soft);
}

.home-link {
    margin-top: 28px;
    font-weight: 500;
    font-stretch: 125%;
    font-size: 13px;
    letter-spacing: 0.4em;
    margin-right: -0.4em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--brand-orange);
}

.home-link:hover {
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 360px) {
    .social-divider {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}