@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');


/* =====================================================
   Variables
===================================================== */

:root {

    --bg: #050505;

    --text: #f2f2f2;

    --muted: #777;

    --dark-muted: #444;

    --line: rgba(255,255,255,.1);

    --white-line: rgba(255,255,255,.25);

}


/* =====================================================
   Reset
===================================================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background: var(--bg);

    color: var(--text);

    font-family:
        Inter,
        Arial,
        sans-serif;

    overflow-x: hidden;

}


/* =====================================================
   Background
===================================================== */

.background {

    position: fixed;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;

}


.grid {

    position: absolute;

    inset: -50%;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    transform:
        perspective(600px)
        rotateX(55deg)
        translateY(120px);

    animation:
        gridMove 18s linear infinite;

}


@keyframes gridMove {

    from {

        transform:
            perspective(600px)
            rotateX(55deg)
            translateY(120px);

    }

    to {

        transform:
            perspective(600px)
            rotateX(55deg)
            translateY(190px);

    }

}


.glow {

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    filter: blur(120px);

    opacity: .1;

    animation:
        float 12s ease-in-out infinite;

}


.glow-1 {

    background: white;

    top: 10%;

    left: 15%;

}


.glow-2 {

    background: #5d5dff;

    right: 5%;

    bottom: 10%;

    animation-delay: -6s;

}


@keyframes float {

    0%,100% {

        transform:
            translate(0,0);

    }

    50% {

        transform:
            translate(100px,-80px);

    }

}


/* =====================================================
   Navbar
===================================================== */

.navbar {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 5vw;

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

    backdrop-filter:
        blur(15px);

    z-index: 100;

}


.logo {

    display: flex;

    align-items: center;

    gap: 12px;

    color: white;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .15em;

}


.logo-mark {

    width: 28px;

    height: 28px;

    display: grid;

    place-items: center;

    border:
        1px solid white;

    font-size: 12px;

}


nav {

    display: flex;

    gap: 35px;

}


nav a {

    color: #888;

    text-decoration: none;

    font-size: 10px;

    letter-spacing: .12em;

    transition: .3s;

}


nav a:hover {

    color: white;

}


.status {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 9px;

    color: #888;

    letter-spacing: .12em;

}


.status span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 12px white;

    animation:
        pulse 2s infinite;

}


@keyframes pulse {

    50% {

        opacity: .25;

    }

}


/* =====================================================
   Contact Dock
===================================================== */

.contact-dock {

    position: fixed;

    right: 28px;

    bottom: 30px;

    z-index: 90;

    display: flex;

    flex-direction: column;

    gap: 8px;

}


.contact-item {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

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

    background:
        rgba(5,5,5,.7);

    backdrop-filter:
        blur(12px);

    color: white;

    text-decoration: none;

    transition:
        .3s;

}


.contact-item:hover {

    border-color: white;

    transform:
        translateX(-6px);

}


.contact-icon {

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .05em;

}


.contact-name {

    position: absolute;

    right: 55px;

    white-space: nowrap;

    padding: 7px 10px;

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

    background: #090909;

    color: #888;

    font-size: 9px;

    letter-spacing: .1em;

    opacity: 0;

    transform:
        translateX(10px);

    pointer-events: none;

    transition: .3s;

}


.contact-item:hover .contact-name {

    opacity: 1;

    transform:
        translateX(0);

}


/* =====================================================
   Hero
===================================================== */

.hero {

    min-height: 100vh;

    padding:
        150px 5vw 60px;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.hero-meta {

    position: absolute;

    top: 110px;

    left: 5vw;

    right: 5vw;

    display: flex;

    justify-content: space-between;

    font-size: 9px;

    color: #555;

    letter-spacing: .15em;

}


.hero-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

}


.eyebrow {

    font-size: 10px;

    color: #777;

    letter-spacing: .2em;

    margin-bottom: 30px;

}


.hero h1 {

    display: flex;

    flex-direction: column;

    font-size:
        clamp(80px, 14vw, 190px);

    line-height: .8;

    letter-spacing: -.08em;

    font-weight: 800;

}


.hero h1 span {

    animation:
        reveal 1s
        cubic-bezier(.16,1,.3,1)
        both;

}


