/* ========== 0.0 Fonts ========== */
/* Universal: Inter for all text */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ========== 1.0 Universal: Tokens ========== */
/* Universal: NUST palette only (blue, yellow, neutrals), shared by every page */
:root {
    --hue: 205;
    --sat: 100%;
    --light: 35%;
    --accent-hue: 50;

    --primary: hsl(var(--hue) var(--sat) var(--light));
    --sky: hsl(197 100% 47%);
    --sky-soft: hsl(197 100% 84%);
    --accent: hsl(var(--accent-hue) 100% 50%);

    --bg: #DADEE1;
    --surface: #E4E8EB;
    --text: hsl(var(--hue) 26% 12%);
    --text-muted: hsl(210 9% 46%);

    --shadow-light: #ffffff;
    --shadow-dark: #0000003a;
    --shadow-icon: #0000005a;

    --glass-solid: hsl(0 0% 100% / .35);
    --glass-border: hsl(0 0% 100% / .5);

    /* Universal: see-through glass fill, used by neuglass surfaces that should not be solid */
    --glass-card: linear-gradient(135deg, hsl(0 0% 100% / .22), hsl(0 0% 100% / .06));

    --grad-brand: linear-gradient(135deg, var(--primary), var(--sky));
    --radius: 1.5rem;

    /* Universal: content container width, side padding and room kept clear for the sidebar */
    --container-max: 1170px;
    --container-pad: 2rem;
    --sidebar-space: 8rem;

    /* Universal: easing shared by every animation so motion feels consistent */
    --ease-out: cubic-bezier(.2, .8, .2, 1);

    --z-nav: 100;
    --z-overlay: 1110;
}

/* ========== 1.1 Universal: Dark Theme ========== */
/* Universal: swapped in when html has data-theme="dark" */
html[data-theme="dark"] {
    --bg: hsl(var(--hue) 40% 10%);
    --surface: hsl(var(--hue) 35% 14%);
    --text: hsl(210 45% 96%);
    --text-muted: hsl(210 15% 68%);

    --shadow-light: hsl(var(--hue) 35% 22%);
    --shadow-dark: hsl(0 0% 0% / .55);
    --shadow-icon: hsl(0 0% 0% / .6);

    --glass-solid: hsl(var(--hue) 40% 14% / .6);
    --glass-border: hsl(210 50% 96% / .08);

    --glass-card: linear-gradient(135deg, hsl(210 50% 96% / .12), hsl(210 50% 96% / .03));
}

/* ========== 2.0 Universal: Base ========== */
/* Universal: reset and global element styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    transition: background .4s ease, color .4s ease;
    overflow-x: hidden;
    padding-bottom: 6rem;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
}

/* ========== 3.0 Universal: Utilities ========== */
/* Universal: reusable container, glass, section heading and button styles */
.contain {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

/* Universal: adds left space only when the container is close enough to the sidebar to need it */
.sidebar-safe {
    padding-left: max(var(--container-pad),
            calc(var(--sidebar-space) - (100vw - var(--container-max)) / 2));
}

.glass {
    background: var(--glass-solid);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}

/* Universal: centred heading block used at the top of every section */
.section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
    text-align: center;

    h3 {
        font-size: clamp(1.8rem, 3vw, 2.25rem);
        font-weight: 700;
        margin-bottom: .6rem;
    }

    p {
        max-width: 40rem;
        color: var(--text-muted);
        font-weight: 300;
        line-height: 1.7;
    }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease;

    &:hover {
        transform: translateY(-2px);
    }
}

.btn-primary {
    background: var(--accent);
    color: hsl(var(--hue) 26% 12%);
    box-shadow: 0 8px 20px hsl(var(--accent-hue) 100% 50% / .35);
}

/* ========== 3.1 Universal: Neuglass Element ========== */
/* Universal: elevated neuglass surface for a few key elements only.
   Use .neu on the element, then add a shape: .neu-pill, .neu-circle, .neu-card or .neu-icon.
   Add .neu-glass to make the fill see-through glass instead of solid */
.neu {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 0 .3rem var(--shadow-dark),
        5px 5px .5rem var(--shadow-light),
        5px 5px .6rem var(--shadow-dark),
        inset 1px 1px var(--shadow-light),
        inset -1px -1px var(--shadow-light),
        inset 4px 4px .2rem #00000010;
    transition: transform .3s ease, box-shadow .3s ease, color .2s ease;

    &:hover {
        transform: translateY(-2px);
    }

    &:active {
        transform: translateY(1px);
    }
}

