Hướng dẫn code UI demo cao cấp

Mình nâng cấp theo hướng UI demo cao cấp, không làm kiểu vài nút gradient đơn giản. Bản này có: HTML / CSS / JS tách riêng Class/component đều có tiền tố muathemewpgiare GSAP animation Lenis smooth scroll Lucide Icons VanillaTilt Particles.js Magnetic button Glow cursor 3D card Ripple button Animated counters Toast notification Modal

15/09/2026 Quản trị viên 5 Lập trình giao diện
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Muathemewpgiare — Advanced UI Experience</title>

    <meta
        name="description"
        content="Advanced interactive UI experience by muathemewpgiare.com"
    >

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
        rel="stylesheet"
    >

    <!-- Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <!-- GSAP -->
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

    <!-- Smooth Scroll -->
    <script src="https://cdn.jsdelivr.net/npm/@studio-freight/lenis@1.0.42/bundled/lenis.min.js"></script>

    <!-- Tilt -->
    <script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.8.1/dist/vanilla-tilt.min.js"></script>

    <!-- Particles -->
    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
</head>

<body>

<div class="muathemewpgiare-app">

    <!-- Cursor -->
    <div class="muathemewpgiare-cursor"></div>
    <div class="muathemewpgiare-cursor-ring"></div>

    <!-- Background -->
    <div
        id="muathemewpgiare-particles"
        class="muathemewpgiare-particles"
    ></div>

    <div class="muathemewpgiare-noise"></div>

    <!-- Navigation -->
    <header class="muathemewpgiare-header">

        <a
            href="#"
            class="muathemewpgiare-logo muathemewpgiare-magnetic"
        >
            <span class="muathemewpgiare-logo-mark">
                M
            </span>

            <span>
                MUATHEME
                <small>WPGIARE</small>
            </span>
        </a>

        <nav class="muathemewpgiare-nav">

            <a href="#home" class="muathemewpgiare-nav-link">
                Home
            </a>

            <a href="#features" class="muathemewpgiare-nav-link">
                Features
            </a>

            <a href="#showcase" class="muathemewpgiare-nav-link">
                Showcase
            </a>

            <a href="#pricing" class="muathemewpgiare-nav-link">
                Pricing
            </a>

        </nav>

        <button
            class="muathemewpgiare-button muathemewpgiare-button-primary muathemewpgiare-magnetic"
            data-modal-open
        >
            <span>Get Started</span>
            <i data-lucide="arrow-up-right"></i>
        </button>

    </header>


    <!-- Hero -->
    <main>

        <section
            id="home"
            class="muathemewpgiare-hero"
        >

            <div class="muathemewpgiare-hero-orb muathemewpgiare-orb-one"></div>
            <div class="muathemewpgiare-hero-orb muathemewpgiare-orb-two"></div>

            <div class="muathemewpgiare-hero-content">

                <div class="muathemewpgiare-badge">
                    <span class="muathemewpgiare-status-dot"></span>

                    <span>
                        NEXT GENERATION INTERFACE
                    </span>
                </div>

                <h1 class="muathemewpgiare-hero-title">

                    Build
                    <span class="muathemewpgiare-gradient-text">
                        Extraordinary
                    </span>

                    Digital Experiences.

                </h1>

                <p class="muathemewpgiare-hero-description">
                    Một giao diện tương tác thế hệ mới được xây dựng
                    với animation, micro-interaction, 3D effect và
                    motion system chuyên nghiệp.
                </p>

                <div class="muathemewpgiare-hero-actions">

                    <button
                        class="muathemewpgiare-button muathemewpgiare-button-primary muathemewpgiare-magnetic muathemewpgiare-ripple"
                        data-scroll="#showcase"
                    >
                        <i data-lucide="sparkles"></i>
                        Khám phá ngay
                    </button>

                    <button
                        class="muathemewpgiare-button muathemewpgiare-button-glass muathemewpgiare-ripple"
                        data-modal-open
                    >
                        <i data-lucide="play"></i>
                        Xem Demo
                    </button>

                </div>

                <div class="muathemewpgiare-trust">

                    <div class="muathemewpgiare-avatar-stack">

                        <span>H</span>
                        <span>M</span>
                        <span>W</span>
                        <span>+</span>

                    </div>

                    <div>
                        <strong>12,000+</strong>
                        <small>Digital experiences</small>
                    </div>

                </div>

            </div>


            <!-- Hero visual -->
            <div class="muathemewpgiare-hero-visual">

                <div
                    class="muathemewpgiare-dashboard-card"
                    data-tilt
                    data-tilt-max="8"
                    data-tilt-speed="600"
                >

                    <div class="muathemewpgiare-dashboard-top">

                        <div>
                            <span class="muathemewpgiare-mini-label">
                                SYSTEM PERFORMANCE
                            </span>

                            <h3>
                                Experience
                            </h3>
                        </div>

                        <button class="muathemewpgiare-icon-button">
                            <i data-lucide="more-horizontal"></i>
                        </button>

                    </div>

                    <div class="muathemewpgiare-chart">

                        <div class="muathemewpgiare-chart-grid"></div>

                        <svg
                            viewBox="0 0 600 240"
                            preserveAspectRatio="none"
                        >
                            <defs>

                                <linearGradient
                                    id="muathemewpgiareGradient"
                                    x1="0"
                                    x2="1"
                                >
                                    <stop
                                        offset="0%"
                                        stop-color="#9b5cff"
                                    />

                                    <stop
                                        offset="100%"
                                        stop-color="#00e5ff"
                                    />
                                </linearGradient>

                            </defs>

                            <path
                                class="muathemewpgiare-chart-area"
                                d="M0 210
                                   C60 185 80 195 120 160
                                   S180 120 220 145
                                   S280 70 330 100
                                   S390 55 430 80
                                   S500 30 600 20
                                   L600 240 L0 240 Z"
                            />

                            <path
                                class="muathemewpgiare-chart-line"
                                d="M0 210
                                   C60 185 80 195 120 160
                                   S180 120 220 145
                                   S280 70 330 100
                                   S390 55 430 80
                                   S500 30 600 20"
                            />

                        </svg>

                    </div>

                    <div class="muathemewpgiare-dashboard-stats">

                        <div>
                            <small>Conversion</small>
                            <strong>+84.29%</strong>
                        </div>

                        <div>
                            <small>Performance</small>
                            <strong>98.7</strong>
                        </div>

                        <div>
                            <small>Response</small>
                            <strong>0.08s</strong>
                        </div>

                    </div>

                </div>

                <div class="muathemewpgiare-floating-card muathemewpgiare-floating-one">

                    <div class="muathemewpgiare-floating-icon">
                        <i data-lucide="zap"></i>
                    </div>

                    <div>
                        <strong>Ultra Fast</strong>
                        <small>0.08s response</small>
                    </div>

                </div>


                <div class="muathemewpgiare-floating-card muathemewpgiare-floating-two">

                    <div class="muathemewpgiare-floating-icon">
                        <i data-lucide="shield-check"></i>
                    </div>

                    <div>
                        <strong>Protected</strong>
                        <small>Enterprise security</small>
                    </div>

                </div>

            </div>

        </section>


        <!-- Marquee -->
        <section class="muathemewpgiare-marquee-section">

            <div class="muathemewpgiare-marquee">

                <div class="muathemewpgiare-marquee-track">

                    <span>DESIGN</span>
                    <b>✦</b>

                    <span>ANIMATION</span>
                    <b>✦</b>

                    <span>INTERACTION</span>
                    <b>✦</b>

                    <span>PERFORMANCE</span>
                    <b>✦</b>

                    <span>EXPERIENCE</span>
                    <b>✦</b>

                    <span>DESIGN</span>
                    <b>✦</b>

                    <span>ANIMATION</span>
                    <b>✦</b>

                </div>

            </div>

        </section>


        <!-- Features -->
        <section
            id="features"
            class="muathemewpgiare-section"
        >

            <div class="muathemewpgiare-section-heading">

                <div class="muathemewpgiare-section-label">
                    <span>01</span>
                    CAPABILITIES
                </div>

                <h2>
                    Không chỉ đẹp.
                    <br>
                    <span class="muathemewpgiare-gradient-text">
                        Phải có chiều sâu.
                    </span>
                </h2>

                <p>
                    Mỗi component được thiết kế để tạo cảm giác
                    tương tác sống động thay vì chỉ là một giao diện tĩnh.
                </p>

            </div>


            <div class="muathemewpgiare-feature-grid">

                <article
                    class="muathemewpgiare-feature-card"
                    data-tilt
                >

                    <div class="muathemewpgiare-feature-number">
                        01
                    </div>

                    <div class="muathemewpgiare-feature-icon">
                        <i data-lucide="mouse-pointer-2"></i>
                    </div>

                    <h3>
                        Micro Interaction
                    </h3>

                    <p>
                        Hover, click, magnetic interaction,
                        ripple và transition được kết hợp
                        thành một hệ thống thống nhất.
                    </p>

                    <a href="#" class="muathemewpgiare-feature-link">
                        Explore
                        <i data-lucide="arrow-up-right"></i>
                    </a>

                </article>


                <article
                    class="muathemewpgiare-feature-card muathemewpgiare-feature-highlight"
                    data-tilt
                >

                    <div class="muathemewpgiare-feature-number">
                        02
                    </div>

                    <div class="muathemewpgiare-feature-icon">
                        <i data-lucide="layers-3"></i>
                    </div>

                    <h3>
                        Layered Motion
                    </h3>

                    <p>
                        Nhiều lớp animation chạy đồng bộ tạo
                        chiều sâu thị giác và cảm giác premium.
                    </p>

                    <a href="#" class="muathemewpgiare-feature-link">
                        Explore
                        <i data-lucide="arrow-up-right"></i>
                    </a>

                </article>


                <article
                    class="muathemewpgiare-feature-card"
                    data-tilt
                >

                    <div class="muathemewpgiare-feature-number">
                        03
                    </div>

                    <div class="muathemewpgiare-feature-icon">
                        <i data-lucide="cpu"></i>
                    </div>

                    <h3>
                        Smart Components
                    </h3>

                    <p>
                        Component có trạng thái, feedback,
                        loading, notification và modal.
                    </p>

                    <a href="#" class="muathemewpgiare-feature-link">
                        Explore
                        <i data-lucide="arrow-up-right"></i>
                    </a>

                </article>

            </div>

        </section>


        <!-- Showcase -->
        <section
            id="showcase"
            class="muathemewpgiare-section muathemewpgiare-showcase"
        >

            <div class="muathemewpgiare-section-heading">

                <div class="muathemewpgiare-section-label">
                    <span>02</span>
                    INTERACTIVE SHOWCASE
                </div>

                <h2>
                    Các hiệu ứng
                    <span class="muathemewpgiare-gradient-text">
                        được sinh ra để chuyển động.
                    </span>
                </h2>

            </div>


            <div class="muathemewpgiare-showcase-grid">

                <div class="muathemewpgiare-command-card">

                    <div class="muathemewpgiare-command-header">

                        <span>
                            INTERACTION LAB
                        </span>

                        <span class="muathemewpgiare-live">
                            LIVE
                        </span>

                    </div>

                    <div class="muathemewpgiare-command-body">

                        <button
                            class="muathemewpgiare-demo-button muathemewpgiare-ripple"
                            data-toast="Action executed successfully!"
                        >
                            <i data-lucide="command"></i>
                            Execute Action
                        </button>

                        <button
                            class="muathemewpgiare-demo-button muathemewpgiare-demo-secondary"
                            data-toast="System synchronized."
                        >
                            <i data-lucide="refresh-cw"></i>
                            Synchronize
                        </button>

                        <button
                            class="muathemewpgiare-demo-button muathemewpgiare-demo-danger"
                            data-toast="Session terminated."
                        >
                            <i data-lucide="power"></i>
                            Terminate
                        </button>

                    </div>

                </div>


                <div class="muathemewpgiare-stat-panel">

                    <div class="muathemewpgiare-stat-circle">

                        <div class="muathemewpgiare-stat-circle-inner">

                            <strong>
                                <span data-counter="98.7">0</span>
                            </strong>

                            <small>
                                SCORE
                            </small>

                        </div>

                    </div>

                    <div class="muathemewpgiare-stat-copy">

                        <span>
                            SYSTEM STATUS
                        </span>

                        <h3>
                            Everything is
                            <em>operational.</em>
                        </h3>

                        <div class="muathemewpgiare-progress">

                            <span
                                data-progress="92"
                            ></span>

                        </div>

                        <small>
                            Performance index
                        </small>

                    </div>

                </div>

            </div>

        </section>


        <!-- Stats -->
        <section class="muathemewpgiare-stats-section">

            <div class="muathemewpgiare-stat-item">

                <strong data-counter="12000">
                    0
                </strong>

                <span>
                    Projects
                </span>

            </div>

            <div class="muathemewpgiare-stat-item">

                <strong data-counter="98">
                    0
                </strong>

                <span>
                    Performance
                </span>

            </div>

            <div class="muathemewpgiare-stat-item">

                <strong data-counter="24">
                    0
                </strong>

                <span>
                    Components
                </span>

            </div>

            <div class="muathemewpgiare-stat-item">

                <strong data-counter="99">
                    0
                </strong>

                <span>
                    Satisfaction
                </span>

            </div>

        </section>


        <!-- Pricing -->
        <section
            id="pricing"
            class="muathemewpgiare-section"
        >

            <div class="muathemewpgiare-section-heading">

                <div class="muathemewpgiare-section-label">
                    <span>03</span>
                    EXPERIENCE
                </div>

                <h2>
                    Built for
                    <span class="muathemewpgiare-gradient-text">
                        serious projects.
                    </span>
                </h2>

            </div>


            <div class="muathemewpgiare-pricing-grid">

                <div class="muathemewpgiare-price-card">

                    <span class="muathemewpgiare-price-label">
                        STARTER
                    </span>

                    <h3>
                        Essential
                    </h3>

                    <div class="muathemewpgiare-price">
                        $29
                        <small>/mo</small>
                    </div>

                    <ul>

                        <li>
                            <i data-lucide="check"></i>
                            Advanced components
                        </li>

                        <li>
                            <i data-lucide="check"></i>
                            Motion effects
                        </li>

                        <li>
                            <i data-lucide="check"></i>
                            Responsive system
                        </li>

                    </ul>

                    <button
                        class="muathemewpgiare-button muathemewpgiare-button-glass muathemewpgiare-full-button"
                        data-toast="Starter selected"
                    >
                        Choose Plan
                    </button>

                </div>


                <div class="muathemewpgiare-price-card muathemewpgiare-price-featured">

                    <div class="muathemewpgiare-popular">
                        MOST POPULAR
                    </div>

                    <span class="muathemewpgiare-price-label">
                        PROFESSIONAL
                    </span>

                    <h3>
                        Advanced
                    </h3>

                    <div class="muathemewpgiare-price">
                        $79
                        <small>/mo</small>
                    </div>

                    <ul>

                        <li>
                            <i data-lucide="check"></i>
                            Everything in Essential
                        </li>

                        <li>
                            <i data-lucide="check"></i>
                            3D interactions
                        </li>

                        <li>
                            <i data-lucide="check"></i>
                            Premium animations
                        </li>

                        <li>
                            <i data-lucide="check"></i>
                            Priority support
                        </li>

                    </ul>

                    <button
                        class="muathemewpgiare-button muathemewpgiare-button-primary muathemewpgiare-full-button"
                        data-modal-open
                    >
                        Start Building
                    </button>

                </div>

            </div>

        </section>

    </main>


    <!-- Footer -->
    <footer class="muathemewpgiare-footer">

        <div>

            <strong>
                MUATHEMEWPGIARE
            </strong>

            <p>
                Advanced digital experiences.
            </p>

        </div>

        <div>
            © 2026 muathemewpgiare.com
        </div>

    </footer>

