/**
 * TinyP Portfolio - 样式文件
 * 基于 Figma 设计稿: https://www.figma.com/design/uvei6QthR89ZS8vvcWdlFE/TINYP_PORTFOLIO?node-id=0-1
 *
 * 响应式断点:
 * - 360-767px: 1列布局
 * - 768-1279px: 2列布局
 * - 1280-1920px: 4列布局
 */

/* ==================== 全局样式 ==================== */

/* 基础字体 */
* {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* 页面背景色 - Figma: #f5f5f5 */
body {
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
}

/* ==================== 主容器 ==================== */
/* 对应 Figma: Home_01_1920 (43:249) */
/* Auto Layout: Padding 36px (desktop), 12px (mobile) */

[data-node-id="main"] {
    max-width: 1920px;
    margin: 0 auto;
}

/* ==================== 头部区域 Frame 12 ==================== */
/* 对应 Figma: Frame 12 (43:250) */
/* Auto Layout: Horizontal, Space Between */

[data-node-id="header"] {
    min-height: 349px;
}

/* ==================== 头部左侧 Frame 11 ==================== */
/* 对应 Figma: Frame 11 (43:251) */
/* Auto Layout: Vertical, Justify Space Between */

[data-node-id="header-left"] {
    max-width: 166px;
}

/* 移动端调整左侧宽度 */
@media (max-width: 767px) {
    [data-node-id="header-left"] {
        max-width: 82px;
    }
}

/* ==================== LOGO ==================== */
/* 对应 Figma: LOGO (43:252) */
/* Desktop: 112×75px, Mobile: 72×48px */

[data-node-id="logo"] img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ==================== 导航 Frame 6 ==================== */
/* 对应 Figma: Frame 6 (43:253) */
/* Auto Layout: Horizontal, Gap 60px (desktop), 20px (mobile) */

[data-node-id="nav"] {
    /* Tailwind classes handle: gap-[20px] sm:gap-[60px] */
}

#workText, #infoText {
    transition: opacity 0.3s ease;
}

/* ==================== 头部右侧 Frame 10 ==================== */
/* 对应 Figma: Frame 10 (43:256) */
/* Auto Layout: Vertical, Gap 120px (desktop), 60px (mobile) */
/* No max-width constraint - content determines width */

[data-node-id="header-right"] {
    text-align: left;
}

/* ==================== 标题 PERCEPTION PASSION PATIENCE ==================== */
/* 对应 Figma: PERCEPTION PASSION PATIENCE (43:257) */
/* Auto Layout: Vertical, Gap ~4px, Left-aligned */
/* Font: 57px (1920px), medium weight, scales down for smaller screens */

[data-node-id="tagline"] p {
    margin: 0;
    /* 行高紧凑以匹配 Figma 的 Auto Layout gap */
    line-height: 1.1;
}

/* ==================== 副标题 ==================== */
/* 对应 Figma: That's what good design need. (43:258) */
/* Font: 28px, No wrap */

[data-node-id="subtitle"] {
    margin: 0;
    /* 防止折行 */
    white-space: nowrap;
}

/* ==================== 网格区域 Frame 9 ==================== */
/* 对应 Figma: Frame 9 (43:259) */
/* Grid with 24px (6 in Tailwind) gap */

[data-node-id="grid"] {
    /* Tailwind grid classes handle layout */
    /* grid-cols-1: Mobile (360-767px) - 1 column */
    /* sm:grid-cols-2: Tablet (768-1279px) - 2 columns */
    /* lg:grid-cols-4: Desktop (1280-1920px) - 4 columns */
}

/* 初始隐藏，避免卡片生成时的闪跳 */
[data-node-id="grid"]:not(.cards-loaded) {
    visibility: hidden;
}

[data-node-id="grid"].cards-loaded {
    visibility: visible;
}

/* ==================== 白色卡片 ==================== */
/* 对应 Figma: Rectangle 1-16 (43:260-43:275) */
/* Rounded: 6px */
/* Aspect Ratio: 4:3 (444×333px at desktop) */

.work-card {
    background-color: #f5f5f5;  /* 与页面背景色相同，避免闪跳 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
}

.work-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* 卡片背景图片 */
/* 图片结构: assets/images/card-X/cover.png (或.jpg) */
/* X = 卡片编号，从 1 开始 */
/* 支持 jpg 和 png 两种格式 */
/* 卡片背景图样式由 JavaScript 动态生成，根据检测到的卡片数量自动注入 */

/* ==================== 响应式断点 ==================== */
/* 基于 Figma 设计的三个主要布局 */

/* 移动端 (360-767px): 1列布局 */
/* 对应 Figma: Home_01_360 (44:631) 和 Home_01_767 (44:591) */
/* Padding: 12px */
/* Logo: 72×48px */
/* Nav gap: 56px */
/* Grid: 1 column */

