/*
 * Welcome card — per-program dashboard hero.
 *
 * Tokens from src/styles/{colors,spacing,borders,fonts}.css cascade globally
 * via :root, so referencing var(--…) requires no per-module import. Text
 * styles live on the Typography component (labelXs+emphasis / headingXl /
 * bodyXs) — this module only carries layout and the animated background.
 *
 * Background animations are ports of Sasha Matveeva's codepens for each
 * program slug:
 *   longevity     → https://codepen.io/Sasha-Matveeva/pen/PwbewGv (Orb Indigo)
 *   female-hormone → https://codepen.io/Sasha-Matveeva/pen/vEyjYqa (Orb HRT)
 *   male-hormone   → https://codepen.io/Sasha-Matveeva/pen/OPbZJdd (Orb TRT)
 *   metabolic / weight-loss → https://codepen.io/Sasha-Matveeva/pen/yyVOZPY (Orb Metabolic)
 *
 * Each variant renders four absolutely-positioned `.blob` divs over a black
 * card with `mix-blend-mode: screen`. The blobs are sized in container query
 * units (cqw / cqh) so the codepens' viewport-relative dimensions translate
 * to the 930×282 card, and they're individually animated via per-variant
 * keyframes (translate / rotate / scale).
 */

/* === Card === */

.card {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    /* Symbol height as a floor; fills the slot when a composed layout (the
     * dashboard row) sizes the parent — slots share one container height.
     * Standalone, 100% of an auto parent resolves to auto and the floor wins. */
    min-height: 282px;
    height: 100%;
    overflow: hidden;
    /* Radius/radius-medium — designer bump 12 -> 16 (sasha, 2026-07-14) */
    border-radius: var(--border-radius-md);
    background: var(--color-bg-base-dark);
    font-family: var(--font-default);
    color: var(--color-text-primary-inverted);
    /* Light-on-dark text: subpixel smoothing renders heavier than the Figma
     * design — grayscale antialiasing matches the intended weight. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Enable container query units (cqw / cqh) for the blob layer. */
    container-type: size;
}

/* === Background animation layer === */
/* `isolation: isolate` is required so the blobs' `mix-blend-mode: screen`
 * blends only against the local black background, not against whatever the
 * card is sitting on. */
.background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    isolation: isolate;
    pointer-events: none;
}

/* Coordinate canvas for the blobs — the container the cqw / cqh units
 * resolve against. Fills the card on desktop; on mobile it keeps the
 * desktop 930×282 geometry and is cover-fitted into the card (see the
 * mobile block below), matching how the Figma mobile variants scale the
 * desktop orb art. */
.blobCanvas {
    position: absolute;
    inset: 0;
    container-type: size;
}