.hero h1 span:nth-child(2) {

    animation-delay: .1s;

}


.hero h1 span:nth-child(3) {

    animation-delay: .2s;

}


@keyframes reveal {

    from {

        opacity: 0;

        transform:
            translateY(80px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.outline {

    color: transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.65);

}


.description {

    margin-top: 55px;

    max-width: 430px;

    color: #888;

    line-height: 1.8;

    font-size: 14px;

}


.hero-actions {

    display: flex;

    gap: 12px;

    margin-top: 35px;

}


.button {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 15px 20px;

    text-decoration: none;

    font-size: 11px;

    letter-spacing: .08em;

    transition: .3s;

}


.primary {

    background: white;

    color: black;

}


.primary:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 40px
        rgba(255,255,255,.12);

}


.secondary {

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

    color: white;

}


.secondary:hover {

    border-color: white;

}


/* =====================================================
   Avatar
===================================================== */

.avatar-container {

    position: absolute;

    right: 10vw;

    top: 50%;

    width: 280px;

    height: 280px;

    transform:
        translateY(-50%);

}


.avatar {

    position: absolute;

    inset: 45px;

    overflow: hidden;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,.4);

    background: #111;

    z-index: 3;

}


.avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
        grayscale(.2)
        contrast(1.05);

    transition:
        transform .6s ease;

}


.avatar-container:hover
.avatar img {

    transform:
        scale(1.08);

}


.avatar-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,.18);

}


.ring-1 {

    inset: 15px;

    animation:
        avatarRotate 18s
        linear infinite;

}


.ring-2 {

    inset: 0;

    border-style: dashed;

    border-color:
        rgba(255,255,255,.1);

    animation:
        avatarRotateReverse 30s
        linear infinite;

}


@keyframes avatarRotate {

    to {

        transform:
            rotate(360deg);

    }

}


@keyframes avatarRotateReverse {

    to {

        transform:
            rotate(-360deg);

    }

}


.avatar-scan {

    position: absolute;

    left: 45px;

    right: 45px;

    height: 1px;

    top: 45px;

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

    box-shadow:
        0 0 12px white;

    z-index: 4;

    animation:
        scan 4s
        ease-in-out
        infinite;

}


@keyframes scan {

    0%,100% {

        top: 45px;

        opacity: 0;

    }

    20% {

        opacity: 1;

    }

    80% {

        opacity: 1;

    }

    100% {

        top: 235px;

        opacity: 0;

    }

}


.avatar-label {

    position: absolute;

    color: #555;

    font-size: 7px;

    letter-spacing: .15em;

    z-index: 5;

}


.label-top {

    top: 0;

    left: 80px;

}


.label-right {

    right: -40px;

    top: 50%;

    transform:
        rotate(90deg);

}


/* =====================================================
   Scroll
===================================================== */

.scroll {

    position: absolute;

    bottom: 40px;

    left: 5vw;

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 8px;

    color: #555;

    letter-spacing: .15em;

}


.scroll-line {

    width: 60px;

    height: 1px;

    background: #555;

    animation:
        scrollLine 2s
        ease-in-out
        infinite;

}


@keyframes scrollLine {

    0%,100% {

        transform:
            scaleX(.4);

        transform-origin: left;

    }

    50% {

        transform:
            scaleX(1);

    }

}


/* =====================================================
   Sections
===================================================== */

.section {

    min-height: 100vh;

    padding:
        140px 5vw;

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

    position: relative;

}


.section-number {

    font-size: 9px;

    color: #555;

    letter-spacing: .18em;

}


/* =====================================================
   About
===================================================== */

.about-content {

    margin-top: 120px;

    display: grid;

    grid-template-columns:
        1.5fr 1fr;

    gap: 10vw;

}


.about h2 {

    font-size:
        clamp(55px, 8vw, 110px);

    line-height: .9;

    letter-spacing: -.07em;

}


.about h2 .title-outline {

    color: transparent;

    -webkit-text-stroke:
        1px #555;

}


.about-text {

    max-width: 400px;

    padding-top: 20px;

}


.about-text p {

    color: #888;

    font-size: 15px;

    line-height: 2;

    margin-bottom: 25px;

}


