/* ============================================
   中文大师 — Ink Wash Animation Library
   Brush strokes, ink splashes, misty reveals
   ============================================ */

/* === INK-WASH AMBIENT BACKGROUND === */
.ambient-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.05;
    will-change: transform;
}
.ambient-orb:nth-child(1) {
    width: 600px; height: 600px;
    background: #ff6b6b;
    top: -180px; left: -200px;
}
.ambient-orb:nth-child(2) {
    width: 480px; height: 480px;
    background: #06b6d4;
    bottom: -150px; right: -160px;
}
.ambient-orb:nth-child(3) {
    width: 380px; height: 380px;
    background: #a78bfa;
    top: 45%; left: 50%;
}

/* === RICE PAPER TEXTURE GRID === */
.grid-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.015;
    background-image:
        linear-gradient(rgba(200, 184, 160, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 184, 160, 0.3) 1px, transparent 1px);
    background-size: 80px 80px;
}

/* === FLOATING INK PARTICLES === */
.particles-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
.ink-particle {
    position: absolute;
    border-radius: 2px;
    animation: inkParticleFloat linear infinite;
    opacity: 0;
    background: var(--color-primary);
}
@keyframes inkParticleFloat {
    0% {
        transform: translateY(105vh) translateX(0) rotate(0deg) scale(0);
        opacity: 0;
    }
    5% { opacity: 0.25; }
    50% { opacity: 0.12; }
    90% { opacity: 0.04; }
    100% {
        transform: translateY(-10vh) translateX(30px) rotate(180deg) scale(1);
        opacity: 0;
    }
}

/* === BRUSH STROKE REVEAL (clip-path) === */
.brush-reveal {
    clip-path: inset(0 100% 0 0);
    animation: brushReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes brushReveal {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0% 0 0); }
}

/* === ENTRANCE ANIMATIONS === */
.fade-up {
    animation: fadeUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease both;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.scale-in {
    animation: scaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

.slide-in-left {
    animation: slideInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.slide-in-right {
    animation: slideInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* === INK-BRUSH SLIDE IN (from bottom, with slight rotation === */
.ink-slide-up {
    animation: inkSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes inkSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px) rotate(-0.5deg);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotate(0deg);
        filter: blur(0);
    }
}

/* === STAGGERED ENTRANCE (GSAP-driven; classes are hooks, no CSS animation) === */
.stagger-children > *,
.ink-stagger > * {
    opacity: 0;
}
/* No-GSAP / reduced-motion fallback reveals these via JS (revealAllWithoutGSAP) */

/* === CARD HOVER EFFECTS === */
.card-lift {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}
.card-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.card-glow {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-glow:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 30px rgba(255, 107, 107, 0.1), 0 12px 30px rgba(0, 0, 0, 0.3);
}
/* GSAP tilt + module/panel activation owns transform — drop transform from transition to avoid lag */
.tilt-active.card-lift,
.tilt-active.card-glow,
.module.active .card-lift,
.module.active .card-glow,
.panel.active .card-lift,
.panel.active .card-glow,
.hero .card-lift,
.hero .card-glow {
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.tilt-active.card-lift:hover,
.tilt-active.card-glow:hover,
.module.active .card-lift:hover,
.module.active .card-glow:hover,
.panel.active .card-lift:hover,
.panel.active .card-glow:hover,
.hero .card-lift:hover,
.hero .card-glow:hover {
    transform: none;
}

/* === GLOW PULSE === */
.glow-pulse {
    animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 107, 107, 0.15); }
    50%      { box-shadow: 0 0 24px rgba(255, 107, 107, 0.3); }
}

/* === SHIMMER EFFECT (brush sweep) === */
.shimmer {
    position: relative;
    overflow: hidden;
}
.shimmer::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(200, 184, 160, 0.04) 45%,
        rgba(200, 184, 160, 0.08) 50%,
        rgba(200, 184, 160, 0.04) 55%,
        transparent 60%
    );
    animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* === BREATHING EFFECT === */
.breathe {
    animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}

/* === PROGRESS BAR SHINE === */
.xp-bar-shine .xp-fill {
    position: relative;
    overflow: hidden;
}
.xp-bar-shine .xp-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    animation: barShine 2.5s ease-in-out infinite;
}
@keyframes barShine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* === INK-DROP RIPPLE ON CLICK === */
.ripple {
    position: relative;
    overflow: hidden;
}
.ripple::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 107, 107, 0.15);
    width: 80px; height: 80px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
}
.ripple:active::after {
    animation: rippleEffect 0.7s ease-out;
}
@keyframes rippleEffect {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}