@media (max-width: 767px) {
    /* 标题字体缩小 */
    [data-node-id="tagline"] {
        font-size: 24px;
    }

    [data-node-id="subtitle"] {
        font-size: 14px;
    }

    /* 导航字体 */
    [data-node-id="nav"] {
        font-size: 12px;
    }
}

/* 平板 (768-1279px): 2列布局 */
/* 对应 Figma: Home_01_768 (44:561), Home_01_1280 (44:501) */
/* Padding: 36px */
/* Logo: 112×75px */
/* Nav gap: 121px */
/* Grid: 2 columns */

@media (min-width: 768px) and (max-width: 1279px) {
    /* 标题字体 */
    [data-node-id="tagline"] {
        font-size: 40px;
    }

    [data-node-id="subtitle"] {
        font-size: 20px;
    }
}

/* 桌面 (1280-1920px): 4列布局 */
/* 对应 Figma: Home_01_1920 (43:249) */
/* Padding: 36px */
/* Logo: 112×75px */
/* Nav gap: 121px */
/* Grid: 4 columns */

@media (min-width: 1280px) {
    /* 标题字体 */
    [data-node-id="tagline"] {
        font-size: 57px;
    }

    [data-node-id="subtitle"] {
        font-size: 28px;
    }
}

/* ==================== 超大屏幕 ==================== */

/* ==================== 全局隐藏滚动条 ==================== */
/* 全局隐藏滚动条，但保留滚动功能 */
html {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* 隐藏 Webkit 浏览器的滚动条 */
html::-webkit-scrollbar {
    display: none;
}

/* ==================== 环形视图 ==================== */
/* 仅在屏幕宽度大于1280px时显示 */
@media (max-width: 1279px) {
    #circular-view {
        display: none !important;
    }
}

/* 环形视图容器 */
#circular-view {
    display: block;
    opacity: 1;
    /* 完全禁止所有滑动和触摸操作 */
    touch-action: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    /* 隐藏滚动条 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* 隐藏 Webkit 浏览器的滚动条 */
#circular-view::-webkit-scrollbar {
    display: none;
}

/* 确保首页 header 在环形视图之上 */
[data-node-id="header"] {
    position: relative;
    z-index: 60;
}

/* Work 内容容器缩放动画 */
#work-content {
    transform-origin: top center;
}

/* 环形容器 - 响应式半径 */
/* 半径计算：1280px时1000px，1920px时1450px，继续按趋势增长 */
/* 公式：radius = 0.703125 * vw + 100 */
/* 验证：1280 * 0.703125 + 100 = 1000, 1920 * 0.703125 + 100 = 1450 */
#circular-ring {
    width: 0;
    height: 0;
    position: relative;
    --circular-radius: calc(0.703125 * 100vw + 100px);
}

/* 环形卡片包装器 */
.circular-card-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform-origin: center center;
    /* 移除 transition，完全由 JavaScript requestAnimationFrame 控制动画 */
}

/* 环形卡片 */
.circular-card {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* 响应式尺寸：1280px→286×215px，1920px→444×333px */
    width: calc(0.246875 * 100vw - 30px);
    height: calc(0.184375 * 100vw - 21px);
}

/* 卡片悬停效果 */
.circular-card:hover {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* ==================== 虚拟占位卡片样式 ====================
 * 用于16槽位系统中没有实际卡片的空槽位
 * 规则：同尺寸、透明度0.15、纯白色轮廓1px、无交互
 */
.circular-card-placeholder {
    /* 保持和实际卡片相同的响应式尺寸 */
    width: calc(0.246875 * 100vw - 30px);
    height: calc(0.184375 * 100vw - 21px);

    /* 透明背景 + 白色边框 */
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15);

    /* 禁用所有交互 */
    pointer-events: none;
    cursor: default;

    /* 置于实际卡片下层 */
    z-index: -1;

    /* 禁用hover效果 */
    transform: translate(-50%, -50%) !important;
    box-shadow: none !important;
}