</div>


<!-- Toast -->
<div
    class="muathemewpgiare-toast"
    id="muathemewpgiare-toast"
>

    <div class="muathemewpgiare-toast-icon">
        <i data-lucide="check"></i>
    </div>

    <div>
        <strong>
            Success
        </strong>

        <span id="muathemewpgiare-toast-message">
            Completed
        </span>
    </div>

</div>


<!-- Modal -->
<div
    class="muathemewpgiare-modal"
    id="muathemewpgiare-modal"
>

    <div class="muathemewpgiare-modal-backdrop"></div>

    <div class="muathemewpgiare-modal-box">

        <button
            class="muathemewpgiare-modal-close"
            data-modal-close
        >
            <i data-lucide="x"></i>
        </button>

        <div class="muathemewpgiare-modal-icon">
            <i data-lucide="sparkles"></i>
        </div>

        <span class="muathemewpgiare-modal-label">
            MUATHEMEWPGIARE
        </span>

        <h2>
            Ready to build
            something extraordinary?
        </h2>

        <p>
            Đây là khu vực modal tương tác.
            Có thể thay thế bằng form đăng nhập,
            đăng ký, checkout hoặc bất kỳ chức năng nào.
        </p>

        <button
            class="muathemewpgiare-button muathemewpgiare-button-primary muathemewpgiare-full-button"
            data-modal-close
        >
            Let's Create
        </button>

    </div>