/* Universal: shape for pill-shaped buttons */
.neu-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
}

/* Universal: shape for round buttons and tiny round elements */
.neu-circle {
    display: grid;
    place-items: center;
    border-radius: 50%;
}

/* Universal: shape for large rounded panels and cards */
.neu-card {
    border-radius: var(--radius);
}

/* Universal: see-through fill. Keeps the neuglass shadows, replaces the solid background with glass */
.neu-glass {
    background: var(--glass-card);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Universal: floating icon. The icon gets a blurred shadow underneath so it looks lifted off the surface */
.neu-icon i {
    filter: drop-shadow(3px 3px 3px var(--shadow-icon));
}

/* ========== 4.0 Landing: Sidebar ========== */
/* Landing page only: glass sidebar on the left, becomes a bottom bar on phones */
.sidebar {
    position: fixed;
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
    z-index: var(--z-nav);
    width: 5.6rem;
    padding: 1.2rem .6rem;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    box-shadow: 0 10px 30px var(--shadow-dark);

    .brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .3rem;
        font-size: .8rem;
        font-weight: 700;
        color: var(--text);

        i {
            font-size: 1.9rem;
            color: var(--primary);
        }

        em {
            font-style: normal;
            color: var(--primary);
        }
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;

        a,
        button {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .3rem;
            font-size: .7rem;
            color: var(--text);
            transition: color .2s ease, transform .2s ease;

            i {
                font-size: 1.3rem;
            }

            &:hover {
                color: var(--primary);
                transform: translateY(-2px);
            }
        }
    }

    .theme-btn {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
        color: var(--text);
    }
}

/* ========== 5.0 Landing: Hero ========== */
/* Landing page only: full-width hero, photo bleeds to the right edge, text lives in the container */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;

    /* ========== 5.1 Hero Container ========== */
    .hero-inner {
        width: 100%;
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
        gap: 3rem;
        padding-top: 5rem;
        padding-bottom: 4rem;
        position: relative;
        z-index: 1;
    }

    /* ========== 5.2 Hero Text ========== */
    .hero-text {
        display: flex;
        flex-direction: column;
        gap: 1.4rem;

        .eyebrow {
            display: inline-flex;
            align-self: flex-start;
            align-items: center;
            gap: .5rem;
            padding: .4rem .9rem;
            border-radius: 999px;
            font-size: .85rem;
            color: var(--primary);
            background: var(--glass-solid);
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);

            i {
                color: var(--accent);
            }
        }

        h1 {
            font-size: clamp(2.4rem, 4.2vw, 3.6rem);
            line-height: 1.12;
            font-weight: 700;

            span {
                background: var(--grad-brand);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        p {
            max-width: 34rem;
            font-size: 1.05rem;
            font-weight: 300;
            line-height: 1.7;
            color: var(--text-muted);
        }

        .cta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-top: .4rem;
        }
    }

    /* ========== 5.3 Hero Photo ========== */
    /* Right side. The fade overlay sits above the photo (z-index: 1) so it paints over the image's scale layer */
    .hero-media {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 52%;
        z-index: 0;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        /* Two layers: left fade (strong) and bottom fade, both blend into the plain background */
        &::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            background:
                linear-gradient(90deg,
                    var(--bg) 0%,
                    color-mix(in srgb, var(--bg) 85%, transparent) 15%,
                    color-mix(in srgb, var(--bg) 40%, transparent) 35%,
                    transparent 60%),
                linear-gradient(0deg,
                    var(--bg) 0%,
                    color-mix(in srgb, var(--bg) 60%, transparent) 20%,
                    transparent 45%);
            pointer-events: none;
        }
    }
}

/* ========== 6.0 Landing: About ========== */
/* Landing page only: the problem FYPilot solves, in three short points with plain icons */
.about {
    padding-top: 5rem;

    .points {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 2rem;
    }

    .point {
        padding: 2.2rem 1.8rem;
        border-radius: var(--radius);
        box-shadow: 0 2px 8px hsl(0 0% 1% / .08);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        transition: transform .3s ease;

        &:hover {
            transform: translateY(-4px);
        }

        .icon {
            display: grid;
            place-items: center;
            width: 64px;
            height: 64px;
            font-size: 1.8rem;
            color: var(--primary);
        }

        h4 {
            font-size: 1.2rem;
            font-weight: 600;
        }

        p {
            font-size: .95rem;
            line-height: 1.6;
            color: var(--text-muted);
            font-weight: 300;
        }
    }
}

