/* =========================================================
   MUHAMMAD SOHAIL AKHTAR
   PERSONAL ACADEMIC WEBSITE
   GLOBAL STYLE SYSTEM
   Version 4.0 — Premium Academic Foundation
   ---------------------------------------------------------
   RESPONSIBILITY:
   • Global reset
   • Design tokens
   • Typography
   • Containers
   • Buttons
   • Accessibility
   • Global animations
   • Global utilities
   • Scrollbar
   • Responsive foundation

   DO NOT PLACE:
   • Navbar-specific styling
   • Profile-section styling
   • Hero-specific styling
   • Page-specific components
========================================================= */


/* =========================================================
   01. DESIGN TOKENS
========================================================= */

:root {

    /* -----------------------------------------------------
       BRAND
    ----------------------------------------------------- */

    --color-primary: #123c69;
    --color-primary-dark: #0b2949;
    --color-primary-light: #eaf2fa;

    --color-accent: #1687a7;
    --color-accent-dark: #0f718c;
    --color-accent-light: #e8f7fa;

    --color-teal: #087f73;
    --color-blue: #315b9d;

    /* -----------------------------------------------------
       BACKGROUNDS
    ----------------------------------------------------- */

    --color-bg: #f7f9fc;
    --color-bg-soft: #f1f5f9;
    --color-bg-white: #ffffff;
    --color-bg-blue: #f3f7fb;
    --color-bg-dark: #0c1628;

    /* -----------------------------------------------------
       TEXT
    ----------------------------------------------------- */

    --color-text: #172033;
    --color-text-dark: #0c1628;
    --color-text-soft: #475467;
    --color-text-muted: #667085;
    --color-text-light: #8a94a6;
    --color-text-white: #ffffff;

    /* -----------------------------------------------------
       BORDERS
    ----------------------------------------------------- */

    --color-border: #e2e8f0;
    --color-border-light: #edf1f5;
    --color-border-blue: #d4e3f0;

    --border-soft:
        rgba(15, 35, 60, 0.08);

    --border-medium:
        rgba(15, 35, 60, 0.14);

    /* -----------------------------------------------------
       SHADOWS
    ----------------------------------------------------- */

    --shadow-xs:
        0 2px 8px
        rgba(15, 35, 60, 0.04);

    --shadow-sm:
        0 8px 25px
        rgba(15, 35, 60, 0.06);

    --shadow-md:
        0 18px 45px
        rgba(15, 35, 60, 0.09);

    --shadow-lg:
        0 30px 70px
        rgba(15, 35, 60, 0.12);

    --shadow-xl:
        0 40px 100px
        rgba(15, 35, 60, 0.16);

    --shadow-blue:
        0 15px 40px
        rgba(18, 60, 105, 0.12);

    /* -----------------------------------------------------
       RADIUS
    ----------------------------------------------------- */

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

    /* -----------------------------------------------------
       LAYOUT
    ----------------------------------------------------- */

    --container-width: 1240px;
    --container-wide: 1380px;
    --container-narrow: 920px;

    /* -----------------------------------------------------
       SPACING
    ----------------------------------------------------- */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;
    --space-12: 96px;
    --space-13: 120px;
    --space-14: 144px;

    /* -----------------------------------------------------
       TYPOGRAPHY
    ----------------------------------------------------- */

    --font-body:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-display:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;

    --font-mono:
        "DM Mono",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;

    /* -----------------------------------------------------
       TRANSITIONS
    ----------------------------------------------------- */

    --transition-fast:
        180ms ease;

    --transition:
        300ms cubic-bezier(.2,.65,.3,1);

    --transition-slow:
        600ms cubic-bezier(.2,.65,.3,1);

    --transition-slower:
        900ms cubic-bezier(.16,1,.3,1);

    /* -----------------------------------------------------
       Z-INDEX SYSTEM
    ----------------------------------------------------- */

    --z-background: -1;
    --z-base: 1;
    --z-content: 10;
    --z-header: 5000;
    --z-overlay: 9000;
    --z-loader: 99999;

}


/* =========================================================
   02. RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


html {

    scroll-behavior: smooth;

    scroll-padding-top: 100px;

    font-size: 16px;

    -webkit-text-size-adjust: 100%;

}


body {

    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f9fc 38%,
            #ffffff 100%
        );

    color:
        var(--color-text);

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

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1.7;

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;

}


/* =========================================================
   03. DOCUMENT ELEMENTS
========================================================= */