/* PERCEPTION 文字 hover 效果 - 仅在大于1280px时生效 */
@media (min-width: 1280px) {
    /* 隐藏默认文字，显示动画元素 */
    .perception-default {
        display: none;
    }

    /* 容器样式 */
    #perception-text {
        display: inline-flex;
        align-items: flex-start;
        min-width: 340px;
        cursor: pointer;
        position: relative;
        height: 57px; /* 固定高度以容纳绝对定位的子元素 */
    }

    /* 原始文字和hover文字叠放 */
    .perception-original,
    .perception-hover {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* PERCEPTION - 使用 mask-size 实现 Mask Wipe 擦除效果 */
    .perception-original {
        -webkit-mask-image: linear-gradient(to right, black 0%, black 100%, transparent 100%);
        mask-image: linear-gradient(to right, black 0%, black 100%, transparent 100%);
        -webkit-mask-size: 200% 100%;
        mask-size: 200% 100%;
        -webkit-mask-position: 0% 0%;
        mask-position: 0% 0%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        /* 鼠标移出时延迟出现，等待箭头消失 */
        transition: -webkit-mask-position 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.25s,
                    mask-position 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
    }

    /* PROSPECT - 使用 clip-path 实现从左到右显示效果 */
    .perception-hover {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                    opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    }

    /* 箭头样式 - 初始隐藏 */
    .perception-arrow {
        position: absolute;
        left: 304px; /* 根据 Figma 位置 */
        top: 0;
        width: 50px;
        height: 67px;
        opacity: 0;
        transform: translateX(-20px) translateY(-1px);
        /* 鼠标移入时延迟出现，鼠标移出时快速消失 */
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    /* Hover 状态：PERCEPTION从左到右擦除，PROSPECT从左到右显示，箭头出现 */
    #perception-text:hover .perception-original {
        -webkit-mask-position: -100% 0%;
        mask-position: -100% 0%;
        /* 鼠标移入时立即开始，无延迟 */
        transition: -webkit-mask-position 0.5s cubic-bezier(0.65, 0, 0.35, 1),
                    mask-position 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    }

    #perception-text:hover .perception-hover {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    #perception-text:hover .perception-arrow {
        opacity: 1;
        transform: translateX(-10px) translateY(-1px);
        /* 鼠标移入时延迟出现（与文字擦除同步） */
        transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.5s,
                    transform 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
    }
}

/* 小屏幕时隐藏动画相关的元素，显示默认的 PERCEPTION 文字 */
@media (max-width: 1279px) {
    .perception-default {
        display: inline;
    }

    .perception-original,
    .perception-hover,
    .perception-arrow {
        display: none !important;
    }
}

/* 隐藏环形视图的样式 */
#circular-view.hidden {
    display: none;
}

/* 显示环形视图 */
#circular-view.active {
    display: block;
}
@media (min-width: 1920px) {
    [data-node-id="main"] {
        /* 居中显示，最大宽度限制 */
        padding-left: max(36px, calc((100vw - 1920px) / 2 + 36px));
        padding-right: max(36px, calc((100vw - 1920px) / 2 + 36px));
    }
}

/* ==================== 辅助功能 ==================== */

/* ==================== Typewriter 动效 ==================== */
#typewriter-intro-desktop,
#typewriter-intro-tablet,
#typewriter-intro-mobile {
    display: inline-block;
}

/* ==================== Footer ==================== */
/* 对应 Figma: Home_01_1920 Frame 139:52 */

/* Footer 容器 */
[data-node-id="footer"] {
    /* 在环形视图激活时隐藏 */
    transition: opacity 0.3s ease;
}

/* 当环形视图激活时隐藏 Footer */
body.circular-view-active [data-node-id="footer"] {
    opacity: 0;
    pointer-events: none;
}

/* Footer 社交媒体图标链接 - 首页 */
[data-node-id="footer-behance"],
[data-node-id="footer-xiaohongshu"] {
    transition: opacity 0.2s ease;
}

[data-node-id="footer-behance"]:hover,
[data-node-id="footer-xiaohongshu"]:hover {
    opacity: 0.7;
}

/* Footer 社交媒体图标链接 - 详情页 */
[data-node-id="detail-footer-behance"],
[data-node-id="detail-footer-xiaohongshu"] {
    transition: opacity 0.2s ease;
}

[data-node-id="detail-footer-behance"]:hover,
[data-node-id="detail-footer-xiaohongshu"]:hover {
    opacity: 0.7;
}

/* ==================== 辅助功能 ==================== */

/* 聚焦时的样式 */
*:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* 减少动画（尊重用户偏好） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================== 详情页 ==================== */
/* 对应 Figma: Detail_01 系列 */

/* 详情页容器 */
#detail-view {
    position: fixed; /* 固定定位，作为覆盖层显示 */
    opacity: 0;
    transition: opacity 0.6s ease-out; /* 600ms与环状视图缩小动画同步 */
    /* 确保在所有元素之上 */
    z-index: 100;
    /* 允许滚动 */
    overflow-y: auto;
    overflow-x: hidden;
    /* 确保触摸滚动正常工作 */
    -webkit-overflow-scrolling: touch;
}

#detail-view.active {
    opacity: 1;
}

/* 详情页 Head */
#detail-head {
    border-bottom: none;
}

/* 详情页 Content - 图片容器 */
#detail-03 img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

/* 360-767px: 左右页边距12px */
@media (max-width: 767px) {
    #detail-view {
        background-color: #ffffff;
    }
}

/* 768-1271px: 左右页边距36px */
@media (min-width: 768px) and (max-width: 1271px) {
    #detail-view {
        background-color: #ffffff;
    }
}

/* 1272px+: 文字和图片极限宽度1200px，水平居中 */
@media (min-width: 1272px) {
    #detail-view {
        background-color: #ffffff;
    }

    /* Content 区域已通过 max-w-[1200px] mx-auto 实现 */
}