/* === BOUNCE IN === */
.bounce-in {
    animation: bounceIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { transform: scale(1.04); }
    70% { transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}

/* === SEAL STAMP ANIMATION (achievement unlock) === */
.seal-stamp {
    animation: sealStamp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes sealStamp {
    0% { transform: scale(2.5) rotate(-15deg); opacity: 0; }
    60% { transform: scale(0.95) rotate(-2deg); opacity: 0.9; }
    80% { transform: scale(1.03) rotate(-5deg); opacity: 1; }
    100% { transform: scale(1) rotate(-5deg); opacity: 0.85; }
}

/* === SKELETON LOADING === */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(200, 184, 160, 0.03) 25%,
        rgba(200, 184, 160, 0.06) 50%,
        rgba(200, 184, 160, 0.03) 75%
    );
    background-size: 200% 100%;
    animation: skeletonLoading 1.8s ease-in-out infinite;
    border-radius: var(--radius-md, 8px);
}
@keyframes skeletonLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === HOVER UNDERLINE (brush stroke) === */
.hover-underline {
    position: relative;
}
.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    width: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #ff6b6b, transparent);
    transition: width 0.35s ease;
}
.hover-underline:hover::after {
    width: 100%;
}

/* === ICON SPIN (on hover) === */
.icon-spin {
    transition: transform 0.5s ease;
}
.icon-spin:hover {
    transform: rotate(180deg);
}
.module.active .icon-spin,
.panel.active .icon-spin {
    transition: none;
}

/* === BUTTON PRESS (GSAP-driven; class is a hook, no CSS transform transition) === */
.btn-press { /* marker class — GSAP owns press scale feedback */ }

/* === FOCUS GLOW (smooth) === */
.focus-glow:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.3);
    transition: box-shadow 0.25s ease;
}

/* === THEME TOGGLE ROTATION (GSAP-driven) === */
.theme-toggle .toggle-icon {
    display: inline-block;
}

/* === STATS CARD NUMBER POP === */
.stats-value {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stats-card:hover .stats-value {
    transform: scale(1.1);
}
.module.active .stats-value,
.panel.active .stats-value {
    transition: none;
}




/* === GRADIENT TEXT === */
.gradient-text {
    background: linear-gradient(135deg, #ff6b6b 0%, #a78bfa 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === INK-SPREAD DIVIDER (gradient line with brush ends) === */
.ink-divider {
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.15), rgba(255, 107, 107, 0.06), transparent);
    margin: var(--spacing-lg) 0;
}

/* === PAGE TRANSITION (used by GSAP) === */
.page-exit {
    opacity: 0;
    transform: translateY(12px);
}
.page-enter {
    opacity: 1;
    transform: translateY(0);
}

/* === SCROLL PROGRESS BAR === */
.scroll-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 200;
    pointer-events: none;
    transform-origin: left;
}
.scroll-progress-fill {
    width: 100%; height: 100%;
    background: linear-gradient(90deg, #ef4444, #ff6b6b, #fca5a5);
    transform: scaleX(0);
    transform-origin: left;
    will-change: transform;
}

/* === BRUSH-STROKE SVG DIVIDER === */
.brush-divider { display: block; opacity: 0.6; }
.gsap-reveal {
    opacity: 0;
    transform: translateY(36px);
}
.gsap-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
}
.gsap-reveal-right {
    opacity: 0;
    transform: translateX(40px);
}
.gsap-reveal-scale {
    opacity: 0;
    transform: scale(0.9);
}
.gsap-reveal-fade {
    opacity: 0;
}

/* Fallback visibility is fully handled via .gsap-reveal-visible (applied by revealAllWithoutGSAP) */
.gsap-reveal-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* === ACCESSIBLE REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .ink-particle,
    .ambient-orb,
    .shimmer::after {
        display: none;
    }
    /* Reduced-motion: show theme-toggle icon at correct resting rotation without animation */
    .theme-light .theme-toggle .toggle-icon {
        transform: rotate(180deg);
    }
    /* Reduced-motion: button press fallback (no GSAP) */
    .btn-press:active {
        transform: scale(0.95);
    }
}