:root {
    --bg: #F8FAFF;
    --bg-soft: #F2F6FC;

    --surface: #FFFFFF;
    --surface-soft: rgba(255, 255, 255, 0.55);

    --ink: #0F172A;
    --text: #1E293B;
    --muted: #64748B;
    --faint: #94A3B8;

    --sky: #A7D8FF;
    --sky-deep: #62B6F3;

    --lavender: #B8A7FF;
    --lavender-soft: #EAE5FF;
    --lavender-deep: #7F5AF0;

    --pink: #FF9AB0;
    --pink-soft: #FFE5EB;

    --mint: #BDEEDC;
    --mint-deep: #69B99B;

    --peach: #FFD6A5;

    --border: rgba(15, 23, 42, 0.09);
    --border-strong: rgba(15, 23, 42, 0.15);

    --shadow:
        0 30px 90px rgba(15, 23, 42, 0.08);

    --ease:
        cubic-bezier(0.22, 1, 0.36, 1);

    --shell:
        1220px;
}


/* RESET */

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


html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}


body {
    margin: 0;

    overflow-x: hidden;

    background:
        var(--bg);

    color:
        var(--ink);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;
}


body.motion-off *,
body.motion-off *::before,
body.motion-off *::after {
    animation-duration:
        0.01ms !important;

    animation-iteration-count:
        1 !important;

    transition-duration:
        0.01ms !important;
}


a,
button {
    font:
        inherit;
}


button {
    color:
        inherit;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


img {
    display: block;

    max-width: 100%;
}


iframe {
    display: block;
}


.shell {
    width:
        min(
            var(--shell),
            calc(100% - 48px)
        );

    margin-inline:
        auto;
}


.section {
    position: relative;

    padding:
        clamp(100px, 13vw, 180px)
        0;
}


::selection {
    background:
        var(--lavender);

    color:
        var(--ink);
}


/* AMBIENT */

.ambient {
    position:
        fixed;

    z-index:
        -10;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;
}


.ambient__orb {
    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(90px);

    opacity:
        0.42;
}


.ambient__orb--sky {
    width:
        520px;

    height:
        520px;

    left:
        -160px;

    top:
        -120px;

    background:
        var(--sky);
}


.ambient__orb--lavender {
    width:
        540px;

    height:
        540px;

    right:
        -180px;

    top:
        15%;

    background:
        var(--lavender);
}


.ambient__orb--pink {
    width:
        460px;

    height:
        460px;

    left:
        32%;

    bottom:
        -220px;

    background:
        var(--pink);
}


.ambient__line {
    position:
        absolute;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    background:
        rgba(15, 23, 42, 0.035);
}


.ambient__line--one {
    left:
        22%;
}


.ambient__line--two {
    left:
        50%;
}


.ambient__line--three {
    right:
        20%;
}


.ambient__grain {
    position:
        absolute;

    inset:
        0;

    opacity:
        0.025;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}


/* LOADER */

.loader {
    position:
        fixed;

    z-index:
        99999;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    background:
        var(--bg);

    transition:
        opacity
        500ms
        ease,
        visibility
        500ms
        ease;
}


.loader.is-hidden {
    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;
}


.loader__ambient {
    position:
        absolute;

    width:
        620px;

    height:
        620px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 167, 255, 0.26),
            rgba(167, 216, 255, 0.12),
            transparent 68%
        );

    filter:
        blur(32px);

    animation:
        loaderPulse
        2.4s
        ease
        infinite
        alternate;
}


.loader__content {
    position:
        relative;

    width:
        min(390px, calc(100% - 40px));

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        16px;
}


.loader__mark {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--lavender-deep);

    box-shadow:
        0 0 0 6px
        rgba(184, 167, 255, 0.12);
}


.loader__content p {
    margin: 0;

    color:
        var(--muted);

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


.loader__number {
    color:
        var(--ink);

    font-family:
        monospace;

    font-size:
        0.65rem;
}


.loader__bar {
    grid-column:
        1 / 4;

    height:
        1px;

    overflow:
        hidden;

    background:
        var(--border);
}


.loader__bar span {
    display:
        block;

    width:
        0;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            var(--sky-deep),
            var(--lavender-deep),
            var(--pink)
        );
}


@keyframes loaderPulse {
    from {
        transform:
            scale(0.9);
    }

    to {
        transform:
            scale(1.06);
    }
}


/* HEADER */

.header {
    position:
        fixed;

    z-index:
        500;

    top:
        0;

    left:
        50%;

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

    min-height:
        76px;

    transform:
        translateX(-50%);

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    pointer-events:
        none;
}