main {

    position:
        relative;

    z-index:
        var(--z-base);

}


section {

    position:
        relative;

}


article {

    position:
        relative;

}


figure {

    margin:
        0;

}


hr {

    height:
        1px;

    border:
        0;

    background:
        var(--color-border);

}


/* =========================================================
   04. MEDIA
========================================================= */

img {

    display:
        block;

    max-width:
        100%;

    height:
        auto;

}


svg {

    display:
        block;

    max-width:
        100%;

}


video {

    display:
        block;

    max-width:
        100%;

}


iframe {

    max-width:
        100%;

    border:
        0;

}


/* =========================================================
   05. LINKS
========================================================= */

a {

    color:
        inherit;

    text-decoration:
        none;

}


a:hover {

    text-decoration:
        none;

}


/* =========================================================
   06. FORMS
========================================================= */

button,
input,
textarea,
select {

    font:
        inherit;

}


button {

    border:
        0;

    cursor:
        pointer;

}


input,
textarea,
select {

    width:
        100%;

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

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

    background:
        #ffffff;

    color:
        var(--color-text);

    outline:
        none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);

}


input:focus,
textarea:focus,
select:focus {

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

    box-shadow:
        0 0 0 4px
        rgba(22,135,167,.10);

}


textarea {

    min-height:
        140px;

    resize:
        vertical;

}


/* =========================================================
   07. LISTS
========================================================= */

ul,
ol {

    list-style:
        none;

}


/* =========================================================
   08. SELECTION
========================================================= */

::selection {

    background:
        var(--color-primary);

    color:
        #ffffff;

}


::-moz-selection {

    background:
        var(--color-primary);

    color:
        #ffffff;

}


/* =========================================================
   09. SCROLLBAR
========================================================= */

html {

    scrollbar-width:
        thin;

    scrollbar-color:
        #b8c5d4
        #f1f4f8;

}


::-webkit-scrollbar {

    width:
        8px;

    height:
        8px;

}


::-webkit-scrollbar-track {

    background:
        #f1f4f8;

}


::-webkit-scrollbar-thumb {

    background:
        #b8c5d4;

    border-radius:
        999px;

    border:
        2px solid #f1f4f8;

}


::-webkit-scrollbar-thumb:hover {

    background:
        var(--color-primary);

}


/* =========================================================
   10. MAIN CONTAINER
========================================================= */

.profile-container {

    width:
        min(
            calc(100% - 48px),
            var(--container-width)
        );

    margin-inline:
        auto;

}


/* Wider container */

.profile-container-wide {

    width:
        min(
            calc(100% - 48px),
            var(--container-wide)
        );

    margin-inline:
        auto;

}


/* Narrow content */

.profile-container-narrow {

    width:
        min(
            calc(100% - 48px),
            var(--container-narrow)
        );

    margin-inline:
        auto;

}


/* =========================================================
   11. GLOBAL SECTION FOUNDATION
========================================================= */

.profile-section {

    position:
        relative;

    padding:
        var(--space-13) 0;

}


/* =========================================================
   12. GLOBAL TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {

    margin:
        0;

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

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

    font-weight:
        600;

    line-height:
        1.15;

}


h1 {

    font-size:
        clamp(
            48px,
            7vw,
            88px
        );

}


h2 {

    font-size:
        clamp(
            38px,
            5vw,
            68px
        );

}


h3 {

    font-size:
        clamp(
            24px,
            3vw,
            34px
        );

}


h4 {

    font-size:
        22px;

}


h5 {

    font-size:
        18px;

}


h6 {

    font-size:
        16px;

}


p {

    margin:
        0;

}


strong {

    font-weight:
        700;

}


em {

    font-style:
        italic;

}


/* =========================================================
   13. MONOSPACE ACADEMIC LABEL
========================================================= */

.mono-label {

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

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


/* =========================================================
   14. SECTION INDEX
========================================================= */

.section-index {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--color-accent);

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

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        .16em;

    text-transform:
        uppercase;

}


.section-index::before {

    content:
        "";

    display:
        block;

    width:
        26px;

    height:
        1px;

    background:
        currentColor;

}


/* =========================================================
   15. GLOBAL SECTION INTRO
========================================================= */

.section-intro {

    margin-bottom:
        65px;

}


