/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* 防止任何滚动 */
    background: #050505;
}

body {
    font-family: 'MiSans VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #ffffff;
    line-height: 1;
    overflow-x: hidden; /* 隐藏水平滚动条，确保响应式缩放正常工作 */
}

/* ===== SECTIONS ===== */
.section {
    position: relative;
    width: 1440px;
    height: 100vh; /* 使用100vh确保填满viewport，不需要滚动 */
    min-height: 600px; /* 最小高度600px */
    max-height: 900px; /* 最大高度900px，适配大屏 */
    margin: 0 auto;
    background: #050505;
    overflow: hidden;
}

/* ===== BACKGROUND ===== */
.bg-container {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bg-noise {
    position: absolute;
    inset: 0;
    background-image: url('../assets/bg-noise.png');
    background-size: 2048px 2048px;
    background-position: top left;
    background-repeat: repeat;
    opacity: 0.1;
    pointer-events: none;
}

/* ===== HEADER ===== */
.header {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1440px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    z-index: 100;
}

.header-content {
    position: relative;
}

.header-logo {
    font-family: 'MiSans VF', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    pointer-events: none;
}

/* ===== HERO CONTENT ===== */
.hero-content {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ===== STARS ===== */
/* PC端stars - 默认显示 */
.stars-layer {
    position: absolute;
    left: 70px;
    top: 37px;
    width: 1299px;
    height: 596px;
    z-index: 2;
    will-change: transform;
}

.stars-image {
    position: absolute;
    left: -1.54%;
    top: -3.52%;
    right: -0.92%;
    bottom: -2.01%;
    width: calc(100% + 2.46%);
    height: calc(100% + 5.53%);
    display: block;
    max-width: none;
}

/* 移动端stars - 默认隐藏 */
.stars-layer-mobile,
.constellation-layer-mobile {
    display: none;
    position: absolute;
    z-index: 2;
}

/* ===== PLANET ===== */
.planet-container {
    position: absolute;
    left: 510px;
    top: 150px;
    width: 420px;
    height: 420px;
    z-index: 3;
    will-change: transform;
}

.planet-ellipse {
    position: absolute;
    width: 420px;
    height: 420px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.planet-ellipse img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

.planet-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 420px;
    height: 420px;
}

.planet-mask-bg {
    position: absolute;
    left: -510px;
    top: -150px;
    width: 1440px;
    height: 864px;
    background-image: url('../assets/planet-bg.png');
    background-size: 1316.57px 1316.57px;
    background-position: top left;
    background-repeat: repeat;
    -webkit-mask-image: url('../assets/planet-mask.svg');
    mask-image: url('../assets/planet-mask.svg');
    -webkit-mask-size: 420px 420px;
    mask-size: 420px 420px;
    -webkit-mask-position: 510px 150px;
    mask-position: 510px 150px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    opacity: 1;
}

/* ===== TITLE BACKGROUND ===== */
.title-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

.title-bg h1 {
    font-family: 'MiSans VF', sans-serif;
    font-weight: 700;
    font-size: 160px;
    letter-spacing: 32px;
    text-align: center;
    white-space: nowrap;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.25) 24.757%,
        #ffffff 79.773%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.1;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    pointer-events: none;
}

/* Line break for mobile - hidden on desktop */
.title-bg h1 .line-break,
.title-hover h1 .line-break {
    display: none;
}

/* ===== MARQUEE ===== */
.marquee-container {
    position: absolute;
    left: 50%; /* 居中对齐 */
    transform: translateX(-50%); /* 水平居中 */
    top: auto;
    bottom: 20px; /* PC端打字机贴近底部，只留20px */
    width: 600px; /* 增加宽度以容纳长文本 */
    height: 27px;
    overflow: visible; /* 改为visible，避免截断 */
    z-index: 5;
}

.marquee-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 0;
}