</div>


<script src="script.js"></script>

</body>
</html>
:root {
    --muathemewpgiare-bg: #06060b;
    --muathemewpgiare-panel: #0d0d15;
    --muathemewpgiare-panel-2: #11111c;

    --muathemewpgiare-purple: #8b5cf6;
    --muathemewpgiare-violet: #c084fc;
    --muathemewpgiare-cyan: #00e5ff;

    --muathemewpgiare-text: #f8f7ff;
    --muathemewpgiare-muted: #9695a7;

    --muathemewpgiare-border:
        rgba(255,255,255,.09);

    --muathemewpgiare-radius: 24px;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: auto;
}


body {
    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(139,92,246,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 30%,
            rgba(0,229,255,.08),
            transparent 25%
        ),
        var(--muathemewpgiare-bg);

    color: var(--muathemewpgiare-text);

    font-family:
        "Inter",
        sans-serif;

    overflow-x: hidden;
}


button,
a {
    font: inherit;
}


button {
    border: 0;
    cursor: pointer;
}


a {
    color: inherit;
    text-decoration: none;
}


/* APP */

.muathemewpgiare-app {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}


.muathemewpgiare-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .025;
    z-index: 20;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}


/* PARTICLES */

.muathemewpgiare-particles {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}


/* HEADER */

.muathemewpgiare-header {
    width: min(1400px, calc(100% - 50px));

    height: 84px;

    margin: 20px auto 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 18px 0 22px;

    border: 1px solid
        var(--muathemewpgiare-border);

    background:
        rgba(8,8,14,.62);

    backdrop-filter:
        blur(25px);

    -webkit-backdrop-filter:
        blur(25px);

    border-radius: 22px;

    position: relative;
    z-index: 100;
}


.muathemewpgiare-logo {
    display: flex;
    align-items: center;
    gap: 12px;

    font-weight: 900;
    letter-spacing: -.04em;
}


.muathemewpgiare-logo small {
    display: block;
    font-size: 8px;
    letter-spacing: .3em;
    color: var(--muathemewpgiare-muted);
}


.muathemewpgiare-logo-mark {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            var(--muathemewpgiare-purple),
            var(--muathemewpgiare-cyan)
        );

    color: white;

    box-shadow:
        0 0 30px
        rgba(139,92,246,.35);
}


.muathemewpgiare-nav {
    display: flex;
    align-items: center;
    gap: 35px;
}


.muathemewpgiare-nav-link {
    position: relative;

    color: #aaa9b8;

    font-size: 13px;
    font-weight: 600;

    transition: .3s;
}


.muathemewpgiare-nav-link:hover {
    color: white;
}


.muathemewpgiare-nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -9px;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--muathemewpgiare-purple),
            var(--muathemewpgiare-cyan)
        );

    transition: .35s;
}


.muathemewpgiare-nav-link:hover::after {
    width: 100%;
}


/* BUTTON */

.muathemewpgiare-button {
    min-height: 50px;

    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border-radius: 14px;

    font-size: 13px;
    font-weight: 800;

    transition:
        transform .3s,
        box-shadow .3s,
        border .3s;
}


.muathemewpgiare-button svg {
    width: 17px;
}


.muathemewpgiare-button-primary {
    color: white;

    background:
        linear-gradient(
            110deg,
            #7044df,
            #a855f7,
            #06b6d4
        );

    background-size: 200% 100%;

    box-shadow:
        0 15px 40px
        rgba(139,92,246,.25);
}


.muathemewpgiare-button-primary:hover {
    transform: translateY(-3px);

    background-position: 100% 0;

    box-shadow:
        0 20px 60px
        rgba(139,92,246,.42);
}


.muathemewpgiare-button-glass {
    color: white;

    border: 1px solid
        rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.045);

    backdrop-filter: blur(12px);
}


.muathemewpgiare-button-glass:hover {
    background:
        rgba(255,255,255,.09);

    border-color:
        rgba(255,255,255,.2);

    transform:
        translateY(-3px);
}


.muathemewpgiare-full-button {
    width: 100%;
}


/* HERO */

.muathemewpgiare-hero {
    width: min(1400px, calc(100% - 50px));

    min-height: 760px;

    margin: auto;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(450px, .9fr);

    align-items: center;

    gap: 80px;

    position: relative;
}


.muathemewpgiare-hero-content {
    position: relative;
    z-index: 5;
}


.muathemewpgiare-badge {
    width: fit-content;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 9px 14px;

    border-radius: 999px;

    border: 1px solid
        rgba(255,255,255,.1);

    background:
        rgba(255,255,255,.035);

    color: #bbb9c9;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;
}


