/* =====================================================
   PluginVault — GSAP Cinematic Animations v3.1
   ===================================================== */

/* --- Lenis Smooth Scroll (no wrapper needed) --- */
html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

/* --- Preloader: Cinematic Wipe --- */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
}

.preloader-counter {
    font-family: var(--font-mono);
    font-size: clamp(48px, 10vw, 120px);
    font-weight: 700;
    color: var(--text-primary);
    opacity: 0.1;
    letter-spacing: -4px;
}

.preloader-wipe {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
}

.preloader-wipe .wipe-col {
    flex: 1;
    background: var(--bg-primary);
    transform-origin: top;
}

/* --- Noise Grain Film Overlay --- */
.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainDrift 0.4s steps(4) infinite;
}

@keyframes grainDrift {
    0% { transform: translate(0,0); }
    25% { transform: translate(-2px,3px); }
    50% { transform: translate(3px,-2px); }
    75% { transform: translate(-3px,-1px); }
    100% { transform: translate(0,0); }
}

/* --- Scroll Progress Line --- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: var(--gradient-primary);
    z-index: 10001;
    transform-origin: left;
    box-shadow: 0 0 12px rgba(99,102,241,0.4);
}

/* --- Section Title Reveal Mask (GSAP controlled) --- */
.section-title .title-mask {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}

.section-title .title-mask-inner {
    display: inline-block;
    transform: translateY(110%);
    will-change: transform;
}

/* --- Plugin Card Stagger Entrance --- */
.plugin-card {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    will-change: transform, opacity;
}

/* --- Spotlight Cursor Effect --- */
.spotlight {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    will-change: transform;
    mix-blend-mode: screen;
    top: 0;
    left: 0;
}

/* --- Footer Reveal --- */
.footer {
    clip-path: inset(100% 0 0 0);
    will-change: clip-path;
}

.footer.revealed {
    clip-path: inset(0 0 0 0);
}

/* --- Text Marquee --- */
.marquee-track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 30s linear infinite;
    gap: 40px;
    will-change: transform;
    backface-visibility: hidden;
}

.marquee-wrap:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-track .marquee-item {
    flex-shrink: 0;
    font-size: clamp(14px, 2vw, 20px);
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 4px;
    white-space: nowrap;
    transition: color 0.3s var(--ease-out-expo);
}

/* Tô màu nhấn xen kẽ cho các mục */
.marquee-track .marquee-item:nth-child(8n+1) { color: var(--accent-blue-light); }
.marquee-track .marquee-item:nth-child(8n+3) { color: var(--accent-green-light); }
.marquee-track .marquee-item:nth-child(8n+5) { color: var(--accent-orange-light); }
.marquee-track .marquee-item:nth-child(8n+7) { color: var(--text-secondary); }

.marquee-track .marquee-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-blue);
    align-self: center;
    box-shadow: 0 0 8px var(--accent-blue);
    animation: marqueeDotPulse 2.4s ease-in-out infinite;
}

@keyframes marqueeDotPulse {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Dải marquee chạy ngược hướng (trên phần Giới thiệu) */
.marquee-reverse .marquee-track {
    animation-name: marqueeScrollReverse;
}

@keyframes marqueeScrollReverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.marquee-wrap {
    overflow: hidden;
    padding: 22px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 56px;
    position: relative;
    background:
        linear-gradient(90deg, rgba(99,102,241,0.04), rgba(6,182,212,0.04) 50%, rgba(245,158,11,0.04));
    /* Làm mờ dần 2 mép cho hiệu ứng trôi vô tận */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Marquee đầu trang — bù navbar fixed (thay cho inline style) */
.marquee-top {
    margin-top: 85px;
}

@media (max-width: 768px) {
    .marquee-wrap {
        padding: 18px 0;
        margin-bottom: 36px;
    }
    .marquee-top {
        margin-top: 76px;
    }
    .marquee-track .marquee-item {
        letter-spacing: 2px;
    }
}

/* --- Enhanced Custom Cursor v3 --- */
.cursor-dot {
    opacity: 0;
    transition: opacity 0.3s, width 0.4s var(--ease-out-expo), height 0.4s var(--ease-out-expo);
}

.cursor-ring {
    opacity: 0;
    transition: opacity 0.3s, width 0.5s var(--ease-out-expo), height 0.5s var(--ease-out-expo);
}

body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring {
    opacity: 1;
}

/* --- Dark Vignette Overlay --- */
.vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(8,9,13,0.4) 100%);
}

/* --- Feature Card Hover Expand --- */
.feature-card {
    will-change: transform;
}

.feature-card:hover {
    transform: translateY(-8px) !important;
}

.feature-card .feature-icon {
    transition: transform 0.6s var(--ease-out-expo);
}

.feature-card:hover .feature-icon {
    transform: scale(1.15) rotateZ(-8deg);
}

/* --- Reduced Motion: respect user preference --- */
@media (prefers-reduced-motion: reduce) {
    .noise-overlay,
    .marquee-track,
    .cyber-grid-bg,
    .cyber-glow-orb,
    .cyber-scanner,
    .syntax-bg-glow,
    .cyber-btn-shimmer,
    .hud-corner,
    .pulse-dot,
    .gradient-text {
        animation: none !important;
    }

    .plugin-card::before,
    .plugin-card::after,
    .plugin-card .card-neon-glow {
        animation: none !important;
    }

    .plugin-card {
        opacity: 1;
        transform: none;
    }

    .section-title .title-mask-inner {
        transform: none;
    }

    .footer {
        clip-path: inset(0 0 0 0);
    }

    .spotlight,
    .noise-overlay,
    .vignette {
        display: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* --- Marquee: nén trên mobile --- */
@media (max-width: 768px) {
    .marquee-wrap {
        padding: 18px 0;
        margin-bottom: 36px;
    }
    .marquee-track {
        gap: 32px;
    }
    .marquee-track .marquee-item {
        letter-spacing: 2px;
    }
}