.brand,
.motion-toggle {
    pointer-events:
        auto;
}


.brand {
    justify-self:
        start;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--ink);

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;
}


.brand__dot {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--lavender-deep);

    box-shadow:
        0
        0
        0
        5px
        rgba(184, 167, 255, 0.11);
}


.header__index {
    justify-self:
        center;

    display:
        flex;

    gap:
        6px;

    color:
        var(--faint);

    font-family:
        monospace;

    font-size:
        0.6rem;

    letter-spacing:
        0.11em;
}


.header__index span:first-child {
    color:
        var(--ink);
}


.motion-toggle {
    justify-self:
        end;

    width:
        42px;

    height:
        42px;

    padding:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

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

    border-radius:
        50%;

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

    backdrop-filter:
        blur(14px);

    cursor:
        pointer;

    transition:
        transform
        250ms
        var(--ease),
        background
        250ms
        ease;
}


.motion-toggle:hover {
    transform:
        rotate(8deg)
        scale(1.04);

    background:
        rgba(255, 255, 255, 0.86);
}


.motion-toggle span {
    width:
        13px;

    height:
        1px;

    background:
        var(--ink);
}


.motion-toggle span:last-child {
    width:
        8px;

    transform:
        translateX(2px);
}


/* CURSOR */

.cursor {
    position:
        fixed;

    z-index:
        99998;

    left:
        0;

    top:
        0;

    pointer-events:
        none;

    transform:
        translate3d(
            var(--cursor-x, -100px),
            var(--cursor-y, -100px),
            0
        );

    will-change:
        transform;
}


.cursor__dot {
    position:
        absolute;

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--ink);

    transform:
        translate(-50%, -50%);
}


.cursor__ring {
    position:
        absolute;

    width:
        35px;

    height:
        35px;

    border:
        1px solid
        rgba(127, 90, 240, 0.42);

    border-radius:
        50%;

    transform:
        translate(-50%, -50%);

    transition:
        width
        250ms
        var(--ease),
        height
        250ms
        var(--ease),
        border-color
        250ms
        ease,
        background
        250ms
        ease;
}


.cursor.is-active
.cursor__ring {
    width:
        52px;

    height:
        52px;

    border-color:
        rgba(127, 90, 240, 0.25);

    background:
        rgba(184, 167, 255, 0.06);
}


.cursor__label {
    position:
        absolute;

    left:
        31px;

    top:
        0;

    padding:
        6px
        9px;

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

    border-radius:
        999px;

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

    backdrop-filter:
        blur(14px);

    color:
        var(--ink);

    font-family:
        monospace;

    font-size:
        0.55rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    opacity:
        0;

    transform:
        translateY(-50%)
        translateX(-5px);

    transition:
        opacity
        150ms
        ease,
        transform
        150ms
        ease;
}


.cursor.has-label
.cursor__label {
    opacity:
        1;

    transform:
        translateY(-50%)
        translateX(0);
}


.pointer-light {
    position:
        fixed;

    z-index:
        -1;

    width:
        440px;

    height:
        440px;

    left:
        0;

    top:
        0;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 167, 255, 0.09),
            rgba(167, 216, 255, 0.05),
            transparent 68%
        );

    transform:
        translate3d(
            calc(var(--pointer-x, 50vw) - 50%),
            calc(var(--pointer-y, 50vh) - 50%),
            0
        );

    pointer-events:
        none;

    filter:
        blur(6px);
}


/* SCROLL THREAD */

.scroll-thread {
    position:
        fixed;

    z-index:
        100;

    right:
        18px;

    top:
        22vh;

    width:
        1px;

    height:
        56vh;

    background:
        rgba(15, 23, 42, 0.07);

    pointer-events:
        none;
}


.scroll-thread span {
    position:
        absolute;

    inset:
        0;

    transform:
        scaleY(0);

    transform-origin:
        top;

    background:
        linear-gradient(
            to bottom,
            var(--sky-deep),
            var(--lavender-deep),
            var(--pink)
        );
}


/* HERO */

.hero {
    position:
        relative;

    min-height:
        100svh;

    display:
        grid;

    align-items:
        center;

    overflow:
        hidden;

    padding:
        110px
        0
        70px;
}


.hero__layout {
    min-height:
        640px;

    display:
        grid;

    grid-template-columns:
        minmax(330px, 0.92fr)
        minmax(420px, 1.08fr);

    align-items:
        center;

    gap:
        clamp(50px, 8vw, 110px);
}


.hero__grid {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;
}


.hero__grid span {
    position:
        absolute;

    background:
        rgba(15, 23, 42, 0.035);
}


