Metehan

38 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

13 June 2025

Un code de Metehan

22 April 2025

Un code de Metehan

13 June 2025

Un code de Metehan

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aura | Nature Meets Productivity</title>
    
    <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=Outfit:wght@300;400;500;700;800&display=swap" rel="stylesheet">
    
    <script src="https://unpkg.com/@phosphor-icons/web"></script>
    
    <style>
        /* === CSS VARIABLES === */
        :root {
            /* Color Palette */
            --bg-dark: #07130a;
            --bg-grad-1: #0a1f11;
            --bg-grad-2: #16381e;
            --accent-green: #74d45c;
            --accent-glow: rgba(116, 212, 92, 0.4);
            --text-main: #f0fdf4;
            --text-muted: #a3b8a8;
            
            /* Glassmorphism */
            --glass-bg: rgba(255, 255, 255, 0.03);
            --glass-border: rgba(255, 255, 255, 0.08);
            --glass-blur: blur(24px);
            
            /* Typography */
            --font-main: 'Outfit', sans-serif;
            
            /* Animation */
            --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
            --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
            --transition-smooth: 0.6s var(--ease-out-expo);
        }

/* === RESET & BASE === */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            cursor: none; /* Hide default cursor for custom one */
        }

html, body {
            width: 100%;
            height: 100%;
            font-family: var(--font-main);
            color: var(--text-main);
            background-color: var(--bg-dark);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

/* Dynamic Background */
        .bg-layer {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: radial-gradient(circle at 50% 0%, var(--bg-grad-2), var(--bg-dark) 70%);
            z-index: -2;
            transition: background 1s ease;
        }

/* Noise Overlay for texture */
        .noise-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
            pointer-events: none;
            z-index: -1;
        }

/* === CUSTOM CURSOR === */
        .cursor-dot {
            width: 8px; height: 8px;
            background-color: var(--accent-green);
            border-radius: 50%;
            position: fixed;
            top: 0; left: 0;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 9999;
            transition: transform 0.1s;
        }

.cursor-outline {
            width: 40px; height: 40px;
            border: 1px solid var(--accent-glow);
            border-radius: 50%;
            position: fixed;
            top: 0; left: 0;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 9998;
            transition: width 0.3s, height 0.3s, background-color 0.3s;
            /* JS will handle position translation for trailing effect */
        }

.cursor-hover .cursor-outline {
            width: 60px; height: 60px;
            background-color: rgba(116, 212, 92, 0.1);
            backdrop-filter: blur(2px);
        }

/* === UTILITIES === */
        .glass-panel {
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
        }

a { text-decoration: none; color: inherit; }
        ul { list-style: none; }
        button { border: none; background: none; font-family: inherit; color: inherit; outline: none;}

/* === NAVIGATION === */
        header {
            position: fixed;
            top: 0; left: 0; width: 100%;
            padding: 24px 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            transition: var(--transition-smooth);
        }

.logo {
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: -1px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

.logo i { color: var(--accent-green); }

nav ul {
            display: flex;
            gap: 40px;
            background: rgba(0,0,0,0.2);
            padding: 12px 32px;
            border-radius: 50px;
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(10px);
        }

nav a {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-muted);
            transition: color 0.3s ease;
            position: relative;
        }

nav a:hover { color: var(--text-main); }
        
        nav a::after {
            content: '';
            position: absolute;
            bottom: -4px; left: 50%;
            width: 0; height: 2px;
            background: var(--accent-green);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

nav a:hover::after { width: 100%; }

.auth-btn {
            padding: 12px 28px;
            background: var(--text-main);
            color: var(--bg-dark);
            border-radius: 50px;
            font-weight: 700;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

.auth-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px var(--accent-glow);
            background: var(--accent-green);
        }

/* === HERO SECTION === */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            padding: 0 5%;
            position: relative;
            overflow: hidden;
        }

.hero-content {
            flex: 1;
            max-width: 600px;
            z-index: 10;
        }

.badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 50px;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 24px;
            color: var(--accent-green);
        }

.hero h1 {
            font-size: clamp(3.5rem, 6vw, 5.5rem);
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 24px;
            background: linear-gradient(to right, #fff, var(--text-muted));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

.hero p {
            font-size: 1.2rem;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 40px;
            max-width: 500px;
        }

.btn-group {
            display: flex;
            gap: 16px;
        }

.btn-primary {
            padding: 16px 32px;
            background: var(--accent-green);
            color: var(--bg-dark);
            border-radius: 50px;
            font-weight: 700;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 0 20px rgba(116, 212, 92, 0.2);
        }

.btn-primary:hover {
            box-shadow: 0 0 30px rgba(116, 212, 92, 0.5);
            transform: translateY(-2px) scale(1.02);
        }

.btn-secondary {
            padding: 16px 32px;
            border: 1px solid var(--glass-border);
            border-radius: 50px;
            font-weight: 500;
            transition: all 0.3s ease;
            background: rgba(255,255,255,0.02);
        }

.btn-secondary:hover {
            background: rgba(255,255,255,0.1);
            border-color: rgba(255,255,255,0.3);
        }

/* Hero 3D Object (Procedural Moss Sphere) */
        .hero-visual {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            height: 100%;
        }

/* SVG definition for texture hidden in HTML */
        .moss-sphere {
            width: clamp(300px, 40vw, 550px);
            height: clamp(300px, 40vw, 550px);
            border-radius: 50%;
            /* Complex radial gradient to simulate 3D lighting on a green sphere */
            background: radial-gradient(circle at 35% 30%, #a3e635 0%, #4ade80 20%, #166534 60%, #052e16 100%);
            box-shadow: 
                inset -30px -30px 60px rgba(0,0,0,0.8),
                inset 10px 10px 30px rgba(255,255,255,0.3),
                0 40px 80px rgba(0,0,0,0.6);
            /* Apply SVG fractal noise filter defined in HTML for moss texture */
            filter: url(#mossTexture) drop-shadow(0 20px 30px rgba(0,0,0,0.5));
            animation: float 8s var(--ease-in-out) infinite;
            position: relative;
        }

/* Base platform for the sphere */
        .sphere-base {
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 40px;
            background: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%);
            border-radius: 50%;
            filter: blur(10px);
            animation: float-shadow 8s var(--ease-in-out) infinite;
        }

@keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-30px) rotate(2deg); }
        }
        
        @keyframes float-shadow {
            0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.8; }
            50% { transform: translateX(-50%) scale(0.8); opacity: 0.4; }
        }

/* === CAROUSEL SECTION === */
        .carousel-section {
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding: 100px 0;
        }

.section-header {
            text-align: center;
            margin-bottom: 60px;
            z-index: 10;
        }

.section-header h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .section-header p {
            color: var(--text-muted);
        }

/* The 3D Stage */
        .carousel-container {
            width: 100%;
            height: 60vh;
            position: relative;
            perspective: 1200px; /* Crucial for 3D effect */
            display: flex;
            justify-content: center;
            align-items: center;
            touch-action: pan-y; /* Allow vertical scroll, hijack horizontal via JS */
        }

.carousel-track {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            /* Flex layout helps center things initially before absolute positioning takes over */
            display: flex;
            justify-content: center;
            align-items: center;
        }

/* Individual Card */
        .card {
            position: absolute;
            width: 320px;
            height: 480px;
            border-radius: 30px;
            overflow: hidden;
            background-color: #111;
            /* Will-change optimizes performance for elements that animate continuously */
            will-change: transform, opacity;
            box-shadow: 0 30px 60px rgba(0,0,0,0.6);
            /* Interaction */
            user-select: none;
            cursor: grab;
            /* We handle transitions mostly in JS loop for smoothness, 
               but subtle CSS transitions help for visual state changes like hover */
            transition: box-shadow 0.3s ease, filter 0.3s ease;
        }

.card:active { cursor: grabbing; }