.section-intro h2 {

    max-width:
        820px;

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

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

    font-size:
        clamp(
            38px,
            5vw,
            68px
        );

    font-weight:
        600;

    line-height:
        1.08;

    letter-spacing:
        -.025em;

}


.section-intro h2 em {

    color:
        var(--color-primary);

    font-style:
        normal;

}


.section-intro > p {

    max-width:
        720px;

    margin-top:
        24px;

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

    font-size:
        16px;

}


/* =========================================================
   16. SPLIT INTRO
========================================================= */

.split-intro {

    display:
        grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(280px,.65fr);

    align-items:
        end;

    gap:
        80px;

}


.split-intro > p {

    margin:
        0;

    padding-bottom:
        8px;

}


/* =========================================================
   17. BUTTON FOUNDATION
========================================================= */

.profile-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    min-height:
        52px;

    padding:
        0 24px;

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

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

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        .01em;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


.profile-btn i {

    font-size:
        12px;

    transition:
        transform var(--transition);

}


.profile-btn:hover {

    transform:
        translateY(-3px);

}


.profile-btn:hover i {

    transform:
        translateX(3px);

}


/* Primary */

.profile-btn-primary {

    background:
        var(--color-primary);

    color:
        #ffffff;

    box-shadow:
        0 10px 25px
        rgba(18,60,105,.15);

}


.profile-btn-primary:hover {

    background:
        var(--color-primary-dark);

    color:
        #ffffff;

    box-shadow:
        0 15px 35px
        rgba(18,60,105,.20);

}


/* Outline */

.profile-btn-outline {

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

    background:
        rgba(255,255,255,.78);

    color:
        var(--color-primary);

}


.profile-btn-outline:hover {

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

    background:
        var(--color-primary-light);

    color:
        var(--color-primary);

}


/* =========================================================
   18. GENERIC CARD FOUNDATION
========================================================= */

.card-surface {

    background:
        rgba(255,255,255,.90);

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

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

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


.card-surface:hover {

    transform:
        translateY(-7px);

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

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

}


/* =========================================================
   19. GLOBAL TEXT LINK
========================================================= */

.text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--color-primary);

    font-size:
        13px;

    font-weight:
        600;

    transition:
        color var(--transition),
        transform var(--transition);

}


.text-link:hover {

    color:
        var(--color-accent);

    transform:
        translateX(3px);

}


/* =========================================================
   20. DIVIDER
========================================================= */

.academic-divider {

    width:
        100%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-border),
            transparent
        );

}


/* =========================================================
   21. PAGE LOADER
========================================================= */

.page-loader {

    position:
        fixed;

    inset:
        0;

    z-index:
        var(--z-loader);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #ffffff;

    color:
        var(--color-primary);

    opacity:
        1;

    visibility:
        visible;

    transition:
        opacity 700ms ease,
        visibility 700ms ease;

}


.page-loader.loaded {

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

}


.loader-inner {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        14px;

    text-align:
        center;

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

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        .18em;

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

}


.loader-symbol {

    display:
        grid;

    place-items:
        center;

    width:
        58px;

    height:
        58px;

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

    border-radius:
        50%;

    color:
        var(--color-primary);

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

    font-size:
        28px;

    animation:
        loaderPulse 1.5s ease-in-out infinite;

}


.loader-line {

    position:
        relative;

    width:
        130px;

    height:
        1px;

    overflow:
        hidden;

    background:
        var(--color-border);

}


.loader-line::after {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        45%;

    height:
        100%;

    background:
        var(--color-accent);

    animation:
        loaderLine 1.2s ease-in-out infinite;

}


@keyframes loaderPulse {

    0%,
    100% {

        transform:
            scale(1);

    }

    50% {

        transform:
            scale(1.08);

    }

}


@keyframes loaderLine {

    0% {

        transform:
            translateX(-120%);

    }

    100% {

        transform:
            translateX(320%);

    }

}


/* =========================================================
   22. AMBIENT BACKGROUND FOUNDATION
========================================================= */

.ambient-background {

    position:
        fixed;

    inset:
        0;

    z-index:
        var(--z-background);

    overflow:
        hidden;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 12% 20%,
            rgba(22,135,167,.045),
            transparent 28%
        ),

        radial-gradient(
            circle at 88% 32%,
            rgba(18,60,105,.045),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 90%,
            rgba(22,135,167,.035),
            transparent 30%
        );

}


/* =========================================================
   23. MATHEMATICAL FLOATING ELEMENTS
========================================================= */