.hero__grid span:nth-child(1) {
    width:
        1px;

    top:
        0;

    bottom:
        0;

    left:
        23%;
}


.hero__grid span:nth-child(2) {
    width:
        1px;

    top:
        0;

    bottom:
        0;

    left:
        50%;
}


.hero__grid span:nth-child(3) {
    height:
        1px;

    left:
        0;

    right:
        0;

    top:
        34%;
}


.hero__grid span:nth-child(4) {
    height:
        1px;

    left:
        0;

    right:
        0;

    bottom:
        20%;
}


/* PROFILE */

.hero__visual {
    display:
        grid;

    place-items:
        center;

    perspective:
        1200px;
}


.profile-stage {
    --profile-rx:
        0deg;

    --profile-ry:
        0deg;

    position:
        relative;

    width:
        min(100%, 520px);

    aspect-ratio:
        1;

    display:
        grid;

    place-items:
        center;

    transform:
        perspective(1100px)
        rotateX(var(--profile-rx))
        rotateY(var(--profile-ry));

    transform-style:
        preserve-3d;

    transition:
        transform
        220ms
        var(--ease);
}


.profile-stage__orbit {
    position:
        absolute;

    border-radius:
        50%;

    border:
        1px solid
        rgba(127, 90, 240, 0.15);

    pointer-events:
        none;
}


.profile-stage__orbit--one {
    inset:
        4%;
}


.profile-stage__orbit--two {
    inset:
        14%;

    border-color:
        rgba(98, 182, 243, 0.18);

    transform:
        rotate(14deg);
}


.profile-stage__orbit--three {
    inset:
        25%;

    border-style:
        dashed;

    border-color:
        rgba(255, 154, 176, 0.22);
}


.profile-stage__glow {
    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(48px);
}


.profile-stage__glow--one {
    width:
        54%;

    height:
        54%;

    top:
        7%;

    left:
        7%;

    background:
        rgba(167, 216, 255, 0.34);
}


.profile-stage__glow--two {
    width:
        46%;

    height:
        46%;

    bottom:
        7%;

    right:
        7%;

    background:
        rgba(184, 167, 255, 0.30);
}


.profile {
    position:
        relative;

    width:
        min(70%, 350px);

    aspect-ratio:
        1;

    transform:
        translateZ(45px);
}


.profile__frame {
    position:
        absolute;

    inset:
        -14px;

    border:
        1px solid
        rgba(127, 90, 240, 0.20);

    border-radius:
        50%;
}


.profile__image-wrap {
    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255, 255, 255, 0.9);

    background:
        white;

    box-shadow:
        0 42px 110px
        rgba(15, 23, 42, 0.16);
}


.profile__image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transform:
        scale(1.02);

    transition:
        transform
        700ms
        var(--ease);
}


.profile-stage:hover
.profile__image {
    transform:
        scale(1.075);
}


.profile__shine {
    position:
        absolute;

    width:
        40%;

    height:
        15%;

    top:
        12%;

    left:
        14%;

    border-radius:
        50%;

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

    filter:
        blur(18px);

    transform:
        rotate(-25deg);
}


.profile-stage__point {
    position:
        absolute;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;
}


.profile-stage__point--one {
    left:
        14%;

    top:
        18%;

    background:
        var(--lavender-deep);
}


.profile-stage__point--two {
    right:
        11%;

    top:
        42%;

    background:
        var(--sky-deep);
}


.profile-stage__point--three {
    left:
        24%;

    bottom:
        14%;

    background:
        var(--pink);
}


.profile-stage__index {
    position:
        absolute;

    right:
        0;

    bottom:
        7%;

    display:
        flex;

    gap:
        7px;

    color:
        var(--faint);

    font-family:
        monospace;

    font-size:
        0.57rem;

    letter-spacing:
        0.1em;
}


.profile-stage__index span:first-child {
    color:
        var(--ink);
}


/* HERO COPY */

.hero__copy {
    position:
        relative;

    z-index:
        4;
}


.section-marker {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        23px;
}


.section-marker span {
    width:
        44px;

    height:
        1px;

    background:
        var(--lavender-deep);
}


.section-marker p {
    margin:
        0;

    color:
        var(--faint);

    font-family:
        monospace;

    font-size:
        0.6rem;

    letter-spacing:
        0.12em;
}


.hero h1 {
    margin:
        0;

    font-size:
        clamp(
            4.4rem,
            9vw,
            9rem
        );

    line-height:
        0.77;

    letter-spacing:
        -0.075em;
}


.hero h1 span {
    display:
        block;
}