.marquee-content p {
    font-family: 'MiSans VF', sans-serif;
    font-weight: 300;
    font-size: 20px;
    letter-spacing: 4px;
    text-align: center;
    white-space: pre;
    line-height: normal;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* Removed old marquee reveal animation - using typewriter effect instead */

/* ===== HOVER REVEAL LAYER ===== */
.hover-reveal-layer {
    position: absolute;
    inset: 0;  /* FIXED: Use same positioning as .hero-content */
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

#hero:hover .hover-reveal-layer {
    opacity: 1;
}

/* PC端hover时隐藏base layer的星球（spotlight会显示hover layer的星球） */
/* 注意：这个规则需要在PC端media query中，避免影响移动端 */

/* ===== CONSTELLATION GLOW ===== */
.constellation-layer {
    position: absolute;
    left: 50%;
    bottom: 223px;
    width: 280px;
    height: 280px;
    transform: translateX(-50%);
    z-index: 9;
}

.constellation-mask {
    position: absolute;
    inset: 0;
    -webkit-mask-image: url('../assets/constellation-mask.svg');
    mask-image: url('../assets/constellation-mask.svg');
    -webkit-mask-size: 1139.21px 270px;
    mask-size: 1139.21px 270px;
    -webkit-mask-position: -430px 5px;
    mask-position: -430px 5px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.constellation-glow-spread {
    position: absolute;
    inset: -178.571%;
}

.constellation-glow-image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

/* ===== HOVER TITLE ===== */
.title-hover {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
}

.title-hover h1 {
    font-family: 'MiSans VF', sans-serif;
    font-weight: 700;
    font-size: 160px;
    letter-spacing: 32px;
    text-align: center;
    white-space: nowrap;
    color: #ffffff;
    text-shadow:
        0px 0px 12px #555b62,
        0px 0px 20px #555b62,
        0px 0px 60px #555b62,
        0px 0px 120px #555b62,
        0px 0px 120px #555b62,
        0px 0px 120px #555b62;
    /* Removed blur(0.5px) - causes position offset */
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
    pointer-events: none;
}

/* ===== HOVER STARS ===== */
.stars-hover-layer {
    position: absolute;
    left: 70px; /* 与.stars-layer对齐 */
    top: 37px; /* 与.stars-layer对齐 */
    width: 1299px; /* 与.stars-layer对齐 */
    height: 596px; /* 与.stars-layer对齐 */
    z-index: 10;
    will-change: transform;
}

.stars-hover-image {
    position: absolute;
    left: -1.54%; /* 与.stars-image对齐 */
    top: -3.52%; /* 与.stars-image对齐 */
    right: -0.92%; /* 与.stars-image对齐 */
    bottom: -2.01%; /* 与.stars-image对齐 */
    width: calc(100% + 2.46%); /* 与.stars-image对齐 */
    height: calc(100% + 5.53%); /* 与.stars-image对齐 */
    display: block;
    max-width: none;
}

/* ===== HOVER PLANET ===== */
.planet-hover-container {
    position: absolute;
    left: 510px;
    top: 150px;
    width: 420px;
    height: 420px;
    mix-blend-mode: screen;
    opacity: 0.39;
    will-change: transform;
}

.planet-hover-ellipse {
    position: absolute;
    width: 420px;
    height: 420px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.planet-hover-ellipse img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
}

.planet-hover-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 420px;
    height: 420px;
}

.planet-hover-mask-bg {
    position: absolute;
    left: -510px;
    top: -150px;
    width: 1440px;
    height: 864px;
    background-image: url('../assets/bg-noise.png');
    background-size: 2048px 2048px;
    background-position: top left;
    background-repeat: repeat;
    -webkit-mask-image: url('../assets/planet-mask.svg');
    mask-image: url('../assets/planet-mask.svg');
    -webkit-mask-size: 420px 420px;
    mask-size: 420px 420px;
    -webkit-mask-position: 510px 150px;
    mask-position: 510px 150px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ===== CURSOR TRACKER ===== */
.cursor-tracker {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ===== ANIMATION STYLES ===== */

/* Animation 1: Breathing Light Effect (5300ms cycle) */
/* ⚠️ MOBILE & TABLET ONLY (max-width: 1280px) */
/* Frame 21 → wait 500ms → Frame 22 (2000ms ease-out) → wait 800ms → Frame 21 (2000ms ease-out) */
@media (max-width: 1280px) {
    .title-bg h1,
    .title-hover h1 {
        transition: all 2000ms ease-in-out; /* 更平滑的过渡 */
    }

    /* Frame 22: Brighter state - 接近 PC 端亮度但柔和不刺眼 */
    .title-bg h1.breathe-bright {
        background: none;
        -webkit-text-fill-color: #ffffff;
        color: #ffffff;
        opacity: 1;
        text-shadow:
            0px 0px 10px rgba(255, 255, 255, 0.4),
            0px 0px 20px rgba(255, 255, 255, 0.3),
            0px 0px 40px rgba(170, 180, 190, 0.25),
            0px 0px 60px rgba(170, 180, 190, 0.15);
    }

    .title-hover h1.breathe-bright {
        color: #ffffff;
        text-shadow:
            0px 0px 20px rgba(255, 255, 255, 0.8),
            0px 0px 40px rgba(255, 255, 255, 0.6),
            0px 0px 80px rgba(255, 255, 255, 0.4),
            0px 0px 100px rgba(170, 180, 190, 0.5),
            0px 0px 140px rgba(170, 180, 190, 0.3),
            0px 0px 180px rgba(170, 180, 190, 0.2);
        filter: blur(0.3px);
    }

    /* Planet Breathing Animation - Mobile Only (2101ms cycle) */
    /* Frame 21 (darker state) - default */
    .planet-container {
        transition: opacity 1000ms ease-in-out, filter 1000ms ease-in-out;
        opacity: 0.85; /* 从0.6提高到0.85，确保星球清晰可见 */
    }

    /* Frame 22 (brighter state) - vector 和 eclipse 内部亮起来，无外圈光晕 */
    .planet-container.planet-breathe-bright {
        opacity: 1;
        filter: brightness(1.3); /* 只增加亮度，不加外圈光晕 */
    }

    /* 让 planet ellipse 层也参与呼吸 */
    .planet-container .planet-ellipse {
        transition: opacity 1000ms ease-in-out;
    }

    .planet-container.planet-breathe-bright .planet-ellipse {
        opacity: 1;
    }
}

/* Animation 2: Custom Mouse Cursor */
/* ⚠️ PC ONLY (min-width: 1281px and pointer: fine) */
@media (min-width: 1281px) and (pointer: fine) {
    /* Mouse Spotlight Effect - PC ONLY */
    /* Circular mask reveals bright version of elements only around cursor */

    /* 隐藏移动端stars，显示PC端stars */
    .stars-layer-mobile,
    .constellation-layer-mobile {
        display: none !important;
    }

    .stars-layer.stars-pc {
        display: block !important;
    }

    /* Initialize CSS custom properties for spotlight position */
    :root {
        --spotlight-x: 50vw;
        --spotlight-y: 50vh;
        --spotlight-radius: 280px; /* 560px diameter - 2x larger */
    }

    /* Apply soft spotlight gradient to hover reveal layer */
    .hover-reveal-layer {
        /* Soft radial gradient - smooth fade from center to edges (NO hard circle!) */
        -webkit-mask-image: radial-gradient(
            circle var(--spotlight-radius) at var(--spotlight-x) var(--spotlight-y),
            black 0%,              /* Center: fully visible */
            black 30%,             /* Keep bright in inner area */
            rgba(0,0,0,0.3) 60%,   /* Start fading */
            transparent 100%       /* Edges: completely invisible */
        );
        mask-image: radial-gradient(
            circle var(--spotlight-radius) at var(--spotlight-x) var(--spotlight-y),
            black 0%,
            black 30%,
            rgba(0,0,0,0.3) 60%,
            transparent 100%
        );

        /* Smooth mask movement */
        transition: -webkit-mask-position 0.05s ease-out, mask-position 0.05s ease-out;

        /* Performance optimization */
        will-change: -webkit-mask-position, mask-position;
    }

    /* PC端hover时隐藏base layer的星球（spotlight会显示hover layer的星球） */
    #hero:hover .planet-container {
        opacity: 0;
    }
}

/* Animation 3: Planet Entrance (1000ms ease-out) */
.planet-entrance-initial {
    opacity: 0;
}

.planet-entrance-animate {
    opacity: 1;
    transition: opacity 1000ms ease-out;
}

/* Title Entrance Animation (smooth fade + scale) */
.title-entrance-initial {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
}

.title-entrance-animate {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 1200ms ease-out, transform 1200ms ease-out;
}

/* Animation 4: Typewriter Fadeout (300ms ease-out) */
.typewriter-fadeout {
    opacity: 0 !important;
    transition: opacity 300ms ease-out;
}

/* ===== RESPONSIVE DESIGN ===== */

/* 移动端和平板专用布局 (≤1280px) - 包括手机、平板和小笔记本 */
@media (max-width: 1280px) {
    .section {
        width: 100vw;
        height: 100vh; /* 使用100vh填满viewport */
        height: 100svh; /* Safari: 使用small viewport height，不含地址栏 */
        min-height: auto; /* 移除min-height，避免小屏设备滚动 */
        max-height: none; /* 移除max-height限制 */
        overflow: hidden; /* 防止垂直滚动 */
        position: relative;
    }

    .hero-content {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: visible; /* 允许星星层覆盖整个屏幕 */
    }

    /* Header适配 - Figma精确值 */
    .header {
        width: 100%;
        height: 64px; /* Figma: 64px */
        padding: 10px;
    }

    .header-logo {
        font-size: 18px; /* Figma: 18px */
        letter-spacing: 1.8px;
    }

    /* 隐藏PC端stars */
    .stars-layer.stars-pc {
        display: none !important;
    }

    /* 显示移动端stars */
    .stars-layer-mobile {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 73.5%; /* 596px / 810px = 73.5% */
        z-index: 2;
        pointer-events: none;
    }

    .stars-mobile-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: fill;
        display: block;
        opacity: 1;
    }

    /* 显示移动端constellation连线 */
    .constellation-layer-mobile {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 37%; /* 300px / 810px = 37% */
        z-index: 2;
        pointer-events: none;
    }

    .constellation-mobile-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: fill;
        display: block;
        opacity: 1;
    }

    /* 星球适配 - 使用vw单位保持响应式 */
    .planet-container {
        left: 50%; /* 居中对齐 */
        top: 26vh; /* 使用vh适应不同高度设备 */
        transform: translateX(-50%);
        width: 72vw; /* 270px / 375px = 72% */
        max-width: 270px; /* 限制最大尺寸 */
        height: auto;
        aspect-ratio: 1;
        z-index: 3 !important;
    }

    .planet-ellipse {
        width: 100%;
        height: 100%;
    }

    .planet-mask {
        width: 100%;
        height: 100%;
    }

    .planet-mask-bg {
        left: calc(-50vw + 135px);
        top: calc(-50vh + 135px);
        width: 100vw;
        height: 100vh;
        -webkit-mask-size: 270px 270px;
        mask-size: 270px 270px;
        -webkit-mask-position: calc(50vw - 135px) calc(50vh - 135px);
        mask-position: calc(50vw - 135px) calc(50vh - 135px);
    }

    /* 标题适配 - 使用vh和vw单位保持响应式 */
    .title-bg {
        left: 50%; /* 居中对齐 */
        top: 40vh; /* 调整垂直位置 */
        transform: translateX(-50%);
        width: 86.4vw; /* 324px / 375px = 86.4% */
        max-width: 324px; /* 限制最大宽度 */
        height: auto;
    }

    .title-bg h1 {
        font-size: min(20.3vw, 76px); /* 76px / 375px = 20.3vw，最大76px */
        letter-spacing: min(4.05vw, 15.2px); /* 15.2px / 375px = 4.05vw */
        white-space: normal;
        line-height: 1.1;
    }

    /* 移动端换行 - I'm 和 Zikun 分成两行 */
    .title-bg h1 .line-break {
        display: block;
        height: 0;
    }

    /* Hover标题适配 - 与.title-bg完全一致 */
    .title-hover {
        left: 50%;
        top: 40vh; /* 与.title-bg一致 */
        transform: translateX(-50%);
        width: 86.4vw;
        max-width: 324px;
        height: auto;
    }

    .title-hover h1 {
        font-size: min(20.3vw, 76px); /* 与.title-bg一致 */
        letter-spacing: min(4.05vw, 15.2px);
        white-space: normal;
        line-height: 1.1;
    }

    /* 移动端换行 - I'm 和 Zikun 分成两行 */
    .title-hover h1 .line-break {
        display: block;
        height: 0;
    }

    /* Marquee适配 - 调整spacing */
    .marquee-container {
        left: 50%;
        top: auto;
        bottom: 40px; /* 使用固定px值，避免Safari 100vh问题 */
        transform: translateX(-50%);
        width: calc(100vw - 40px);
        max-width: 500px; /* 增加最大宽度以容纳长文本 */
        overflow: visible; /* 避免截断 */
    }

    .marquee-content p {
        font-size: 14px;
        letter-spacing: 2.8px;
    }

    /* Hover Reveal Layer - 移动端隐藏 */
    .hover-reveal-layer {
        display: none !important; /* 移动端不需要hover层，只需要呼吸动画 */
    }

    /* Constellation适配 */
    .constellation-layer {
        left: 50%;
        bottom: 150px;
        width: 200px;
        height: 200px;
    }

    /* Hover Stars适配 */
    .stars-hover-layer {
        left: 0;
        top: 0;
        width: 100%;
        height: 50%;
    }

    .stars-hover-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Hover Planet适配 */
    .planet-hover-container {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 280px;
        height: 280px;
    }

    .planet-hover-ellipse {
        width: 280px;
        height: 280px;
    }

    .planet-hover-mask {
        width: 280px;
        height: 280px;
    }

    .planet-hover-mask-bg {
        left: calc(-50vw + 140px);
        top: calc(-50vh + 140px);
        width: 100vw;
        height: 100vh;
        -webkit-mask-size: 280px 280px;
        mask-size: 280px 280px;
        -webkit-mask-position: calc(50vw - 140px) calc(50vh - 140px);
        mask-position: calc(50vw - 140px) calc(50vh - 140px);
    }
}

/* 小屏桌面 (1281px - 1440px) - PC响应式缩放 */
/* PC端在1281-1440px之间自动缩放以适配屏幕 */
@media (min-width: 1281px) and (max-width: 1440px) {
    .section {
        width: 1440px;
        position: relative;
        left: 50%; /* 移到视口中心 */
        margin-left: -720px; /* 负margin强制居中：-1440px/2 */
        transform: scale(calc(100vw / 1440));
        transform-origin: top center;
    }
}

/* ===== FONTS ===== */
@font-face {
    font-family: 'MiSans VF';
    src: local('MiSans'), local('MiSans VF');
    font-weight: 100 900;
    font-display: swap;
}