<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marketplace ALOCAMA - Galaxy Background</title>
    <link rel="icon" type="image/png" href="images/icons/icon-marketplace.png">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <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@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background: #000000;
            color: white;
            overflow-x: hidden;
            overflow-y: auto;
            min-height: 100vh;
        }

        .galaxy-container {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .content-container {
            position: relative;
            z-index: 10;
            padding: 100px 20px;
            max-width: 1200px;
            margin: 0 auto;
            min-height: 200vh;
            /* Ensure there's enough content to scroll */
        }

        .scroll-reveal {
            margin: 60px 0;
        }

        .scroll-reveal-text {
            font-size: clamp(1.2rem, 3vw, 2.2rem);
            line-height: 1.4;
            font-weight: 300;
            color: white;
            text-align: center;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        .word {
            display: inline-block;
        }

        .progress-section {
            margin: 80px 0;
            text-align: center;
        }

        .progress-title {
            font-size: 1.5rem;
            color: white;
            margin-bottom: 30px;
            font-weight: 300;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        .progress-bar {
            width: 100%;
            height: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 20px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #4A90E2, #7B68EE, #9370DB);
            width: 30%;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
        }

        .progress-fill::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            animation: progressShine 3s ease-in-out infinite;
        }

        @keyframes progressShine {
            0% {
                left: -100%;
            }

            50% {
                left: 100%;
            }

            100% {
                left: 100%;
            }
        }

        .progress-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.2rem;
        }

        .step-section {
            margin: 100px 0;
            padding: 40px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .step-number {
            font-size: 3rem;
            font-weight: bold;
            color: #00BFFF;
            margin-bottom: 20px;
        }

        .step-title {
            font-size: 1.4rem;
            color: white;
            margin-bottom: 20px;
            font-weight: 400;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        .step-date {
            color: #00BFFF;
            font-size: 1.1rem;
            margin-bottom: 20px;
        }

        .step-description {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1rem;
            line-height: 1.5;
            font-weight: 300;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        }

        /* Force content to be visible - override GSAP */
        .content-container {
            position: relative !important;
            z-index: 100 !important;
            display: block !important;
            visibility: visible !important;
        }

        .scroll-reveal {
            opacity: 1 !important;
            transform: none !important;
            display: block !important;
            visibility: visible !important;
        }

        .scroll-reveal-text {
            opacity: 1 !important;
            filter: none !important;
            display: block !important;
            visibility: visible !important;
        }

        .word {
            opacity: 1 !important;
            filter: none !important;
            display: inline-block !important;
            visibility: visible !important;
        }

        .step-section {
            opacity: 1 !important;
            transform: none !important;
            display: block !important;
            visibility: visible !important;
        }

        .progress-fill {
            width: 30% !important;
            display: block !important;
            visibility: visible !important;
        }

        .back-button-container {
            text-align: center;
            margin: 80px 0 40px 0;
        }

        .back-button {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            padding: 16px 32px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            color: white;
            text-decoration: none;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 1rem;
            font-weight: 400;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .back-button:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }

        .back-button svg {
            transition: transform 0.3s ease;
        }

        .back-button:hover svg {
            transform: translateX(-4px);
        }
    </style>
</head>

<body>
    <div class="galaxy-container" id="galaxyContainer"></div>

    <div class="content-container">
        <div class="scroll-reveal" id="titleReveal">
            <p class="scroll-reveal-text">ALOCAMA MARKETPLACE - A MAIOR EMPRESA DE MÓVEIS HOSPITALARES DO BRASIL</p>
        </div>

        <div class="progress-section">
            <h2 class="progress-title">Progresso do Desenvolvimento</h2>
            <div class="progress-bar">
                <div class="progress-fill"></div>
            </div>
            <p class="progress-text">30% Concluído - Meta: Final de 2026</p>
        </div>

        <div class="scroll-reveal" id="visionReveal">
            <p class="scroll-reveal-text">Nossa visão é revolucionar o mercado hospitalar brasileiro através de um
                marketplace inovador que conecta fornecedores, compradores e especialistas em equipamentos médicos de
                alta qualidade.</p>
        </div>

        <div class="step-section" id="step1">
            <div class="step-number">01</div>
            <div class="step-title">Infraestrutura e Tecnologia</div>
            <div class="step-date">Outubro - Dezembro 2025</div>
            <div class="step-description">
                Desenvolvimento da plataforma base com sistema de autenticação, catálogo de produtos, sistema de
                pagamentos integrado e interface responsiva. Implementação de APIs robustas para suportar milhares de
                transações simultâneas.
            </div>
        </div>

        <div class="step-section" id="step2">
            <div class="step-number">02</div>
            <div class="step-title">Comercialização do Catálogo Próprio</div>
            <div class="step-date">Janeiro - Março 2026</div>
            <div class="step-description">
                Integração e comercialização do catálogo completo Alocama já existente dentro da nova estrutura do
                marketplace. Implementação de sistema de vendas diretas, gestão de estoque integrada e estabelecimento
                de parcerias estratégicas com fornecedores premium.
            </div>
        </div>

        <div class="step-section" id="step3">
            <div class="step-number">03</div>
            <div class="step-title">Marketplace de Terceiros</div>
            <div class="step-date">Abril - Junho 2026</div>
            <div class="step-description">
                Abertura do marketplace para vendedores externos com sistema de verificação de qualidade, avaliações de
                clientes e taxa de transação competitiva. Implementação de ferramentas de marketing digital para
                vendedores.
            </div>
        </div>

        <div class="step-section" id="step4">
            <div class="step-number">04</div>
            <div class="step-title">Expansão e Logística</div>
            <div class="step-date">Julho - Setembro 2026</div>
            <div class="step-description">
                Expansão para todas as regiões do Brasil com rede de distribuição própria e parceiros logísticos.
                Implementação de sistema de entrega expressa e suporte técnico 24/7 para equipamentos críticos.
            </div>
        </div>

        <div class="step-section" id="step5">
            <div class="step-number">05</div>
            <div class="step-title">Liderança de Mercado</div>
            <div class="step-date">Outubro - Dezembro 2026</div>
            <div class="step-description">
                Consolidação como a maior plataforma de móveis hospitalares do Brasil com mais de 10.000 produtos, 500+
                vendedores parceiros e presença em todos os estados. Lançamento de programa de fidelidade e expansão
                para América Latina.
            </div>
        </div>

        <div class="scroll-reveal" id="finalReveal">
            <p class="scroll-reveal-text">Juntos, vamos transformar o futuro da saúde no Brasil através da tecnologia e
                inovação em equipamentos hospitalares.</p>
        </div>

        <div class="back-button-container">
            <a href="index.html" class="back-button">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round">
                    <path d="M19 12H5M12 19l-7-7 7-7" />
                </svg>
                Voltar ao Sistema
            </a>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <script>

        const vertexShader = `
            varying vec2 vUv;
            void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }
        `;

        const fragmentShader = `
            uniform float uTime;
            uniform vec3 uResolution;
            uniform vec2 uFocal;
            uniform vec2 uRotation;
            uniform float uStarSpeed;
            uniform float uDensity;
            uniform float uHueShift;
            uniform float uSpeed;
            uniform vec2 uMouse;
            uniform float uGlowIntensity;
            uniform float uSaturation;
            uniform bool uMouseRepulsion;
            uniform float uTwinkleIntensity;
            uniform float uRotationSpeed;
            uniform float uRepulsionStrength;
            uniform float uMouseActiveFactor;
            uniform float uAutoCenterRepulsion;
            uniform bool uTransparent;
            varying vec2 vUv;
            #define NUM_LAYER 4.0
            #define STAR_COLOR_CUTOFF 0.2
            #define MAT45 mat2(0.7071, -0.7071, 0.7071, 0.7071)
            #define PERIOD 3.0
            float Hash21(vec2 p) {
                p = fract(p * vec2(123.34, 456.21));
                p += dot(p, p + 45.32);
                return fract(p.x * p.y);
            }
            float tri(float x) {
                return abs(fract(x) * 2.0 - 1.0);
            }
            float tris(float x) {
                float t = fract(x);
                return 1.0 - smoothstep(0.0, 1.0, abs(2.0 * t - 1.0));
            }
            float trisn(float x) {
                float t = fract(x);
                return 2.0 * (1.0 - smoothstep(0.0, 1.0, abs(2.0 * t - 1.0))) - 1.0;
            }
            vec3 hsv2rgb(vec3 c) {
                vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
                vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
                return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
            }
            float Star(vec2 uv, float flare) {
                float d = length(uv);
                float m = (0.05 * uGlowIntensity) / d;
                float rays = smoothstep(0.0, 1.0, 1.0 - abs(uv.x * uv.y * 1000.0));
                m += rays * flare * uGlowIntensity;
                uv *= MAT45;
                rays = smoothstep(0.0, 1.0, 1.0 - abs(uv.x * uv.y * 1000.0));
                m += rays * 0.3 * flare * uGlowIntensity;
                m *= smoothstep(1.0, 0.2, d);
                return m;
            }
            vec3 StarLayer(vec2 uv) {
                vec3 col = vec3(0.0);
                vec2 gv = fract(uv) - 0.5; 
                vec2 id = floor(uv);
                for (int y = -1; y <= 1; y++) {
                    for (int x = -1; x <= 1; x++) {
                        vec2 offset = vec2(float(x), float(y));
                        vec2 si = id + vec2(float(x), float(y));
                        float seed = Hash21(si);
                        float size = fract(seed * 345.32);
                        float glossLocal = tri(uStarSpeed / (PERIOD * seed + 1.0));
                        float flareSize = smoothstep(0.9, 1.0, size) * glossLocal;
                        float red = smoothstep(STAR_COLOR_CUTOFF, 1.0, Hash21(si + 1.0)) + STAR_COLOR_CUTOFF;
                        float blu = smoothstep(STAR_COLOR_CUTOFF, 1.0, Hash21(si + 3.0)) + STAR_COLOR_CUTOFF;
                        float grn = min(red, blu) * seed;
                        vec3 base = vec3(red, grn, blu);
                        float hue = atan(base.g - base.r, base.b - base.r) / (2.0 * 3.14159) + 0.5;
                        hue = fract(hue + uHueShift / 360.0);
                        float sat = length(base - vec3(dot(base, vec3(0.299, 0.587, 0.114)))) * uSaturation;
                        float val = max(max(base.r, base.g), base.b);
                        base = hsv2rgb(vec3(hue, sat, val));
                        vec2 pad = vec2(tris(seed * 34.0 + uTime * uSpeed / 10.0), tris(seed * 38.0 + uTime * uSpeed / 30.0)) - 0.5;
                        float star = Star(gv - offset - pad, flareSize);
                        vec3 color = base;
                        float twinkle = trisn(uTime * uSpeed + seed * 6.2831) * 0.5 + 1.0;
                        twinkle = mix(1.0, twinkle, uTwinkleIntensity);
                        star *= twinkle;
                        col += star * size * color;
                    }
                }
                return col;
            }
            void main() {
                vec2 focalPx = uFocal * uResolution.xy;
                vec2 uv = (vUv * uResolution.xy - focalPx) / uResolution.y;
                vec2 mouseNorm = uMouse - vec2(0.5);
                if (uAutoCenterRepulsion > 0.0) {
                    vec2 centerUV = vec2(0.0, 0.0);
                    float centerDist = length(uv - centerUV);
                    vec2 repulsion = normalize(uv - centerUV) * (uAutoCenterRepulsion / (centerDist + 0.1));
                    uv += repulsion * 0.05;
                } else if (uMouseRepulsion) {
                    vec2 mousePosUV = (uMouse * uResolution.xy - focalPx) / uResolution.y;
                    float mouseDist = length(uv - mousePosUV);
                    vec2 repulsion = normalize(uv - mousePosUV) * (uRepulsionStrength / (mouseDist + 0.1));
                    uv += repulsion * 0.05 * uMouseActiveFactor;
                } else {
                    vec2 mouseOffset = mouseNorm * 0.1 * uMouseActiveFactor;
                    uv += mouseOffset;
                }
                float autoRotAngle = uTime * uRotationSpeed;
                mat2 autoRot = mat2(cos(autoRotAngle), -sin(autoRotAngle), sin(autoRotAngle), cos(autoRotAngle));
                uv = autoRot * uv;
                uv = mat2(uRotation.x, -uRotation.y, uRotation.y, uRotation.x) * uv;
                vec3 col = vec3(0.0);
                for (float i = 0.0; i < 1.0; i += 1.0 / NUM_LAYER) {
                    float depth = fract(i + uStarSpeed * uSpeed);
                    float scale = mix(20.0 * uDensity, 0.5 * uDensity, depth);
                    float fade = depth * smoothstep(1.0, 0.9, depth);
                    col += StarLayer(uv * scale + i * 453.32) * fade;
                }
                if (uTransparent) {
                    float alpha = length(col);
                    alpha = smoothstep(0.0, 0.3, alpha);
                    alpha = min(alpha, 1.0);
                    gl_FragColor = vec4(col, alpha);
                } else {
                    gl_FragColor = vec4(col, 1.0);
                }
            }
        `;

        class Galaxy {
            constructor(container, options = {}) {
                this.container = container;
                this.options = {
                    focal: [0.5, 0.5],
                    rotation: [1.0, 0.0],
                    starSpeed: 0.5,
                    density: 1,
                    hueShift: 140,
                    disableAnimation: false,
                    speed: 1.0,
                    mouseInteraction: true,
                    glowIntensity: 0.3,
                    saturation: 0.0,
                    mouseRepulsion: true,
                    repulsionStrength: 2,
                    twinkleIntensity: 0.3,
                    rotationSpeed: 0.1,
                    autoCenterRepulsion: 0,
                    transparent: true,
                    ...options
                };

                this.targetMousePos = { x: 0.5, y: 0.5 };
                this.smoothMousePos = { x: 0.5, y: 0.5 };
                this.targetMouseActive = 0.0;
                this.smoothMouseActive = 0.0;

                this.init();
            }

            init() {
                this.scene = new THREE.Scene();
                this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);

                this.renderer = new THREE.WebGLRenderer({
                    alpha: this.options.transparent,
                    antialias: true
                });
                this.renderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
                this.renderer.setPixelRatio(window.devicePixelRatio);

                if (this.options.transparent) {
                    this.renderer.setClearColor(0x000000, 0);
                } else {
                    this.renderer.setClearColor(0x000000, 1);
                }

                const geometry = new THREE.PlaneGeometry(2, 2);
                const material = new THREE.ShaderMaterial({
                    vertexShader: vertexShader,
                    fragmentShader: fragmentShader,
                    uniforms: {
                        uTime: { value: 0 },
                        uResolution: { value: new THREE.Vector3(this.container.offsetWidth, this.container.offsetHeight, this.container.offsetWidth / this.container.offsetHeight) },
                        uFocal: { value: new THREE.Vector2(...this.options.focal) },
                        uRotation: { value: new THREE.Vector2(...this.options.rotation) },
                        uStarSpeed: { value: this.options.starSpeed },
                        uDensity: { value: this.options.density },
                        uHueShift: { value: this.options.hueShift },
                        uSpeed: { value: this.options.speed },
                        uMouse: { value: new THREE.Vector2(this.smoothMousePos.x, this.smoothMousePos.y) },
                        uGlowIntensity: { value: this.options.glowIntensity },
                        uSaturation: { value: this.options.saturation },
                        uMouseRepulsion: { value: this.options.mouseRepulsion },
                        uTwinkleIntensity: { value: this.options.twinkleIntensity },
                        uRotationSpeed: { value: this.options.rotationSpeed },
                        uRepulsionStrength: { value: this.options.repulsionStrength },
                        uMouseActiveFactor: { value: 0.0 },
                        uAutoCenterRepulsion: { value: this.options.autoCenterRepulsion },
                        uTransparent: { value: this.options.transparent }
                    },
                    transparent: this.options.transparent
                });

                this.mesh = new THREE.Mesh(geometry, material);
                this.scene.add(this.mesh);

                const resize = () => {
                    this.renderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
                    material.uniforms.uResolution.value.set(
                        this.container.offsetWidth,
                        this.container.offsetHeight,
                        this.container.offsetWidth / this.container.offsetHeight
                    );
                };
                window.addEventListener('resize', resize, false);

                const animate = (t) => {
                    requestAnimationFrame(animate);

                    if (!this.options.disableAnimation) {
                        material.uniforms.uTime.value = t * 0.001;
                        material.uniforms.uStarSpeed.value = (t * 0.001 * this.options.starSpeed) / 10.0;
                    }

                    const lerpFactor = 0.05;
                    this.smoothMousePos.x += (this.targetMousePos.x - this.smoothMousePos.x) * lerpFactor;
                    this.smoothMousePos.y += (this.targetMousePos.y - this.smoothMousePos.y) * lerpFactor;
                    this.smoothMouseActive += (this.targetMouseActive - this.smoothMouseActive) * lerpFactor;

                    material.uniforms.uMouse.value.set(this.smoothMousePos.x, this.smoothMousePos.y);
                    material.uniforms.uMouseActiveFactor.value = this.smoothMouseActive;

                    this.renderer.render(this.scene, this.camera);
                };
                animate(0);

                this.container.appendChild(this.renderer.domElement);

                const handleMouseMove = (e) => {
                    const rect = this.container.getBoundingClientRect();
                    const x = (e.clientX - rect.left) / rect.width;
                    const y = 1.0 - (e.clientY - rect.top) / rect.height;
                    this.targetMousePos = { x, y };
                    this.targetMouseActive = 1.0;
                };

                const handleMouseLeave = () => {
                    this.targetMouseActive = 0.0;
                };

                if (this.options.mouseInteraction) {
                    this.container.addEventListener('mousemove', handleMouseMove);
                    this.container.addEventListener('mouseleave', handleMouseLeave);
                }

                this.cleanup = () => {
                    window.removeEventListener('resize', resize);
                    if (this.options.mouseInteraction) {
                        this.container.removeEventListener('mousemove', handleMouseMove);
                        this.container.removeEventListener('mouseleave', handleMouseLeave);
                    }
                    if (this.container.contains(this.renderer.domElement)) {
                        this.container.removeChild(this.renderer.domElement);
                    }
                    this.renderer.dispose();
                };
            }

            destroy() {
                if (this.cleanup) {
                    this.cleanup();
                }
            }
        }

        // ScrollReveal functionality
        class ScrollReveal {
            constructor(element, options = {}) {
                this.element = element;
                this.options = {
                    enableBlur: true,
                    baseOpacity: 0.1,
                    baseRotation: 3,
                    blurStrength: 4,
                    rotationEnd: 'bottom bottom',
                    wordAnimationEnd: 'bottom bottom',
                    ...options
                };
                this.init();
            }

            init() {
                this.splitText();
                this.setupAnimations();
            }

            splitText() {
                const textElement = this.element.querySelector('.scroll-reveal-text');
                if (!textElement) return;

                const text = textElement.textContent;
                const words = text.split(/(\s+)/).map((word, index) => {
                    if (word.match(/^\s+$/)) return word;
                    return `<span class="word" style="opacity: ${this.options.baseOpacity}; filter: blur(${this.options.blurStrength}px);">${word}</span>`;
                }).join('');

                textElement.innerHTML = words;
            }

            setupAnimations() {
                // Container rotation animation
                gsap.fromTo(this.element,
                    {
                        transformOrigin: '0% 50%',
                        rotate: this.options.baseRotation
                    },
                    {
                        ease: 'none',
                        rotate: 0,
                        scrollTrigger: {
                            trigger: this.element,
                            start: 'top bottom',
                            end: this.options.rotationEnd,
                            scrub: true
                        }
                    }
                );

                const wordElements = this.element.querySelectorAll('.word');

                // Word opacity animation
                gsap.fromTo(wordElements,
                    {
                        opacity: this.options.baseOpacity,
                        willChange: 'opacity'
                    },
                    {
                        ease: 'none',
                        opacity: 1,
                        stagger: 0.05,
                        scrollTrigger: {
                            trigger: this.element,
                            start: 'top bottom-=20%',
                            end: this.options.wordAnimationEnd,
                            scrub: true
                        }
                    }
                );

                // Blur animation
                if (this.options.enableBlur) {
                    gsap.fromTo(wordElements,
                        {
                            filter: `blur(${this.options.blurStrength}px)`
                        },
                        {
                            ease: 'none',
                            filter: 'blur(0px)',
                            stagger: 0.05,
                            scrollTrigger: {
                                trigger: this.element,
                                start: 'top bottom-=20%',
                                end: this.options.wordAnimationEnd,
                                scrub: true
                            }
                        }
                    );
                }
            }
        }

        // Initialize when page loads
        window.addEventListener('load', () => {
            console.log('Page loaded, initializing...');

            // Initialize Galaxy
            const container = document.getElementById('galaxyContainer');
            console.log('Galaxy container found:', container);
            new Galaxy(container, {
                mouseRepulsion: false,
                mouseInteraction: false,
                density: 1.5,
                glowIntensity: 0.5,
                saturation: 0.3,
                hueShift: 200
            });

            // Check if GSAP is loaded
            console.log('GSAP loaded:', typeof gsap !== 'undefined');
            console.log('ScrollTrigger loaded:', typeof ScrollTrigger !== 'undefined');

            // Initialize ScrollReveal for all elements
            const revealElements = document.querySelectorAll('.scroll-reveal');
            console.log('Found reveal elements:', revealElements.length);
            revealElements.forEach((element, index) => {
                console.log(`Initializing ScrollReveal ${index + 1}:`, element);
                new ScrollReveal(element, {
                    enableBlur: true,
                    baseOpacity: 0,
                    baseRotation: 5,
                    blurStrength: 10
                });
            });

            // Animate step sections
            const stepSections = document.querySelectorAll('.step-section');
            console.log('Found step sections:', stepSections.length);
            stepSections.forEach((section, index) => {
                console.log(`Animating step section ${index + 1}:`, section);
                gsap.fromTo(section,
                    {
                        opacity: 0,
                        y: 100,
                        scale: 0.9
                    },
                    {
                        opacity: 1,
                        y: 0,
                        scale: 1,
                        duration: 1,
                        ease: 'power2.out',
                        scrollTrigger: {
                            trigger: section,
                            start: 'top bottom-=100px',
                            end: 'bottom center',
                            toggleActions: 'play none none reverse'
                        }
                    }
                );
            });

            // Animate progress bar
            const progressFill = document.querySelector('.progress-fill');
            console.log('Progress fill element:', progressFill);
            gsap.fromTo('.progress-fill',
                { width: '0%' },
                {
                    width: '30%',
                    duration: 2,
                    ease: 'power2.out',
                    scrollTrigger: {
                        trigger: '.progress-section',
                        start: 'top bottom-=200px',
                        toggleActions: 'play none none reverse'
                    }
                }
            );

            console.log('All animations initialized');

            // Force content to be visible after a short delay
            setTimeout(() => {
                console.log('Forcing content to be visible...');
                const allElements = document.querySelectorAll('.scroll-reveal, .step-section, .word, .scroll-reveal-text');
                console.log('Found elements to make visible:', allElements.length);
                allElements.forEach(el => {
                    el.style.opacity = '1';
                    el.style.filter = 'none';
                    el.style.transform = 'none';
                    el.style.display = 'block';
                    el.style.visibility = 'visible';
                });
                const progressFill = document.querySelector('.progress-fill');
                if (progressFill) {
                    progressFill.style.width = '30%';
                    progressFill.style.display = 'block';
                    progressFill.style.visibility = 'visible';
                }


                console.log('Content should now be visible');
            }, 100);
        });
    </script>
</body>

</html>