.blob {
    position: absolute;
    mix-blend-mode: screen;
    border-radius: 50%;
    pointer-events: none;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Honour reduced-motion preferences — pause the orbit, keep the colours. */
@media (prefers-reduced-motion: reduce) {
    .blob {
        animation: none;
    }
}

/* ============================================================
 *   LONGEVITY (Orb Indigo)
 * ============================================================ */

.bgLongevity .blobA {
    /* white upper-left */
    width: 30cqw;
    height: 16cqh;
    left: 36%;
    top: 32%;
    background: radial-gradient(
        ellipse at 42% 40%,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(220, 228, 240, 0.65) 26%,
        rgba(160, 178, 210, 0.25) 56%,
        transparent 82%
    );
    filter: blur(3cqw) brightness(1.1);
    animation-name: lngGreen;
    animation-duration: 4.8s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

.bgLongevity .blobB {
    /* soft blue-grey mid */
    width: 22cqw;
    height: 8cqh;
    right: 42%;
    top: 34%;
    background: radial-gradient(
        ellipse at 58% 40%,
        rgba(140, 160, 210, 0.88) 0%,
        rgba(100, 125, 185, 0.65) 28%,
        rgba(55, 72, 135, 0.28) 58%,
        transparent 84%
    );
    filter: blur(3cqw) brightness(1.05);
    animation-name: lngOrange;
    animation-duration: 4.2s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

.bgLongevity .blobC {
    /* deep indigo base — large */
    width: 65cqw;
    height: 38cqh;
    left: 50%;
    bottom: 29%;
    background: radial-gradient(
        ellipse at 50% 72%,
        rgba(80, 105, 195, 0.88) 0%,
        rgba(55, 78, 165, 0.68) 26%,
        rgba(28, 42, 105, 0.32) 60%,
        transparent 86%
    );
    filter: blur(3.5cqw) brightness(1);
    animation-name: lngBlue;
    animation-duration: 5.4s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

.bgLongevity .blobD {
    /* deeper indigo right bloom */
    width: 38cqw;
    height: 28cqh;
    right: 28%;
    bottom: 26%;
    background: radial-gradient(
        ellipse at 45% 55%,
        rgba(65, 88, 185, 0.85) 0%,
        rgba(42, 62, 155, 0.58) 30%,
        rgba(18, 28, 88, 0.22) 62%,
        transparent 85%
    );
    filter: blur(3.5cqw) brightness(1.05);
    animation-name: lngOrange2;
    animation-duration: 5.1s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

@keyframes lngGreen {
    0% {
        transform: translate(-5%, 2%) rotate(-10deg) scale(1.02);
    }
    50% {
        transform: translate(6%, -4%) rotate(-2deg) scale(1.18);
    }
    100% {
        transform: translate(2%, 5%) rotate(-14deg) scale(1.08);
    }
}
@keyframes lngOrange {
    0% {
        transform: translate(12%, -5%) rotate(10deg) scale(0.96);
    }
    50% {
        transform: translate(-14%, 7%) rotate(-4deg) scale(1.22);
    }
    100% {
        transform: translate(8%, 10%) rotate(16deg) scale(1.04);
    }
}
@keyframes lngBlue {
    0% {
        transform: translateX(-50%) translate(-3%, 2%) scale(1.02);
    }
    50% {
        transform: translateX(-50%) translate(4%, -3%) scale(1.14);
    }
    100% {
        transform: translateX(-50%) translate(-2%, 4%) scale(1.06);
    }
}
@keyframes lngOrange2 {
    0% {
        transform: translate(4%, -3%) scale(1);
    }
    50% {
        transform: translate(-6%, 5%) scale(1.12);
    }
    100% {
        transform: translate(2%, 2%) scale(1.05);
    }
}

/* ============================================================
 *   FEMALE-HORMONE (Orb HRT)
 *   Slower 5-step keyframes with ease-in-out timing — softer
 *   feel for the hormone-care variant.
 * ============================================================ */

.bgFemaleHormone .blobA {
    width: 41cqw;
    height: 59cqh;
    left: 50%;
    top: 32%;
    background: radial-gradient(
        ellipse at 42% 40%,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(225, 218, 230, 0.42) 26%,
        rgba(180, 170, 200, 0.18) 56%,
        transparent 82%
    );
    filter: blur(4.5cqw) brightness(1.16);
    animation-name: fhGreen;
    animation-duration: 9.6s;
    animation-timing-function: ease-in-out;
}
.bgFemaleHormone .blobB {
    width: 45cqw;
    height: 39cqh;
    right: 28%;
    top: 48%;
    background: radial-gradient(
        ellipse at 58% 40%,
        rgba(235, 155, 170, 0.99) 0%,
        rgba(210, 125, 148, 0.9) 28%,
        rgba(155, 80, 115, 0.52) 58%,
        transparent 84%
    );
    filter: blur(4.5cqw) brightness(1.14);
    animation-name: fhOrange;
    animation-duration: 8.4s;
    animation-timing-function: ease-in-out;
}
.bgFemaleHormone .blobC {
    width: 91cqw;
    height: 114cqh;
    left: 64%;
    bottom: 29%;
    background: radial-gradient(
        ellipse at 50% 72%,
        rgba(90, 68, 185, 0.88) 0%,
        rgba(68, 48, 160, 0.68) 26%,
        rgba(38, 24, 110, 0.35) 60%,
        transparent 86%
    );
    filter: blur(4.9cqw) brightness(1.18);
    animation-name: fhBlue;
    animation-duration: 10.8s;
    animation-timing-function: ease-in-out;
}
.bgFemaleHormone .blobD {
    width: 52cqw;
    height: 82cqh;
    right: 14%;
    bottom: 26%;
    background: radial-gradient(
        ellipse at 45% 55%,
        rgba(78, 55, 175, 0.85) 0%,
        rgba(55, 38, 148, 0.6) 30%,
        rgba(30, 18, 100, 0.22) 62%,
        transparent 85%
    );
    filter: blur(5.2cqw) brightness(1.2);
    animation-name: fhOrange2;
    animation-duration: 10.2s;
    animation-timing-function: ease-in-out;
}

@keyframes fhGreen {
    0% {
        transform: translate(-5%, 2%) rotate(-10deg) scale(1.02);
    }
    25% {
        transform: translate(6%, -4%) rotate(-2deg) scale(1.18);
    }
    50% {
        transform: translate(2%, 5%) rotate(-14deg) scale(1.08);
    }
    75% {
        transform: translate(-3%, -2%) rotate(-6deg) scale(1.14);
    }
    100% {
        transform: translate(-5%, 2%) rotate(-10deg) scale(1.02);
    }
}
@keyframes fhOrange {
    0% {
        transform: translate(12%, -5%) rotate(10deg) scale(0.96);
    }
    25% {
        transform: translate(-14%, 7%) rotate(-4deg) scale(1.22);
    }
    50% {
        transform: translate(8%, 10%) rotate(16deg) scale(1.04);
    }
    75% {
        transform: translate(-6%, 2%) rotate(5deg) scale(1.12);
    }
    100% {
        transform: translate(12%, -5%) rotate(10deg) scale(0.96);
    }
}
@keyframes fhBlue {
    0% {
        transform: translateX(-50%) translate(-3%, 2%) scale(1.02);
    }
    25% {
        transform: translateX(-50%) translate(4%, -3%) scale(1.14);
    }
    50% {
        transform: translateX(-50%) translate(-2%, 4%) scale(1.06);
    }
    75% {
        transform: translateX(-50%) translate(2%, -1%) scale(1.1);
    }
    100% {
        transform: translateX(-50%) translate(-3%, 2%) scale(1.02);
    }
}
@keyframes fhOrange2 {
    0% {
        transform: translate(4%, -3%) scale(1);
    }
    25% {
        transform: translate(-6%, 5%) scale(1.12);
    }
    50% {
        transform: translate(2%, 2%) scale(1.05);
    }
    75% {
        transform: translate(-3%, -4%) scale(1.08);
    }
    100% {
        transform: translate(4%, -3%) scale(1);
    }
}

/* ============================================================
 *   MENS-HORMONE-HEALTH (Orb TRT)
 * ============================================================ */

.bgMensHormone .blobA {
    width: 41cqw;
    height: 59cqh;
    left: 36%;
    top: 32%;
    background: radial-gradient(
        ellipse at 42% 40%,
        rgba(210, 195, 255, 0.92) 0%,
        rgba(175, 155, 235, 0.7) 26%,
        rgba(120, 100, 180, 0.35) 56%,
        transparent 82%
    );
    filter: blur(4.5cqw) brightness(1.16);
    animation-name: mhGreen;
    animation-duration: 4.8s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}
.bgMensHormone .blobB {
    width: 31cqw;
    height: 25cqh;
    right: 42%;
    top: 34%;
    background: radial-gradient(
        ellipse at 58% 40%,
        rgba(160, 80, 220, 0.9) 0%,
        rgba(120, 50, 190, 0.72) 28%,
        rgba(70, 20, 130, 0.35) 58%,
        transparent 84%
    );
    filter: blur(4.5cqw) brightness(1.14);
    animation-name: mhOrange;
    animation-duration: 4.2s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}
.bgMensHormone .blobC {
    width: 91cqw;
    height: 114cqh;
    left: 50%;
    bottom: 29%;
    background: radial-gradient(
        ellipse at 50% 72%,
        rgba(65, 38, 110, 0.88) 0%,
        rgba(45, 22, 85, 0.68) 26%,
        rgba(22, 8, 52, 0.35) 60%,
        transparent 86%
    );
    filter: blur(4.9cqw) brightness(0.82);
    animation-name: mhBlue;
    animation-duration: 5.4s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}
.bgMensHormone .blobD {
    width: 52cqw;
    height: 82cqh;
    right: 28%;
    bottom: 26%;
    background: radial-gradient(
        ellipse at 45% 55%,
        rgba(140, 60, 210, 0.85) 0%,
        rgba(100, 35, 175, 0.6) 30%,
        rgba(60, 15, 120, 0.25) 62%,
        transparent 85%
    );
    filter: blur(5.2cqw) brightness(1.2);
    animation-name: mhOrange2;
    animation-duration: 5.1s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

@keyframes mhGreen {
    0% {
        transform: translate(-5%, 2%) rotate(-10deg) scale(1.02);
    }
    50% {
        transform: translate(6%, -4%) rotate(-2deg) scale(1.18);
    }
    100% {
        transform: translate(2%, 5%) rotate(-14deg) scale(1.08);
    }
}
@keyframes mhOrange {
    0% {
        transform: translate(12%, -5%) rotate(10deg) scale(0.96);
    }
    50% {
        transform: translate(-14%, 7%) rotate(-4deg) scale(1.22);
    }
    100% {
        transform: translate(8%, 10%) rotate(16deg) scale(1.04);
    }
}
@keyframes mhBlue {
    0% {
        transform: translateX(-50%) translate(-3%, 2%) scale(1.02);
    }
    50% {
        transform: translateX(-50%) translate(4%, -3%) scale(1.14);
    }
    100% {
        transform: translateX(-50%) translate(-2%, 4%) scale(1.06);
    }
}
@keyframes mhOrange2 {
    0% {
        transform: translate(4%, -3%) scale(1);
    }
    50% {
        transform: translate(-6%, 5%) scale(1.12);
    }
    100% {
        transform: translate(2%, 2%) scale(1.05);
    }
}

/* ============================================================
 *   GLP1-LONGEVITY-CARE (Orb Metabolic)
 *   One backend slug covering the Figma "metabolic" and
 *   "weight-loss" variants — they shared copy + animation.
 * ============================================================ */

.bgGlp1Longevity .blobA {
    width: 30cqw;
    height: 45cqh;
    left: 50%;
    top: 32%;
    background: radial-gradient(
        ellipse at 42% 40%,
        rgba(255, 255, 248, 0.96) 0%,
        rgba(235, 225, 195, 0.84) 26%,
        rgba(190, 175, 130, 0.42) 56%,
        transparent 82%
    );
    filter: blur(3.5cqw) brightness(1.16);
    animation-name: mtGreen;
    animation-duration: 4.8s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}
.bgGlp1Longevity .blobB {
    width: 22cqw;
    height: 18cqh;
    right: 28%;
    top: 34%;
    background: radial-gradient(
        ellipse at 58% 40%,
        rgba(255, 165, 30, 0.96) 0%,
        rgba(230, 110, 10, 0.84) 28%,
        rgba(160, 65, 5, 0.4) 58%,
        transparent 84%
    );
    filter: blur(3.5cqw) brightness(1.14);
    animation-name: mtOrange;
    animation-duration: 4.2s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}
.bgGlp1Longevity .blobC {
    width: 65cqw;
    height: 80cqh;
    left: 64%;
    bottom: 29%;
    background: radial-gradient(
        ellipse at 50% 72%,
        rgba(215, 185, 115, 1) 0%,
        rgba(195, 155, 80, 0.9) 26%,
        rgba(150, 105, 35, 0.46) 60%,
        transparent 86%
    );
    filter: blur(3.5cqw) brightness(1.18);
    animation-name: mtBlue;
    animation-duration: 5.4s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}
.bgGlp1Longevity .blobD {
    width: 38cqw;
    height: 58cqh;
    right: 14%;
    bottom: 26%;
    background: radial-gradient(
        ellipse at 45% 55%,
        rgba(255, 150, 20, 0.92) 0%,
        rgba(220, 100, 8, 0.75) 30%,
        rgba(150, 58, 4, 0.38) 62%,
        transparent 85%
    );
    filter: blur(3.5cqw) brightness(1.2);
    animation-name: mtOrange2;
    animation-duration: 5.1s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

@keyframes mtGreen {
    0% {
        transform: translate(-5%, 2%) rotate(-10deg) scale(1.02);
    }
    50% {
        transform: translate(6%, -4%) rotate(-2deg) scale(1.18);
    }
    100% {
        transform: translate(2%, 5%) rotate(-14deg) scale(1.08);
    }
}
@keyframes mtOrange {
    0% {
        transform: translate(12%, -5%) rotate(10deg) scale(0.96);
    }
    50% {
        transform: translate(-14%, 7%) rotate(-4deg) scale(1.22);
    }
    100% {
        transform: translate(8%, 10%) rotate(16deg) scale(1.04);
    }
}
@keyframes mtBlue {
    0% {
        transform: translateX(-50%) translate(-3%, 2%) scale(1.02);
    }
    50% {
        transform: translateX(-50%) translate(4%, -3%) scale(1.14);
    }
    100% {
        transform: translateX(-50%) translate(-2%, 4%) scale(1.06);
    }
}
@keyframes mtOrange2 {
    0% {
        transform: translate(4%, -3%) scale(1);
    }
    50% {
        transform: translate(-6%, 5%) scale(1.12);
    }
    100% {
        transform: translate(2%, 2%) scale(1.05);
    }
}

/* ============================================================
 *   Copy block (desktop: top-left, 272×182)
 * ============================================================ */

.copy {
    position: absolute;
    top: var(--spacing-24);
    left: var(--spacing-24);
    width: 272px;
    height: 182px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-52);
    align-items: flex-start;
    /* Sit above the background animation. */
    z-index: 1;
}

.topRow {
    display: flex;
    align-items: center;
    gap: var(--spacing-24);
    width: 100%;
}

.eyebrow {
    white-space: nowrap;
}

/* Mobile-only nav — hidden on desktop. */
.nav {
    display: none;
    align-items: center;
    gap: var(--spacing-14);
    margin-left: auto;
}

.navIcon {
    width: 24px;
    height: 24px;
}

.profilePill {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 6px 5px 10px;
    border-radius: 50px;
    background: var(--color-bg-fill-alpha-white-10);
    border: 1px solid var(--border-color-alpha-white-10);
    filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.05));
}

.avatar {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    /* Placeholder circle colour from the Figma asset. */
    background: #d9d9d9;
    object-fit: cover;
}

.titleBlock {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    align-items: flex-start;
    width: 100%;
}

/* Desktop: name on its own line. */
.name {
    display: block;
}

/* ============================================================
 *   Mobile (device="mobile" — mirrors the Figma `device` variant
 *   axis: 390×174, padding 20, radius 16, "Welcome back," greeting,
 *   inline name, nav shown)
 * ============================================================ */

.card[data-device='mobile'] {
    height: 174px;
    padding: var(--spacing-20);
    border-radius: var(--border-radius-md);
}

.card[data-device='mobile'] .background {
    border-radius: var(--border-radius-md);
}

/* Keep the desktop 930×282 blob geometry and cover-fit it into the
 * 390×174 card: scale = 174 / 282 ≈ 0.617 fills the height and crops
 * the width slightly right of centre, mirroring the Figma mobile
 * variants — whose orb art also runs brighter than desktop. */
.card[data-device='mobile'] .blobCanvas {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 930px;
    height: 282px;
    transform: translate(-40%, -55%) scale(0.617);
}

/* The Figma mobile orbs run brighter than the desktop art; the boost
 * that matches the cool palettes overexposes the warm ones, so the
 * lift is tuned per variant. */
.card[data-device='mobile'] .bgLongevity .blobCanvas {
    filter: brightness(1.4) saturate(1.35);
}

.card[data-device='mobile'] .bgFemaleHormone .blobCanvas {
    filter: brightness(1.15) saturate(1.15);
}

.card[data-device='mobile'] .bgMensHormone .blobCanvas {
    filter: brightness(1.1) saturate(1.1);
}

.card[data-device='mobile'] .bgGlp1Longevity .blobCanvas {
    filter: brightness(1.05) saturate(1.1);
}

.card[data-device='mobile'] .copy {
    /* In flow, but stays positioned so z-index keeps the text above the
     * absolutely-positioned background layer. */
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    gap: var(--spacing-32);
}

.card[data-device='mobile'] .nav {
    display: flex;
}

.card[data-device='mobile'] .name {
    display: inline;
}

/* The desktop row-alignment floor must not inflate the mobile variant —
 * min-height would beat the mobile height override. */
.card[data-device='mobile'] {
    min-height: 0;
}

/* The desktop row-alignment floor must not inflate the 174px mobile variant
 * (widget_welcome_use_cases: all mobile combos are 390x174) — min-height
 * would beat the mobile height override. */
.card[data-device='mobile'] {
    min-height: 0;
}