/* =========================================
   ASMC REUSABLE COMPONENTS
========================================= */


:root {

    /* =====================================
       BORDER RADII
    ===================================== */

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;


    /* =====================================
       SHADOWS
    ===================================== */

    --shadow-sm:
        0 6px 18px
        rgba(33, 22, 39, 0.08);

    --shadow-md:
        0 16px 45px
        rgba(33, 22, 39, 0.14);

    --shadow-header:
        0 10px 35px
        rgba(33, 22, 39, 0.08);

    --shadow-dropdown:
        0 24px 60px
        rgba(33, 22, 39, 0.16);


    /* =====================================
       MOTION
    ===================================== */

    --motion-fast: 180ms;
    --motion-base: 280ms;
    --motion-slow: 500ms;
    --motion-reveal: 800ms;
    --motion-stagger: 180ms;


    /* =====================================
       EASING
    ===================================== */

    --ease-standard:
        cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

    --ease-emphasized:
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );


    /* =====================================
       HEADER
    ===================================== */

    --header-height: 70px;

}



/* =========================================
   BUTTONS
========================================= */

.button {

    min-height: 54px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding:
        0.95rem
        1.6rem;

    border:
        1px solid
        transparent;

    border-radius:
        var(--radius-pill);

    font-family:
        var(--font-display);

    font-size:
        var(--fs-button);

    font-weight:
        var(--fw-semibold);

    line-height: 1;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:

        transform
        var(--motion-base)
        var(--ease-standard),

        background-color
        var(--motion-base)
        var(--ease-standard),

        color
        var(--motion-fast)
        ease,

        border-color
        var(--motion-fast)
        ease,

        box-shadow
        var(--motion-base)
        var(--ease-standard);

}


.button:hover {

    transform:
        translateY(-3px);

}


.button:active {

    transform:
        translateY(0);

}


.button:focus-visible {

    outline:
        3px solid
        rgba(247, 148, 29, 0.40);

    outline-offset:
        4px;

}



/* =========================================
   PRIMARY BUTTON
========================================= */

.button-primary {

    background:
        var(--color-violet);

    color:
        var(--color-white);

}


.button-primary:hover {

    background:
        var(--color-magenta);

    box-shadow:
        var(--shadow-sm);

}



/* =========================================
   ACCENT BUTTON
========================================= */

.button-accent {

    background:
        var(--color-orange);

    color:
        var(--color-ink);

}


.button-accent:hover {

    background:
        #FFA52B;

    box-shadow:
        var(--shadow-sm);

}



/* =========================================
   OUTLINE BUTTON
========================================= */

.button-outline {

    background:
        transparent;

    color:
        var(--color-violet);

    border-color:
        var(--color-violet);

}


.button-outline:hover {

    background:
        var(--color-violet);

    color:
        var(--color-white);

}



/* =========================================
   DARK BUTTON
========================================= */

.button-dark {

    background:
        var(--color-ink);

    color:
        var(--color-white);

}


.button-dark:hover {

    background:
        var(--color-ink-soft);

    box-shadow:
        var(--shadow-sm);

}



/* =========================================
   BUTTON ARROW
========================================= */

.button-arrow {

    display:
        inline-block;

    transition:
        transform
        var(--motion-base)
        var(--ease-standard);

}


.button:hover
.button-arrow {

    transform:
        translateX(5px);

}



/* =========================================
   TEXT LINKS
========================================= */

.text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--color-violet);

    font-family:
        var(--font-display);

    font-size:
        var(--fs-body);

    font-weight:
        var(--fw-semibold);

    text-decoration:
        none;

    border-bottom:
        1px solid
        currentColor;

    padding-bottom:
        3px;

    transition:

        color
        var(--motion-fast)
        ease,

        gap
        var(--motion-base)
        var(--ease-standard);

}


.text-link:hover {

    color:
        var(--color-magenta);

    gap:
        12px;

}



/* =========================================
   BADGES
========================================= */

.badge {

    display:
        inline-flex;

    align-items:
        center;
    justify-content:
        center;

    min-height:
        38px;

    padding:
        0.55rem
        1rem;

    border-radius:
        var(--radius-pill);

    font-family:
        var(--font-display);

    font-size:
        0.875rem;

    font-weight:
        var(--fw-semibold);

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;

}


.badge-violet {

    background:
        var(--color-violet-soft);

    color:
        var(--color-violet);

}


