<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>QULTR</title>
        <link rel="icon" type="image/svg+xml" href="favicon.svg">
        <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=JetBrains+Mono:wght@300;400;700;800&display=swap"
            rel="stylesheet"
        />
        <link
            phx-track-static
            rel="stylesheet"
            href="https://funqtion.co/assets/vendor/fonts/proto_mono/proto_mono.css"
        />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

            body {
                background: #000;
                color: #fff;
                font-family: "JetBrains Mono", monospace;
                overflow: hidden;
                position: relative;
                height: 100vh;
                height: 100dvh; /* Use dynamic viewport height for mobile Safari */
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            /* TV Static Background */
            .static {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
                opacity: 0.08;
                pointer-events: none;
            }

            .static::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: repeating-radial-gradient(
                    circle at 0 0,
                    transparent 0,
                    #ffffff 1px,
                    transparent 2px,
                    transparent 3px
                );
                background-size: 3px 3px;
                animation: static 0.2s linear infinite;
            }

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

            /* Scan Lines */
            .scanlines {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 2;
                pointer-events: none;
                background: linear-gradient(
                    transparent 50%,
                    rgba(255, 255, 255, 0.03) 50%
                );
                background-size: 100% 4px;
                animation: scanlines 8s linear infinite;
            }

            @keyframes scanlines {
                0% {
                    transform: translateY(0);
                }
                100% {
                    transform: translateY(10px);
                }
            }

            /* Main Container */
            .container {
                position: relative;
                z-index: 10;
                height: 100vh;
                height: 100dvh; /* Use dynamic viewport height for mobile Safari */
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            /* Logo */
            .logo {
                font-family: "Proto Mono", monospace;
                font-size: 6rem;
                font-weight: bold;
                letter-spacing: 1.5rem;
                margin-right: 0;
                position: relative;
                animation: glitch 2s infinite;
                text-transform: uppercase;
                color: #fff;
                text-shadow:
                    0 0 5px rgba(255, 255, 255, 0.8),
                    0 0 10px rgba(255, 255, 255, 0.4),
                    0 0 20px rgba(255, 255, 255, 0.2);
            }

            /* Reduce spacing for specific letter pairs */
            .letter-t {
                margin-left: -0.8rem;
            }

            .letter-r {
                margin-left: -0.5rem;
            }

            @keyframes glitch {
                0%,
                90%,
                100% {
                    text-shadow:
                        0 0 5px rgba(255, 255, 255, 0.8),
                        0 0 10px rgba(255, 255, 255, 0.4),
                        0 0 20px rgba(255, 255, 255, 0.2);
                    transform: translate(0) scaleX(1);
                    filter: brightness(1) contrast(1);
                }
                92% {
                    text-shadow:
                        -3px 0 #ff00ff,
                        3px 0 #00ffff,
                        0 0 10px rgba(255, 255, 255, 0.8),
                        0 0 30px rgba(255, 0, 255, 0.4);
                    transform: translate(-2px, 1px) scaleX(1.01);
                    filter: brightness(1.3) contrast(1.2);
                }
                94% {
                    text-shadow:
                        3px 0 #ff00ff,
                        -3px 0 #00ffff,
                        0 0 10px rgba(255, 255, 255, 0.8),
                        0 0 30px rgba(0, 255, 255, 0.4);
                    transform: translate(2px, -1px) scaleX(0.99);
                    filter: brightness(1.2) contrast(1.1);
                }
            }

            /* Encrypted Text */
            .encrypted {
                margin-top: 3rem;
                font-size: 0.75rem;
                opacity: 0.5;
                letter-spacing: 0.8rem;
                animation: flicker 3s infinite;
                font-weight: 300;
                color: #999;
                text-transform: uppercase;
            }

            @keyframes flicker {
                0%,
                100% {
                    opacity: 0.5;
                }
                50% {
                    opacity: 0.3;
                }
                75% {
                    opacity: 0.7;
                }
            }

            /* Hidden Message */
            .hidden-text {
                position: absolute;
                bottom: 2rem;
                bottom: max(
                    2rem,
                    env(safe-area-inset-bottom) + 1rem
                ); /* Account for Safari UI */
                font-size: 0.65rem;
                opacity: 0;
                transition: opacity 2s ease-in-out;
                letter-spacing: 0.3rem;
                font-weight: 400;
                text-transform: uppercase;
            }

            .container:hover .hidden-text {
                opacity: 0.25;
            }

            /* Noise Overlay */
            .noise {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 3;
                opacity: 0.02;
                pointer-events: none;
            }

            .noise::before {
                content: "";
                position: absolute;
                top: -100%;
                left: 0;
                width: 100%;
                height: 200%;
                background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="1"/></svg>');
                animation: noise 0.5s steps(2) infinite;
            }

            @keyframes noise {
                0% {
                    transform: translateY(0);
                }
                100% {
                    transform: translateY(100%);
                }
            }

            /* Interference Lines */
            .interference {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 2px;
                background: rgba(255, 255, 255, 0.1);
                z-index: 4;
                animation: interference 4s linear infinite;
            }

            @keyframes interference {
                0% {
                    transform: translateY(0);
                }
                100% {
                    transform: translateY(100vh);
                }
            }

            /* Glitch Text Effect */
            .glitch-text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 0.9rem;
                opacity: 0;
                animation: glitchText 8s infinite;
            }

            @keyframes glitchText {
                0%,
                95%,
                100% {
                    opacity: 0;
                }
                96%,
                99% {
                    opacity: 0.4;
                }
            }

            /* Mobile Responsive */
            @media (max-width: 768px) {
                .logo {
                    font-size: 3.5rem;
                    letter-spacing: 0.8rem;
                    margin-right: 0;
                }

                /* Mobile adjustments for letter spacing */
                .letter-t {
                    margin-left: -0.4rem;
                }

                .letter-r {
                    margin-left: -0.25rem;
                }
                .encrypted {
                    font-size: 0.6rem;
                    letter-spacing: 0.4rem;
                }
                .hidden-text {
                    font-size: 0.5rem;
                    letter-spacing: 0.1rem;
                }
                .corner-bracket {
                    width: 30px;
                    height: 30px;
                }
                .nav-trigger {
                    padding: 0.6rem 1.2rem;
                    bottom: 4rem;
                    bottom: max(
                        4rem,
                        env(safe-area-inset-bottom) + 2rem
                    ); /* Account for Safari UI */
                    font-size: 0.7rem;
                }
            }

            /* Navigation System */
            .nav-trigger {
                position: fixed;
                bottom: 5rem;
                bottom: max(
                    5rem,
                    env(safe-area-inset-bottom) + 3rem
                ); /* Account for Safari UI */
                left: 50%;
                transform: translateX(-50%);
                padding: 0.8rem 1.5rem;
                cursor: pointer;
                z-index: 100;
                opacity: 0.7;
                transition: all 0.3s ease;
                border-radius: 4px;
                background: rgba(0, 0, 0, 0.4);
                border: 1px solid rgba(255, 255, 255, 0.15);
                backdrop-filter: blur(10px);
                box-shadow:
                    0 0 20px rgba(255, 255, 255, 0.05),
                    inset 0 0 20px rgba(255, 255, 255, 0.02);
                font-family: "JetBrains Mono", monospace;
                font-size: 0.8rem;
                font-weight: 300;
                color: #fff;
                text-transform: uppercase;
                letter-spacing: 0.1rem;
            }

            body:hover .nav-trigger {
                opacity: 0.9;
            }

            .nav-trigger:hover {
                opacity: 1 !important;
                transform: translateX(-50%) translateY(-2px);
                box-shadow:
                    0 4px 30px rgba(255, 255, 255, 0.1),
                    inset 0 0 20px rgba(255, 255, 255, 0.05);
                border-color: rgba(255, 255, 255, 0.3);
                background: rgba(0, 0, 0, 0.6);
            }

            .nav-trigger::after {
                content: "█";
                animation: blink 1.5s infinite;
                margin-left: 0.2rem;
            }

            .nav-trigger.active {
                opacity: 0 !important;
                transform: translateX(-50%) scale(0.8) !important;
                pointer-events: none;
                visibility: hidden;
                transition: all 0.3s ease;
            }

            .nav-trigger:not(.active) {
                transition: all 0.3s ease 0.5s;
            }

            .nav-trigger.active::after {
                animation: none;
                opacity: 1;
            }

            @keyframes blink {
                0%,
                50% {
                    opacity: 1;
                }
                51%,
                100% {
                    opacity: 0;
                }
            }

            /* Navigation Menu */
            .nav-menu {
                position: fixed;
                top: 0;
                right: -100%;
                width: 300px;
                height: 100vh;
                height: 100dvh; /* Use dynamic viewport height for mobile Safari */
                background: rgba(0, 0, 0, 0.95);
                backdrop-filter: blur(10px);
                z-index: 99;
                transition: right 0.5s cubic-bezier(0.77, 0, 0.175, 1);
                border-left: 1px solid rgba(255, 255, 255, 0.1);
            }

            .nav-menu.active {
                right: 0;
            }

            .nav-menu ul {
                list-style: none;
                padding: 2rem;
                position: absolute;
                bottom: 8rem;
                bottom: max(
                    8rem,
                    env(safe-area-inset-bottom) + 6rem
                ); /* Account for Safari UI */
                width: 100%;
            }

            .nav-menu li {
                margin-bottom: 2rem;
                opacity: 0;
                transform: translateX(50px);
                transition: all 0.5s ease;
            }

            .nav-menu.active li {
                opacity: 1;
                transform: translateX(0);
            }

            .nav-menu.active li:nth-child(1) {
                transition-delay: 0.1s;
            }
            .nav-menu.active li:nth-child(2) {
                transition-delay: 0.15s;
            }
            .nav-menu.active li:nth-child(3) {
                transition-delay: 0.2s;
            }
            .nav-menu.active li:nth-child(4) {
                transition-delay: 0.25s;
            }
            .nav-menu.active li:nth-child(5) {
                transition-delay: 0.3s;
            }
            .nav-menu.active li:nth-child(6) {
                transition-delay: 0.35s;
            }

            .nav-menu a {
                color: #fff;
                text-decoration: none;
                font-size: 1.2rem;
                font-weight: 300;
                letter-spacing: 0.2rem;
                text-transform: uppercase;
                display: block;
                position: relative;
                transition: all 0.3s ease;
            }

            .nav-menu a::before {
                content: ">";
                position: absolute;
                left: -20px;
                opacity: 0;
                transition: all 0.3s ease;
            }

            .nav-menu a:hover {
                color: #00ffff;
                transform: translateX(10px);
            }

            .nav-menu a:hover::before {
                opacity: 1;
                left: -15px;
            }

            .nav-menu .nav-info {
                position: absolute;
                bottom: 2rem;
                bottom: max(
                    2rem,
                    env(safe-area-inset-bottom) + 1rem
                ); /* Account for Safari UI */
                left: 2rem;
                right: 6rem;
                font-size: 0.6rem;
                opacity: 0.3;
                letter-spacing: 0.1rem;
                line-height: 1.6;
            }

            /* Close Button */
            .nav-close {
                position: absolute;
                bottom: 2rem;
                bottom: max(
                    2rem,
                    env(safe-area-inset-bottom) + 1rem
                ); /* Account for Safari UI */
                right: 2rem;
                width: 40px;
                height: 40px;
                cursor: pointer;
                opacity: 0;
                transform: scale(0.8);
                transition: all 0.3s ease;
                border-radius: 4px;
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: "JetBrains Mono", monospace;
                font-size: 0.7rem;
                color: #fff;
                font-weight: 300;
            }

            .nav-menu.active .nav-close {
                opacity: 0.6;
                transform: scale(1);
                transition-delay: 0.4s;
            }

            .nav-close:hover {
                opacity: 1 !important;
                background: rgba(255, 255, 255, 0.1);
                border-color: rgba(255, 255, 255, 0.3);
                transform: scale(1.05);
            }

            /* Alternative: Minimal Corner Links */
            .corner-links {
                position: fixed;
                font-size: 0.7rem;
                font-weight: 300;
                letter-spacing: 0.1rem;
                text-transform: uppercase;
                opacity: 0;
                transition: opacity 0.5s ease;
            }

            body:hover .corner-links {
                opacity: 0.3;
            }

            .corner-links a {
                color: #fff;
                text-decoration: none;
                transition: all 0.3s ease;
            }

            .corner-links a:hover {
                opacity: 1;
                color: #00ffff;
            }

            .link-top-left {
                top: 2.5rem;
                left: 5rem;
            }

            .link-top-right {
                top: 2.5rem;
                right: 5rem;
            }

            .link-bottom-left {
                bottom: 2.5rem;
                left: 5rem;
            }

            .link-bottom-right {
                bottom: 2.5rem;
                right: 5rem;
            }

            /* Industrial Grid Overlay */
            .grid-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image:
                    linear-gradient(
                        rgba(255, 255, 255, 0.01) 1px,
                        transparent 1px
                    ),
                    linear-gradient(
                        90deg,
                        rgba(255, 255, 255, 0.01) 1px,
                        transparent 1px
                    );
                background-size: 100px 100px;
                z-index: 1;
                opacity: 0.5;
                animation: gridMove 20s linear infinite;
            }

            @keyframes gridMove {
                0% {
                    transform: translate(0, 0);
                }
                100% {
                    transform: translate(100px, 100px);
                }
            }

            /* Corner Brackets */
            .corner-bracket {
                position: absolute;
                width: 40px;
                height: 40px;
                border: 1px solid rgba(255, 255, 255, 0.15);
                opacity: 0.8;
                transition: all 0.3s ease;
            }

            .corner-bracket::before {
                content: "";
                position: absolute;
                background: rgba(255, 255, 255, 0.05);
                transition: all 0.3s ease;
            }

            .corner-bracket.top-left {
                top: 2rem;
                left: 2rem;
                border-right: none;
                border-bottom: none;
            }

            .corner-bracket.top-left::before {
                bottom: -1px;
                right: -1px;
                width: 10px;
                height: 10px;
            }

            .corner-bracket.top-right {
                top: 2rem;
                right: 2rem;
                border-left: none;
                border-bottom: none;
            }

            .corner-bracket.top-right::before {
                bottom: -1px;
                left: -1px;
                width: 10px;
                height: 10px;
            }

            .corner-bracket.bottom-left {
                bottom: 2rem;
                bottom: max(
                    2rem,
                    env(safe-area-inset-bottom) + 1rem
                ); /* Account for Safari UI */
                left: 2rem;
                border-right: none;
                border-top: none;
            }

            .corner-bracket.bottom-left::before {
                top: -1px;
                right: -1px;
                width: 10px;
                height: 10px;
            }

            .corner-bracket.bottom-right {
                bottom: 2rem;
                bottom: max(
                    2rem,
                    env(safe-area-inset-bottom) + 1rem
                ); /* Account for Safari UI */
                right: 2rem;
                border-left: none;
                border-top: none;
            }

            .corner-bracket.bottom-right::before {
                top: -1px;
                left: -1px;
                width: 10px;
                height: 10px;
            }

            body:hover .corner-bracket {
                opacity: 1;
                border-color: rgba(255, 255, 255, 0.3);
            }
        </style>
    </head>
    <body>
        <div class="static"></div>
        <div class="scanlines"></div>
        <div class="noise"></div>
        <div class="interference"></div>
        <div class="grid-overlay"></div>

        <!-- Corner Brackets -->
        <div class="corner-bracket top-left"></div>
        <div class="corner-bracket top-right"></div>
        <div class="corner-bracket bottom-left"></div>
        <div class="corner-bracket bottom-right"></div>

        <!-- Navigation Trigger -->
        <div class="nav-trigger" id="navTrigger">>_ MENU</div>

        <!-- Navigation Menu -->
        <nav class="nav-menu" id="navMenu">
            <ul>
                <li><a href="about.html">About</a></li>
                <li><a href="foundation.html">Foundation</a></li>
                <li><a href="apps.html">Apps</a></li>
                <li><a href="mailto:hi@qultr.com">Contact</a></li>
            </ul>
            <div class="nav-info">
                QULTR.LABS<br />
                UNDERGROUND.NETWORK<br />
                EST.2025
            </div>
            <div class="nav-close" id="navClose">ESC</div>
        </nav>

        <div class="container">
            <h1 class="logo">
                <span class="letter-q">Q</span><span class="letter-u">U</span
                ><span class="letter-l">L</span><span class="letter-t">T</span
                ><span class="letter-r">R</span>
            </h1>
            <div class="encrypted">▓▒░ SYSTEM.INIT ░▒▓</div>
            <div class="hidden-text">UNDERGROUND.CULTURE</div>
            <div class="glitch-text">ACCESS.GRANTED</div>
        </div>

        <script>
            // Random glitch effect
            setInterval(() => {
                const logo = document.querySelector(".logo");
                if (Math.random() > 0.95) {
                    logo.style.transform = `translate(${Math.random() * 4 - 2}px, ${Math.random() * 4 - 2}px)`;
                    setTimeout(() => {
                        logo.style.transform = "translate(0, 0)";
                    }, 100);
                }
            }, 100);

            // Random character in encrypted text
            const encrypted = document.querySelector(".encrypted");
            const chars = "▓▒░█▄▀■□▪▫◊◈○●◐◑";
            setInterval(() => {
                const text = encrypted.textContent;
                const pos = Math.floor(Math.random() * text.length);
                const char = chars[Math.floor(Math.random() * chars.length)];
                encrypted.textContent =
                    text.substring(0, pos) + char + text.substring(pos + 1);
            }, 200);

            // Occasional screen flicker
            setInterval(() => {
                if (Math.random() > 0.98) {
                    document.body.style.opacity = "0.8";
                    setTimeout(() => {
                        document.body.style.opacity = "1";
                    }, 50);
                }
            }, 1000);

            // Navigation Toggle
            const navTrigger = document.getElementById("navTrigger");
            const navMenu = document.getElementById("navMenu");
            const navClose = document.getElementById("navClose");

            navTrigger.addEventListener("click", () => {
                navTrigger.classList.toggle("active");
                navMenu.classList.toggle("active");
            });

            // Close menu with close button
            navClose.addEventListener("click", () => {
                navTrigger.classList.remove("active");
                navMenu.classList.remove("active");
            });

            // Close menu on link click
            document.querySelectorAll(".nav-menu a").forEach((link) => {
                link.addEventListener("click", () => {
                    navTrigger.classList.remove("active");
                    navMenu.classList.remove("active");
                });
            });

            // Keyboard shortcuts
            document.addEventListener("keydown", (e) => {
                // Close menu with ESC key
                if (
                    e.key === "Escape" &&
                    navMenu.classList.contains("active")
                ) {
                    navTrigger.classList.remove("active");
                    navMenu.classList.remove("active");
                }
                // Open menu with M key (only when menu is closed and not typing in input)
                else if (
                    (e.key === "M" || e.key === "m") &&
                    !navMenu.classList.contains("active") &&
                    !e.target.matches("input, textarea, [contenteditable]")
                ) {
                    navTrigger.classList.add("active");
                    navMenu.classList.add("active");
                }
            });

            // Close menu when clicking outside
            document.addEventListener("click", (e) => {
                if (
                    navMenu.classList.contains("active") &&
                    !navMenu.contains(e.target) &&
                    !navTrigger.contains(e.target)
                ) {
                    navTrigger.classList.remove("active");
                    navMenu.classList.remove("active");
                }
            });
        </script>
    <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a0960b89dcc323a0',t:'MTc4MTA3MDA2Ng=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
