<!DOCTYPE html>
<html class="scroll-smooth" lang="en">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>Design System - Digital Architect</title>
    <script src="assets/resource_3fa48481346f.js"></script>
    <script src="assets/iconify-icon_d39ffc6e4c56.js"></script>
    <link href="assets/css2_19fd9cc6b396.css" rel="stylesheet" />
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #EAEAE5;
            color: #1C1C1C;
            overflow-x: hidden;
        }

        /* Base Reveal Animation (Scroll triggered) */
        .reveal {
            opacity: 0;
            transform: translateY(2rem);
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Masked Text Reveal (For Hero Title) */
        .text-reveal-wrapper {
            overflow: hidden;
            display: inline-block;
            vertical-align: bottom;
        }

        .text-reveal-content {
            transform: translateY(110%);
            opacity: 0;
            transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
            display: block;
        }

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

        /* Stagger Delays */
        .delay-100 {
            transition-delay: 0.1s;
        }

        .delay-200 {
            transition-delay: 0.2s;
        }

        .delay-300 {
            transition-delay: 0.3s;
        }

        .delay-500 {
            transition-delay: 0.5s;
        }

        .delay-700 {
            transition-delay: 0.7s;
        }

        /* Carousel Fade & Ken Burns */
        .carousel-slide {
            position: absolute;
            inset: 0;
            transition: opacity 1.5s ease-in-out;
            opacity: 0;
            overflow: hidden;
        }

        .carousel-slide.active {
            opacity: 1;
        }

        .carousel-slide img {
            transform: scale(1);
            transition: transform 10s ease-out;
        }

        .carousel-slide.active img {
            transform: scale(1.1);
        }

        /* Marquee Animation */
        @keyframes marquee {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .animate-marquee {
            display: inline-block;
            padding-left: 100%;
            animation: marquee 30s linear infinite;
        }

        /* Add a clone to the HTML for seamless loop or use padding method */
        .marquee-container {
            display: flex;
            overflow: hidden;
            user-select: none;
        }

        .marquee-content {
            flex-shrink: 0;
            display: flex;
            justify-content: space-around;
            min-width: 100%;
            animation: scroll 40s linear infinite;
        }

        @keyframes scroll {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-100%);
            }
        }

        /* Nav Load Animation */
        .nav-load {
            opacity: 0;
            transform: translateY(-10px);
            transition: all 0.8s ease-out;
        }

        .nav-load.loaded {
            opacity: 1;
            transform: translateY(0);
        }

        /* Icon Alignment Fix */
        iconify-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
        }

        /* Utilities */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .parallax-element {
            will-change: transform;
        }
    </style>
</head>