.muathemewpgiare-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #43ff9c;

    box-shadow:
        0 0 15px
        #43ff9c;

    animation:
        muathemewpgiare-pulse 1.5s infinite;
}


@keyframes muathemewpgiare-pulse {
    50% {
        opacity: .3;
        transform: scale(.6);
    }
}


.muathemewpgiare-hero-title {
    max-width: 850px;

    margin-top: 30px;

    font-size:
        clamp(52px, 6vw, 88px);

    line-height: .98;

    letter-spacing: -.065em;

    font-weight: 900;
}


.muathemewpgiare-gradient-text {
    color: transparent;

    background:
        linear-gradient(
            100deg,
            #fff,
            #b98cff 40%,
            #00e5ff
        );

    -webkit-background-clip: text;
    background-clip: text;
}


.muathemewpgiare-hero-description {
    max-width: 620px;

    margin-top: 30px;

    color: var(--muathemewpgiare-muted);

    line-height: 1.8;

    font-size: 15px;
}


.muathemewpgiare-hero-actions {
    display: flex;
    gap: 12px;

    margin-top: 38px;
}


.muathemewpgiare-trust {
    margin-top: 55px;

    display: flex;
    align-items: center;
    gap: 15px;
}


.muathemewpgiare-avatar-stack {
    display: flex;
}


.muathemewpgiare-avatar-stack span {
    width: 34px;
    height: 34px;

    margin-left: -8px;

    border: 2px solid
        var(--muathemewpgiare-bg);

    border-radius: 50%;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #302050,
            #11151d
        );

    font-size: 10px;
    font-weight: 800;
}


.muathemewpgiare-avatar-stack span:first-child {
    margin-left: 0;
}


.muathemewpgiare-trust strong {
    display: block;
    font-size: 14px;
}


.muathemewpgiare-trust small {
    display: block;
    margin-top: 3px;
    color: #777686;
    font-size: 10px;
}


/* HERO VISUAL */

.muathemewpgiare-hero-visual {
    position: relative;

    height: 560px;

    display: grid;
    place-items: center;
}


.muathemewpgiare-dashboard-card {
    width: 100%;
    max-width: 570px;

    padding: 28px;

    position: relative;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 50px 120px
        rgba(0,0,0,.45),
        inset 0 1px 0
        rgba(255,255,255,.1);

    backdrop-filter:
        blur(25px);

    transform-style: preserve-3d;
}


.muathemewpgiare-dashboard-card::before {
    content: "";

    position: absolute;
    inset: -1px;

    border-radius: inherit;

    background:
        linear-gradient(
            120deg,
            rgba(139,92,246,.7),
            transparent 30%,
            transparent 70%,
            rgba(0,229,255,.45)
        );

    opacity: .3;

    z-index: -1;
}


.muathemewpgiare-dashboard-top {
    display: flex;
    justify-content: space-between;
}


.muathemewpgiare-mini-label {
    color: #747382;

    font-size: 9px;

    letter-spacing: .18em;
}


.muathemewpgiare-dashboard-top h3 {
    margin-top: 7px;

    font-size: 24px;

    letter-spacing: -.04em;
}


.muathemewpgiare-icon-button {
    width: 40px;
    height: 40px;

    border-radius: 12px;

    background:
        rgba(255,255,255,.06);

    color: white;
}


.muathemewpgiare-chart {
    height: 260px;

    margin-top: 30px;

    position: relative;
}


.muathemewpgiare-chart svg {
    width: 100%;
    height: 100%;
}


.muathemewpgiare-chart-area {
    fill:
        url("#muathemewpgiareGradient");

    opacity: .08;
}


.muathemewpgiare-chart-line {
    fill: none;

    stroke:
        url("#muathemewpgiareGradient");

    stroke-width: 4;

    filter:
        drop-shadow(
            0 0 12px
            rgba(139,92,246,.7)
        );
}


.muathemewpgiare-dashboard-stats {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}


.muathemewpgiare-dashboard-stats > div {
    padding: 15px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 15px;

    background:
        rgba(0,0,0,.15);
}


.muathemewpgiare-dashboard-stats small {
    display: block;

    color: #777686;

    font-size: 9px;
}


.muathemewpgiare-dashboard-stats strong {
    display: block;

    margin-top: 7px;

    font-size: 15px;
}


.muathemewpgiare-floating-card {
    position: absolute;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px 17px;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius: 16px;

    background:
        rgba(12,12,20,.72);

    backdrop-filter: blur(20px);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.3);

    animation:
        muathemewpgiare-float 5s ease-in-out infinite;
}


.muathemewpgiare-floating-one {
    top: 60px;
    right: -10px;
}


.muathemewpgiare-floating-two {
    bottom: 70px;
    left: -25px;

    animation-delay: -2s;
}


.muathemewpgiare-floating-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #d5c0ff;

    background:
        rgba(139,92,246,.15);
}


.muathemewpgiare-floating-card strong {
    display: block;
    font-size: 11px;
}


.muathemewpgiare-floating-card small {
    display: block;
    margin-top: 4px;
    color: #777686;
    font-size: 9px;
}


@keyframes muathemewpgiare-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-13px);
    }
}


/* ORBS */

.muathemewpgiare-hero-orb {
    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    filter: blur(90px);

    opacity: .15;

    pointer-events: none;
}


.muathemewpgiare-orb-one {
    background: #8b5cf6;
    top: 100px;
    left: -100px;
}


.muathemewpgiare-orb-two {
    background: #00e5ff;
    bottom: 50px;
    right: -100px;
}


/* MARQUEE */

.muathemewpgiare-marquee-section {
    overflow: hidden;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    border-bottom:
        1px solid
        rgba(255,255,255,.06);

    background:
        rgba(255,255,255,.018);
}


.muathemewpgiare-marquee {
    padding: 24px 0;
}


.muathemewpgiare-marquee-track {
    width: max-content;

    display: flex;
    align-items: center;
    gap: 35px;

    font-size: 13px;
    font-weight: 900;

    letter-spacing: .15em;

    color: #686774;

    animation:
        muathemewpgiare-marquee 25s linear infinite;
}


.muathemewpgiare-marquee-track b {
    color: #8b5cf6;
}


@keyframes muathemewpgiare-marquee {
    to {
        transform: translateX(-50%);
    }
}


/* SECTION */

.muathemewpgiare-section {
    width: min(1400px, calc(100% - 50px));

    margin: auto;

    padding:
        150px 0;
}


.muathemewpgiare-section-heading {
    max-width: 750px;
}


.muathemewpgiare-section-label {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #777686;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .18em;
}


.muathemewpgiare-section-label span {
    color: #a979ff;
}


.muathemewpgiare-section-heading h2 {
    margin-top: 20px;

    font-size:
        clamp(42px, 5vw, 70px);

    line-height: 1;

    letter-spacing: -.06em;
}


.muathemewpgiare-section-heading p {
    margin-top: 25px;

    color: #858491;

    line-height: 1.8;
}


/* FEATURES */

.muathemewpgiare-feature-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

    margin-top: 70px;
}


.muathemewpgiare-feature-card {
    min-height: 390px;

    padding: 32px;

    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.018)
        );

    transition:
        border .4s,
        transform .4s;

    transform-style: preserve-3d;
}


.muathemewpgiare-feature-card:hover {
    border-color:
        rgba(168,85,247,.35);
}