/* =====================================================
   Interests
===================================================== */

.interests-content {

    margin-top: 100px;

}


.interests h2 {

    font-size:
        clamp(80px, 15vw, 200px);

    line-height: .8;

    letter-spacing: -.08em;

}


.interests h2 .title-outline {

    color: #555;

}


.interest-list {

    max-width: 900px;

    margin-top: 100px;

}


.interest {

    display: grid;

    grid-template-columns:
        70px 1fr;

    gap: 30px;

    padding: 30px 0;

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

    transition: .3s;

}


.interest:hover {

    padding-left: 20px;

}


.interest > span {

    color: #444;

    font-size: 10px;

}


.interest h3 {

    font-size: 24px;

    letter-spacing: -.03em;

}


.interest p {

    margin-top: 10px;

    color: #777;

    font-size: 13px;

    line-height: 1.7;

}


/* =====================================================
   Current
===================================================== */

.current-content {

    margin-top: 100px;

}


.current-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

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

    margin-top: 60px;

}


.current-item {

    min-height: 200px;

    padding: 30px;

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

    transition: .4s;

}


.current-item:nth-child(odd) {

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

}


.current-item span {

    display: block;

    color: #555;

    font-size: 9px;

    letter-spacing: .15em;

    margin-bottom: 40px;

}


.current-item strong {

    font-size:
        clamp(25px, 3vw, 45px);

    letter-spacing: -.04em;

}


.current-item:hover {

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

}


/* =====================================================
   Contact
===================================================== */

.contact {

    min-height: 100vh;

    padding:
        150px 5vw;

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

}


.contact h2 {

    font-size:
        clamp(80px, 15vw, 210px);

    line-height: .8;

    letter-spacing: -.08em;

}


.contact h2 .title-outline {

    color: transparent;

    -webkit-text-stroke:
        1px white;

}


.contact-description {

    max-width: 430px;

    color: #777;

    line-height: 1.8;

    font-size: 14px;

    margin-top: 70px;

}


.contact-links {

    margin-top: 70px;

    max-width: 800px;

}


.contact-links a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 22px 0;

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

    color: white;

    text-decoration: none;

    transition: .3s;

}


.contact-links a:hover {

    padding-left: 20px;

}


.contact-links span {

    color: #555;

    font-size: 9px;

    letter-spacing: .15em;

}


.contact-links strong {

    font-size: 12px;

    font-weight: 500;

}


/* =====================================================
   Footer
===================================================== */

footer {

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

    padding:
        30px 5vw;

    display: flex;

    justify-content: space-between;

    font-size: 8px;

    color: #444;

    letter-spacing: .15em;

}


/* =====================================================
   Mobile
===================================================== */

@media (max-width: 900px) {

    nav {

        display: none;

    }


    .status {

        display: none;

    }


    .hero {

        padding-top: 140px;

    }


    .hero h1 {

        font-size: 22vw;

    }


    .avatar-container {

        right: -70px;

        top: 55%;

        opacity: .35;

        transform:
            translateY(-50%)
            scale(.8);

    }


    .about-content {

        grid-template-columns: 1fr;

        gap: 70px;

    }


    .interest {

        grid-template-columns:
            40px 1fr;

    }


    .current-grid {

        grid-template-columns: 1fr;

    }


    .current-item:nth-child(odd) {

        border-right: none;

    }


    .contact h2 {

        font-size: 22vw;

    }

    .article-card {
        grid-template-columns: 40px 1fr 30px;
        gap: 15px;
    }


    .article-date {
        display: none;
    }

}


@media (max-width: 600px) {

    .contact-dock {

        right: 15px;

        bottom: 15px;

    }


    .hero-meta {

        font-size: 7px;

    }


    .description {

        max-width: 300px;

    }


    .avatar-container {

        opacity: .22;

    }


    .contact-links a {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }


    footer {

        flex-direction: column;

        gap: 10px;

    }

    .article-card {
        padding: 25px 0;
    }


    .article-info h3 {
        font-size: 20px;
    }


    .article-info p {
        font-size: 11px;
    }


}

/* =====================================================
   Articles
===================================================== */

.articles-content {

    margin-top: 100px;

}


