/*
Theme Name: C-LAB Theme
Theme URI: https://c-lab.org
Author: C-LAB Team
Author URI: https://c-lab.org
Description: C-LAB 社区营造 WordPress 主题，支持 Tailwind CSS、GSAP 动画、自定义指针、移动端菜单等特性。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clab
*/

/* ====================================================
   Tailwind CSS 基础配置与自定义样式
   ==================================================== */

/* 自定义 Tailwind 颜色变量 */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --clay: #C85A3C;
        --ink: #1A1C1A;
        --warmWhite: #FAF8F3;
        --sage: #849682;
    }
}

@layer components {
    /* 悬浮导航栏 Header */
    #mainHeader {
        @apply fixed top-0 left-0 w-full z-50 px-6 py-6 md:px-12 md:py-8 flex justify-between items-center transition-all duration-300;
    }

    /* 导航链接 */
    .hover-target {
        @apply transition-all duration-300;
    }

    /* 移动端菜单按钮 */
    #menuBtn {
        @apply md:hidden text-ink flex flex-col justify-between w-6 h-4;
    }

    /* 移动端抽屉导航 */
    #mobileMenu {
        @apply fixed inset-0 bg-warmWhite z-40 flex flex-col justify-between p-8 transform translate-x-full transition-transform duration-500 ease-in-out;
    }

    /* Hero 区域 */
    #heroSection {
        @apply min-h-screen w-full relative flex flex-col justify-between pt-28 pb-12 px-6 md:px-12 bg-warmWhite overflow-hidden;
    }

    /* 幻灯片区域 */
    #slideSection {
        @apply min-h-screen py-24 md:py-32 px-6 md:px-12 relative flex items-center overflow-hidden bg-warmWhite border-t border-b border-ink/10;
    }

    /* 幻灯片图片框 */
    #slideImageFrame {
        @apply border border-ink p-2 md:p-3 bg-warmWhite shadow-xl relative z-10 overflow-hidden aspect-[3/4];
    }

    /* 幻灯片陶土色块 */
    #slideFractureBlock {
        @apply hidden lg:block absolute left-[42%] top-[10%] w-56 h-96 bg-clay mix-blend-multiply opacity-80 pointer-events-none z-20 shadow-2xl;
    }

    /* 幻灯片文本容器 */
    #slideTextContainer {
        @apply lg:col-span-6 lg:pl-16 flex flex-col justify-center relative z-30;
    }

    /* 幻灯片进度条 */
    #slideProgressBar {
        @apply absolute top-0 left-0 h-full bg-clay transition-all duration-500;
    }

    /* 导航栏透明度变化 */
    .header-scrolled {
        @apply bg-warmWhite/90 backdrop-blur-md py-4 shadow-sm;
    }

    /* 自定义鼠标指针 */
    #customCursor {
        @apply fixed w-3 h-3 bg-clay rounded-full pointer-events-none z-[10000] mix-blend-difference hidden md:block;
    }

    #customCursorRing {
        @apply fixed w-8 h-8 border border-ink rounded-full pointer-events-none z-[9999] hidden md:block;
    }

    /* 跑马灯 */
    .marquee-wrapper {
        @apply py-4 z-20 relative;
    }

    /* 杂志排版微颗粒噪点背景 */
    .noise-bg {
        @apply fixed top-0 left-0 w-full h-full pointer-events-none;
        opacity: 0.02;
        z-index: 9999;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    }

    /* 文字裁切显示容器 */
    .reveal-clip {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

    /* 导航栏下划线动画 */
    .nav-link-underline {
        @apply relative;
    }
    .nav-link-underline::after {
        content: '';
        @apply absolute -bottom-1 left-0 w-0 h-[1px] bg-clay transition-all;
    }
    .nav-link-underline:hover::after {
        @apply w-full;
    }

    /* 卡片悬浮效果 */
    .card-hover {
        @apply transition-all duration-700;
    }
    .card-hover:hover {
        @apply scale-105;
    }

    /* 灰度转彩色效果 */
    .img-grayscale {
        @apply grayscale contrast-125 transition-all duration-700;
    }
    .card-hover:hover .img-grayscale,
    .group:hover .img-grayscale {
        @apply grayscale-0;
    }
}