.muathemewpgiare-feature-card::after {
    content: "";

    position: absolute;

    width: 200px;
    height: 200px;

    right: -100px;
    bottom: -100px;

    border-radius: 50%;

    background:
        rgba(139,92,246,.2);

    filter: blur(60px);

    transition: .5s;
}


.muathemewpgiare-feature-card:hover::after {
    transform:
        scale(1.6);
}


.muathemewpgiare-feature-number {
    color: #52515f;

    font-size: 11px;

    font-weight: 900;
}


.muathemewpgiare-feature-icon {
    width: 58px;
    height: 58px;

    margin-top: 60px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(139,92,246,.2),
            rgba(0,229,255,.08)
        );

    color: #c9adff;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.08);
}


.muathemewpgiare-feature-card h3 {
    margin-top: 25px;

    font-size: 22px;

    letter-spacing: -.04em;
}


.muathemewpgiare-feature-card p {
    margin-top: 13px;

    color: #797886;

    font-size: 13px;

    line-height: 1.7;
}


.muathemewpgiare-feature-link {
    position: absolute;

    left: 32px;
    bottom: 30px;

    display: flex;
    align-items: center;
    gap: 7px;

    color: #b68aff;

    font-size: 11px;
    font-weight: 800;
}


.muathemewpgiare-feature-link svg {
    width: 14px;
}


/* SHOWCASE */

.muathemewpgiare-showcase-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;

    margin-top: 65px;
}


.muathemewpgiare-command-card,
.muathemewpgiare-stat-panel {
    min-height: 420px;

    padding: 30px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );
}


.muathemewpgiare-command-header {
    display: flex;
    justify-content: space-between;

    color: #777686;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .15em;
}


.muathemewpgiare-live {
    color: #43ff9c;
}


.muathemewpgiare-command-body {
    height: 330px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 12px;
}


.muathemewpgiare-demo-button {
    width: 100%;

    padding: 18px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border-radius: 15px;

    color: white;

    background:
        linear-gradient(
            100deg,
            rgba(139,92,246,.25),
            rgba(139,92,246,.08)
        );

    border:
        1px solid
        rgba(139,92,246,.25);

    font-weight: 700;

    transition: .3s;
}


.muathemewpgiare-demo-button:hover {
    transform: translateX(7px);

    background:
        rgba(139,92,246,.2);
}


.muathemewpgiare-demo-secondary {
    background:
        rgba(255,255,255,.035);

    border-color:
        rgba(255,255,255,.08);
}


.muathemewpgiare-demo-danger {
    background:
        rgba(255,70,100,.07);

    border-color:
        rgba(255,70,100,.15);
}


.muathemewpgiare-stat-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 55px;
}


.muathemewpgiare-stat-circle {
    width: 210px;
    height: 210px;

    border-radius: 50%;

    padding: 10px;

    background:
        conic-gradient(
            #a855f7 0 75%,
            #00e5ff 75% 85%,
            rgba(255,255,255,.05) 85%
        );

    animation:
        muathemewpgiare-spin-glow 8s linear infinite;
}


.muathemewpgiare-stat-circle-inner {
    width: 100%;
    height: 100%;

    border-radius: inherit;

    display: grid;
    place-items: center;

    align-content: center;

    background:
        #0c0c14;
}


.muathemewpgiare-stat-circle strong {
    font-size: 40px;

    letter-spacing: -.06em;
}


.muathemewpgiare-stat-circle small {
    margin-top: 4px;

    color: #777686;

    font-size: 9px;

    letter-spacing: .2em;
}


@keyframes muathemewpgiare-spin-glow {
    to {
        transform: rotate(360deg);
    }
}


.muathemewpgiare-stat-copy > span {
    color: #777686;

    font-size: 9px;

    letter-spacing: .2em;
}


.muathemewpgiare-stat-copy h3 {
    max-width: 270px;

    margin-top: 14px;

    font-size: 28px;

    line-height: 1.1;

    letter-spacing: -.05em;
}


.muathemewpgiare-stat-copy em {
    color: #b58bff;
    font-style: normal;
}


.muathemewpgiare-progress {
    width: 260px;
    height: 5px;

    margin-top: 25px;

    overflow: hidden;

    border-radius: 10px;

    background:
        rgba(255,255,255,.08);
}


.muathemewpgiare-progress span {
    display: block;

    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #8b5cf6,
            #00e5ff
        );

    transition:
        width 1.5s cubic-bezier(.2,.8,.2,1);
}


.muathemewpgiare-stat-copy small {
    display: block;

    margin-top: 9px;

    color: #666573;

    font-size: 9px;
}


/* STATS */

.muathemewpgiare-stats-section {
    width: min(1400px, calc(100% - 50px));

    margin: auto;

    padding: 60px 0;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid
        rgba(255,255,255,.07);

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.muathemewpgiare-stat-item {
    text-align: center;

    border-right:
        1px solid
        rgba(255,255,255,.07);
}


.muathemewpgiare-stat-item:last-child {
    border-right: 0;
}


.muathemewpgiare-stat-item strong {
    display: block;

    font-size: 42px;

    letter-spacing: -.06em;

    background:
        linear-gradient(
            90deg,
            white,
            #9f7aea
        );

    color: transparent;

    -webkit-background-clip: text;
    background-clip: text;
}


.muathemewpgiare-stat-item span {
    display: block;

    margin-top: 5px;

    color: #686774;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .18em;
}


/* PRICING */

.muathemewpgiare-pricing-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 20px;

    margin-top: 65px;

    max-width: 900px;
}


.muathemewpgiare-price-card {
    position: relative;

    padding: 35px;

    border-radius: 27px;

    border:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.025);
}


.muathemewpgiare-price-featured {
    background:
        linear-gradient(
            145deg,
            rgba(139,92,246,.14),
            rgba(0,229,255,.035)
        );

    border-color:
        rgba(139,92,246,.35);
}


.muathemewpgiare-popular {
    position: absolute;

    top: 20px;
    right: 20px;

    padding: 6px 9px;

    border-radius: 999px;

    background:
        rgba(139,92,246,.15);

    color: #c39cff;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: .1em;
}


.muathemewpgiare-price-label {
    color: #777686;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .2em;
}


.muathemewpgiare-price-card h3 {
    margin-top: 12px;

    font-size: 28px;
}


.muathemewpgiare-price {
    margin-top: 22px;

    font-size: 48px;

    font-weight: 900;

    letter-spacing: -.06em;
}


.muathemewpgiare-price small {
    color: #666573;

    font-size: 11px;

    letter-spacing: 0;
}


.muathemewpgiare-price-card ul {
    list-style: none;

    margin: 30px 0;
}


.muathemewpgiare-price-card li {
    display: flex;
    align-items: center;
    gap: 9px;

    margin: 14px 0;

    color: #9695a5;

    font-size: 12px;
}


.muathemewpgiare-price-card li svg {
    width: 15px;

    color: #a77aff;
}


/* FOOTER */

.muathemewpgiare-footer {
    width: min(1400px, calc(100% - 50px));

    margin: auto;

    padding: 60px 0;

    display: flex;
    justify-content: space-between;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    color: #5f5e6b;

    font-size: 10px;
}


.muathemewpgiare-footer strong {
    color: #b3b0c0;

    letter-spacing: .08em;
}


.muathemewpgiare-footer p {
    margin-top: 7px;
}


/* TOAST */