.articles h2 {

    font-size:
        clamp(80px, 15vw, 200px);

    line-height: .8;

    letter-spacing: -.08em;

}


.articles h2 .title-outline {

    color: transparent;

    -webkit-text-stroke:
        1px #555;

}


.articles-intro {

    max-width: 430px;

    margin-top: 60px;

    color: #777;

    font-size: 14px;

    line-height: 1.8;

}


.article-list {

    max-width: 1100px;

    margin-top: 90px;

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

}


.article-card {

    display: grid;

    grid-template-columns:
        70px 1fr 80px 30px;

    gap: 30px;

    align-items: center;

    padding: 35px 0;

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

    color: white;

    text-decoration: none;

    transition:
        .4s ease;

}


.article-card:hover {

    padding-left: 20px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.025),
            transparent
        );

}


.article-index {

    color: #444;

    font-size: 10px;

    letter-spacing: .1em;

}


.article-info {

    min-width: 0;

}


.article-category {

    display: block;

    margin-bottom: 12px;

    color: #555;

    font-size: 8px;

    letter-spacing: .15em;

}


.article-info h3 {

    font-size:
        clamp(20px, 2.5vw, 32px);

    font-weight: 600;

    letter-spacing: -.04em;

}


.article-info p {

    max-width: 600px;

    margin-top: 10px;

    color: #666;

    font-size: 12px;

    line-height: 1.7;

}


.article-date {

    color: #444;

    font-size: 9px;

    letter-spacing: .1em;

    text-align: right;

}


.article-arrow {

    color: #555;

    font-size: 18px;

    transition:
        .3s ease;

}


.article-card:hover .article-arrow {

    color: white;

    transform:
        translate(4px, -4px);

}


.articles-more {

    margin-top: 50px;

}

/* =====================================================
   XIMU Custom Cursor
===================================================== */

@media (pointer: fine) {

    body,
    a,
    button {

        cursor: none;

    }


    .ximu-cursor {

        position: fixed;

        top: 0;
        left: 0;

        width: 34px;
        height: 34px;

        border:
            1px solid rgba(255,255,255,.45);

        border-radius: 50%;

        pointer-events: none;

        z-index: 9999;

        transform:
            translate3d(-100px,-100px,0);

        transition:
            width .35s cubic-bezier(.16,1,.3,1),
            height .35s cubic-bezier(.16,1,.3,1),
            border-radius .35s ease,
            border-color .3s ease,
            background .3s ease,
            opacity .3s ease;

        display: flex;

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

        mix-blend-mode: difference;

    }


    .ximu-cursor-dot {

        position: fixed;

        top: 0;
        left: 0;

        width: 5px;
        height: 5px;

        background: white;

        border-radius: 50%;

        pointer-events: none;

        z-index: 10000;

        transform:
            translate3d(-100px,-100px,0)
            translate(-50%,-50%);

        box-shadow:
            0 0 12px rgba(255,255,255,.7);

        mix-blend-mode: difference;

    }


    .ximu-cursor-text {

        font-size: 13px;

        color: white;

        opacity: 0;

        transform: scale(.5);

        transition:
            opacity .25s ease,
            transform .25s ease;

    }


    /* Hover */

    .ximu-cursor.is-hover {

        width: 54px;
        height: 54px;

        border-color: white;

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

    }


    /* Article */

    .ximu-cursor.is-article {

        width: 64px;
        height: 64px;

        border-color: white;

    }


    .ximu-cursor.is-article
    .ximu-cursor-text {

        opacity: 1;

        transform: scale(1);

    }


    /* Click */

    .ximu-cursor.is-click {

        width: 24px;
        height: 24px;

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

    }


    /* 页面外 */

    .ximu-cursor.is-hidden {

        opacity: 0;

    }


    .ximu-cursor,
    .ximu-cursor-dot {

        will-change:
            transform;

    }

}

/* =====================================================
   XIMU Motion System
===================================================== */


/* =====================================================
   Page Entrance
===================================================== */

body {

    opacity: 0;

    transition:
        opacity .8s ease;

}


body.page-loaded {

    opacity: 1;

}


/* =====================================================
   Scroll Reveal
===================================================== */