.badge-orange {

    background:
        var(--color-orange);

    color:
        var(--color-ink);

}


.badge-dark {

    background:
        var(--color-ink);

    color:
        var(--color-white);

}



/* =========================================
   CARDS
========================================= */

.card {

    padding:
        var(--space-xl);

    background:
        var(--color-white);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

    transition:

        transform
        var(--motion-base)
        var(--ease-standard),

        box-shadow
        var(--motion-base)
        var(--ease-standard),

        border-color
        var(--motion-fast)
        ease;

}


.card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow-md);

    border-color:
        rgba(102, 46, 147, 0.30);

}


.card-soft {

    background:
        var(--color-violet-soft);

}


.card-gradient {

    background:
        var(--gradient-brand);

    color:
        var(--color-white);

    border-color:
        transparent;

}


.card-dark {

    background:
        var(--color-ink);

    color:
        var(--color-white);

    border-color:
        var(--color-border-dark);

}


.card-gradient h3,
.card-gradient p,
.card-dark h3,
.card-dark p {

    color:
        var(--color-white);

}


.card-eyebrow {

    margin-bottom:
        var(--space-sm);

    font-family:
        var(--font-display);

    font-size:
        0.875rem;

    font-weight:
        var(--fw-semibold);

    letter-spacing:
        0.10em;

    text-transform:
        uppercase;

    color:
        var(--color-violet);

}


.card-gradient
.card-eyebrow,

.card-dark
.card-eyebrow {

    color:
        var(--color-orange);

}


.card-title {

    margin-bottom:
        var(--space-sm);

    font-size:
        1.4rem;

    line-height:
        1.25;

}


.card-text {

    margin-bottom:
        0;

    color:
        var(--color-text-secondary);

}



/* =========================================
   DIVIDERS
========================================= */

.divider {

    width:
        100%;

    height:
        1px;

    border:
        0;

    margin:
        var(--space-xl)
        0;

    background:
        var(--color-border);

}


.divider-brand {

    height:
        3px;

    background:
        var(--gradient-brand);

}



/* =========================================
   TEST LAYOUTS
========================================= */

.component-group {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        var(--space-sm);

    margin-top:
        var(--space-lg);

}


.card-test-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        var(--space-lg);

    margin-top:
        var(--space-lg);

}



/* =========================================
   MOTION DEMO
========================================= */

.motion-demo-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        var(--space-lg);

    margin-top:
        var(--space-lg);

}


.motion-demo-card {

    min-height:
        240px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        var(--space-lg);

    background:
        var(--color-white);

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-lg);

}


.motion-demo-label {

    margin-bottom:
        var(--space-sm);

    font-family:
        var(--font-display);

    font-size:
        0.875rem;

    font-weight:
        var(--fw-semibold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        var(--color-violet);

}


.motion-demo-card h3 {

    margin-bottom:
        var(--space-sm);

    font-size:
        1.4rem;

}


.motion-demo-card p {

    margin-bottom:
        0;

    color:
        var(--color-text-secondary);

}


.motion-fast-demo {

    transition:

        background-color
        var(--motion-fast)
        ease,

        color
        var(--motion-fast)
        ease;

}


.motion-fast-demo:hover {

    background:
        var(--color-violet);

    color:
        var(--color-white);

}


.motion-fast-demo:hover h3,
.motion-fast-demo:hover p,
.motion-fast-demo:hover
.motion-demo-label {

    color:
        var(--color-white);

}


.motion-base-demo {

    transition:

        transform
        var(--motion-base)
        var(--ease-standard),

        box-shadow
        var(--motion-base)
        var(--ease-standard);

}


.motion-base-demo:hover {

    transform:
        translateY(-12px);

    box-shadow:
        var(--shadow-md);

}


.motion-emphasized-demo {

    transition:

        transform
        var(--motion-reveal)
        var(--ease-emphasized),

        background
        var(--motion-reveal)
        var(--ease-emphasized);

}


.motion-emphasized-demo:hover {

    transform:
        scale(1.035);

    background:
        var(--gradient-brand);

}


.motion-emphasized-demo:hover h3,
.motion-emphasized-demo:hover p,
.motion-emphasized-demo:hover
.motion-demo-label {

    color:
        var(--color-white);

}



/* =========================================
   GLOBAL HEADER
========================================= */

.site-header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    width:
        100%;

    background:
        rgba(
            251,
            249,
            252,
            0.82
        );

    border-bottom:
        1px solid
        rgba(
            228,
            221,
            231,
            0.55
        );

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    transition:

        background-color
        var(--motion-base)
        ease,

        box-shadow
        var(--motion-base)
        ease,

        border-color
        var(--motion-base)
        ease;

}