<body class="antialiased min-h-screen selection:bg-stone-800 selection:text-white pb-10">
    <!-- Main Container -->
    <div class="max-w-[1400px] mx-auto border-x border-stone-300 relative bg-[#EAEAE5]">

        <!-- Vertical Grid Guide Lines -->
        <div class="absolute inset-0 pointer-events-none grid grid-cols-1 md:grid-cols-12 gap-0 z-0 h-full w-full">
            <div class="hidden md:block md:col-span-3 border-r border-stone-300/40 h-full"></div>
            <div class="hidden md:block md:col-span-6 border-r border-stone-300/40 h-full"></div>
            <div class="hidden md:block md:col-span-3 h-full"></div>
        </div>

        <!-- Navigation (System Nav) -->
        <header class="relative z-50 border-b border-stone-300 sticky top-0 bg-[#EAEAE5] nav-load">
            <div class="flex justify-between items-center px-4 md:px-6 py-5">
                <div class="flex items-center gap-6">
                    <a class="text-xs font-medium tracking-widest uppercase hover:text-stone-500 transition-colors"
                        href="#typography">Typography</a>
                    <a class="text-xs font-medium tracking-widest uppercase hover:text-stone-500 transition-colors"
                        href="#colors">Colors</a>
                    <a class="text-xs font-medium tracking-widest uppercase hidden md:block hover:text-stone-500 transition-colors"
                        href="#components">Components</a>
                </div>
                <div class="absolute left-1/2 -translate-x-1/2 flex items-center gap-2 group cursor-pointer">
                    <iconify-icon class="text-xl group-hover:rotate-180 transition-transform duration-700"
                        icon="solar:atom-linear"></iconify-icon>
                    <span class="font-bold tracking-tighter text-lg">SYSTEM</span>
                </div>
                <div class="flex items-center gap-6">
                    <a class="text-xs font-medium tracking-widest uppercase hidden md:block hover:text-stone-500 transition-colors"
                        href="#layout">Layout</a>
                    <a class="text-xs font-medium tracking-widest uppercase hover:text-stone-500 transition-colors"
                        href="#motion">Motion</a>
                    <a class="text-xs font-medium tracking-widest uppercase hover:text-stone-500 transition-colors"
                        href="index.html">Back to Site</a>
                </div>
            </div>
        </header>

        <!-- 0) Hero (Clone) -->
        <section class="relative z-10 grid grid-cols-1 md:grid-cols-12 border-b border-stone-300 min-h-[600px]">
            <!-- Hero Carousel -->
            <div
                class="col-span-1 md:col-span-9 border-b md:border-b-0 md:border-r border-stone-300 relative group overflow-hidden bg-stone-200">
                <div class="w-full h-full relative" id="hero-carousel">
                    <!-- Slide 1 -->
                    <div class="carousel-slide active">
                        <img class="w-full h-full object-cover grayscale contrast-125 parallax-img" data-speed="0.05"
                            src="assets/c7fa69dd-d7fb-48f2-a866-ef3663_f6b789593f38.webp" />
                    </div>
                </div>
                <div
                    class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-stone-900/40 pointer-events-none">
                </div>
                <!-- Hero Text -->
                <div class="absolute bottom-6 left-6 md:bottom-10 md:left-10 text-white mix-blend-difference z-20">
                    <h1 class="text-6xl md:text-8xl font-semibold tracking-tighter leading-none mb-2" id="hero-title">
                        <span class="text-reveal-wrapper"><span
                                class="text-reveal-content delay-200">Design</span></span>
                        <span class="text-reveal-wrapper"><span
                                class="text-reveal-content delay-300">System</span></span>
                    </h1>
                    <div class="mt-6 flex items-center gap-4 reveal delay-500 hero-badge">
                        <span
                            class="px-3 py-1 border border-white/40 rounded-full text-xs font-mono uppercase backdrop-blur-md">v1.0</span>
                        <span
                            class="px-3 py-1 border border-white/40 rounded-full text-xs font-mono uppercase backdrop-blur-md">2024</span>
                    </div>
                </div>
            </div>
            <!-- Stats Column -->
            <div class="col-span-1 md:col-span-3 grid grid-rows-2 h-full min-h-[400px]">
                <!-- Stat 1 -->
                <div
                    class="row-span-1 border-b border-stone-300 p-8 flex flex-col justify-between reveal delay-500 hero-stat group hover:bg-white transition-colors">
                    <iconify-icon class="text-3xl text-stone-400 group-hover:text-stone-800 transition-colors"
                        icon="solar:layers-minimalistic-linear"></iconify-icon>
                    <div>
                        <h2 class="text-5xl font-medium tracking-tighter">14</h2>
                        <span class="text-xs font-mono text-stone-500 mt-1 block">COMPONENTS</span>
                    </div>
                </div>
                <!-- Stat 2 -->
                <div
                    class="row-span-1 p-8 flex flex-col justify-between reveal delay-700 hero-stat group hover:bg-white transition-colors relative overflow-hidden">
                    <iconify-icon class="text-3xl text-stone-400 group-hover:text-stone-800 transition-colors"
                        icon="solar:palette-linear"></iconify-icon>
                    <div>
                        <h2 class="text-5xl font-medium tracking-tighter">05</h2>
                        <span class="text-xs font-mono text-stone-500 mt-1 block">COLOR TOKENS</span>
                    </div>
                    <div class="absolute top-4 right-4 animate-spin-slow">
                        <iconify-icon
                            class="text-stone-200 text-6xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"
                            icon="solar:star-fall-linear"></iconify-icon>
                    </div>
                </div>
            </div>
        </section>

        <!-- 1) Typography -->
        <section id="typography" class="relative z-10 border-b border-stone-300">
            <div class="p-8 md:p-12 border-b border-stone-300 bg-stone-100/50">
                <span class="text-xs font-mono uppercase text-stone-500 block mb-2">01 / Foundations</span>
                <h2 class="text-4xl font-medium tracking-tight">Typography</h2>
            </div>

            <div class="grid grid-cols-1">
                <!-- Heading 1 -->
                <div class="grid grid-cols-1 md:grid-cols-12 border-b border-stone-300 p-8 md:p-12 items-baseline">
                    <div class="col-span-3 text-xs font-mono text-stone-400 uppercase tracking-widest mb-4 md:mb-0">
                        Display H1</div>
                    <div class="col-span-7">
                        <h1 class="text-6xl md:text-8xl font-semibold tracking-tighter leading-none text-stone-900">
                            Digital Architect
                        </h1>
                    </div>
                    <div class="col-span-2 text-right text-xs font-mono text-stone-400">
                        6rem / 1
                    </div>
                </div>

                <!-- Heading 2 -->
                <div class="grid grid-cols-1 md:grid-cols-12 border-b border-stone-300 p-8 md:p-12 items-baseline">
                    <div class="col-span-3 text-xs font-mono text-stone-400 uppercase tracking-widest mb-4 md:mb-0">
                        Heading H2</div>
                    <div class="col-span-7">
                        <h2 class="text-5xl font-medium tracking-tighter text-stone-900">
                            Design & Strategy
                        </h2>
                    </div>
                    <div class="col-span-2 text-right text-xs font-mono text-stone-400">
                        3rem / Tight
                    </div>
                </div>

                <!-- Heading 3 -->
                <div class="grid grid-cols-1 md:grid-cols-12 border-b border-stone-300 p-8 md:p-12 items-baseline">
                    <div class="col-span-3 text-xs font-mono text-stone-400 uppercase tracking-widest mb-4 md:mb-0">
                        Heading H3</div>
                    <div class="col-span-7">
                        <h3 class="text-4xl font-medium tracking-tight text-stone-900">
                            Case Studies
                        </h3>
                    </div>
                    <div class="col-span-2 text-right text-xs font-mono text-stone-400">
                        2.25rem / Tight
                    </div>
                </div>

                <!-- Body / Paragraph -->
                <div class="grid grid-cols-1 md:grid-cols-12 border-b border-stone-300 p-8 md:p-12 items-baseline">
                    <div class="col-span-3 text-xs font-mono text-stone-400 uppercase tracking-widest mb-4 md:mb-0">Body
                        Large</div>
                    <div class="col-span-7">
                        <p class="text-lg leading-relaxed text-stone-800">
                            Thoughts on the intersection of design, technology, and human psychology. Exploring how we
                            can build better tools for thought.
                        </p>
                    </div>
                    <div class="col-span-2 text-right text-xs font-mono text-stone-400">
                        1.125rem / Relaxed
                    </div>
                </div>

                <!-- Meta / Labels -->
                <div class="grid grid-cols-1 md:grid-cols-12 p-8 md:p-12 items-baseline">
                    <div class="col-span-3 text-xs font-mono text-stone-400 uppercase tracking-widest mb-4 md:mb-0">
                        Label / Mono</div>
                    <div class="col-span-7">
                        <span class="text-xs font-mono uppercase tracking-widest text-stone-500">
                            Currently available for Q4 2024
                        </span>
                    </div>
                    <div class="col-span-2 text-right text-xs font-mono text-stone-400">
                        0.75rem / Widest
                    </div>
                </div>
            </div>
        </section>

        <!-- 2) Colors & Surfaces -->
        <section id="colors" class="relative z-10 border-b border-stone-300">
            <div class="p-8 md:p-12 border-b border-stone-300 bg-stone-100/50">
                <span class="text-xs font-mono uppercase text-stone-500 block mb-2">02 / Foundations</span>
                <h2 class="text-4xl font-medium tracking-tight">Colors & Surfaces</h2>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-4">
                <!-- Background Main -->
                <div
                    class="col-span-1 p-8 md:p-12 border-r border-b border-stone-300 bg-[#EAEAE5] flex flex-col justify-between aspect-square">
                    <div class="text-stone-900 font-bold">Main</div>
                    <div class="font-mono text-xs text-stone-500">#EAEAE5</div>
                </div>
                <!-- Stone 900 -->
                <div
                    class="col-span-1 p-8 md:p-12 border-r border-b border-stone-300 bg-stone-900 flex flex-col justify-between aspect-square">
                    <div class="text-white font-bold">Stone 900</div>
                    <div class="font-mono text-xs text-stone-400">text-stone-900</div>
                </div>
                <!-- Stone 500 -->
                <div
                    class="col-span-1 p-8 md:p-12 border-r border-b border-stone-300 bg-stone-500 flex flex-col justify-between aspect-square">
                    <div class="text-white font-bold">Stone 500</div>
                    <div class="font-mono text-xs text-stone-200">text-stone-500</div>
                </div>
                <!-- Stone 300 -->
                <div
                    class="col-span-1 p-8 md:p-12 border-b border-stone-300 bg-stone-300 flex flex-col justify-between aspect-square">
                    <div class="text-stone-800 font-bold">Stone 300</div>
                    <div class="font-mono text-xs text-stone-600">border-stone-300</div>
                </div>
                <!-- White -->
                <div
                    class="col-span-1 p-8 md:p-12 border-r border-stone-300 bg-white flex flex-col justify-between aspect-square">
                    <div class="text-stone-900 font-bold">White</div>
                    <div class="font-mono text-xs text-stone-500">bg-white</div>
                </div>
                <!-- Stone 200 -->
                <div
                    class="col-span-1 p-8 md:p-12 border-r border-stone-300 bg-stone-200 flex flex-col justify-between aspect-square">
                    <div class="text-stone-900 font-bold">Stone 200</div>
                    <div class="font-mono text-xs text-stone-500">bg-stone-200</div>
                </div>
            </div>
        </section>

        <!-- 3) UI Components -->
        <section id="components" class="relative z-10 border-b border-stone-300">
            <div class="p-8 md:p-12 border-b border-stone-300 bg-stone-100/50">
                <span class="text-xs font-mono uppercase text-stone-500 block mb-2">03 / UI Elements</span>
                <h2 class="text-4xl font-medium tracking-tight">Components</h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2">

                <!-- Buttons & Links -->
                <div class="p-8 md:p-12 border-b md:border-b-0 md:border-r border-stone-300">
                    <h3 class="text-sm font-bold uppercase tracking-widest text-stone-900 mb-8">Buttons & Actions</h3>
                    <div class="space-y-8">

                        <!-- Primary Button -->
                        <div class="flex items-center gap-4">
                            <button
                                class="px-6 py-3 bg-stone-900 text-white rounded-md text-sm font-medium hover:bg-stone-700 transition-all flex items-center gap-2 group">
                                Primary Action
                                <iconify-icon class="text-lg group-hover:translate-y-1 transition-transform"
                                    icon="solar:file-download-linear"></iconify-icon>
                            </button>
                            <span class="text-xs font-mono text-stone-400">Default</span>
                        </div>

                        <!-- Outline / Pill Button -->
                        <div class="flex items-center gap-4">
                            <a class="inline-flex items-center gap-2 text-sm font-medium uppercase tracking-widest border border-stone-900 rounded-full px-8 py-3 hover:bg-stone-900 hover:text-white transition-all"
                                href="#">
                                Secondary Action
                                <iconify-icon class="text-lg" icon="solar:arrow-right-linear"></iconify-icon>
                            </a>
                            <span class="text-xs font-mono text-stone-400">Outline</span>
                        </div>

                        <!-- Link -->
                        <div class="flex items-center gap-4">
                            <a class="text-sm font-medium text-stone-600 hover:text-stone-900 border-b border-stone-400 hover:border-stone-900 pb-0.5 transition-colors"
                                href="#">Text Link</a>
                            <span class="text-xs font-mono text-stone-400">Inline Link</span>
                        </div>
                    </div>
                </div>

                <!-- Badges & Lists -->
                <div class="p-8 md:p-12">
                    <h3 class="text-sm font-bold uppercase tracking-widest text-stone-900 mb-8">Badges & Lists</h3>

                    <div class="space-y-8">
                        <!-- Glass Badge -->
                        <div class="flex items-center gap-4 bg-stone-900 p-4 rounded max-w-max">
                            <span
                                class="px-3 py-1 border border-white/40 rounded-full text-xs font-mono uppercase backdrop-blur-md text-white">Glass
                                Badge</span>
                        </div>

                        <!-- Check List Item -->
                        <div class="max-w-xs">
                            <div class="flex items-center justify-between border-b border-stone-300 pb-2">
                                <span class="text-sm text-stone-600">List Item</span>
                                <iconify-icon class="text-stone-400 text-lg"
                                    icon="solar:check-circle-linear"></iconify-icon>
                            </div>
                        </div>

                        <!-- Journal Item -->
                        <div class="max-w-xs">
                            <a class="group flex items-start justify-between border-b border-stone-300 pb-4" href="#">
                                <div>
                                    <span class="text-xs text-stone-400 mb-1 block">Date Label</span>
                                    <h4 class="text-lg font-medium group-hover:text-stone-600 transition-colors">
                                        Hoverable List Title</h4>
                                </div>
                                <iconify-icon class="text-stone-300 text-xl group-hover:text-stone-900 transition-all"
                                    icon="solar:arrow-right-up-linear"></iconify-icon>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cards -->
            <div class="border-t border-stone-300">
                <div class="p-8 md:p-12">
                    <h3 class="text-sm font-bold uppercase tracking-widest text-stone-900 mb-8">Project Card</h3>

                    <!-- Card Instance -->
                    <div
                        class="group border border-stone-300 bg-[#EAEAE5] hover:bg-white transition-colors duration-500 cursor-pointer overflow-hidden max-w-3xl">
                        <div class="grid grid-cols-1 md:grid-cols-2 min-h-[250px]">
                            <div
                                class="col-span-1 p-8 flex flex-col justify-center border-r border-stone-300/0 md:border-stone-300">
                                <div class="flex items-center gap-3 mb-4">
                                    <span class="text-xs font-mono text-stone-500">01</span>
                                    <div class="h-px w-8 bg-stone-300"></div>
                                    <span
                                        class="text-xs font-bold uppercase tracking-wider text-stone-900">Category</span>
                                </div>
                                <h4
                                    class="text-3xl font-medium tracking-tight mb-4 group-hover:translate-x-2 transition-transform duration-500">
                                    Project Name</h4>
                                <p class="text-stone-500 text-sm leading-relaxed">Description of the project showing
                                    hover states on parent.</p>
                            </div>
                            <div class="col-span-1 relative overflow-hidden bg-stone-100">
                                <div class="absolute inset-0 flex items-center justify-center p-8">
                                    <div
                                        class="w-full h-full bg-stone-300 grayscale opacity-80 group-hover:scale-105 group-hover:grayscale-0 transition-all duration-700 flex items-center justify-center text-stone-500">
                                        Image Area
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        <!-- 4) Layout & Spacing -->
        <section id="layout" class="relative z-10 border-b border-stone-300">
            <div class="p-8 md:p-12 border-b border-stone-300 bg-stone-100/50">
                <span class="text-xs font-mono uppercase text-stone-500 block mb-2">04 / Foundations</span>
                <h2 class="text-4xl font-medium tracking-tight">Layout & Grid</h2>
            </div>

            <div class="p-8 md:p-12 grid grid-cols-12 gap-4 h-[200px] relative">
                <div class="col-span-12 text-center text-xs font-mono text-stone-400 mb-4 absolute top-4 left-0 w-full">
                    12 Column Grid System</div>

                <div class="col-span-1 bg-stone-300/50 h-full rounded"></div>
                <div class="col-span-1 bg-stone-300/50 h-full rounded"></div>
                <div class="col-span-1 bg-stone-300/50 h-full rounded"></div>
                <div class="col-span-1 bg-stone-300/50 h-full rounded"></div>
                <div class="col-span-1 bg-stone-300/50 h-full rounded"></div>
                <div class="col-span-1 bg-stone-300/50 h-full rounded"></div>
                <div class="col-span-1 bg-stone-300/50 h-full rounded"></div>
                <div class="col-span-1 bg-stone-300/50 h-full rounded"></div>
                <div class="col-span-1 bg-stone-300/50 h-full rounded"></div>
                <div class="col-span-1 bg-stone-300/50 h-full rounded"></div>
                <div class="col-span-1 bg-stone-300/50 h-full rounded"></div>
                <div class="col-span-1 bg-stone-300/50 h-full rounded"></div>
            </div>
        </section>

        <!-- 5) Motion -->
        <section id="motion" class="relative z-10 border-b border-stone-300 overflow-hidden">
            <div class="p-8 md:p-12 border-b border-stone-300 bg-stone-100/50">
                <span class="text-xs font-mono uppercase text-stone-500 block mb-2">05 / Interaction</span>
                <h2 class="text-4xl font-medium tracking-tight">Motion & Animation</h2>
            </div>

            <!-- Marquee -->
            <div class="py-12 border-b border-stone-300 bg-stone-100/50">
                <div class="text-center text-xs font-mono text-stone-400 mb-4">Infinite Marquee</div>
                <div class="marquee-container">
                    <div class="marquee-content">
                        <span class="text-sm font-mono uppercase tracking-widest text-stone-500 mx-8">Motion
                            System</span>
                        <span class="text-sm font-mono uppercase tracking-widest text-stone-500 mx-8">•</span>
                        <span class="text-sm font-mono uppercase tracking-widest text-stone-500 mx-8">Easing:
                            cubic-bezier(0.16, 1, 0.3, 1)</span>
                        <span class="text-sm font-mono uppercase tracking-widest text-stone-500 mx-8">•</span>
                        <span class="text-sm font-mono uppercase tracking-widest text-stone-500 mx-8">Duration:
                            1.2s</span>
                        <span class="text-sm font-mono uppercase tracking-widest text-stone-500 mx-8">•</span>
                    </div>
                    <!-- Duplicate -->
                    <div class="marquee-content">
                        <span class="text-sm font-mono uppercase tracking-widest text-stone-500 mx-8">Motion
                            System</span>
                        <span class="text-sm font-mono uppercase tracking-widest text-stone-500 mx-8">•</span>
                        <span class="text-sm font-mono uppercase tracking-widest text-stone-500 mx-8">Easing:
                            cubic-bezier(0.16, 1, 0.3, 1)</span>
                        <span class="text-sm font-mono uppercase tracking-widest text-stone-500 mx-8">•</span>
                        <span class="text-sm font-mono uppercase tracking-widest text-stone-500 mx-8">Duration:
                            1.2s</span>
                        <span class="text-sm font-mono uppercase tracking-widest text-stone-500 mx-8">•</span>
                    </div>
                </div>
            </div>

            <!-- Reveal Examples -->
            <div class="p-8 md:p-12 grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="p-6 border border-stone-300 rounded bg-white reveal">
                    <span class="text-xs font-mono text-stone-400 block mb-2">.reveal</span>
                    <h4 class="text-xl font-medium">Scroll Reveal</h4>
                </div>
                <div class="p-6 border border-stone-300 rounded bg-white reveal delay-200">
                    <span class="text-xs font-mono text-stone-400 block mb-2">.reveal .delay-200</span>
                    <h4 class="text-xl font-medium">Staggered Reveal</h4>
                </div>
                <div class="p-6 border border-stone-300 rounded bg-white reveal delay-500">
                    <span class="text-xs font-mono text-stone-400 block mb-2">.reveal .delay-500</span>
                    <h4 class="text-xl font-medium">Long Delay</h4>
                </div>
            </div>

            <!-- Text Reveal -->
            <div class="p-8 md:p-12 border-t border-stone-300 text-center">
                <span class="text-xs font-mono text-stone-400 block mb-8">Masked Text Reveal</span>
                <h2 class="text-6xl md:text-8xl font-semibold tracking-tighter leading-none text-stone-900">
                    <span class="text-reveal-wrapper"><span class="text-reveal-content">Animation</span></span>
                </h2>
            </div>
        </section>

        <!-- 6) Icons -->
        <section class="relative z-10 border-b border-stone-300 pb-24">
            <div class="p-8 md:p-12 border-b border-stone-300 bg-stone-100/50">
                <span class="text-xs font-mono uppercase text-stone-500 block mb-2">06 / Assets</span>
                <h2 class="text-4xl font-medium tracking-tight">Iconography</h2>
            </div>

            <div class="p-8 md:p-12 grid grid-cols-2 md:grid-cols-6 gap-8 justify-items-center">
                <div class="flex flex-col items-center gap-4">
                    <iconify-icon class="text-3xl text-stone-800" icon="solar:atom-linear"></iconify-icon>
                    <span class="text-xs font-mono text-stone-500">solar:atom</span>
                </div>
                <div class="flex flex-col items-center gap-4">
                    <iconify-icon class="text-3xl text-stone-800"
                        icon="solar:layers-minimalistic-linear"></iconify-icon>
                    <span class="text-xs font-mono text-stone-500">solar:layers</span>
                </div>
                <div class="flex flex-col items-center gap-4">
                    <iconify-icon class="text-3xl text-stone-800" icon="solar:clock-circle-linear"></iconify-icon>
                    <span class="text-xs font-mono text-stone-500">solar:clock</span>
                </div>
                <div class="flex flex-col items-center gap-4">
                    <iconify-icon class="text-3xl text-stone-800" icon="solar:cup-star-linear"></iconify-icon>
                    <span class="text-xs font-mono text-stone-500">solar:cup-star</span>
                </div>
                <div class="flex flex-col items-center gap-4">
                    <iconify-icon class="text-3xl text-stone-800" icon="solar:arrow-right-up-linear"></iconify-icon>
                    <span class="text-xs font-mono text-stone-500">solar:arrow-up</span>
                </div>
                <div class="flex flex-col items-center gap-4">
                    <iconify-icon class="text-3xl text-stone-800" icon="solar:check-circle-linear"></iconify-icon>
                    <span class="text-xs font-mono text-stone-500">solar:check</span>
                </div>
            </div>
        </section>

        <!-- Footer -->
        <footer class="relative z-10 bg-stone-900 text-stone-200 py-12 text-center">
            <span class="text-xs font-mono uppercase text-stone-600">Design System Generated for Digital
                Architect</span>
        </footer>

    </div>

    <script>
        // Intersection Observer for Reveals (Re-used from original)
        document.addEventListener('DOMContentLoaded', () => {

            // 1. Initial Hero Animations
            setTimeout(() => {
                document.querySelector('header').classList.add('loaded');
            }, 100);

            setTimeout(() => {
                const heroTitle = document.getElementById('hero-title');
                if (heroTitle) heroTitle.classList.add('reveal-active');
            }, 500);

            setTimeout(() => {
                document.querySelectorAll('.hero-badge, .hero-stat').forEach(el => {
                    el.classList.add('active');
                });
            }, 500);

            // 2. Scroll Observer
            const observerOptions = {
                root: null,
                rootMargin: '0px',
                threshold: 0.15
            };

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('active');
                        // Add reveal-active to children if they exist (for text reveals)
                        const textWrappers = entry.target.querySelectorAll('.text-reveal-wrapper');
                        if (textWrappers.length > 0 || entry.target.classList.contains('text-reveal-wrapper')) {
                            entry.target.classList.add('reveal-active');
                        }
                        // Handle internal text reveal wrappers specifically (like the Motion section h2)
                        if (entry.target.tagName === 'H2' || entry.target.tagName === 'H1') {
                            entry.target.classList.add('reveal-active');
                        }
                    }
                });
            }, observerOptions);

            document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

            // Observe custom text reveal sections if they are not inside a .reveal container
            document.querySelectorAll('h1, h2').forEach(el => {
                if (el.querySelector('.text-reveal-content')) observer.observe(el);
            });

            // 3. Carousel Logic
            const slides = document.querySelectorAll('.carousel-slide');
            let currentSlide = 0;
            if (slides.length > 0) {
                setInterval(() => {
                    slides[currentSlide].classList.remove('active');
                    currentSlide = (currentSlide + 1) % slides.length;
                    slides[currentSlide].classList.add('active');
                }, 5000);
            }


            // 4. Parallax Logic
            window.addEventListener('scroll', () => {
                const scrolled = window.scrollY;
                document.querySelectorAll('.parallax-img').forEach((el) => {
                    const speed = el.dataset.speed || 0.1;
                    el.style.transform = `translateY(${scrolled * speed}px)`;
                });
            });
        });
    </script>
</body>

</html>