/* ========== 7.0 Landing: How It Works (Process Timeline) ========== */
/* Landing page only: scroll-linked timeline. The line fills as you scroll,
   and each circle gains a second ring when it is reached */
.how {
    padding-top: 5rem;

    .timeline-box {
        padding: 3rem 2rem;
        border-radius: var(--radius);
        background: var(--primary);
        border: 1px solid var(--glass-border);
        box-shadow: 0 20px 40px var(--shadow-dark);
    }

    .timeline {
        position: relative;
        display: flex;
        justify-content: space-between;
        width: 80%;
        margin-inline: auto;
        list-style: none;

        /* Base line, shown in full */
        &::before {
            content: '';
            position: absolute;
            top: 2.25rem;
            left: 0;
            width: 100%;
            height: 3px;
            transform: translateY(-50%);
            background: #fff;
            border-radius: 500px;
        }

        /* Fill line, grows as the timeline scrolls into view */
        &::after {
            content: '';
            position: absolute;
            top: 2.25rem;
            left: 0;
            width: 100%;
            height: 3px;
            transform: translateY(-50%);
            background: var(--sky-soft);
            border-radius: 500px;
            z-index: 2;
            animation: timelineFill linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 50%;
        }

        .timeline-step {
            position: relative;
            z-index: 3;
            width: 8rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .8rem;
            text-align: center;
            cursor: pointer;

            /* Step circle: starts white, turns sky blue and gains a second ring */
            i {
                display: grid;
                place-items: center;
                width: 4.5rem;
                height: 4.5rem;
                border-radius: 50%;
                font-size: 1.8rem;
                color: var(--primary);
                background: #fff;
                animation: timelineDot linear both;
                animation-timeline: view();
            }

            span {
                color: #fff;
                font-weight: 500;
            }

            p {
                font-size: .8rem;
                font-weight: 300;
                line-height: 1.4;
                color: hsl(0 0% 100% / .85);
            }

            /* Each step reaches its full state a little later than the one before */
            &:nth-child(1) i {
                animation-range: entry 0% cover 40%;
            }

            &:nth-child(2) i {
                animation-range: entry 10% cover 50%;
            }

            &:nth-child(3) i {
                animation-range: entry 20% cover 60%;
            }

            &:nth-child(4) i {
                animation-range: entry 30% cover 70%;
            }
        }
    }
}

/* ========== 8.0 Landing: Roles ========== */
/* Landing page only: role cards with neuglass icons */
.roles {
    padding-top: 5rem;
    padding-bottom: 5rem;

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 2rem;
    }

    .card {
        padding: 2.2rem 1.8rem;
        border-radius: var(--radius);
        box-shadow: 0 2px 8px hsl(0 0% 1% / .08);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        transition: transform .3s ease;

        &:hover {
            transform: translateY(-4px);
        }

        .icon {
            width: 64px;
            height: 64px;
            font-size: 1.8rem;
            color: var(--primary);
        }

        h4 {
            font-size: 1.2rem;
            font-weight: 600;
        }

        p {
            font-size: .95rem;
            line-height: 1.6;
            color: var(--text-muted);
            font-weight: 300;
        }
    }
}

/* ========== 9.0 Landing: Footer ========== */
/* Landing page only: brand, quick links and access, then a copyright line */
.site-footer {
    margin-top: 2rem;
    padding-top: 3.5rem;
    padding-bottom: 2rem;
    border-top: 1px solid var(--glass-border);
    font-size: .9rem;
    color: var(--text-muted);

    .footer-grid {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr;
        gap: 2.5rem;
    }

    .footer-brand {
        display: flex;
        flex-direction: column;
        gap: .8rem;

        .name {
            display: flex;
            align-items: center;
            gap: .5rem;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--text);

            i {
                font-size: 1.6rem;
                color: var(--primary);
            }

            em {
                font-style: normal;
                color: var(--primary);
            }
        }

        p {
            max-width: 22rem;
            font-weight: 300;
            line-height: 1.6;
        }
    }

    h5 {
        font-size: .85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--text);
        margin-bottom: 1rem;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        gap: .7rem;

        a,
        button {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            color: var(--text-muted);
            text-align: left;
            transition: color .2s ease;

            &:hover {
                color: var(--primary);
            }
        }
    }

    .footer-bottom {
        margin-top: 2.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--glass-border);
        text-align: center;
        font-size: .85rem;
        font-weight: 300;
    }
}