.card-img-wrap {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            overflow: hidden;
        }

.card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s var(--ease-out-expo);
        }

/* Gradient overlay for text readability */
        .card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
            z-index: 1;
        }

.card-content {
            position: absolute;
            bottom: 0; left: 0; width: 100%;
            padding: 30px 24px;
            z-index: 2;
            transform: translateY(20px);
            opacity: 0.8;
            transition: all 0.4s var(--ease-out-expo);
        }

.card-index {
            font-size: 4rem;
            font-weight: 800;
            line-height: 1;
            color: rgba(255,255,255,0.1);
            position: absolute;
            top: -40px; right: 20px;
            -webkit-text-stroke: 1px rgba(255,255,255,0.2);
        }

.card h3 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 8px;
        }

.card p {
            font-size: 0.9rem;
            color: var(--text-muted);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

/* Active Card State Styling */
        .card.active {
            box-shadow: 0 40px 80px rgba(116, 212, 92, 0.15), 0 0 0 1px var(--glass-border);
        }

.card.active .card-content {
            transform: translateY(0);
            opacity: 1;
        }

.card.active img {
            transform: scale(1.05); /* Subtle zoom on active */
        }
        
        /* Click indicator for active card */
        .click-indicator {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(5px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 3;
            opacity: 0;
            transform: scale(0.5);
            transition: all 0.3s ease;
            pointer-events: none;
        }
        
        .card.active:hover .click-indicator {
            opacity: 1;
            transform: scale(1);
        }

/* Carousel Controls */
        .controls {
            display: flex;
            gap: 20px;
            margin-top: 40px;
            z-index: 10;
        }

.ctrl-btn {
            width: 50px; height: 50px;
            border-radius: 50%;
            display: flex; justify-content: center; align-items: center;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

.ctrl-btn:hover {
            background: var(--text-main);
            color: var(--bg-dark);
            transform: scale(1.1);
        }

/* Drag instructions */
        .drag-hint {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--text-muted);
            font-size: 0.85rem;
            opacity: 0.6;
            animation: pulse 2s infinite;
        }

@keyframes pulse {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 0.8; }
        }

/* === FEATURE OVERLAY MODAL === */
        .feature-modal {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: none; /* Hidden by default */
        }

.modal-backdrop {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            opacity: 0;
            transition: opacity 0.5s ease;
        }

.modal-content {
            position: relative;
            width: 90%;
            max-width: 900px;
            min-height: 500px;
            padding: 60px;
            display: flex;
            gap: 40px;
            opacity: 0;
            transform: translateY(100px) scale(0.95);
            transition: all 0.6s var(--ease-out-expo);
        }

/* Modal Active State */
        .feature-modal.active { pointer-events: all; }
        .feature-modal.active .modal-backdrop { opacity: 1; }
        .feature-modal.active .modal-content {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

.btn-close {
            position: absolute;
            top: 24px; right: 24px;
            width: 40px; height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            display: flex; justify-content: center; align-items: center;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            z-index: 10;
        }

.btn-close:hover {
            background: #ff4757;
            transform: rotate(90deg);
        }

.modal-img-container {
            flex: 1;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
        }

.modal-img-container img {
            width: 100%; height: 100%;
            object-fit: cover;
        }

.modal-details {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

.modal-details h2 {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 16px;
            color: var(--accent-green);
        }

.modal-details p {
            color: var(--text-muted);
            line-height: 1.7;
            margin-bottom: 30px;
            font-size: 1.05rem;
        }

.feature-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 40px;
        }

.feature-item {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.9rem;
        }

.feature-item i {
            font-size: 1.2rem;
            color: var(--accent-green);
            background: rgba(116, 212, 92, 0.1);
            padding: 8px;
            border-radius: 50%;
        }

/* === RESPONSIVE DESIGN === */
        @media (max-width: 992px) {
            .hero { flex-direction: column; text-align: center; padding-top: 100px;}
            .hero h1 { font-size: 3rem; }
            .hero-content { align-items: center; display: flex; flex-direction: column;}
            .btn-group { justify-content: center; }
            .hero-visual { height: 400px; margin-top: 40px;}
            
            nav ul { display: none; } /* Simplified for mobile, would need hamburger */
            .modal-content { flex-direction: column; padding: 30px; }
            .modal-img-container { height: 200px; flex: none; }
        }

@media (max-width: 768px) {
            .card { width: 260px; height: 380px; }
            .carousel-container { height: 50vh; }
            .feature-list { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>

<svg style="display:none;">
        <defs>
            <filter id="mossTexture" x="0%" y="0%" width="100%" height="100%">
                
                <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="4" result="noise" />
                
                <feColorMatrix type="matrix" values="0 0 0 0 0.1   0 1 0 0 0.4   0 0 0 0 0.1  0 0 0 1 0" in="noise" result="coloredNoise" />
                
                <feBlend in="SourceGraphic" in2="coloredNoise" mode="multiply" />
            </filter>
        </defs>
    </svg>

<div class="cursor-dot"></div>
    <div class="cursor-outline"></div>

<div class="bg-layer" id="bgLayer"></div>
    <div class="noise-overlay"></div>

<header class="glass-panel" style="border-radius: 0; border-top: none; border-left: none; border-right: none;">
        <div class="logo cursor-hover-target">
            <i class="ph-fill ph-leaf"></i> Aura
        </div>
        <nav>
            <ul>
                <li><a href="#home" class="cursor-hover-target">Workspace</a></li>
                <li><a href="#carousel" class="cursor-hover-target">Modules</a></li>
                <li><a href="#about" class="cursor-hover-target">Sustainability</a></li>
            </ul>
        </nav>
        <button class="auth-btn cursor-hover-target">Enter Platform</button>
    </header>

<main>
        
        <section class="hero" id="home">
            <div class="hero-content">
                <div class="badge"><i class="ph ph-sparkle"></i> System v2.0 Live</div>
                <h1>Nature Meets <br> Productivity.</h1>
                <p>Transform your boring layout into a modern design. We build thoughtful digital spaces that bring nature and architecture into harmony for a timeless workflow experience.</p>
                <div class="btn-group">
                    <button class="btn-primary cursor-hover-target">
                        Start Now <i class="ph ph-arrow-right"></i>
                    </button>
                    <button class="btn-secondary cursor-hover-target">
                        <i class="ph ph-play-circle"></i> Watch Demo
                    </button>
                </div>
            </div>
            <div class="hero-visual">
                
                <div class="moss-sphere cursor-hover-target">
                    <div class="sphere-base"></div>
                </div>
            </div>
        </section>

<section class="carousel-section" id="carousel">
            <div class="section-header">
                <h2>Explore Eco-Modules</h2>
                <p>Scroll, drag or swipe to navigate the ecosystem.</p>
            </div>

<div class="carousel-container" id="carouselContainer">
                <div class="carousel-track" id="carouselTrack">
                    
                </div>
                
                <div class="drag-hint">
                    <i class="ph ph-arrows-left-right"></i> Drag to navigate
                </div>
            </div>

<div class="feature-modal" id="featureModal">
        <div class="modal-backdrop" id="modalCloseBackdrop"></div>
        <div class="modal-content glass-panel">
            <button class="btn-close cursor-hover-target" id="btnModalClose">
                <i class="ph ph-x"></i>
            </button>
            
            <div class="modal-img-container">
                <img id="modalImg" src="" alt="Feature">
            </div>
            
            <div class="modal-details">
                <h2 id="modalTitle">Module Title</h2>
                <p id="modalDesc">Detailed description of the module goes here. Explaining how it merges nature with productivity tools.</p>
                
                <div class="feature-list" id="modalFeatures">
                    
                </div>
                
                <button class="btn-primary" style="width: max-content;">
                    Launch Module <i class="ph ph-rocket-launch"></i>
                </button>
            </div>
        </div>
    </div>

<script>
        document.addEventListener('DOMContentLoaded', () => {
            
            // === DATA: Carousel Modules ===
            const modules = [
                {
                    title: "Smart Workspace",
                    desc: "An AI-driven dashboard that adapts to your workflow while maintaining a calming, natural aesthetic.",
                    img: "https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?q=80&w=600&auto=format&fit=crop",
                    color: "#0a1f11",
                    features: [
                        { icon: "ph-cpu", text: "AI Resource Allocation" },
                        { icon: "ph-drop", text: "Fluid UI Transitions" },
                        { icon: "ph-eye", text: "Visual Comfort Mode" },
                        { icon: "ph-clock", text: "Time Topography" }
                    ]
                },
                {
                    title: "Eco Task Manager",
                    desc: "Organize projects organically. Tasks grow and evolve based on priority and deadlines.",
                    img: "https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?q=80&w=600&auto=format&fit=crop",
                    color: "#16381e",
                    features: [
                        { icon: "ph-tree-structure", text: "Branching Priorities" },
                        { icon: "ph-leaf", text: "Low-Carbon Storage" },
                        { icon: "ph-users", text: "Symbiotic Collaboration" },
                        { icon: "ph-check-circle", text: "Natural Completion" }
                    ]
                },
                {
                    title: "Nature Analytics",
                    desc: "Visualize your data through organic charts and bio-inspired infographics for better insights.",
                    img: "https://images.unsplash.com/photo-1500382017468-9049fed747ef?q=80&w=600&auto=format&fit=crop",
                    color: "#0f2e1a",
                    features: [
                        { icon: "ph-chart-line-up", text: "Growth Metrics" },
                        { icon: "ph-waves", text: "Data Fluidity" },
                        { icon: "ph-planet", text: "Global Impact" },
                        { icon: "ph-file-text", text: "Eco-Reports" }
                    ]
                },
                {
                    title: "Green Planner",
                    desc: "Map out your long-term strategies in a landscape architecture inspired sandbox.",
                    img: "https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?q=80&w=600&auto=format&fit=crop",
                    color: "#1b4d29",
                    features: [
                        { icon: "ph-map-trifold", text: "Terrain Mapping" },
                        { icon: "ph-sun", text: "Energy Forecasting" },
                        { icon: "ph-compass", text: "Strategic Navigation" },
                        { icon: "ph-calendar", text: "Seasonal Planning" }
                    ]
                },
                {
                    title: "Sustainable Sync",
                    desc: "Connect all your tools seamlessly with zero friction and minimal energy expenditure.",
                    img: "https://images.unsplash.com/photo-1533460004989-cef01064af7e?q=80&w=600&auto=format&fit=crop",
                    color: "#0a2612",
                    features: [
                        { icon: "ph-arrows-merge", text: "Seamless Integration" },
                        { icon: "ph-shield-check", text: "Secure Vault" },
                        { icon: "ph-plugs", text: "API Ecology" },
                        { icon: "ph-lightning", text: "Optimized Speed" }
                    ]
                }
            ];

// === CUSTOM CURSOR LOGIC ===
            const cursorDot = document.querySelector('.cursor-dot');
            const cursorOutline = document.querySelector('.cursor-outline');
            const hoverTargets = document.querySelectorAll('.cursor-hover-target, a, button');
            
            let mouseX = window.innerWidth / 2;
            let mouseY = window.innerHeight / 2;
            let outlineX = mouseX;
            let outlineY = mouseY;

// Update mouse position
            window.addEventListener('mousemove', (e) => {
                mouseX = e.clientX;
                mouseY = e.clientY;
                // Instant update for dot
                cursorDot.style.transform = `translate(${mouseX}px, ${mouseY}px)`;
            });

// Hover effects
            hoverTargets.forEach(target => {
                target.addEventListener('mouseenter', () => document.body.classList.add('cursor-hover'));
                target.addEventListener('mouseleave', () => document.body.classList.remove('cursor-hover'));
            });

// Smooth trailing animation for outline using requestAnimationFrame
            function animateCursor() {
                // Lerp formula: current + (target - current) * easing
                outlineX += (mouseX - outlineX) * 0.15;
                outlineY += (mouseY - outlineY) * 0.15;
                
                cursorOutline.style.transform = `translate(${outlineX}px, ${outlineY}px)`;
                requestAnimationFrame(animateCursor);
            }
            animateCursor();

// === 3D CAROUSEL LOGIC ===
            const track = document.getElementById('carouselTrack');
            const bgLayer = document.getElementById('bgLayer');
            
            // Build DOM elements
            modules.forEach((mod, i) => {
                const card = document.createElement('div');
                card.className = 'card cursor-hover-target';
                card.dataset.index = i;
                
                card.innerHTML = `
                    <div class="card-img-wrap">
                        <img src="${mod.img}" alt="${mod.title}" draggable="false">
                    </div>
                    <div class="card-content">
                        <div class="card-index">0${i + 1}</div>
                        <h3>${mod.title}</h3>
                        <p>${mod.desc}</p>
                    </div>
                    <div class="click-indicator"><i class="ph ph-corners-out"></i></div>
                `;
                
                track.appendChild(card);

// Click event to open modal
                card.addEventListener('click', (e) => {
                    // Only open if this card is currently active (closest to center)
                    if (Math.round(progress) === i) {
                        openModal(i);
                    } else {
                        // If clicking a side card, navigate to it smoothly
                        targetProgress = i;
                    }
                });
            });

const cards = document.querySelectorAll('.card');
            const maxIndex = cards.length - 1;

// Physics Variables
            let progress = 0;        // Current smooth animated value
            let targetProgress = 0;  // Target value driven by user input
            let isDragging = false;
            let startX = 0;
            let dragTargetProgress = 0;

// Configuration for 3D layout
            const config = {
                cardWidth: 320,
                spacing: 220,     // Base X translation per unit
                depth: 150,       // Base Z translation (push back)
                rotateAngle: 20,  // Base Y rotation angle
                scaleStep: 0.15,  // How much to scale down per step from center
                opacityStep: 0.4  // How much to fade out
            };

// Main Animation Loop
            function renderCarousel() {
                // Lerp progress towards target for smooth inertia
                progress += (targetProgress - progress) * 0.08;

// Update Background Color based on closest active index
                const activeIndex = Math.round(progress);
                const safeActiveIndex = Math.max(0, Math.min(activeIndex, maxIndex));
                bgLayer.style.background = `radial-gradient(circle at 50% 0%, ${modules[safeActiveIndex].color}, var(--bg-dark) 70%)`;

cards.forEach((card, i) => {
                    // Calculate relative distance from center (0 = center, negative = left, positive = right)
                    const offset = i - progress;
                    const absOffset = Math.abs(offset);
                    const sign = Math.sign(offset);

// Transform Calculations
                    // 1. X Position: Curve it slightly inwards
                    let tx = offset * config.spacing;
                    
                    // 2. Z Position: Push background items back to create depth
                    let tz = absOffset * -config.depth;
                    
                    // 3. Rotation: Turn towards the center
                    let ry = offset * -config.rotateAngle;
                    
                    // 4. Scale: Smaller as they go further
                    let scale = Math.max(0.5, 1 - absOffset * config.scaleStep);
                    
                    // 5. Opacity: Fade out
                    let opacity = Math.max(0, 1 - absOffset * config.opacityStep);
                    
                    // 6. Z-Index: Center item must be on top
                    // Multiply by 100 to ensure distinct stacking orders
                    let zIndex = 100 - Math.round(absOffset * 100);

// Apply styles
                    card.style.transform = `translate3d(${tx}px, 0, ${tz}px) rotateY(${ry}deg) scale(${scale})`;
                    card.style.zIndex = zIndex;
                    card.style.opacity = opacity;

// Handle active class
                    if (absOffset < 0.5) {
                        card.classList.add('active');
                    } else {
                        card.classList.remove('active');
                    }
                    
                    // Optimization: hide completely if too far
                    if(absOffset > 3) {
                         card.style.display = 'none';
                    } else {
                         card.style.display = 'block';
                    }
                });

requestAnimationFrame(renderCarousel);
            }

// Start rendering
            renderCarousel();

// --- Event Listeners for Input ---

// 1. Mouse Wheel
            const container = document.getElementById('carouselContainer');
            container.addEventListener('wheel', (e) => {
                // Prevent default scrolling only if we are interacting horizontally or moving track
                if(Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
                     // Convert vertical scroll to horizontal carousel movement
                     e.preventDefault(); 
                     const sensitivity = 0.002;
                     targetProgress += e.deltaY * sensitivity;
                     // Clamp values
                     targetProgress = Math.max(0, Math.min(targetProgress, maxIndex));
                }
            }, { passive: false });

// 2. Drag / Touch handling
            function startDrag(e) {
                isDragging = true;
                startX = e.type.includes('mouse') ? e.pageX : e.touches[0].pageX;
                dragTargetProgress = targetProgress;
                container.style.cursor = 'grabbing';
                
                // Pause CSS transitions on cards during drag for instant responsiveness
                cards.forEach(c => c.style.transition = 'none');
            }

function moveDrag(e) {
                if (!isDragging) return;
                const x = e.type.includes('mouse') ? e.pageX : e.touches[0].pageX;
                const delta = startX - x;
                
                // Sensitivity multiplier
                const moveSpeed = 0.008; 
                targetProgress = dragTargetProgress + (delta * moveSpeed);
                
                // Soft clamping (elastic effect at edges)
                if (targetProgress < -0.5) targetProgress = -0.5;
                if (targetProgress > maxIndex + 0.5) targetProgress = maxIndex + 0.5;
            }

function endDrag() {
                if (!isDragging) return;
                isDragging = false;
                container.style.cursor = 'grab';
                
                // Snap to nearest integer index
                targetProgress = Math.round(targetProgress);
                // Hard clamp
                targetProgress = Math.max(0, Math.min(targetProgress, maxIndex));
                
                // Restore CSS transitions
                cards.forEach(c => c.style.transition = 'box-shadow 0.3s ease, filter 0.3s ease');
            }

// Mouse Events
            container.addEventListener('mousedown', startDrag);
            window.addEventListener('mousemove', moveDrag);
            window.addEventListener('mouseup', endDrag);

// Touch Events
            container.addEventListener('touchstart', startDrag, {passive: true});
            window.addEventListener('touchmove', moveDrag, {passive: false}); // passive false to allow preventDefault if needed
            window.addEventListener('touchend', endDrag);

// Button Controls
            document.getElementById('btnPrev').addEventListener('click', () => {
                targetProgress = Math.max(0, Math.round(targetProgress) - 1);
            });
            document.getElementById('btnNext').addEventListener('click', () => {
                targetProgress = Math.min(maxIndex, Math.round(targetProgress) + 1);
            });

// === MODAL LOGIC ===
            const modal = document.getElementById('featureModal');
            const btnClose = document.getElementById('btnModalClose');
            const backdrop = document.getElementById('modalCloseBackdrop');

// DOM elements to inject data into
            const mImg = document.getElementById('modalImg');
            const mTitle = document.getElementById('modalTitle');
            const mDesc = document.getElementById('modalDesc');
            const mFeat = document.getElementById('modalFeatures');

// Show modal
                modal.classList.add('active');
                // Hide custom cursor temporarily to use default pointer over modal if desired
                // Or keep it. Let's keep it for consistency.
            }

function closeModal() {
                modal.classList.remove('active');
            }

btnClose.addEventListener('click', closeModal);
            backdrop.addEventListener('click', closeModal);
            
            // Close on Escape key
            document.addEventListener('keydown', (e) => {
                if(e.key === 'Escape') closeModal();
            });

});
    </script>
</body>
</html>

CSS