.lato-light {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

.lato-extralight {
    font-family: 'Lato', sans-serif;
    font-weight: 100;
}

.cormorant-garamond-light {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
}

.cormorant-garamond-italic {
    font-style: italic;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300; }




/* ✅ 关于面板按钮 */
.hover-zone {
    position: fixed;
    top: 5vh;
    width: 20vw;
    height: 5vh;
    z-index: 10001;
}

#site-name, #home-toggle {
    position: fixed;
    top: 5vh;
    right: 5vw;
    font-family: 'Cormorant Garamond', serif;
    font-size: 3vh;
    color: black;
    z-index: 10001;
    text-decoration: none;
    /* ✅ 比 about-panel 更高，确保永远在最上 */

}
#site-name {
    pointer-events: none;
    /* ✅ 避免遮挡点击 */
    user-select: none;
}

#about-toggle {
    position: fixed;
    top: 5vh;
    left: calc(5vw - 1ch);
    font-family: 'Cormorant Garamond', serif;
    font-size: 3vh;
    color: black;
    cursor: pointer;
    z-index: 10000;
    user-select: none;
    pointer-events: auto;
    text-align: left;
}

#about-toggle:hover, #home-toggle:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* 整体面板 */
#about-panel {
    position: fixed;
    top: 0vh;
    /* 👈 初始隐藏在顶部 */
    left: 0vw;
    width: 100vw;
    height: 100vh;
    background: rgb(255, 255, 255);
    z-index: 9000;
    transition: transform 0.6s ease;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 5vh 5vw;
    pointer-events: none;
    /* 默认不可点击 */

    transform-origin: 100vw 0;
    /* ✅ 旋转中心在右上角 */
    transform: translateY(-100%) rotate(15deg);
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0% 60%);
}

/* 激活后滑入 */
#about-panel.active {
    transform: translateY(0) rotate(0deg);
    pointer-events: auto;
}

#about-panel.closing {
    transform: translateY(-100%) rotate(15deg);
    pointer-events: auto;
}

/* 文字内容样式 */
.about-content {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2vh;
    top: 10vh;
    left: 5vw;
    line-height: 1.6;
    text-align: justify;
    position:absolute;
    user-select: none;
}

/* 感應區域：固定在左上 / 右上，透明但可觸發 */

#about-motto {
    font-size: 8vh;
    margin: 0 0 0 0;
    
}



.gradient-text {
    /* background: linear-gradient(270deg, #da5959, #000000, #bdbdbd); */
    background-color: #000000 ;
    background-size: 100% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    transition:
            background 1s ease,
            transform 0.3s ease;
    animation: none;
    
    /* 平滑过渡到 hover 状态 */
}


.gradient-text:hover, .gradient-motto {
    background: linear-gradient(to right, #f872f1, #4d95da,#59d440);
    background-size: 300% 300%;
    background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    /* 关闭流动动画效果 */
    animation: gradientShift 6s ease infinite;
    
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#about-intro {
    font-size: 3vh;
    color: #000000;
    margin-bottom: 1em;
    line-height: 1.5em;
}

.link-label {
    
    /* 禁止点击 */
    cursor: default;
    /* 不显示手型 */
    text-decoration: none;
    /* 可防止 hover 下划线等效果 */
    }

#about-links {
    display: flex;
    flex-direction: row;
    /* 横向排列 */
    gap: 2vw;
    /* 链接之间间距，可用 rem/em/vw 自行调 */
    justify-content: flex-start;
    /* 从左往右排 */
    flex-wrap: wrap;
    /* 如需响应式可换行 */
}

#about-links .link-item {
    font-size: 3vh;
    color: #000;
    text-decoration: none;
    transition: transform 0.3s ease, color 0.3s ease;

    display: inline-block;
    transform-origin: center center;
    /* 让放大以文字为中心 */
}

#about-links .link-item:hover {

    transform: scale(1.2);
}

#about-contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5em;
    margin-top: 2vh;
    flex-wrap: wrap;
    /* 可自动换行以适配小屏 */
}

#contact-link {
    font-size: 3vh;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.3s ease;
}

#contact-link:hover {
    transform: scale(1.1);
}

.contact-text {
    font-size: 3vh;
    opacity: 0;
    transition: opacity 0.4s ease;
    color: #333;
    display: none;
}

.contact-text.visible {
    opacity: 1;
    display: inline;
}

.underline {
    
    cursor: pointer;
}


#copy-popup {
    transform: translate(-20%, -120%);
    position: fixed;
    background: #000;
    color: #fff;
    padding: 0.4em 0.8em;
    font-size: 2vh;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
}

#copy-popup.show {
    opacity: 1;
}


.hover-left {
    left: 3vw;
}

.hover-right {
    right: 3vw;
}

/* 白色方塊：預設隱藏 */
.hover-box {
    position: absolute;
    width: 20vw;
    height: 5vh;
    top: 0vh;
    background: white;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* ✅ 不干擾滑鼠事件 */
}

.hover-zone:hover .hover-box {
    opacity: 1;
}
/* 滑鼠移入時顯示 */


#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    /* ✅ 模糊背景 */
    -webkit-backdrop-filter: blur(8px);
    /* ✅ Safari 支持 */
    /* ✅ 半透明黑色 */
    z-index: 8999;
    /* 在 panel 下面但在页面上 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

#overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#orbit-canvas {
    position: absolute;

    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    /* ✅ 明确设置很小的 z-index */
    pointer-events: none;

    opacity:0;
    /* 默认不可见 */
    transition: opacity 0.1s ease;
    /* ✅ 平滑淡入淡出 */
    clip-path: polygon(0 0, 100% 0, 100% 46%, 0% 66%);
    /* 按 panel 区域裁切 */
}

#orbit-canvas.visible {
    opacity: 1 !important;

}