/* ========== 10.0 Landing: Auth Screen (sliding modal) ========== */
/* Landing page only: the screen fills the viewport with frosted glass.
   The modal is a neuglass card with two forms and a side panel. Switching slides the panel across
   and fades the forms */
.auth {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    place-items: center;
    padding: 2rem;
    background: hsl(var(--hue) 30% 10% / .55);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    transition: opacity .4s ease;

    &.open {
        opacity: 1;
        pointer-events: auto;
    }

    /* The modal: slides down from the top when opened. Its children are positioned in halves.
     The box-shadow here replaces the neu class shadow and drops the white outer layer, keeping the rest of the neuglass depth */
    .modal {
        position: relative;
        width: min(760px, 100%);
        height: 600px;
        overflow: hidden;
        transform: translateY(-120vh);
        transition: transform .7s var(--ease-out);
        box-shadow: 0 0 .3rem var(--shadow-dark),
            5px 5px .6rem var(--shadow-dark),
            inset 1px 1px var(--shadow-light),
            inset -1px -1px var(--shadow-light),
            inset 4px 4px .2rem #00000010;

        /* Close button sits in the top-right corner, above everything */
        .close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            z-index: 3;
            width: 40px;
            height: 40px;
            font-size: 1.1rem;
            color: var(--text);
            transition: background .6s ease, color .6s ease, box-shadow .6s ease;
        }

        /* Login state: the side panel is on the right, so the close button sits on the blue gradient and takes it */
        &:not(.signup) .close {
            background: var(--grad-brand);
            color: #fff;
            border-color: hsl(0 0% 100% / .4);
            box-shadow: 0 6px 16px hsl(var(--hue) 100% 35% / .45);
        }

        /* Login form: left half, visible by default */
        .form-login,
        .form-signup {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            padding: 2.25rem 2.5rem;
            transition: opacity .5s ease, transform .6s var(--ease-out);
        }

        .form-login {
            left: 0;
        }

        /* Signup form: right half, hidden until the switch */
        .form-signup {
            left: 50%;
            opacity: 0;
            transform: translateX(40px);
            pointer-events: none;
        }

        /* Switched: the login form fades out to the left, the signup form fades in from the right, after the panel has moved */
        &.signup {
            .form-login {
                opacity: 0;
                transform: translateX(-40px);
                pointer-events: none;
            }

            .form-signup {
                opacity: 1;
                transform: translateX(0);
                pointer-events: auto;
                transition-delay: .25s;
            }
        }

        /* Form heading: plain, centred, follows the theme colour */
        .modal-title {
            font-size: 1.9rem;
            font-weight: 700;
            color: var(--text);
            text-align: center;
        }

        .modal-sub {
            width: 100%;
            font-size: .9rem;
            font-weight: 300;
            color: var(--text-muted);
            text-align: center;
            margin-bottom: .25rem;
        }

        /* Google sign-in: minimal button. Used with the universal .neu class, so it takes the neuglass surface */
        .google-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            height: 48px;
            padding: 0 18px;
            border-radius: 14px;
            color: var(--text);
            font-family: 'Inter', sans-serif;
            font-size: .95rem;
            font-weight: 600;

            .g-logo {
                width: 18px;
                height: 18px;
                flex-shrink: 0;
            }
        }

        /* Role dropdown: centred label, neuglass pill select, Remix chevron icon in place of the native arrow */
        .role-field {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .5rem;

            .role-label {
                font-size: .8rem;
                font-weight: 500;
                color: var(--text-muted);
            }

            .select-wrap {
                position: relative;
                width: 100%;

                select {
                    width: 100%;
                    padding: .8rem 2.75rem .8rem 1.1rem;
                    border-radius: 999px;
                    border: none;
                    outline: none;
                    font: inherit;
                    font-size: .95rem;
                    color: var(--text);
                    text-align: center;
                    text-align-last: center;
                    background: var(--surface);
                    box-shadow: inset 2px 2px 4px var(--shadow-dark),
                        inset -2px -2px 4px var(--shadow-light);
                    appearance: none;
                    -webkit-appearance: none;
                    cursor: pointer;

                    &:focus {
                        box-shadow: inset 2px 2px 4px var(--shadow-dark),
                            inset -2px -2px 4px var(--shadow-light),
                            0 0 0 2px var(--sky);
                    }
                }

                i {
                    position: absolute;
                    top: 50%;
                    right: 1rem;
                    transform: translateY(-50%);
                    font-size: 1.25rem;
                    color: var(--primary);
                    pointer-events: none;
                }
            }
        }

        /* Hint under the role dropdown: the student email format */
        .field-hint {
            width: 100%;
            text-align: center;
            font-size: .78rem;
            font-weight: 300;
            line-height: 1.5;
            color: var(--text-muted);
        }

        /* Side panel: sits on the right half, slides to the left half when switched. NUST blue gradient */
        .modal-side {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 50%;
            background: var(--grad-brand);
            color: #fff;
            z-index: 2;
            transition: left .6s var(--ease-out);
        }

        &.signup .modal-side {
            left: 0;
        }

        /* Both panel messages sit on top of each other; only one shows at a time */
        .side-content {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            padding: 2.75rem 2.25rem;
            text-align: center;
            transition: opacity .4s ease;

            h3 {
                font-size: 1.7rem;
                font-weight: 700;
                color: var(--accent);
            }

            p {
                max-width: 19rem;
                font-size: .95rem;
                font-weight: 300;
                line-height: 1.7;
                color: #fff;
            }

            .side-btn {
                display: inline-flex;
                align-items: center;
                gap: .5rem;
                margin-top: .75rem;
                padding: .75rem 1.5rem;
                border-radius: 999px;
                border: 1px solid hsl(0 0% 100% / .7);
                color: #fff;
                font-weight: 600;
                font-size: .9rem;
                letter-spacing: .04em;
                transition: background .3s ease, color .3s ease;

                &:hover {
                    background: #fff;
                    color: var(--primary);
                }
            }
        }

        .side-login {
            opacity: 1;
        }

        .side-signup {
            opacity: 0;
            pointer-events: none;
        }

        &.signup .side-login {
            opacity: 0;
            pointer-events: none;
        }

        &.signup .side-signup {
            opacity: 1;
            pointer-events: auto;
        }
    }

    &.open .modal {
        transform: translateY(0);
    }
}