.hero h1 span:last-child {
    margin-left:
        clamp(24px, 4vw, 62px);
}


.hero__handle {
    margin:
        33px
        0
        0;

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        0.75rem;
}


.hero__bio {
    max-width:
        460px;

    margin-top:
        22px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr;

    gap:
        12px;
}


.hero__bio > span {
    width:
        6px;

    height:
        6px;

    margin-top:
        9px;

    border-radius:
        50%;

    background:
        var(--mint-deep);

    box-shadow:
        0 0 0 5px
        rgba(105, 185, 155, 0.11);
}


.hero__bio p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        1rem;

    line-height:
        1.75;
}


.hero__status {
    margin-top:
        17px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--faint);

    font-family:
        monospace;

    font-size:
        0.61rem;
}


.hero__status span {
    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--lavender-deep);

    animation:
        statusPulse
        1.5s
        ease
        infinite;
}


.hero__status p {
    margin:
        0;
}


@keyframes statusPulse {
    50% {
        box-shadow:
            0 0 0 6px
            rgba(184, 167, 255, 0.11);
    }
}


.scroll-link {
    width:
        max-content;

    margin-top:
        38px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--ink);

    font-size:
        0.65rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.scroll-link span:last-child {
    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        50%;

    transition:
        transform
        250ms
        var(--ease);
}


.scroll-link:hover
span:last-child {
    transform:
        translateY(5px);
}


.hero__side {
    position:
        absolute;

    color:
        var(--faint);

    font-family:
        monospace;

    font-size:
        0.55rem;

    letter-spacing:
        0.14em;
}


.hero__side--left {
    left:
        24px;

    top:
        50%;
}


.hero__side--right {
    right:
        24px;

    bottom:
        15%;
}


/* DIVIDER */

.divider {
    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    gap:
        16px;
}


.divider span {
    height:
        1px;

    background:
        var(--border);
}


.divider p {
    margin:
        0;

    color:
        var(--faint);

    font-family:
        monospace;

    font-size:
        0.55rem;

    letter-spacing:
        0.1em;
}


/* SHARED */

.section-head {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        clamp(45px, 7vw, 80px);

    padding-bottom:
        18px;

    border-bottom:
        1px solid
        var(--border);
}


.section-head p {
    margin:
        0;

    color:
        var(--ink);

    font-family:
        monospace;

    font-size:
        0.58rem;

    letter-spacing:
        0.1em;
}


.section-head span {
    color:
        var(--muted);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}


.section-head--center {
    max-width:
        800px;

    margin-left:
        auto;

    margin-right:
        auto;
}


.big-heading {
    margin:
        0;

    font-size:
        clamp(
            3.2rem,
            7vw,
            7.5rem
        );

    line-height:
        0.9;

    letter-spacing:
        -0.065em;
}


/* ABOUT */

.about {
    overflow:
        hidden;
}


.about__grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(360px, 0.9fr);

    align-items:
        center;

    gap:
        clamp(55px, 9vw, 125px);
}


.about__text {
    max-width:
        680px;

    margin-top:
        38px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;
}


.about__text p {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        1.03rem;

    line-height:
        1.8;
}


.about__note {
    max-width:
        520px;

    margin:
        32px
        0
        0;

    color:
        var(--faint);

    font-size:
        0.8rem;

    line-height:
        1.7;
}


.facts {
    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        12px;

    perspective:
        900px;
}


.fact {
    --rx:
        0deg;

    --ry:
        0deg;

    position:
        relative;

    min-height:
        137px;

    padding:
        21px;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

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

    border-radius:
        22px;

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

    backdrop-filter:
        blur(13px);

    box-shadow:
        0 17px 55px
        rgba(15, 23, 42, 0.035);

    transform:
        perspective(800px)
        rotateX(var(--rx))
        rotateY(var(--ry));

    transition:
        transform
        220ms
        var(--ease),
        border-color
        220ms
        ease,
        box-shadow
        220ms
        ease;
}


.fact::after {
    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    right:
        -100px;

    bottom:
        -100px;

    border:
        1px solid
        rgba(184, 167, 255, 0.22);

    border-radius:
        50%;

    transition:
        transform
        450ms
        var(--ease);
}


.fact:hover {
    border-color:
        rgba(127, 90, 240, 0.26);

    box-shadow:
        0 27px 80px
        rgba(127, 90, 240, 0.08);
}


.fact:hover::after {
    transform:
        scale(1.55);
}