.muathemewpgiare-toast {
    position: fixed;

    right: 25px;
    bottom: 25px;

    min-width: 280px;

    padding: 15px;

    display: flex;
    align-items: center;
    gap: 12px;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius: 17px;

    background:
        rgba(14,14,22,.85);

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.45);

    transform:
        translateY(130px)
        scale(.95);

    opacity: 0;

    transition:
        .45s cubic-bezier(.2,.8,.2,1);

    z-index: 500;
}


.muathemewpgiare-toast.active {
    transform:
        translateY(0)
        scale(1);

    opacity: 1;
}


.muathemewpgiare-toast-icon {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    background:
        rgba(67,255,156,.1);

    color: #43ff9c;
}


.muathemewpgiare-toast strong,
.muathemewpgiare-toast span {
    display: block;
}


.muathemewpgiare-toast strong {
    font-size: 11px;
}


.muathemewpgiare-toast span {
    margin-top: 3px;

    color: #777686;

    font-size: 10px;
}


/* MODAL */

.muathemewpgiare-modal {
    position: fixed;

    inset: 0;

    display: grid;
    place-items: center;

    padding: 20px;

    visibility: hidden;
    opacity: 0;

    z-index: 1000;

    transition: .4s;
}


.muathemewpgiare-modal.active {
    visibility: visible;
    opacity: 1;
}


.muathemewpgiare-modal-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(0,0,0,.72);

    backdrop-filter:
        blur(15px);
}


.muathemewpgiare-modal-box {
    width: min(520px, 100%);

    padding: 45px;

    position: relative;
    z-index: 2;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #15131f,
            #0a0a10
        );

    box-shadow:
        0 40px 120px
        rgba(0,0,0,.6);

    transform:
        translateY(30px)
        scale(.94);

    transition:
        .45s cubic-bezier(.2,.8,.2,1);
}


.muathemewpgiare-modal.active
.muathemewpgiare-modal-box {
    transform:
        translateY(0)
        scale(1);
}


.muathemewpgiare-modal-close {
    position: absolute;

    top: 20px;
    right: 20px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: white;

    background:
        rgba(255,255,255,.06);
}


.muathemewpgiare-modal-icon {
    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #06b6d4
        );

    box-shadow:
        0 15px 40px
        rgba(139,92,246,.3);
}


.muathemewpgiare-modal-label {
    display: block;

    margin-top: 25px;

    color: #8d8b9c;

    font-size: 9px;

    letter-spacing: .2em;
}


.muathemewpgiare-modal-box h2 {
    margin-top: 10px;

    font-size: 36px;

    line-height: 1;

    letter-spacing: -.06em;
}


.muathemewpgiare-modal-box p {
    margin: 20px 0 25px;

    color: #858391;

    font-size: 13px;

    line-height: 1.8;
}


/* RIPPLE */

.muathemewpgiare-ripple {
    position: relative;
    overflow: hidden;
}


.muathemewpgiare-ripple-effect {
    position: absolute;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.35);

    transform:
        translate(-50%,-50%)
        scale(0);

    pointer-events: none;

    animation:
        muathemewpgiare-ripple .7s ease-out;
}


@keyframes muathemewpgiare-ripple {

    to {
        transform:
            translate(-50%,-50%)
            scale(15);

        opacity: 0;
    }

}


/* CURSOR */

.muathemewpgiare-cursor,
.muathemewpgiare-cursor-ring {
    position: fixed;

    top: 0;
    left: 0;

    pointer-events: none;

    z-index: 9999;

    transform:
        translate(-50%,-50%);
}


.muathemewpgiare-cursor {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: white;

    box-shadow:
        0 0 20px
        rgba(255,255,255,.9);
}


.muathemewpgiare-cursor-ring {
    width: 34px;
    height: 34px;

    border:
        1px solid
        rgba(255,255,255,.35);

    border-radius: 50%;

    transition:
        width .25s,
        height .25s,
        border .25s;
}


body.muathemewpgiare-hovering
.muathemewpgiare-cursor-ring {
    width: 60px;
    height: 60px;

    border-color:
        rgba(168,85,247,.7);
}


/* RESPONSIVE */

@media (max-width: 1000px) {

    .muathemewpgiare-nav {
        display: none;
    }

    .muathemewpgiare-hero {
        grid-template-columns: 1fr;

        padding-top: 100px;

        min-height: auto;
    }

    .muathemewpgiare-hero-visual {
        height: 600px;
    }

    .muathemewpgiare-feature-grid {
        grid-template-columns: 1fr;
    }

    .muathemewpgiare-showcase-grid {
        grid-template-columns: 1fr;
    }

    .muathemewpgiare-stats-section {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 35px;
    }

    .muathemewpgiare-stat-item:nth-child(2) {
        border-right: 0;
    }

    .muathemewpgiare-pricing-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .muathemewpgiare-header,
    .muathemewpgiare-hero,
    .muathemewpgiare-section,
    .muathemewpgiare-stats-section,
    .muathemewpgiare-footer {
        width: min(
            100% - 28px,
            1400px
        );
    }

    .muathemewpgiare-header {
        height: 70px;
    }

    .muathemewpgiare-header
    .muathemewpgiare-button {
        display: none;
    }

    .muathemewpgiare-hero-title {
        font-size: 48px;
    }

    .muathemewpgiare-hero-actions {
        flex-direction: column;
    }

    .muathemewpgiare-hero-actions
    .muathemewpgiare-button {
        width: 100%;
    }

    .muathemewpgiare-hero-visual {
        height: 460px;
    }

    .muathemewpgiare-dashboard-card {
        padding: 20px;
    }

    .muathemewpgiare-dashboard-stats {
        grid-template-columns: 1fr;
    }

    .muathemewpgiare-dashboard-stats > div {
        padding: 9px;
    }

    .muathemewpgiare-floating-one {
        right: -5px;
        top: 20px;
    }

    .muathemewpgiare-floating-two {
        left: -5px;
        bottom: 25px;
    }

    .muathemewpgiare-stat-panel {
        flex-direction: column;
        gap: 30px;
    }

    .muathemewpgiare-stat-circle {
        width: 170px;
        height: 170px;
    }

    .muathemewpgiare-stat-copy {
        text-align: center;
    }

    .muathemewpgiare-progress {
        width: 100%;
    }

    .muathemewpgiare-footer {
        flex-direction: column;
        gap: 25px;
    }

    .muathemewpgiare-cursor,
    .muathemewpgiare-cursor-ring {
        display: none;
    }

}
"use strict";


/* ==========================================================
   MUATHEMEWPGIARE
   Advanced Interaction Engine
   muathemewpgiare.com
========================================================== */