.scroll-reveal {

    opacity: 0;

    transform:
        translateY(50px);

    transition:
        opacity .9s cubic-bezier(.16,1,.3,1),
        transform .9s cubic-bezier(.16,1,.3,1);

}


.scroll-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =====================================================
   Section Number
===================================================== */

.section-number.scroll-reveal {

    transition-delay: .05s;

}


/* =====================================================
   About
===================================================== */

.about-content.scroll-reveal {

    transition-delay: .1s;

}


/* =====================================================
   Interest Items
===================================================== */

.interest.scroll-reveal:nth-child(1) {

    transition-delay: .05s;

}


.interest.scroll-reveal:nth-child(2) {

    transition-delay: .12s;

}


.interest.scroll-reveal:nth-child(3) {

    transition-delay: .19s;

}


.interest.scroll-reveal:nth-child(4) {

    transition-delay: .26s;

}


/* =====================================================
   Current Items
===================================================== */

.current-item.scroll-reveal:nth-child(1) {

    transition-delay: .05s;

}


.current-item.scroll-reveal:nth-child(2) {

    transition-delay: .12s;

}


.current-item.scroll-reveal:nth-child(3) {

    transition-delay: .19s;

}


.current-item.scroll-reveal:nth-child(4) {

    transition-delay: .26s;

}


/* =====================================================
   Article Cards
===================================================== */

.article-card.scroll-reveal:nth-child(1) {

    transition-delay: .05s;

}


.article-card.scroll-reveal:nth-child(2) {

    transition-delay: .14s;

}


.article-card.scroll-reveal:nth-child(3) {

    transition-delay: .23s;

}


/* =====================================================
   Big Title Animation
===================================================== */

.big-title {
    overflow: hidden;
}


    .big-title .title-line {
        display: inline-block;
        opacity: 0;
        transform: translateY(110%);
        transition: opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
    }


/* 动画进入 */

.scroll-reveal.is-visible .big-title .title-line {
    opacity: 1;
    transform: translateY(0);
}


/* 逐行延迟 */

.big-title .title-line:nth-child(1) {
    transition-delay: .05s;
}


.big-title .title-line:nth-child(2) {
    transition-delay: .15s;
}


.big-title .title-line:nth-child(3) {
    transition-delay: .25s;
}

/* =====================================================
   Title Stagger
===================================================== */

.big-title .title-line:nth-child(1) {

    transition-delay: .05s;

}


.big-title .title-line:nth-child(2) {

    transition-delay: .15s;

}


.big-title .title-line:nth-child(3) {

    transition-delay: .25s;

}


/* =====================================================
   Interest Hover
===================================================== */

.interest {

    position: relative;

    overflow: hidden;

}


.interest::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 2px;

    height: 100%;

    background: white;

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    transition:
        transform .4s cubic-bezier(.16,1,.3,1);

}


.interest:hover::before {

    transform:
        scaleY(1);

}


.interest h3 {

    transition:
        transform .4s cubic-bezier(.16,1,.3,1);

}


.interest:hover h3 {

    transform:
        translateX(12px);

}


/* =====================================================
   Article Hover
===================================================== */

.article-card {

    position: relative;

    overflow: hidden;

}


.article-card::before {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 0;

    height: 1px;

    background: white;

    transition:
        width .5s cubic-bezier(.16,1,.3,1);

}


.article-card:hover::before {

    width: 100%;

}


.article-card h3 {

    transition:
        transform .4s cubic-bezier(.16,1,.3,1);

}


.article-card:hover h3 {

    transform:
        translateX(8px);

}


/* =====================================================
   Current
===================================================== */

.current-item {

    position: relative;

    overflow: hidden;

}


.current-item strong {

    display: inline-block;

    transition:
        transform .4s cubic-bezier(.16,1,.3,1);

}


.current-item:hover strong {

    transform:
        translateX(10px);

}


/* =====================================================
   Contact Title
===================================================== */

.contact h2 {

    overflow: hidden;

}


.contact h2 span {

    display: inline-block;

    transition:
        transform .6s cubic-bezier(.16,1,.3,1);

}


.contact h2:hover span {

    transform:
        translateX(12px);

}


/* =====================================================
   Reduced Motion
===================================================== */

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

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

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;

    }

}