/* HEADER AFTER SCROLL */

.site-header.is-scrolled {

    background:
        rgba(
            251,
            249,
            252,
            0.97
        );

    border-color:
        var(--color-border);

    box-shadow:
        var(--shadow-header);

}



/* =========================================
   HEADER CONTAINER
========================================= */

.site-header-container {

    width:
        min(
            calc(
                100% -
                (
                    var(--page-gutter) * 2
                )
            ),
            var(--container-max)
        );

    height:
        var(--header-height);

    margin-inline:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-lg);

}



/* =========================================
   SITE BRAND
========================================= */

.site-brand {

    display:
        inline-flex;

    align-items:
        center;

    flex-shrink:
        0;

    color:
        var(--color-ink);

    text-decoration:
        none;

}



/* TEMPORARY LOGO */

.site-brand-placeholder {

    width:
        46px;

    height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        var(--gradient-brand);

    color:
        var(--color-white);

    font-family:
        var(--font-display);

    font-size:
        0.78rem;

    font-weight:
        var(--fw-bold);

    letter-spacing:
        0.04em;

}



/*
    THIS CLASS IS READY FOR THE
    REAL LOGO LATER.
*/

.site-logo {

    display:
        block;

    width:
        auto;

    height:
        46px;

    object-fit:
        contain;

}



/* =========================================
   DESKTOP NAVIGATION
========================================= */

.site-nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        clamp(
            1.4rem,
            2.4vw,
            2.5rem
        );

}



/* =========================================
   STANDARD NAV LINKS
========================================= */

.nav-link {

    position:
        relative;

    min-height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    color:
        var(--color-ink);

    font-family:
        var(--font-display);

    font-size:
        0.9rem;

    font-weight:
        var(--fw-medium);

    line-height:
        1;

    text-decoration:
        none;

    transition:
        color
        var(--motion-fast)
        ease;

}


.nav-link:hover {

    color:
        var(--color-violet);

}


.nav-link.is-active {

    color:
        var(--color-violet);

    font-weight:
        var(--fw-semibold);

}



/* ACTIVE DOT */

.nav-link.is-active::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    bottom:
        2px;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--color-violet);

    transform:
        translateX(-50%);

}



/* =========================================
   REGISTER MENU
========================================= */

.register-menu {

    position:
        relative;

}



/*
    Invisible bridge between Register
    and the dropdown.

    This prevents the dropdown from
    disappearing while moving the mouse
    from the button into the menu.
*/

.register-menu::after {

    content:
        "";

    position:
        absolute;

    top:
        100%;

    right:
        0;

    width:
        100%;

    height:
        16px;

}



/* =========================================
   REGISTER BUTTON
========================================= */

.header-register-button {

    position:
        relative;

    isolation:
        isolate;

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        0.75rem
        1.25rem;

    border:
        0;

    border-radius:
        var(--radius-pill);

    background:
        var(--color-orange);

    color:
        var(--color-ink);

    font-family:
        var(--font-display);

    font-size:
        0.9rem;

    font-weight:
        var(--fw-semibold);

    cursor:
        pointer;

    box-shadow:
        0 7px 20px
        rgba(
            247,
            148,
            29,
            0.20
        );

    transition:

        transform
        var(--motion-base)
        var(--ease-standard),

        box-shadow
        var(--motion-base)
        var(--ease-standard),

        background
        var(--motion-base)
        ease;

}



/* REGISTER ATTENTION PULSE */

.header-register-button::before {

    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    inset:
        -5px;

    border:
        2px solid
        rgba(
            247,
            148,
            29,
            0.50
        );

    border-radius:
        inherit;

    pointer-events:
        none;

    animation:
        register-pulse
        2.6s
        ease-out
        infinite;

}



/* REGISTER HOVER */

.header-register-button:hover {

    transform:
        translateY(-2px);

    background:
        linear-gradient(
            135deg,
            var(--color-orange),
            #FFB547
        );

    box-shadow:
        0 12px 28px
        rgba(
            247,
            148,
            29,
            0.30
        );

}



/* REGISTER FOCUS */

.header-register-button:focus-visible {

    outline:
        3px solid
        rgba(
            102,
            46,
            147,
            0.25
        );

    outline-offset:
        4px;

}