document.addEventListener(
    "DOMContentLoaded",
    () => {


        /* =====================================================
           ICON ENGINE
        ===================================================== */

        if (window.lucide) {
            lucide.createIcons();
        }


        /* =====================================================
           LENIS SMOOTH SCROLL
        ===================================================== */

        let muathemewpgiareLenis = null;

        if (window.Lenis) {

            muathemewpgiareLenis =
                new Lenis({
                    duration: 1.15,
                    smoothWheel: true,
                    wheelMultiplier: .85,
                    touchMultiplier: 1.2
                });


            function muathemewpgiareRAF(time) {

                muathemewpgiareLenis.raf(time);

                requestAnimationFrame(
                    muathemewpgiareRAF
                );
            }

            requestAnimationFrame(
                muathemewpgiareRAF
            );

        }


        /* =====================================================
           PARTICLES
        ===================================================== */

        if (
            window.particlesJS &&
            document.getElementById(
                "muathemewpgiare-particles"
            )
        ) {

            particlesJS(
                "muathemewpgiare-particles",
                {

                    particles: {

                        number: {
                            value: 45,
                            density: {
                                enable: true,
                                value_area: 1000
                            }
                        },

                        color: {
                            value: [
                                "#8b5cf6",
                                "#00e5ff",
                                "#ffffff"
                            ]
                        },

                        opacity: {
                            value: .22,
                            random: true
                        },

                        size: {
                            value: 2,
                            random: true
                        },

                        line_linked: {
                            enable: true,
                            distance: 150,
                            color: "#8b5cf6",
                            opacity: .08,
                            width: 1
                        },

                        move: {
                            enable: true,
                            speed: .45,
                            direction: "none",
                            random: true,
                            straight: false,
                            out_mode: "out"
                        }

                    },

                    interactivity: {

                        detect_on: "canvas",

                        events: {

                            onhover: {
                                enable: true,
                                mode: "grab"
                            },

                            onclick: {
                                enable: true,
                                mode: "push"
                            },

                            resize: true

                        },

                        modes: {

                            grab: {
                                distance: 180,
                                line_linked: {
                                    opacity: .18
                                }
                            },

                            push: {
                                particles_nb: 3
                            }

                        }

                    },

                    retina_detect: true

                }
            );
        }


        /* =====================================================
           VANILLA TILT
        ===================================================== */

        if (window.VanillaTilt) {

            VanillaTilt.init(
                document.querySelectorAll(
                    "[data-tilt]"
                ),
                {
                    max: 8,
                    perspective: 1100,
                    speed: 600,
                    glare: true,
                    "max-glare": .12,
                    scale: 1.015
                }
            );

        }


        /* =====================================================
           MAGNETIC BUTTON
        ===================================================== */

        const muathemewpgiareMagnetic =
            document.querySelectorAll(
                ".muathemewpgiare-magnetic"
            );


        muathemewpgiareMagnetic.forEach(
            (element) => {

                element.addEventListener(
                    "mousemove",
                    (event) => {

                        const rect =
                            element.getBoundingClientRect();

                        const x =
                            event.clientX -
                            rect.left -
                            rect.width / 2;

                        const y =
                            event.clientY -
                            rect.top -
                            rect.height / 2;


                        gsap.to(
                            element,
                            {
                                x: x * .18,
                                y: y * .18,
                                duration: .35,
                                ease: "power3.out"
                            }
                        );

                    }
                );


                element.addEventListener(
                    "mouseleave",
                    () => {

                        gsap.to(
                            element,
                            {
                                x: 0,
                                y: 0,
                                duration: .7,
                                ease: "elastic.out(1,.4)"
                            }
                        );

                    }
                );

            }
        );


        /* =====================================================
           CUSTOM CURSOR
        ===================================================== */

        const muathemewpgiareCursor =
            document.querySelector(
                ".muathemewpgiare-cursor"
            );

        const muathemewpgiareCursorRing =
            document.querySelector(
                ".muathemewpgiare-cursor-ring"
            );


        if (
            muathemewpgiareCursor &&
            muathemewpgiareCursorRing &&
            window.innerWidth > 700
        ) {

            let cursorX = 0;
            let cursorY = 0;

            let ringX = 0;
            let ringY = 0;


            document.addEventListener(
                "mousemove",
                (event) => {

                    cursorX = event.clientX;
                    cursorY = event.clientY;

                    gsap.to(
                        muathemewpgiareCursor,
                        {
                            x: cursorX,
                            y: cursorY,
                            duration: .08
                        }
                    );

                }
            );


            function muathemewpgiareCursorLoop() {

                ringX +=
                    (cursorX - ringX) * .14;

                ringY +=
                    (cursorY - ringY) * .14;


                gsap.set(
                    muathemewpgiareCursorRing,
                    {
                        x: ringX,
                        y: ringY
                    }
                );


                requestAnimationFrame(
                    muathemewpgiareCursorLoop
                );
            }


            muathemewpgiareCursorLoop();


            document
                .querySelectorAll(
                    "a, button, [data-tilt]"
                )
                .forEach(
                    (element) => {

                        element.addEventListener(
                            "mouseenter",
                            () => {

                                document.body.classList.add(
                                    "muathemewpgiare-hovering"
                                );

                            }
                        );


                        element.addEventListener(
                            "mouseleave",
                            () => {

                                document.body.classList.remove(
                                    "muathemewpgiare-hovering"
                                );

                            }
                        );

                    }
                );

        }


        /* =====================================================
           RIPPLE
        ===================================================== */

        document
            .querySelectorAll(
                ".muathemewpgiare-ripple"
            )
            .forEach(
                (button) => {

                    button.addEventListener(
                        "click",
                        function(event) {

                            const rect =
                                this.getBoundingClientRect();

                            const ripple =
                                document.createElement(
                                    "span"
                                );


                            ripple.className =
                                "muathemewpgiare-ripple-effect";


                            ripple.style.left =
                                `${event.clientX - rect.left}px`;

                            ripple.style.top =
                                `${event.clientY - rect.top}px`;


                            this.appendChild(
                                ripple
                            );


                            setTimeout(
                                () => {
                                    ripple.remove();
                                },
                                700
                            );

                        }
                    );

                }
            );


        /* =====================================================
           TOAST
        ===================================================== */

        const muathemewpgiareToast =
            document.getElementById(
                "muathemewpgiare-toast"
            );

        const muathemewpgiareToastMessage =
            document.getElementById(
                "muathemewpgiare-toast-message"
            );


        let muathemewpgiareToastTimer;


        function muathemewpgiareShowToast(
            message
        ) {

            if (!muathemewpgiareToast) {
                return;
            }


            muathemewpgiareToastMessage.textContent =
                message;


            muathemewpgiareToast.classList.add(
                "active"
            );


            clearTimeout(
                muathemewpgiareToastTimer
            );


            muathemewpgiareToastTimer =
                setTimeout(
                    () => {

                        muathemewpgiareToast.classList.remove(
                            "active"
                        );

                    },
                    2800
                );

        }


        document
            .querySelectorAll(
                "[data-toast]"
            )
            .forEach(
                (button) => {

                    button.addEventListener(
                        "click",
                        () => {

                            muathemewpgiareShowToast(
                                button.dataset.toast
                            );

                        }
                    );

                }
            );


        /* =====================================================
           MODAL
        ===================================================== */

        const muathemewpgiareModal =
            document.getElementById(
                "muathemewpgiare-modal"
            );


        function muathemewpgiareOpenModal() {

            muathemewpgiareModal.classList.add(
                "active"
            );

            document.body.style.overflow =
                "hidden";

        }


        function muathemewpgiareCloseModal() {

            muathemewpgiareModal.classList.remove(
                "active"
            );

            document.body.style.overflow =
                "";

        }


        document
            .querySelectorAll(
                "[data-modal-open]"
            )
            .forEach(
                (button) => {

                    button.addEventListener(
                        "click",
                        muathemewpgiareOpenModal
                    );

                }
            );


        document
            .querySelectorAll(
                "[data-modal-close]"
            )
            .forEach(
                (button) => {

                    button.addEventListener(
                        "click",
                        muathemewpgiareCloseModal
                    );

                }
            );


        document.addEventListener(
            "keydown",
            (event) => {

                if (
                    event.key === "Escape"
                ) {

                    muathemewpgiareCloseModal();

                }

            }
        );


        /* =====================================================
           SMOOTH ANCHOR
        ===================================================== */

        document
            .querySelectorAll(
                "[data-scroll]"
            )
            .forEach(
                (button) => {

                    button.addEventListener(
                        "click",
                        () => {

                            const target =
                                document.querySelector(
                                    button.dataset.scroll
                                );


                            if (!target) {
                                return;
                            }


                            if (
                                muathemewpgiareLenis
                            ) {

                                muathemewpgiareLenis.scrollTo(
                                    target,
                                    {
                                        offset: -50
                                    }
                                );

                            } else {

                                target.scrollIntoView({
                                    behavior:
                                        "smooth"
                                });

                            }

                        }
                    );

                }
            );


        /* =====================================================
           GSAP
        ===================================================== */

        if (window.gsap) {

            gsap.registerPlugin(
                ScrollTrigger
            );


            /* HERO */

            const heroTimeline =
                gsap.timeline({
                    defaults: {
                        ease: "power3.out"
                    }
                });


            heroTimeline

                .from(
                    ".muathemewpgiare-header",
                    {
                        y: -30,
                        opacity: 0,
                        duration: .8
                    }
                )

                .from(
                    ".muathemewpgiare-badge",
                    {
                        y: 25,
                        opacity: 0,
                        duration: .5
                    },
                    "-=.35"
                )

                .from(
                    ".muathemewpgiare-hero-title",
                    {
                        y: 50,
                        opacity: 0,
                        duration: 1
                    },
                    "-=.2"
                )

                .from(
                    ".muathemewpgiare-hero-description",
                    {
                        y: 25,
                        opacity: 0,
                        duration: .7
                    },
                    "-=.5"
                )

                .from(
                    ".muathemewpgiare-hero-actions",
                    {
                        y: 25,
                        opacity: 0,
                        duration: .6
                    },
                    "-=.4"
                )

                .from(
                    ".muathemewpgiare-hero-visual",
                    {
                        x: 80,
                        opacity: 0,
                        rotateY: 12,
                        duration: 1.2
                    },
                    "-=.8"
                );


            /* SECTION REVEAL */

            gsap.utils
                .toArray(
                    ".muathemewpgiare-section-heading"
                )
                .forEach(
                    (heading) => {

                        gsap.from(
                            heading,
                            {
                                scrollTrigger: {
                                    trigger: heading,
                                    start: "top 80%"
                                },

                                y: 50,
                                opacity: 0,

                                duration: 1,

                                ease:
                                    "power3.out"
                            }
                        );

                    }
                );


            /* FEATURE CARDS */

            gsap.utils
                .toArray(
                    ".muathemewpgiare-feature-card"
                )
                .forEach(
                    (card, index) => {

                        gsap.from(
                            card,
                            {
                                scrollTrigger: {
                                    trigger: card,
                                    start: "top 85%"
                                },

                                y: 80,
                                opacity: 0,
                                rotateX: 12,

                                duration: .8,

                                delay:
                                    index * .12,

                                ease:
                                    "power3.out"
                            }
                        );

                    }
                );


            /* STATS */

            gsap.utils
                .toArray(
                    ".muathemewpgiare-stat-item"
                )
                .forEach(
                    (item) => {

                        gsap.from(
                            item,
                            {
                                scrollTrigger: {
                                    trigger: item,
                                    start: "top 90%"
                                },

                                y: 30,
                                opacity: 0,

                                duration: .7
                            }
                        );

                    }
                );


            /* PROGRESS */

            const progress =
                document.querySelector(
                    "[data-progress]"
                );


            if (progress) {

                ScrollTrigger.create({

                    trigger: progress,

                    start: "top 85%",

                    once: true,

                    onEnter: () => {

                        progress.style.width =
                            `${progress.dataset.progress}%`;

                    }

                });

            }

        }


        /* =====================================================
           COUNTERS
        ===================================================== */

        const muathemewpgiareCounters =
            document.querySelectorAll(
                "[data-counter]"
            );


        muathemewpgiareCounters.forEach(
            (counter) => {

                const target =
                    parseFloat(
                        counter.dataset.counter
                    );


                const hasDecimal =
                    !Number.isInteger(
                        target
                    );


                if (window.gsap) {

                    gsap.fromTo(
                        counter,
                        {
                            innerText: 0
                        },
                        {
                            innerText: target,

                            duration: 2.2,

                            ease: "power2.out",

                            snap: {
                                innerText:
                                    hasDecimal
                                        ? .1
                                        : 1
                            },

                            scrollTrigger: {
                                trigger: counter,
                                start: "top 88%",
                                once: true
                            },

                            onUpdate: function() {

                                let value =
                                    parseFloat(
                                        this.targets()[0]
                                            .innerText
                                    );


                                if (hasDecimal) {

                                    counter.innerText =
                                        value.toFixed(1);

                                } else {

                                    counter.innerText =
                                        Math.round(
                                            value
                                        ).toLocaleString(
                                            "en-US"
                                        );

                                }

                            }

                        }
                    );

                }

            }
        );


        /* =====================================================
           3D MOUSE PARALLAX
        ===================================================== */

        const heroVisual =
            document.querySelector(
                ".muathemewpgiare-hero-visual"
            );


        if (
            heroVisual &&
            window.innerWidth > 900
        ) {

            heroVisual.addEventListener(
                "mousemove",
                (event) => {

                    const rect =
                        heroVisual.getBoundingClientRect();


                    const x =
                        (
                            event.clientX -
                            rect.left -
                            rect.width / 2
                        ) / rect.width;


                    const y =
                        (
                            event.clientY -
                            rect.top -
                            rect.height / 2
                        ) / rect.height;


                    gsap.to(
                        ".muathemewpgiare-dashboard-card",
                        {
                            rotationY:
                                x * 7,

                            rotationX:
                                -y * 7,

                            duration: .7,

                            ease: "power2.out"
                        }
                    );

                }
            );


            heroVisual.addEventListener(
                "mouseleave",
                () => {

                    gsap.to(
                        ".muathemewpgiare-dashboard-card",
                        {
                            rotationY: 0,
                            rotationX: 0,
                            duration: 1,
                            ease:
                                "elastic.out(1,.5)"
                        }
                    );

                }
            );

        }


        /* =====================================================
           KEYBOARD SHORTCUT
        ===================================================== */

        document.addEventListener(
            "keydown",
            (event) => {

                if (
                    event.key.toLowerCase() ===
                    "k" &&
                    (event.ctrlKey ||
                     event.metaKey)
                ) {

                    event.preventDefault();

                    muathemewpgiareShowToast(
                        "Command system activated"
                    );

                }

            }
        );


        /* =====================================================
           LOG
        ===================================================== */

        console.log(
            "%c MUATHEMEWPGIARE.COM ",
            "background:#8b5cf6;color:white;padding:10px 16px;border-radius:8px;font-weight:900;"
        );

        console.log(
            "%c Advanced UI Engine initialized.",
            "color:#00e5ff;font-size:12px;"
        );

    }
);
Live Preview
Ctrl1 HTML Ctrl2 CSS Ctrl3 JS Ctrl↵ Reload
Chia sẻ Demo này · Gửi cho bạn bè hoặc đồng nghiệp
Facebook Twitter Telegram