.fact span {
    color:
        var(--faint);

    font-family:
        monospace;

    font-size:
        0.56rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.fact strong {
    position:
        relative;

    z-index:
        2;

    max-width:
        170px;

    font-size:
        0.98rem;

    line-height:
        1.25;
}


/* PROJECT */

.project {
    overflow:
        hidden;
}


.project__intro {
    display:
        grid;

    grid-template-columns:
        1fr
        minmax(300px, 0.72fr);

    align-items:
        end;

    gap:
        clamp(40px, 8vw, 100px);

    margin-bottom:
        58px;
}


.project__status {
    margin:
        0
        0
        14px;

    color:
        var(--faint);

    font-family:
        monospace;

    font-size:
        0.6rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.project__title {
    margin:
        0;

    font-size:
        clamp(
            5rem,
            13vw,
            12rem
        );

    line-height:
        0.72;

    letter-spacing:
        -0.085em;
}


.project__description {
    margin:
        0;

    color:
        var(--muted);

    font-size:
        1.02rem;

    line-height:
        1.8;
}


.project-card {
    --rx:
        0deg;

    --ry:
        0deg;

    position:
        relative;

    perspective:
        1400px;

    transform:
        perspective(1400px)
        rotateX(var(--rx))
        rotateY(var(--ry));

    transform-style:
        preserve-3d;

    transition:
        transform
        220ms
        var(--ease);
}


.project-card__glow {
    position:
        absolute;

    z-index:
        -1;

    inset:
        9%;

    border-radius:
        60px;

    background:
        linear-gradient(
            120deg,
            rgba(167, 216, 255, 0.26),
            rgba(184, 167, 255, 0.23),
            rgba(255, 154, 176, 0.16)
        );

    filter:
        blur(70px);

    opacity:
        0.62;
}


.browser {
    overflow:
        hidden;

    border:
        1px solid
        rgba(15, 23, 42, 0.11);

    border-radius:
        clamp(23px, 3vw, 37px);

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

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 48px 130px
        rgba(15, 23, 42, 0.12);

    transform:
        translateZ(25px);
}


.browser__top {
    height:
        62px;

    padding:
        0
        20px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items:
        center;

    gap:
        20px;

    border-bottom:
        1px solid
        var(--border);
}


.browser__dots {
    display:
        flex;

    gap:
        7px;
}


.browser__dots span {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;
}


.browser__dots span:nth-child(1) {
    background:
        var(--pink);
}


.browser__dots span:nth-child(2) {
    background:
        var(--peach);
}


.browser__dots span:nth-child(3) {
    background:
        var(--mint);
}


.browser__address {
    justify-self:
        center;

    width:
        min(100%, 460px);

    padding:
        8px
        15px;

    overflow:
        hidden;

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

    border-radius:
        999px;

    color:
        var(--faint);

    font-family:
        monospace;

    font-size:
        0.57rem;

    letter-spacing:
        0.07em;

    text-align:
        center;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.browser__live {
    color:
        var(--mint-deep);

    font-family:
        monospace;

    font-size:
        0.57rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.browser__screen {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        white;
}


.browser iframe {
    width:
        100%;

    height:
        100%;

    border:
        0;

    pointer-events:
        none;
}


.browser__glass {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            to bottom,
            transparent 74%,
            rgba(248, 250, 255, 0.10)
        );
}


.project-tag {
    position:
        absolute;

    z-index:
        4;

    padding:
        10px
        15px;

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

    border-radius:
        999px;

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

    backdrop-filter:
        blur(16px);

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        0.56rem;

    letter-spacing:
        0.07em;

    box-shadow:
        0 15px 45px
        rgba(15, 23, 42, 0.07);

    transform:
        translateZ(85px);

    transition:
        transform
        250ms
        var(--ease);
}


.project-tag--one {
    top:
        14%;

    left:
        -25px;
}


.project-tag--two {
    right:
        -25px;

    top:
        39%;
}


.project-tag--three {
    left:
        18%;

    bottom:
        -16px;
}


.project-card:hover
.project-tag--one {
    transform:
        translate3d(-8px, -7px, 100px);
}


.project-card:hover
.project-tag--two {
    transform:
        translate3d(8px, -7px, 100px);
}


.project-card:hover
.project-tag--three {
    transform:
        translate3d(0, 7px, 100px);
}


.project__bottom {
    margin-top:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;
}


.stack {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.stack span {
    padding:
        9px
        14px;

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

    border-radius:
        999px;

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

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        0.59rem;
}


.project__actions {
    display:
        flex;

    gap:
        10px;
}


.project-button {
    min-width:
        158px;

    padding:
        15px
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

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

    border-radius:
        999px;

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

    font-size:
        0.7rem;

    font-weight:
        700;

    transition:
        transform
        220ms
        var(--ease),
        box-shadow
        220ms
        ease;
}


.project-button:hover {
    transform:
        translateY(-4px);
}


.project-button--dark {
    border-color:
        var(--ink);

    background:
        var(--ink);

    color:
        white;

    box-shadow:
        0 14px 40px
        rgba(15, 23, 42, 0.14);
}


/* NOW */

.now {
    display:
        grid;

    grid-template-columns:
        auto
        1fr;

    overflow:
        hidden;

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

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

    background:
        rgba(255, 255, 255, 0.20);
}


.now__label {
    position:
        relative;

    z-index:
        2;

    padding:
        24px
        clamp(22px, 4vw, 60px);

    display:
        flex;

    align-items:
        center;

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

    background:
        var(--bg);

    font-family:
        monospace;

    font-size:
        0.6rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.now__window {
    overflow:
        hidden;
}


.now__track {
    width:
        max-content;

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        28px;

    padding-inline:
        28px;

    animation:
        marquee
        32s
        linear
        infinite;
}


.now__track span {
    color:
        var(--muted);

    font-size:
        0.77rem;

    white-space:
        nowrap;
}


.now__track i {
    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--lavender-deep);
}


@keyframes marquee {
    to {
        transform:
            translateX(-50%);
    }
}


/* INTERNET */

.internet {
    overflow:
        hidden;
}


.internet__intro {
    max-width:
        900px;

    margin-bottom:
        58px;
}


.internet__intro > p {
    max-width:
        610px;

    margin:
        28px
        0
        0;

    color:
        var(--muted);

    line-height:
        1.75;
}


.social-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        12px;
}


.social-card {
    --x:
        0px;

    --y:
        0px;

    position:
        relative;

    min-height:
        250px;

    padding:
        22px;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

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

    border-radius:
        24px;

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

    backdrop-filter:
        blur(13px);

    box-shadow:
        0 16px 55px
        rgba(15, 23, 42, 0.035);

    text-align:
        left;

    cursor:
        pointer;

    transform:
        translate3d(
            var(--x),
            var(--y),
            0
        );

    transition:
        transform
        230ms
        var(--ease),
        border-color
        220ms
        ease,
        box-shadow
        220ms
        ease;
}


button.social-card {
    width:
        100%;

    color:
        var(--ink);
}


.social-card:hover {
    transform:
        translate3d(
            var(--x),
            calc(var(--y) - 7px),
            0
        );

    border-color:
        rgba(127, 90, 240, 0.27);

    box-shadow:
        0 28px 85px
        rgba(127, 90, 240, 0.08);
}


.social-card__top {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.social-card__top > span:last-child {
    color:
        var(--faint);

    transition:
        transform
        220ms
        var(--ease),
        color
        220ms
        ease;
}


.social-card:hover
.social-card__top > span:last-child {
    color:
        var(--lavender-deep);

    transform:
        translate(3px, -3px);
}


.social-card__icon {
    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        13px;

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

    font-size:
        0.72rem;

    font-weight:
        700;

    transition:
        transform
        260ms
        var(--ease);
}


.social-card:hover
.social-card__icon {
    transform:
        rotate(-6deg)
        scale(1.06);
}


.social-card__body {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;
}


.social-card__body strong {
    font-size:
        1.13rem;

    font-weight:
        700;
}


.social-card__body > span {
    margin-top:
        5px;

    color:
        var(--faint);

    font-size:
        0.68rem;
}


.social-card__body p {
    max-width:
        180px;

    margin:
        16px
        0
        0;

    color:
        var(--muted);

    font-size:
        0.76rem;

    line-height:
        1.5;
}


.social-card small {
    position:
        absolute;

    z-index:
        4;

    right:
        19px;

    bottom:
        19px;

    padding:
        6px
        9px;

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

    border-radius:
        999px;

    color:
        var(--faint);

    font-family:
        monospace;

    font-size:
        0.52rem;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.social-card__circle {
    position:
        absolute;

    width:
        190px;

    height:
        190px;

    right:
        -115px;

    bottom:
        -115px;

    border:
        1px solid
        rgba(184, 167, 255, 0.20);

    border-radius:
        50%;

    transition:
        transform
        460ms
        var(--ease);
}


.social-card:hover
.social-card__circle {
    transform:
        scale(1.7);
}


/* CLOSING */

.closing {
    min-height:
        92svh;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    text-align:
        center;
}


.closing__content {
    position:
        relative;

    z-index:
        3;
}


.closing__orbits {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        min(78vw, 720px);

    aspect-ratio:
        1;

    transform:
        translate(-50%, -50%);

    pointer-events:
        none;
}


.closing__orbits span {
    position:
        absolute;

    border:
        1px solid
        rgba(184, 167, 255, 0.10);

    border-radius:
        50%;
}


.closing__orbits span:nth-child(1) {
    inset:
        0;
}


.closing__orbits span:nth-child(2) {
    inset:
        17%;

    border-color:
        rgba(167, 216, 255, 0.14);
}


.closing__orbits span:nth-child(3) {
    inset:
        32%;

    background:
        radial-gradient(
            circle,
            rgba(184, 167, 255, 0.17),
            transparent 68%
        );

    border:
        0;

    filter:
        blur(25px);
}


.closing__eyebrow {
    margin:
        0
        0
        25px;

    color:
        var(--muted);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.closing__title {
    margin:
        0
        auto
        48px;

    font-size:
        clamp(
            5rem,
            13vw,
            12rem
        );

    line-height:
        0.72;

    letter-spacing:
        -0.085em;
}


.closing__title span {
    display:
        block;
}


.closing__title span:nth-child(2) {
    transform:
        translateX(-5%);
}


.closing__title span:nth-child(3) {
    transform:
        translateX(7%);
}


.email-button {
    width:
        min(760px, 100%);

    margin-inline:
        auto;

    padding:
        18px
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

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

    border-radius:
        999px;

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

    backdrop-filter:
        blur(15px);

    color:
        var(--ink);

    cursor:
        pointer;

    transition:
        transform
        230ms
        var(--ease),
        background
        230ms
        ease,
        box-shadow
        230ms
        ease;
}


.email-button:hover {
    transform:
        scale(1.015);

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

    box-shadow:
        0 20px 60px
        rgba(127, 90, 240, 0.08);
}


.closing__note {
    margin:
        22px
        0
        0;

    color:
        var(--faint);

    font-size:
        0.69rem;
}


.back-top {
    width:
        max-content;

    margin:
        50px
        auto
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--muted);

    font-size:
        0.63rem;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.back-top span {
    transition:
        transform
        220ms
        var(--ease);
}


.back-top:hover span {
    transform:
        translateY(-4px);
}


/* FOOTER */

.footer {
    padding:
        36px
        0
        48px;
}


.footer__inner {
    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    gap:
        20px;

    padding-top:
        24px;

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

    color:
        var(--faint);

    font-size:
        0.6rem;
}


.footer__inner > p:nth-child(2) {
    text-align:
        center;
}


.footer__inner > p:last-child {
    text-align:
        right;
}


.footer__identity {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.footer__identity span {
    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--lavender-deep);
}


.footer p {
    margin:
        0;
}


/* EXTERNAL TRANSITION */

.external-transition {
    position:
        fixed;

    z-index:
        99997;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    background:
        var(--bg);

    opacity:
        0;

    visibility:
        hidden;

    clip-path:
        circle(
            0%
            at
            50%
            50%
        );

    transition:
        clip-path
        430ms
        cubic-bezier(0.65, 0, 0.35, 1),
        opacity
        160ms
        ease,
        visibility
        430ms
        ease;
}


.external-transition.is-active {
    opacity:
        1;

    visibility:
        visible;

    clip-path:
        circle(
            150%
            at
            50%
            50%
        );
}


.external-transition > div {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;
}


.external-transition span {
    margin-bottom:
        17px;

    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        0.57rem;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.external-transition strong {
    font-size:
        clamp(
            3rem,
            8vw,
            8rem
        );

    line-height:
        0.9;

    letter-spacing:
        -0.06em;
}


.external-transition i {
    margin-top:
        20px;

    color:
        var(--lavender-deep);

    font-style:
        normal;

    font-size:
        1.5rem;

    animation:
        externalArrow
        700ms
        ease
        infinite
        alternate;
}


@keyframes externalArrow {
    to {
        transform:
            translate(7px, -7px);
    }
}


/* TOAST */

.toast {
    position:
        fixed;

    z-index:
        99999;

    left:
        50%;

    bottom:
        28px;

    max-width:
        calc(100% - 32px);

    padding:
        11px
        17px;

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

    border-radius:
        999px;

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

    backdrop-filter:
        blur(18px);

    box-shadow:
        var(--shadow);

    color:
        var(--ink);

    font-size:
        0.67rem;

    white-space:
        nowrap;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate(-50%, 17px)
        scale(0.95);

    transition:
        opacity
        220ms
        ease,
        visibility
        220ms
        ease,
        transform
        250ms
        var(--ease);
}


.toast.is-visible {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translate(-50%, 0)
        scale(1);
}


/* SECRET */

.secret-screen {
    position:
        fixed;

    z-index:
        99996;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    align-content:
        center;

    gap:
        12px;

    background:
        rgba(248, 250, 255, 0.90);

    backdrop-filter:
        blur(17px);

    text-align:
        center;

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity
        250ms
        ease,
        visibility
        250ms
        ease;
}


.secret-screen.is-active {
    opacity:
        1;

    visibility:
        visible;
}


.secret-screen span {
    color:
        var(--muted);

    font-family:
        monospace;

    font-size:
        0.6rem;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;
}


.secret-screen strong {
    font-size:
        clamp(
            2.5rem,
            8vw,
            7rem
        );

    letter-spacing:
        -0.06em;
}


/* REVEALS */

.reveal {
    opacity:
        0;

    transform:
        translateY(25px);

    transition:
        opacity
        700ms
        ease,
        transform
        850ms
        var(--ease);
}


.reveal.is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


/* RESPONSIVE */

@media
(max-width: 1080px) {

    .hero__layout {
        grid-template-columns:
            1fr;

        gap:
            65px;

        padding-top:
            60px;
    }


    .hero__visual {
        order:
            1;
    }


    .hero__copy {
        order:
            2;

        text-align:
            center;
    }


    .section-marker,
    .hero__bio,
    .hero__status,
    .scroll-link {
        margin-left:
            auto;

        margin-right:
            auto;
    }


    .hero__bio {
        text-align:
            left;
    }


    .hero h1 span:last-child {
        margin-left:
            0;
    }


    .about__grid {
        grid-template-columns:
            1fr;
    }


    .facts {
        max-width:
            780px;
    }


    .project__intro {
        grid-template-columns:
            1fr;

        align-items:
            start;

        gap:
            25px;
    }


    .social-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .project-tag--one {
        left:
            12px;
    }


    .project-tag--two {
        right:
            12px;
    }

}


@media
(max-width: 720px) {

    .shell {
        width:
            min(
                100% - 28px,
                var(--shell)
            );
    }


    .header {
        width:
            calc(100% - 28px);

        min-height:
            67px;

        grid-template-columns:
            1fr
            auto;
    }


    .header__index {
        display:
            none;
    }


    .section {
        padding:
            90px
            0;
    }


    .hero {
        min-height:
            auto;

        padding:
            100px
            0
            90px;
    }


    .hero__layout {
        min-height:
            auto;

        gap:
            45px;
    }


    .profile-stage {
        width:
            min(
                94vw,
                430px
            );
    }


    .hero h1 {
        font-size:
            clamp(
                4rem,
                20vw,
                6.6rem
            );
    }


    .hero__side {
        display:
            none;
    }


    .big-heading {
        font-size:
            clamp(
                3.2rem,
                15vw,
                5.4rem
            );
    }


    .facts {
        grid-template-columns:
            1fr;
    }


    .fact {
        min-height:
            112px;
    }


    .project__title {
        font-size:
            clamp(
                4.5rem,
                23vw,
                7rem
            );
    }


    .browser__top {
        height:
            52px;

        grid-template-columns:
            auto
            1fr;

        gap:
            11px;

        padding:
            0
            13px;
    }


    .browser__live {
        display:
            none;
    }


    .browser__screen {
        aspect-ratio:
            4 / 3;
    }


    .project-tag {
        display:
            none;
    }


    .project__bottom {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .project__actions {
        width:
            100%;

        flex-direction:
            column;
    }


    .project-button {
        width:
            100%;
    }


    .now {
        grid-template-columns:
            1fr;
    }


    .now__label {
        border-right:
            0;

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

        padding:
            17px;
    }


    .now__track {
        min-height:
            58px;
    }


    .social-grid {
        grid-template-columns:
            1fr;
    }


    .social-card {
        min-height:
            215px;
    }


    .closing__title {
        font-size:
            clamp(
                4.3rem,
                20vw,
                7rem
            );
    }


    .closing__title span:nth-child(2),
    .closing__title span:nth-child(3) {
        transform:
            none;
    }


    .footer__inner {
        grid-template-columns:
            1fr;

        justify-items:
            center;

        text-align:
            center;

        gap:
            10px;
    }


    .footer__inner > p:last-child {
        text-align:
            center;
    }


    .scroll-thread {
        display:
            none;
    }

}


@media
(hover: none),
(pointer: coarse) {

    .cursor,
    .pointer-light {
        display:
            none;
    }


    .profile-stage,
    .project-card,
    .fact,
    .social-card {
        transform:
            none !important;
    }

}


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

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }


    .reveal {
        opacity:
            1;

        transform:
            none;
    }

}