/* === UI/UX PRO MAX GLOBAL SYSTEM === */

/* 1. Global Reset & Utilities */
:root {
    /* Premium Easings */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
}

/* 锚点滚动偏移 - 防止固定导航栏遮挡内容 */
section[id] {
    scroll-margin-top: 100px;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. Custom Scrollbar (Webkit) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 3px;
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* 3. Selection Color */
::selection {
    background: #2563eb; /* blue-600 */
    color: #ffffff;
}

/* 4. Animation System (Reveal) */
.reveal-hidden {
    opacity: 0;
    will-change: opacity, transform;
    transition-property: opacity, transform;
    transition-duration: 1.0s;
    transition-timing-function: var(--ease-out-expo);
}

/* Variants */
.reveal-up.reveal-hidden {
    transform: translateY(40px);
}

.reveal-left.reveal-hidden {
    transform: translateX(-40px);
}

.reveal-right.reveal-hidden {
    transform: translateX(40px);
}

.reveal-zoom.reveal-hidden {
    transform: scale(0.95);
}

/* Active State */
.reveal-visible {
    opacity: 1;
    transform: translate(0) scale(1) !important;
}

/* Stagger Utilities */
.stagger-item {
    transition-duration: 0.8s;
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* 5. Micro-Interactions */
.hover-lift {
    transition: transform 0.3s var(--ease-out-back), box-shadow 0.3s var(--ease-smooth);
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.hover-scale {
    transition: transform 0.5s var(--ease-out-expo);
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* 6. Image Effects */
.group-hover-shine {
    position: relative;
    overflow: hidden;
}

.group-hover-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-25deg);
    transition: 0.5s;
}

.group:hover .group-hover-shine::after {
    left: 150%;
    transition: 0.7s;
}

/* 7. Utility Components */
/* Back to Top Button */
#back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 0.5s var(--ease-out-expo);
}

#back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}