/* =========================================
   REGISTER PULSE ANIMATION
========================================= */

@keyframes register-pulse {

    0% {

        transform:
            scale(0.96);

        opacity:
            0.75;

    }


    65% {

        transform:
            scale(1.14);

        opacity:
            0;

    }


    100% {

        transform:
            scale(1.14);

        opacity:
            0;

    }

}



/* =========================================
   REGISTER CHEVRON
========================================= */

.register-chevron {

    display:
        inline-block;

    font-size:
        0.85rem;

    transition:
        transform
        var(--motion-base)
        var(--ease-standard);

}


.register-menu:hover
.register-chevron,

.register-menu:focus-within
.register-chevron,

.register-menu.is-open
.register-chevron {

    transform:
        rotate(180deg);

}



/* =========================================
   REGISTER DROPDOWN
========================================= */

.register-dropdown {

    position:
        absolute;

    top:
        calc(
            100% + 14px
        );

    right:
        0;

    width:
        310px;

    padding:
        0.6rem;

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );

    border:
        1px solid
        var(--color-border);

    border-radius:
        20px;

    box-shadow:
        var(--shadow-dropdown);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-8px);

    transform-origin:
        top right;

    pointer-events:
        none;

    transition:

        opacity
        var(--motion-fast)
        ease,

        visibility
        var(--motion-fast)
        ease,

        transform
        var(--motion-base)
        var(--ease-standard);

}



/* SHOW DROPDOWN */

.register-menu:hover
.register-dropdown,

.register-menu:focus-within
.register-dropdown,

.register-menu.is-open
.register-dropdown {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

    pointer-events:
        auto;

}



/* =========================================
   REGISTER OPTIONS
========================================= */

.register-option {

    display:
        grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        12px;

    min-height:
        70px;

    padding:
        0.75rem;

    border-radius:
        14px;

    color:
        var(--color-ink);

    text-decoration:
        none;

    transition:

        background-color
        var(--motion-fast)
        ease,

        transform
        var(--motion-base)
        var(--ease-standard);

}


.register-option:hover {

    background:
        var(--color-orange-soft);

    transform:
        translateX(3px);

}



/* OPTION ICON */

.register-option-icon {

    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        var(--gradient-brand);

    color:
        var(--color-white);

    font-family:
        var(--font-display);

    font-size:
        0.85rem;

    font-weight:
        var(--fw-bold);

}



/* OPTION CONTENT */

.register-option-content {

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

}



/* OPTION TITLE */

.register-option-title {

    font-family:
        var(--font-display);

    font-size:
        0.95rem;

    font-weight:
        var(--fw-semibold);

}



/* OPTION DESCRIPTION */

.register-option-description {

    font-family:
        var(--font-body);

    font-size:
        0.82rem;

    color:
        var(--color-text-secondary);

}



/* OPTION ARROW */

.register-option-arrow {

    color:
        var(--color-violet);

    font-size:
        1.1rem;

    transition:
        transform
        var(--motion-base)
        var(--ease-standard);

}


.register-option:hover
.register-option-arrow {

    transform:
        translateX(4px);

}



/* =========================================
   MOBILE MENU BUTTON
========================================= */

.mobile-menu-toggle {

    display:
        none;

    width:
        44px;

    height:
        44px;

    padding:
        0;

    border:
        1px solid
        var(--color-border);

    border-radius:
        12px;

    background:
        var(--color-white);

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        6px;

    cursor:
        pointer;

}



/* MENU LINES */

.menu-line {

    width:
        19px;

    height:
        2px;

    border-radius:
        var(--radius-pill);

    background:
        var(--color-ink);

    transition:

        transform
        var(--motion-base)
        var(--ease-standard),

        opacity
        var(--motion-fast)
        ease;

}



/* MENU OPEN ICON */

.mobile-menu-toggle.is-open
.menu-line:first-child {

    transform:
        translateY(4px)
        rotate(45deg);

}


.mobile-menu-toggle.is-open
.menu-line:last-child {

    transform:
        translateY(-4px)
        rotate(-45deg);

}



/* =========================================
   FOCUS STATES
========================================= */

.site-brand:focus-visible,
.nav-link:focus-visible,
.register-option:focus-visible {

    outline:
        3px solid
        rgba(
            102,
            46,
            147,
            0.20
        );

    outline-offset:
        4px;

}