/* ========== 11.0 Universal: Load Animations ========== */
/* Universal: keyframes shared by the hero load and the scroll reveals */
@keyframes heroRise {
    from {
        opacity: 0;
        translate: 0 28px;
        filter: blur(8px);
    }

    to {
        opacity: 1;
        translate: 0 0;
        filter: blur(0);
    }
}

@keyframes photoReveal {
    from {
        opacity: 0;
        filter: blur(40px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes photoZoom {
    from {
        scale: 1.06;
    }

    to {
        scale: 1;
    }
}

@keyframes sidebarIn {
    from {
        opacity: 0;
        translate: -40px 0;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes sidebarRise {
    from {
        opacity: 0;
        translate: 0 40px;
    }

    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes gradientDrift {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 200% 50%;
    }
}

@keyframes revealUp {
    from {
        opacity: 0;
        translate: 0 60px;
        scale: .96;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

@keyframes timelineFill {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes timelineDot {
    from {
        background: #fff;
        box-shadow: none;
    }

    to {
        background: var(--sky-soft);
        box-shadow: 0 0 0 .4rem var(--primary),
            0 0 0 .65rem var(--sky-soft);
    }
}

/* ========== 12.0 Landing: Hero Load Sequence ========== */
/* Landing page only: runs once on page load, in order: sidebar, photo, text lines, headline colour */
.sidebar {
    animation: sidebarIn .9s var(--ease-out) .3s both;
}

.hero {

    /* The box only fades. Its edges stay still, so nothing moves across the text */
    .hero-media {
        animation: fadeIn 1.6s ease .1s both;

        /* The blur and the zoom are on the image, and the box clips them */
        img {
            animation: photoZoom 3s var(--ease-out) .1s both,
                photoReveal 2.6s cubic-bezier(.4, 0, .2, 1) .1s both;
        }
    }

    .hero-text {
        >* {
            animation: heroRise 1s var(--ease-out) both;
        }

        >*:nth-child(1) {
            animation-delay: .15s;
        }

        >*:nth-child(2) {
            animation-delay: .3s;
        }

        >*:nth-child(3) {
            animation-delay: .45s;
        }

        >*:nth-child(4) {
            animation-delay: .6s;
        }
    }

    /* Headline colour drifts slowly after the text has arrived */
    h1 span {
        background-size: 200% 200%;
        animation: gradientDrift 8s linear infinite;
    }
}

/* ========== 13.0 Landing: Scroll Reveals ========== */
/* Landing page only: cards and headings fade up as they enter the viewport.
   Each card gets a slightly later range so a row reveals in sequence */
.section-title {
    animation: revealUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
}

.about .points {
    .point {
        animation: revealUp linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;

        &:nth-child(2) {
            animation-range: entry 8% entry 43%;
        }

        &:nth-child(3) {
            animation-range: entry 16% entry 51%;
        }
    }
}

.roles .grid {
    .card {
        animation: revealUp linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;

        &:nth-child(2) {
            animation-range: entry 8% entry 43%;
        }

        &:nth-child(3) {
            animation-range: entry 16% entry 51%;
        }
    }
}

.how .timeline-box {
    animation: revealUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
}

/* ========== 14.0 Landing: Responsive ========== */
/* Landing page only: sidebar becomes a bottom bar, sections stack on phones */
@media (max-width: 860px) {
    .sidebar {
        top: auto;
        bottom: 1.2rem;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        flex-direction: row;
        padding: .6rem 1.2rem;
        border-radius: 999px;
        gap: 1.4rem;
        animation-name: sidebarRise;

        .brand span {
            display: none;
        }

        .nav-links {
            flex-direction: row;
            gap: 1.2rem;
        }
    }

    .sidebar-safe {
        padding-left: var(--container-pad);
    }

    .hero {
        display: block;
        min-height: auto;
        padding: 7rem 0 8rem;
        text-align: center;

        .hero-inner {
            grid-template-columns: 1fr;
            padding-top: 0;
            padding-bottom: 0;
        }

        .hero-text {
            align-items: center;

            .eyebrow {
                align-self: center;
            }

            .cta {
                justify-content: center;
            }
        }

        /* Mobile: the photo sits behind the text. The dimming comes from the overlay only,
       because an opacity rule here would be overridden by the reveal animation */
        .hero-media {
            width: 100%;

            &::before {
                background: var(--bg);
                opacity: .7;
            }
        }
    }

    .how {
        .timeline-box {
            padding: 2.5rem 1rem;
        }

        .timeline {
            width: 100%;

            .timeline-step {
                width: auto;
                flex: 1;

                p {
                    display: none;
                }

                i {
                    width: 3.5rem;
                    height: 3.5rem;
                    font-size: 1.4rem;
                }
            }
        }
    }

    /* On phones the sliding layout is replaced by a stacked layout: one form at a time, the panel below.
     The slide only runs on wider screens */
    .auth {
        padding: 1rem;

        .modal {
            height: auto;
        }

        .form-login,
        .form-signup {
            position: relative;
            width: 100%;
            left: auto;
            top: auto;
            bottom: auto;
            padding: 2.25rem 1.5rem 1.5rem;
            opacity: 1;
            transform: none;
            pointer-events: auto;
            display: none;
        }

        .form-login {
            display: flex;
        }

        .modal.signup .form-login {
            display: none;
        }

        .modal.signup .form-signup {
            display: flex;
        }

        .modal-side {
            position: relative;
            left: auto;
            top: auto;
            bottom: auto;
            width: 100%;
            min-height: 220px;
        }

        .modal.signup .modal-side {
            left: auto;
        }

        .side-content {
            position: relative;
            inset: auto;
            padding: 2rem 1.5rem;
            display: none;
        }

        .side-login {
            display: flex;
        }

        .side-signup {
            display: none;
        }

        .modal.signup .side-login {
            display: none;
        }

        .modal.signup .side-signup {
            display: flex;
        }
    }

    .site-footer {
        .footer-grid {
            grid-template-columns: 1fr;
            text-align: center;
        }

        .footer-brand {
            align-items: center;

            .name {
                justify-content: center;
            }
        }

        .footer-links {
            align-items: center;
        }
    }
}

/* ========== 15.0 Universal: Reduced Motion ========== */
/* Universal: people who ask their system for less motion get the final state straight away */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}