.math-float {

    position:
        absolute;

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

    font-size:
        clamp(
            34px,
            5vw,
            78px
        );

    font-weight:
        500;

    color:
        rgba(18,60,105,.045);

    user-select:
        none;

    pointer-events:
        none;

    animation:
        mathFloat 18s ease-in-out infinite;

}


@keyframes mathFloat {

    0%,
    100% {

        transform:
            translate3d(0,0,0)
            rotate(0deg);

    }

    50% {

        transform:
            translate3d(0,-18px,0)
            rotate(4deg);

    }

}


/* =========================================================
   24. REVEAL ANIMATION
========================================================= */

.reveal-element {

    opacity:
        0;

    transform:
        translateY(28px);

    transition:
        opacity 700ms ease,
        transform 700ms cubic-bezier(.2,.65,.3,1);

}


.reveal-element.is-visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   25. STAGGER ANIMATION UTILITIES
========================================================= */

.reveal-delay-1 {

    transition-delay:
        80ms;

}


.reveal-delay-2 {

    transition-delay:
        160ms;

}


.reveal-delay-3 {

    transition-delay:
        240ms;

}


.reveal-delay-4 {

    transition-delay:
        320ms;

}


.reveal-delay-5 {

    transition-delay:
        400ms;

}


/* =========================================================
   26. BACK TO TOP FOUNDATION
========================================================= */

.back-to-top {

    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    z-index:
        900;

    display:
        grid;

    place-items:
        center;

    width:
        46px;

    height:
        46px;

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

    border-radius:
        50%;

    background:
        rgba(255,255,255,.92);

    color:
        var(--color-primary);

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

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(12px);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition),
        background var(--transition),
        color var(--transition);

}


.back-to-top.visible {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


.back-to-top:hover {

    background:
        var(--color-primary);

    color:
        #ffffff;

}


/* =========================================================
   27. ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {

    outline:
        3px solid
        rgba(22,135,167,.25);

    outline-offset:
        4px;

}


/* =========================================================
   28. VISUALLY HIDDEN
========================================================= */

.visually-hidden {

    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0,0,0,0);

    white-space:
        nowrap;

    border:
        0;

}


/* =========================================================
   29. NO-SCROLL UTILITY
========================================================= */

.no-scroll {

    overflow:
        hidden;

}


/* =========================================================
   30. LARGE DESKTOP
========================================================= */

@media (min-width: 1440px) {

    .profile-container {

        width:
            min(
                calc(100% - 80px),
                1320px
            );

    }

}


/* =========================================================
   31. TABLET
========================================================= */

@media (max-width: 1024px) {

    html {

        scroll-padding-top:
            90px;

    }


    .profile-section {

        padding:
            95px 0;

    }


    .split-intro {

        grid-template-columns:
            1fr;

        gap:
            25px;

    }


    .section-intro {

        margin-bottom:
            50px;

    }

}


/* =========================================================
   32. MOBILE
========================================================= */

@media (max-width: 700px) {

    html {

        scroll-padding-top:
            80px;

    }


    body {

        font-size:
            15px;

    }


    .profile-container,
    .profile-container-wide,
    .profile-container-narrow {

        width:
            min(
                calc(100% - 32px),
                var(--container-width)
            );

    }


    .profile-section {

        padding:
            75px 0;

    }


    .section-intro {

        margin-bottom:
            42px;

    }


    .section-intro h2 {

        font-size:
            clamp(
                34px,
                10vw,
                48px
            );

    }


    .section-intro > p {

        font-size:
            15px;

    }


    .profile-btn {

        min-height:
            48px;

        padding:
            0 20px;

    }


    .back-to-top {

        right:
            16px;

        bottom:
            16px;

    }

}


/* =========================================================
   33. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .profile-container,
    .profile-container-wide,
    .profile-container-narrow {

        width:
            calc(100% - 28px);

    }


    .profile-section {

        padding:
            65px 0;

    }

}


/* =========================================================
   34. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}


/* =========================================================
   35. PRINT
========================================================= */

@media print {

    .page-loader,
    .ambient-background,
    .back-to-top,
    .menu-toggle {

        display:
            none !important;

    }


    body {

        background:
            #ffffff !important;

        color:
            #000000 !important;

    }


    a {

        color:
            #000000 !important;

    }


    .profile-section {

        padding:
            40px 0;

    }

}