{"id":7,"date":"2026-01-04T11:48:20","date_gmt":"2026-01-04T11:48:20","guid":{"rendered":"https:\/\/aorphis.com\/?page_id=7"},"modified":"2026-02-24T18:25:40","modified_gmt":"2026-02-24T18:25:40","slug":"home","status":"publish","type":"page","link":"https:\/\/aorphis.com\/home\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7\" class=\"elementor elementor-7\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cbe8336 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"cbe8336\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b921e8 elementor-widget elementor-widget-html\" data-id=\"8b921e8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n\r\n<head>\r\n    <meta name=\"theme-color\" content=\"#050505\">\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>AORPHIS \/\/ TECHNO-NECROMANCER<\/title>\r\n\r\n    <!-- FAVICON -->\r\n    <link rel=\"icon\"\r\n        href=\"data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>\ud83d\udc41\ufe0f<\/text><\/svg>\">\r\n\r\n    <!-- Fonts: Orbitron (Headers) & Rajdhani (Body) -->\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link\r\n        href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@400;500;600;700&display=swap\"\r\n        rel=\"stylesheet\">\r\n\r\n    <!-- Tailwind CSS -->\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n    <!-- Icons -->\r\n    <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n\r\n    <style>\r\n        :root {\r\n            \/* Palette: Necro-Gold *\/\r\n            --void-black: #050505;\r\n            --obsidian: #0a0a0a;\r\n            --stone-dark: #141414;\r\n            --gold-dim: #8b6d3f;\r\n            --gold-bright: #e2a028;\r\n            --magic-glow: rgba(226, 160, 40, 0.2);\r\n            --border-width: 1px;\r\n        }\r\n\r\n          body {\r\n            \/* Removed var(--void-black) to allow sub-layer video visibility *\/\r\n            background-color: var(--void-black);\r\n            color: #a8a095;\r\n            font-family: 'Rajdhani', sans-serif;\r\n            overflow-x: hidden;\r\n            cursor: crosshair;\r\n        }\r\n\r\n        \/* --- LAYER 0: VIDEO INFRASTRUCTURE --- *\/\r\n        .yt-bg-layer {\r\n            position: fixed;\r\n            inset: 0;\r\n            width: 100vw;\r\n            height: 100vh;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n            overflow: hidden;\r\n            background-color: var(--void-black); \/* Fallback *\/\r\n        }\r\n\r\n        .yt-bg-layer iframe {\r\n            width: 100vw;\r\n            height: 56.25vw; \/* 16:9 Aspect Ratio Lock *\/\r\n            min-height: 100vh;\r\n            min-width: 177.77vh;\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            opacity: 0.35; \/* Cinematic dimming coefficient *\/\r\n            filter: contrast(120%); \/* Stylistic integration *\/\r\n        }\r\n\r\n        \/* Typography *\/\r\n        h1,\r\n        h2,\r\n        h3,\r\n        h4,\r\n        h5,\r\n        .tech-header {\r\n            font-family: 'Orbitron', sans-serif;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.05em;\r\n            color: var(--gold-bright);\r\n        }\r\n\r\n        .title-mashup {\r\n            font-weight: 900;\r\n            letter-spacing: -0.00em;\r\n            text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);\r\n        }\r\n\r\n        \/* --- AMBIENT EFFECTS --- *\/\r\n\r\n        \/* Noise Background *\/\r\n        .noise-bg {\r\n            position: fixed;\r\n            inset: 0;\r\n            pointer-events: none;\r\n            z-index: 40;\r\n            opacity: 0.06;\r\n            background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'\/%3E%3C\/svg%3E\");\r\n            animation: noiseShift 0.5s steps(10) infinite;\r\n        }\r\n\r\n        @keyframes noiseShift {\r\n            0% {\r\n                transform: translate(0, 0);\r\n            }\r\n\r\n            100% {\r\n                transform: translate(1%, 1%);\r\n            }\r\n        }\r\n\r\n        \/* Animated Scanlines (The \"New\" Effect) *\/\r\n        .scanlines {\r\n            position: fixed;\r\n            inset: 0;\r\n            pointer-events: none;\r\n            z-index: 50;\r\n            background: linear-gradient(to bottom,\r\n                    rgba(255, 255, 255, 0),\r\n                    rgba(255, 255, 255, 0) 50%,\r\n                    rgba(212, 175, 55, 0.05) 50%,\r\n                    rgba(212, 175, 55, 0.05));\r\n            background-size: 100% 4px;\r\n            animation: scanMove 60s linear infinite;\r\n        }\r\n\r\n        @keyframes scanMove {\r\n            0% {\r\n                background-position: 0 0;\r\n            }\r\n\r\n            100% {\r\n                background-position: 0 100%;\r\n            }\r\n        }\r\n\r\n        \/* Flicker *\/\r\n        .flicker-overlay {\r\n            position: fixed;\r\n            inset: 0;\r\n            pointer-events: none;\r\n            z-index: 45;\r\n            background: rgba(212, 175, 55, 0.02);\r\n            animation: flicker 4s infinite;\r\n        }\r\n\r\n        @keyframes flicker {\r\n\r\n            0%,\r\n            100% {\r\n                opacity: 0.8;\r\n            }\r\n\r\n            50% {\r\n                opacity: 0.4;\r\n            }\r\n        }\r\n\r\n        \/* --- UI COMPONENTS --- *\/\r\n        .os-box {\r\n            position: relative;\r\n            background-color: color-mix(in srgb, var(--obsidian), transparent 50%);\r\n            border: 1px solid var(--gold-dim);\r\n            transition: all 0.3s ease;\r\n            box-shadow: 0 0 0 1px var(--void-black);\r\n            \/* Inner definition *\/\r\n        }\r\n\r\n        .os-box:hover {\r\n            border-color: var(--gold-bright);\r\n            box-shadow: 0 0 30px var(--magic-glow);\r\n            z-index: 10;\r\n        }\r\n\r\n        \/* Pyramid\/Triangle Corners *\/\r\n        .corner-marker::before,\r\n        .corner-marker::after,\r\n        .corner-marker-btm::before,\r\n        .corner-marker-btm::after {\r\n            content: '';\r\n            position: absolute;\r\n            width: 6px;\r\n            height: 6px;\r\n            background: var(--gold-bright);\r\n            box-shadow: 0 0 5px var(--gold-bright);\r\n            transition: all 0.3s ease;\r\n            z-index: 20;\r\n        }\r\n\r\n        \/* Rotated diamond style corners *\/\r\n        .corner-marker::before {\r\n            top: -3px;\r\n            left: -3px;\r\n            transform: rotate(45deg);\r\n        }\r\n\r\n        .corner-marker::after {\r\n            top: -3px;\r\n            right: -3px;\r\n            transform: rotate(45deg);\r\n        }\r\n\r\n        .corner-marker-btm::before {\r\n            bottom: -3px;\r\n            left: -3px;\r\n            transform: rotate(45deg);\r\n        }\r\n\r\n        .corner-marker-btm::after {\r\n            bottom: -3px;\r\n            right: -3px;\r\n            transform: rotate(45deg);\r\n        }\r\n\r\n        \/* Button Styling (Adapted from RPG Nav-Btn) *\/\r\n        .tech-btn {\r\n            position: relative;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            padding: 12px 32px;\r\n            font-family: 'Orbitron', sans-serif;\r\n            font-weight: 700;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            color: var(--gold-dim);\r\n            background: transparent;\r\n            border: 0.5px solid var(--gold-dim);\r\n            border-left: 4px solid var(--gold-dim);\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .tech-btn:hover {\r\n            color: var(--gold-bright);\r\n            border-color: var(--gold-bright);\r\n            background: linear-gradient(90deg, rgba(212, 175, 55, 0.1), transparent);\r\n            box-shadow: 0 0 20px var(--magic-glow);\r\n            padding-left: 36px;\r\n            \/* Slide effect *\/\r\n        }\r\n\r\n        \/* Gold Gradient Text *\/\r\n        .gold-gradient-text {\r\n            background-clip: text;\r\n            -webkit-background-clip: text;\r\n            color: transparent;\r\n            background-image: linear-gradient(90deg, #D4AF37 0%, #FFF8DC 50%, #D4AF37 100%);\r\n        }\r\n\r\n        \/* --- HORIZONTAL LASER SWEEP (Maintained Structure) --- *\/\r\n        .scan-line-anim {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 2px;\r\n            background: var(--gold-bright);\r\n            box-shadow: 0 0 15px var(--gold-bright);\r\n            opacity: 0;\r\n            z-index: 5;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .os-box:hover .scan-line-anim {\r\n            opacity: 1;\r\n            animation: scan 1.5s linear infinite;\r\n        }\r\n\r\n        @keyframes scan {\r\n            0% {\r\n                top: 0%;\r\n                opacity: 0;\r\n            }\r\n\r\n            10% {\r\n                opacity: 1;\r\n            }\r\n\r\n            90% {\r\n                opacity: 1;\r\n            }\r\n\r\n            100% {\r\n                top: 100%;\r\n                opacity: 0;\r\n            }\r\n        }\r\n\r\n        \/* Scrollbar *\/\r\n        ::-webkit-scrollbar {\r\n            width: 6px;\r\n            background: var(--void-black);\r\n        }\r\n\r\n        ::-webkit-scrollbar-thumb {\r\n            background: #333;\r\n        }\r\n\r\n        ::-webkit-scrollbar-thumb:hover {\r\n            background: var(--gold-dim);\r\n        }\r\n\r\n        \/* Timeline *\/\r\n        .timeline-node {\r\n            transition: all 0.3s ease;\r\n            cursor: pointer;\r\n            color: var(--gold-dim);\r\n        }\r\n\r\n        .timeline-node.active {\r\n            color: var(--gold-bright);\r\n            text-shadow: 0 0 10px var(--gold-bright);\r\n            font-weight: bold;\r\n            transform: translateX(-5px);\r\n        }\r\n\r\n        .timeline-line {\r\n            background: linear-gradient(to bottom, transparent, var(--gold-dim), transparent);\r\n        }\r\n\r\n        \/* Chat Terminal *\/\r\n        .chat-cursor {\r\n            display: inline-block;\r\n            width: 8px;\r\n            height: 1.2em;\r\n            background-color: var(--gold-bright);\r\n            animation: blink 1s step-end infinite;\r\n            vertical-align: middle;\r\n        }\r\n\r\n        @keyframes blink {\r\n            50% {\r\n                opacity: 0;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n\r\n<body class=\"min-h-screen p-2 md:p-6 flex flex-col items-center selection:bg-[#D4AF37] selection:text-black\">\r\n\r\n <!-- Sub-Layer Video Architecture -->\r\n    <!-- Replace 'VIDEO_ID' with targeted YouTube parameter. Mute & Autoplay are structurally required for auto-execution. -->\r\n   <div class=\"yt-bg-layer\">\r\n    <iframe src=\"https:\/\/www.youtube.com\/embed\/KwUE5zYaSgk?autoplay=1&amp;mute=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;loop=1&amp;playlist=KwUE5zYaSgk\" frameborder=\"0\" allowfullscreen><\/iframe>\r\n<\/div>\r\n    \r\n    <!-- Ambient Elements -->\r\n    <div class=\"noise-bg\"><\/div>\r\n    <div class=\"scanlines\"><\/div>\r\n    <div class=\"flicker-overlay\"><\/div>\r\n\r\n    <!-- Header Interface -->\r\n    <header class=\"w-full max-w-7xl mb-12 relative z-10 border-b border-[#D4AF37]\/30 pb-4\">\r\n        <div class=\"flex flex-col md:flex-row justify-between items-end\">\r\n            <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-[#D4AF37]\/60 tracking-[0.3em] font-mono mb-1\">SYSTEM_INIT \/\/\r\n                    AORPHIS_PROTOCOL<\/span>\r\n                <h1 class=\"text-4xl md:text-3xl font-black tracking-tighter gold-gradient-text title-mashup\">\r\n                    AORPHIS.com\r\n                <\/h1>\r\n            <\/div>\r\n            <div class=\"text-right hidden md:block mt-4 md:mt-0\">\r\n                <div class=\"flex items-center justify-end gap-2 text-xs text-[#D4AF37]\/70 mb-1 font-mono\">\r\n                    <i data-lucide=\"pyramid\" class=\"w-3 h-3\"><\/i>\r\n                    <span>VISITOR_MODE<\/span>\r\n                <\/div>\r\n                <div class=\"text-xs text-[#D4AF37]\/70 font-mono\">STATUS: MAGICK_INIT<\/div>\r\n                <div class=\"text-xl font-bold tracking-widest mt-1 text-[#FFD700]\">V.\u03a6.2026<\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Navigation -->\r\n        <div class=\"flex flex-wrap gap-6 mt-4 text-[12px] uppercase tracking-[0.2em] text-[#D4AF37]\/50 font-mono\">\r\n            <a href=\"#journal\"\r\n                class=\"hover:text-[#FFD700] transition-colors flex items-center gap-2 hover:scale-105 transform duration-300\">\r\n                <i data-lucide=\"scroll-text\" class=\"w-4 h-4\"><\/i> CHRONICLES\r\n            <\/a>\r\n            <a href=\"#portfolio\"\r\n                class=\"hover:text-[#FFD700] transition-colors flex items-center gap-2 hover:scale-105 transform duration-300\">\r\n                <i data-lucide=\"gem\" class=\"w-4 h-4\"><\/i> ARTIFACTS\r\n            <\/a>\r\n            <a href=\"#oracle\"\r\n                class=\"hover:text-[#FFD700] transition-colors flex items-center gap-2 hover:scale-105 transform duration-300\">\r\n                <i data-lucide=\"radio\" class=\"w-4 h-4\"><\/i> ORACLE_LINK\r\n            <\/a>\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <!-- Main Content -->\r\n    <main class=\"w-full max-w-7xl flex-grow flex flex-col gap-24 pb-20 relative z-10\">\r\n\r\n        <!-- SECTION 0: HERO -->\r\n        <section class=\"os-box group p-8 md:p-16 text-center flex flex-col items-center justify-center min-h-[50vh]\">\r\n            <div class=\"corner-marker\"><\/div>\r\n            <div class=\"corner-marker-btm\"><\/div>\r\n            <!-- Horizontal Scanline -->\r\n            <div class=\"scan-line-anim\"><\/div>\r\n\r\n            <!-- LOGO SLOT -->\r\n            <div class=\"mb-8 opacity-90 animate-pulse hover:opacity-100 transition-opacity duration-500\">\r\n                <img decoding=\"async\" src=\"https:\/\/aorphis.com\/wp-content\/uploads\/2026\/01\/WEB-LOGO-AORPHIS-2026-1.png\" alt=\"Aorphis Logo\"\r\n                    class=\"w-50 h-50 md:w-60 md:h-60 object-contain drop-shadow-[0_0_15px_rgba(212,175,55,0.3)]\">\r\n            <\/div>\r\n\r\n            <h2 class=\"text-3xl sm:text-5xl md:text-6xl font-bold leading-tight mb-6 gold-gradient-text title-mashup\">\r\n                ALT- MAGICIAN<br>INTERFACE\r\n            <\/h2>\r\n            <p class=\"text-base md:text-xl text-[#a8a095] max-w-3xl leading-relaxed mb-8 font-medium\">\r\n                Documenting the synthesis of ancient wisdom and hypermodernisation.\r\n                <br>A digital grimoire for the alt-magician lifestyle.\r\n            <\/p>\r\n\r\n            <!-- SPECIALIZED HERO BUTTONS -->\r\n            <div class=\"flex flex-col md:flex-row gap-6 mt-8 w-full max-w-4xl justify-center\">\r\n\r\n                <!-- Button 1: Chronicles -->\r\n                <a href=\"#journal\"\r\n                    class=\"hero-btn group relative flex items-center gap-4 p-3 pr-8 border border-[#7d6b49]\/30 bg-black\/40 hover:border-[#d4af37] transition-all overflow-hidden flex-1 cursor-pointer\">\r\n                    <!-- Loading Bar Animation -->\r\n                    <div\r\n                        class=\"loading-bar absolute bottom-0 left-0 h-1 bg-[#d4af37] w-0 transition-all duration-700 ease-out\">\r\n                    <\/div>\r\n                    <!-- Icon Slot Style -->\r\n                    <div\r\n                        class=\"os-box w-12 h-12 flex items-center justify-center bg-black\/50 relative shrink-0 group-hover:bg-[#d4af37]\/10 transition-colors\">\r\n                        <div class=\"corner-marker\"><\/div>\r\n                        <div class=\"corner-marker-btm\"><\/div>\r\n                        <i data-lucide=\"scroll-text\" class=\"w-5 h-5 text-[#d4af37]\"><\/i>\r\n                    <\/div>\r\n                    <!-- Text -->\r\n                    <div class=\"flex flex-col text-left\">\r\n                        <span class=\"text-[#d4af37] font-bold text-sm tracking-widest font-header\">CHRONICLES<\/span>\r\n                        <span\r\n                            class=\"text-[#7d6b49] text-[10px] font-mono tracking-wider group-hover:text-[#a8a095]\">ACCESS_LOGS<\/span>\r\n                    <\/div>\r\n                <\/a>\r\n\r\n                <!-- Button 2: Artifacts -->\r\n                <a href=\"#portfolio\"\r\n                    class=\"hero-btn group relative flex items-center gap-4 p-3 pr-8 border border-[#7d6b49]\/30 bg-black\/40 hover:border-[#d4af37] transition-all overflow-hidden flex-1 cursor-pointer\">\r\n                    <div\r\n                        class=\"loading-bar absolute bottom-0 left-0 h-1 bg-[#d4af37] w-0 transition-all duration-700 ease-out\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"os-box w-12 h-12 flex items-center justify-center bg-black\/50 relative shrink-0 group-hover:bg-[#d4af37]\/10 transition-colors\">\r\n                        <div class=\"corner-marker\"><\/div>\r\n                        <div class=\"corner-marker-btm\"><\/div>\r\n                        <i data-lucide=\"gem\" class=\"w-5 h-5 text-[#d4af37]\"><\/i>\r\n                    <\/div>\r\n                    <div class=\"flex flex-col text-left\">\r\n                        <span class=\"text-[#d4af37] font-bold text-sm tracking-widest font-header\">ARTIFACTS<\/span>\r\n                        <span\r\n                            class=\"text-[#7d6b49] text-[10px] font-mono tracking-wider group-hover:text-[#a8a095]\">VIEW_PROJECTS<\/span>\r\n                    <\/div>\r\n                <\/a>\r\n\r\n                <!-- Button 3: Oracle -->\r\n                <a href=\"#oracle\"\r\n                    class=\"hero-btn group relative flex items-center gap-4 p-3 pr-8 border border-[#7d6b49]\/30 bg-black\/40 hover:border-[#d4af37] transition-all overflow-hidden flex-1 cursor-pointer\">\r\n                    <div\r\n                        class=\"loading-bar absolute bottom-0 left-0 h-1 bg-[#d4af37] w-0 transition-all duration-700 ease-out\">\r\n                    <\/div>\r\n                    <div\r\n                        class=\"os-box w-12 h-12 flex items-center justify-center bg-black\/50 relative shrink-0 group-hover:bg-[#d4af37]\/10 transition-colors\">\r\n                        <div class=\"corner-marker\"><\/div>\r\n                        <div class=\"corner-marker-btm\"><\/div>\r\n                        <i data-lucide=\"radio\" class=\"w-5 h-5 text-[#d4af37]\"><\/i>\r\n                    <\/div>\r\n                    <div class=\"flex flex-col text-left\">\r\n                        <span class=\"text-[#d4af37] font-bold text-sm tracking-widest font-header\">ORACLE_LINK<\/span>\r\n                        <span\r\n                            class=\"text-[#7d6b49] text-[10px] font-mono tracking-wider group-hover:text-[#a8a095]\">INITIATE_CONTACT<\/span>\r\n                    <\/div>\r\n                <\/a>\r\n\r\n            <\/div>\r\n        <\/section>\r\n\r\n\r\n        <!-- SECTION 1: JOURNAL (Chronicles) -->\r\n        <section id=\"journal\" class=\"w-full relative\">\r\n            <div class=\"flex items-center gap-4 mb-8 border-b border-[#D4AF37]\/20 pb-2\">\r\n                <i data-lucide=\"history\" class=\"text-[#D4AF37]\"><\/i>\r\n                <h3 class=\"text-2xl font-bold tracking-widest text-[#FFD700]\">THE CHRONICLES<\/h3>\r\n            <\/div>\r\n\r\n            <div class=\"flex gap-4 md:gap-12\">\r\n\r\n                <!-- Left Column: Entries Container -->\r\n                <div class=\"w-full md:w-3\/4 flex flex-col gap-12\">\r\n\r\n                    <!-- ENTRY 1 -->\r\n                    <article class=\"journal-entry os-box p-6 md:p-8\" data-date=\"FEB 2026\">\r\n                        <div class=\"corner-marker\"><\/div>\r\n                        <div\r\n                            class=\"flex justify-between items-start mb-4 text-xs text-[#7d6519] tracking-widest border-b border-[#7d6519]\/20 pb-2 font-mono\">\r\n                            <span>ENTRY_LOG: #003<\/span>\r\n                            <span>LOCATION: BUDAPEST<\/span>\r\n                        <\/div>\r\n                        <h4 class=\"text-2xl font-bold text-[#FFD700] mb-4\">GRIMOIRE ARCHITECTURE<\/h4>\r\n                        <p class=\"mb-6 text-[#a8a095] leading-relaxed text-base font-medium\">\r\n                            One of the cornerstones of my crafts and core memory have been added and activated : A tarot\r\n                            reading that I have received through a karmic connection has led me through an intense\r\n                            experience that reminded me of who and what I am fundamentally. To define would be a\r\n                            restriction, yet my nature will never be a contradiction.\r\n\r\n                            This came as a result of temporarily settling and propagating in Budapest, as of now doing\r\n                            only the first steps, yet important connections continue to reveal themselves.\r\n                        <\/p>\r\n\r\n                        <!-- Media Block -->\r\n                        <div\r\n                            class=\"w-full aspect-video bg-black border border-[#D4AF37]\/30 mb-4 overflow-hidden relative group\">\r\n                            <img decoding=\"async\" src=\"https:\/\/aorphis.com\/wp-content\/uploads\/2026\/02\/P1113991_1.jpg\"\r\n                                class=\"w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0\"\r\n                                alt=\"Entry Visual\">\r\n                            <div\r\n                                class=\"absolute bottom-2 right-2 bg-black\/80 px-2 py-1 text-[10px] border border-[#D4AF37] font-mono text-[#D4AF37]\">\r\n                                VISUAL_DATA<\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n\r\n\r\n                    <!-- ENTRY 2 -->\r\n                    <article class=\"journal-entry os-box p-6 md:p-8\" data-date=\"JAN 2026\">\r\n                        <div class=\"corner-marker\"><\/div>\r\n                        <div\r\n                            class=\"flex justify-between items-start mb-4 text-xs text-[#7d6519] tracking-widest border-b border-[#7d6519]\/20 pb-2 font-mono\">\r\n                            <span>ENTRY_LOG: #002<\/span>\r\n                            <span>LOCATION: HUNGARY<\/span>\r\n                        <\/div>\r\n                        <h4 class=\"text-2xl font-bold text-[#FFD700] mb-4\">PROTECTION RITUAL<\/h4>\r\n                        <p class=\"mb-6 text-[#a8a095] leading-relaxed text-base font-medium\">\r\n                            I decided to dedicate this sigil to the warriors of the crafts . The witches and warlocks\r\n                            that never bowed down and re-emerged more powerful after each downfall, year after year.\r\n\r\n                            I made this available to download with the original page photo and the vector file. For\r\n                            anybody interested : <a href=\"https:\/\/aorphis.com\/THREEHNDRD\/\"\r\n                                class=\"text-[#FFD700] hover:underline cursor-pointer\">TAP \/ CLICK HERE<\/a>\r\n                        <\/p>\r\n                        <p class=\"mb-6 text-[#a8a095] leading-relaxed text-base font-medium\">\r\n\r\n                            We have the right to thrive doing what we do best , and therefore this symbol of protection\r\n                            has been specifically crafted for the year of 2026 to ourselves , to our prosperity.\r\n                        <\/p>\r\n\r\n                        <div\r\n                            class=\"w-full aspect-video bg-black border border-[#D4AF37]\/30 mb-4 overflow-hidden relative group\">\r\n                            <img decoding=\"async\" src=\"https:\/\/aorphis.com\/wp-content\/uploads\/2026\/02\/P1113707.jpg\"\r\n                                class=\"w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0\"\r\n                                alt=\"Entry Visual\">\r\n                            <div\r\n                                class=\"absolute bottom-2 right-2 bg-black\/80 px-2 py-1 text-[10px] border border-[#D4AF37] font-mono text-[#D4AF37]\">\r\n                                VISUAL_DATA<\/div>\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                    <!-- ENTRY 3 -->\r\n                    <article class=\"journal-entry os-box p-6 md:p-8\" data-date=\"DEC 2025\">\r\n                        <div class=\"corner-marker\"><\/div>\r\n                        <div\r\n                            class=\"flex justify-between items-start mb-4 text-xs text-[#7d6519] tracking-widest border-b border-[#7d6519]\/20 pb-2 font-mono\">\r\n                            <span>ENTRY_LOG: #001<\/span>\r\n                            <span>LOCATION: NULL_VOID<\/span>\r\n                        <\/div>\r\n                        <h4 class=\"text-2xl font-bold text-[#FFD700] mb-4\">THE FIRST SIGILS<\/h4>\r\n                        <p class=\"mb-6 text-[#a8a095] leading-relaxed text-base font-medium\">\r\n                            My history with the Arts extend from the very first ray of consciousness. I distinctly\r\n                            remember drawing my first pentagram as a pre-schooler somewhere in the early 2005\/2006. Ever\r\n                            since I knew that my path would not be a typical and comfortable one ; exhilarating yet\r\n                            familiar, each step I took brought me closer to the arcane.\r\n                        <p class=\"mb-6 text-[#a8a095] leading-relaxed text-base font-medium\">\r\n\r\n                            This passion combined with my love for art couldn't lurk anymore on the background of my\r\n                            psyche and for this reason I decided to tap into them fully and publish my practical way of\r\n                            living and creating as a Warlock in the modern World, utilising all vectors available to the\r\n                            best of my ability.\r\n                        <p class=\"mb-6 text-[#a8a095] leading-relaxed text-base font-medium\">\r\n\r\n                            This Process is highly personal and unpolluted by any external sources or ideologies. I\r\n                            voluntarily decided to not engage with any pre-existing occult or esoteric writings after my\r\n                            initiation into \"Ancient Theurgy\" ( for the lack of a better term ) back in 2014.\r\n                        <p class=\"mb-6 text-[#a8a095] leading-relaxed text-base font-medium\">\r\n\r\n                            My first public project started in October of 2025, when I posted reels showcasing my Sigil\r\n                            Creation Method as mini-guides for anybody to learn and use.\r\n\r\n                            I'm looking forward to continue to propagate my Creations and Magic to the benefit of\r\n                            Mankind and it's Divine origin. This is after all my core Ideology.\r\n                        <\/p>\r\n                        <div\r\n                            class=\"w-full aspect-video bg-black border border-[#D4AF37]\/30 mb-4 overflow-hidden relative group\">\r\n                            <img decoding=\"async\" src=\"https:\/\/aorphis.com\/wp-content\/uploads\/2026\/02\/P1112781_1.jpg\"\r\n                                class=\"w-full h-full object-cover opacity-60 group-hover:opacity-100 transition-opacity duration-500 grayscale group-hover:grayscale-0\"\r\n                                alt=\"Visual\">\r\n                        <\/div>\r\n                    <\/article>\r\n\r\n                <\/div>\r\n\r\n                <!-- Right Column: Timeline -->\r\n                <div class=\"hidden md:block w-1\/4 relative\">\r\n                    <div class=\"sticky top-24 border-l-2 border-[#D4AF37]\/20 pl-6 py-4\">\r\n                        <div class=\"absolute left-[-1px] top-0 w-[2px] h-full timeline-line\"><\/div>\r\n                        <ul class=\"space-y-8 text-sm font-mono tracking-widest text-[#D4AF37]\/40\" id=\"timeline-list\">\r\n                            <li class=\"timeline-node\" id=\"link-FEB 2026\">FEB 2026<\/li>\r\n                            <li class=\"timeline-node\" id=\"link-JAN 2026\">JAN 2026<\/li>\r\n                            <li class=\"timeline-node\" id=\"link-DEC 2025\">DEC 2025<\/li>\r\n\r\n\r\n                        <\/ul>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n\r\n        <!-- SECTION 2: PORTFOLIO (Artifacts) -->\r\n        <section id=\"portfolio\" class=\"w-full\">\r\n            <div class=\"flex items-center gap-4 mb-8 border-b border-[#D4AF37]\/20 pb-2\">\r\n                <i data-lucide=\"layers\" class=\"text-[#D4AF37]\"><\/i>\r\n                <h3 class=\"text-2xl font-bold tracking-widest text-[#FFD700]\">ARTIFACTS \/\/ PROJECTS<\/h3>\r\n            <\/div>\r\n\r\n            <!-- 3 Columns Grid -->\r\n            <!-- ALL PROJECT CARDS ARE NOW LINKS TO https:\/\/aorphis.com\/projects -->\r\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n\r\n                <!-- Project 1 -->\r\n                <a href=\"https:\/\/aorphis.com\/projects\"\r\n                    class=\"os-box group h-72 relative overflow-hidden cursor-pointer bg-black block\">\r\n                    <div class=\"corner-marker-btm\"><\/div>\r\n                    <div class=\"scan-line-anim\"><\/div>\r\n\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1515405295579-ba7f9f92f4b3?q=80&w=1000&auto=format&fit=crop\"\r\n                        class=\"absolute inset-0 w-full h-full object-cover opacity-40 group-hover:opacity-80 transition-all duration-500 scale-100 group-hover:scale-105 grayscale group-hover:grayscale-0\"\r\n                        alt=\"Project Cover\">\r\n\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/50 to-transparent p-6 flex flex-col justify-end\">\r\n                        <div\r\n                            class=\"transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\">\r\n                            <h4 class=\"text-lg font-bold text-[#FFD700] mb-1\">PROJECT: OSIRIS<\/h4>\r\n                            <p\r\n                                class=\"text-[10px] font-mono text-[#D4AF37] opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100 uppercase tracking-wider\">\r\n                                Visual Branding \/\/ 3D\r\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n\r\n                <!-- Project 2 -->\r\n                <a href=\"https:\/\/aorphis.com\/projects\"\r\n                    class=\"os-box group h-72 relative overflow-hidden cursor-pointer bg-black block\">\r\n                    <div class=\"corner-marker-btm\"><\/div>\r\n                    <div class=\"scan-line-anim\"><\/div>\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1550684848-fac1c5b4e853?q=80&w=1000&auto=format&fit=crop\"\r\n                        class=\"absolute inset-0 w-full h-full object-cover opacity-40 group-hover:opacity-80 transition-all duration-500 scale-100 group-hover:scale-105 grayscale group-hover:grayscale-0\"\r\n                        alt=\"Project Cover\">\r\n\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/50 to-transparent p-6 flex flex-col justify-end\">\r\n                        <div\r\n                            class=\"transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\">\r\n                            <h4 class=\"text-lg font-bold text-[#FFD700] mb-1\">HERMETIC HUD<\/h4>\r\n                            <p\r\n                                class=\"text-[10px] font-mono text-[#D4AF37] opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100 uppercase tracking-wider\">\r\n                                UI Design \/\/ React Native\r\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n\r\n                <!-- Project 3 -->\r\n                <a href=\"https:\/\/aorphis.com\/projects\"\r\n                    class=\"os-box group h-72 relative overflow-hidden cursor-pointer bg-black block\">\r\n                    <div class=\"corner-marker-btm\"><\/div>\r\n                    <div class=\"scan-line-anim\"><\/div>\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1535156411267-27b23328e129?q=80&w=1000&auto=format&fit=crop\"\r\n                        class=\"absolute inset-0 w-full h-full object-cover opacity-40 group-hover:opacity-80 transition-all duration-500 scale-100 group-hover:scale-105 grayscale group-hover:grayscale-0\"\r\n                        alt=\"Project Cover\">\r\n\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/50 to-transparent p-6 flex flex-col justify-end\">\r\n                        <div\r\n                            class=\"transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\">\r\n                            <h4 class=\"text-lg font-bold text-[#FFD700] mb-1\">SANDSTORM<\/h4>\r\n                            <p\r\n                                class=\"text-[10px] font-mono text-[#D4AF37] opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100 uppercase tracking-wider\">\r\n                                Fashion \/\/ Concept Art\r\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n\r\n                <!-- Project 4 -->\r\n                <a href=\"https:\/\/aorphis.com\/projects\"\r\n                    class=\"os-box group h-72 relative overflow-hidden cursor-pointer bg-black block\">\r\n                    <div class=\"corner-marker-btm\"><\/div>\r\n                    <div class=\"scan-line-anim\"><\/div>\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1620641788421-7a1c342ea42e?q=80&w=1000&auto=format&fit=crop\"\r\n                        class=\"absolute inset-0 w-full h-full object-cover opacity-40 group-hover:opacity-80 transition-all duration-500 scale-100 group-hover:scale-105 grayscale group-hover:grayscale-0\"\r\n                        alt=\"Project Cover\">\r\n\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/50 to-transparent p-6 flex flex-col justify-end\">\r\n                        <div\r\n                            class=\"transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\">\r\n                            <h4 class=\"text-lg font-bold text-[#FFD700] mb-1\">VOID RUNNER<\/h4>\r\n                            <p\r\n                                class=\"text-[10px] font-mono text-[#D4AF37] opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100 uppercase tracking-wider\">\r\n                                Motion \/\/ Cinema 4D\r\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n\r\n                <!-- Project 5 -->\r\n                <a href=\"https:\/\/aorphis.com\/projects\"\r\n                    class=\"os-box group h-72 relative overflow-hidden cursor-pointer bg-black block\">\r\n                    <div class=\"corner-marker-btm\"><\/div>\r\n                    <div class=\"scan-line-anim\"><\/div>\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1478760329108-5c3ed9d495a0?q=80&w=1000&auto=format&fit=crop\"\r\n                        class=\"absolute inset-0 w-full h-full object-cover opacity-40 group-hover:opacity-80 transition-all duration-500 scale-100 group-hover:scale-105 grayscale group-hover:grayscale-0\"\r\n                        alt=\"Project Cover\">\r\n\r\n                    <div\r\n                        class=\"absolute inset-0 bg-gradient-to-t from-black via-black\/50 to-transparent p-6 flex flex-col justify-end\">\r\n                        <div\r\n                            class=\"transform translate-y-4 group-hover:translate-y-0 transition-transform duration-300\">\r\n                            <h4 class=\"text-lg font-bold text-[#FFD700] mb-1\">NEO-GLYPHS<\/h4>\r\n                            <p\r\n                                class=\"text-[10px] font-mono text-[#D4AF37] opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100 uppercase tracking-wider\">\r\n                                Typography \/\/ Font Dev\r\n                            <\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/a>\r\n\r\n                <!-- Project 6 (Collab Card) -->\r\n                <div\r\n                    class=\"os-box group h-72 relative overflow-hidden cursor-pointer bg-[#0e0e0e] flex flex-col items-center justify-center border border-[#7d6519]\">\r\n                    <div class=\"corner-marker-btm\"><\/div>\r\n                    <div class=\"scan-line-anim\"><\/div>\r\n                    <div\r\n                        class=\"border border-[#7d6519] rounded-full p-4 mb-4 group-hover:border-[#FFD700] group-hover:bg-[#D4AF37]\/10 transition-all\">\r\n                        <i data-lucide=\"plus\" class=\"w-8 h-8 text-[#D4AF37]\"><\/i>\r\n                    <\/div>\r\n                    <h4 class=\"text-lg font-bold text-[#D4AF37] text-center\">INITIATE<br>NEW COLLAB<\/h4>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/section>\r\n\r\n\r\n        <!-- SECTION 3: ORACLE LINK (Socials & Chat) -->\r\n        <section id=\"oracle\" class=\"w-full\">\r\n            <div class=\"flex items-center gap-4 mb-8 border-b border-[#D4AF37]\/20 pb-2\">\r\n                <i data-lucide=\"message-square-code\" class=\"text-[#D4AF37]\"><\/i>\r\n                <h3 class=\"text-2xl font-bold tracking-widest text-[#FFD700]\">ORACLE LINK \/\/ COLLABORATION<\/h3>\r\n            <\/div>\r\n\r\n            <div class=\"grid md:grid-cols-3 gap-8\">\r\n                <!-- Info & Socials Side -->\r\n                <div class=\"md:col-span-1 space-y-8\">\r\n                    <p class=\"text-sm text-[#a8a095] leading-relaxed font-medium\">\r\n                        The channel is open. Propose an idea, a ritual, or a business venture. The system interprets\r\n                        intent in real-time.\r\n                    <\/p>\r\n\r\n                    <div class=\"space-y-4\">\r\n                        <h5\r\n                            class=\"text-xs uppercase tracking-widest mb-2 text-[#FFD700] border-b border-[#D4AF37]\/30 pb-1 w-max\">\r\n                            SOCIAL UPLINKS<\/h5>\r\n\r\n                        <!-- Social Button 1 -->\r\n                        <a href=\"https:\/\/www.instagram.com\/aorphisigils\/\" target=\"_blank\"\r\n                            class=\"flex items-center gap-3 text-xs tracking-widest text-[#D4AF37] hover:text-[#FFD700] group transition-all\">\r\n                            <div\r\n                                class=\"w-8 h-8 border border-[#D4AF37] flex items-center justify-center group-hover:bg-[#D4AF37] group-hover:text-black transition-all\">\r\n                                <i data-lucide=\"instagram\" class=\"w-4 h-4\"><\/i>\r\n                            <\/div>\r\n                            <span>INSTAGRAM_FEED<\/span>\r\n                        <\/a>\r\n\r\n                        <!-- Social Button 2: TIKTOK REPLACEMENT -->\r\n                        <a href=\"https:\/\/www.tiktok.com\/@aorphisigils\" target=\"_blank\"\r\n                            class=\"flex items-center gap-3 text-xs tracking-widest text-[#D4AF37] hover:text-[#FFD700] group transition-all\">\r\n                            <div\r\n                                class=\"w-8 h-8 border border-[#D4AF37] flex items-center justify-center group-hover:bg-[#D4AF37] group-hover:text-black transition-all\">\r\n                                <!-- Custom TikTok SVG -->\r\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\"\r\n                                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                                    stroke-linejoin=\"round\" class=\"w-4 h-4\">\r\n                                    <path d=\"M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5\"><\/path>\r\n                                <\/svg>\r\n                            <\/div>\r\n                            <span>TIKTOK_SIGNAL<\/span>\r\n                        <\/a>\r\n\r\n                        <!-- Social Button 3 -->\r\n                        <a href=\"mailto:entity@aorphis.com\"\r\n                            class=\"flex items-center gap-3 text-xs tracking-widest text-[#D4AF37] hover:text-[#FFD700] group transition-all\">\r\n                            <div\r\n                                class=\"w-8 h-8 border border-[#D4AF37] flex items-center justify-center group-hover:bg-[#D4AF37] group-hover:text-black transition-all\">\r\n                                <i data-lucide=\"mail\" class=\"w-4 h-4\"><\/i>\r\n                            <\/div>\r\n                            <span>DIRECT_BEAM<\/span>\r\n                        <\/a>\r\n                    <\/div>\r\n\r\n                    <div class=\"border border-[#D4AF37]\/30 p-4 font-mono bg-[#0a0a0a]\">\r\n                        <h5 class=\"text-xs uppercase tracking-widest mb-2 text-[#FFD700]\">CURRENT COORDINATES<\/h5>\r\n                        <p class=\"text-[10px] text-[#D4AF37]\/60\">\r\n                            LAT: 30.0444 N<br>\r\n                            LNG: 31.2357 E<br>\r\n                            SECURE_KEY: [ENCRYPTED]\r\n                        <\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Interactive Chat Terminal -->\r\n                <div class=\"md:col-span-2\">\r\n                    <div class=\"os-box p-4 h-[400px] flex flex-col relative bg-black\/90\">\r\n                        <div class=\"corner-marker\"><\/div>\r\n                        <div class=\"absolute top-2 right-2 text-[10px] text-[#D4AF37]\/50 font-mono\">TERMINAL_V.2.1\r\n                            [LOCAL_LINK]<\/div>\r\n\r\n                        <!-- Chat Output Area -->\r\n                        <div id=\"chat-output\" class=\"flex-grow overflow-y-auto mb-4 space-y-3 font-mono text-sm p-2\">\r\n                            <div class=\"text-[#D4AF37]\/50\">>> SYSTEM: CONNECTION ESTABLISHED.<\/div>\r\n                            <div class=\"text-[#D4AF37]\/50\">>> SYSTEM: RESTORING SESSION...<\/div>\r\n                        <\/div>\r\n\r\n                        <!-- Chat Input -->\r\n                        <div class=\"border-t border-[#D4AF37]\/30 pt-3 flex items-center\">\r\n                            <span class=\"text-[#D4AF37] mr-2\">>><\/span>\r\n                            <input type=\"text\" id=\"chat-input\"\r\n                                class=\"bg-transparent w-full text-[#D4AF37] focus:outline-none font-mono\"\r\n                                placeholder=\"Type your proposal...\" autocomplete=\"off\">\r\n                            <span class=\"chat-cursor\"><\/span>\r\n                        <\/div>\r\n                        <input type=\"file\" id=\"terminal-file-input\" style=\"display:none;\" \/>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n\r\n    <\/main>\r\n\r\n    <!-- Footer -->\r\n    <footer\r\n        class=\"w-full text-center py-8 text-[10px] text-[#D4AF37]\/30 uppercase tracking-[0.3em] relative z-10 border-t border-[#D4AF37]\/10 font-mono\">\r\n        &copy; 2026 AORPHIS \u2122 ALL RIGHTS RESERVED.\r\n    <\/footer>\r\n\r\n    <script>\r\n        \/\/ 1. Initialize Icons\r\n        lucide.createIcons();\r\n\r\n        \/\/ 2. Parallax Effect (Removed specific Grid logic, kept general if needed or remove entirely if noise covers it)\r\n        \/\/ Keeping it simple to avoid conflicts with noise bg\r\n\r\n        \/\/ 3. Timeline Logic\r\n        const observerOptions = {\r\n            root: null,\r\n            rootMargin: '-20% 0px -60% 0px',\r\n            threshold: 0\r\n        };\r\n\r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    document.querySelectorAll('.timeline-node').forEach(node => node.classList.remove('active'));\r\n                    const dateId = entry.target.getAttribute('data-date');\r\n                    const targetNode = document.getElementById(`link-${dateId}`);\r\n                    if (targetNode) targetNode.classList.add('active');\r\n                }\r\n            });\r\n        }, observerOptions);\r\n\r\n        document.querySelectorAll('.journal-entry').forEach(entry => {\r\n            observer.observe(entry);\r\n        });\r\n\r\n        \/\/ 4. TERMINAL LOGIC V.2.0 (INTERACTIVE)\r\n        const chatInput = document.getElementById('chat-input');\r\n        const chatOutput = document.getElementById('chat-output');\r\n        const fileInput = document.getElementById('terminal-file-input');\r\n\r\n        let chatState = 0; \/\/ 0:Init, 1:Seek, 2:Msg, 3:Contact, 4:File, 5:More?\r\n        let userData = { name: '', requests: [] };\r\n        let currentRequest = {};\r\n        let uploadedFiles = []; \/\/ Array of File objects\r\n\r\n        \/\/ Initial Greeting\r\n        setTimeout(() => {\r\n            renderMessage('SYSTEM', 'IDENTITY VERIFICATION REQUIRED.', '#D4AF37');\r\n            setTimeout(() => renderMessage('AORPHIS', 'WHO ARE YOU?', '#FFD700'), 500);\r\n        }, 800);\r\n\r\n        chatInput.addEventListener('keydown', (e) => {\r\n            if (e.key === 'Enter' && chatInput.value.trim() !== '') {\r\n                const text = chatInput.value.trim();\r\n                chatInput.value = '';\r\n\r\n                \/\/ Render User Msg\r\n                renderMessage('USER', text, '#D4AF37');\r\n\r\n                \/\/ Process State\r\n                processTerminalInput(text);\r\n            }\r\n        });\r\n\r\n        \/\/ File Input Listener\r\n        fileInput.addEventListener('change', (e) => {\r\n            if (fileInput.files.length > 0) {\r\n                const file = fileInput.files[0];\r\n                uploadedFiles.push(file); \/\/ Store file\r\n                renderMessage('SYSTEM', `FILE BUFFERED: ${file.name}`, '#00FF00');\r\n\r\n                \/\/ If we were waiting for file, proceed\r\n                if (chatState === 4) {\r\n                    finishRequestStep();\r\n                }\r\n            }\r\n        });\r\n\r\n        function processTerminalInput(text) {\r\n            const cleanText = text.toUpperCase();\r\n\r\n            \/\/ STATE 0: WAITING FOR NAME\r\n            if (chatState === 0) {\r\n                userData.name = text;\r\n                chatState = 1;\r\n                setTimeout(() => {\r\n                    renderMessage('AORPHIS', 'WHAT DO YOU SEEK?', '#FFD700');\r\n                    renderMessage('SYSTEM', '[A] MESSAGE TO WARLOCK', '#D4AF37');\r\n                    renderMessage('SYSTEM', '[B] MAGICAL SERVICE \/ COUNSELLING', '#D4AF37');\r\n                    renderMessage('SYSTEM', '[C] ARTISTIC\/BUSINESS PARTNERSHIP', '#D4AF37');\r\n                }, 600);\r\n            }\r\n            \/\/ STATE 1: WAITING FOR SELECTION (A, B, C)\r\n            else if (chatState === 1) {\r\n                if (['A', 'B', 'C'].includes(cleanText)) {\r\n                    currentRequest = { type: cleanText };\r\n                    chatState = 2; \/\/ Ask for Message\r\n\r\n                    let limitMsg = \"\";\r\n                    if (cleanText === 'A') limitMsg = \"(MAX 180 WORDS)\";\r\n                    if (cleanText === 'B') limitMsg = \"(SHORT 100 WORDS)\";\r\n                    if (cleanText === 'C') limitMsg = \"(UNLIMITED)\";\r\n\r\n                    setTimeout(() => renderMessage('SYSTEM', `ENTER MESSAGE ${limitMsg}:`, '#FFD700'), 500);\r\n                } else {\r\n                    renderMessage('SYSTEM', 'ERROR: INVALID SELECTION. TYPE A, B, OR C.', '#FF0000');\r\n                }\r\n            }\r\n            \/\/ STATE 2: WAITING FOR MESSAGE\r\n            else if (chatState === 2) {\r\n                \/\/ Word count validation could go here\r\n                currentRequest.message = text;\r\n\r\n                if (currentRequest.type === 'A') {\r\n                    \/\/ A: No contact needed per prompt logic (only B\/C said contact required)\r\n                    \/\/ But usually contact is good. Prompt: \"A - message... B ... + contact... C ... + contact\"\r\n                    finishRequestStep();\r\n                } else {\r\n                    chatState = 3; \/\/ Ask Contact\r\n                    setTimeout(() => renderMessage('SYSTEM', 'CONTACT COORDINATES REQUIRED:', '#FFD700'), 500);\r\n                }\r\n            }\r\n            \/\/ STATE 3: WAITING FOR CONTACT\r\n            else if (chatState === 3) {\r\n                currentRequest.contact = text;\r\n\r\n                if (currentRequest.type === 'C') {\r\n                    chatState = 4; \/\/ Ask File\r\n                    setTimeout(() => {\r\n                        renderMessage('SYSTEM', 'UPLOAD ARTIFACT\/FILE?', '#FFD700');\r\n                        \/\/ Create clickable link\r\n                        const linkId = 'upload-' + Date.now();\r\n                        const div = document.createElement('div');\r\n                        div.innerHTML = `<span style=\"color:#D4AF37; opacity:1;\">>> SYSTEM: <\/span> <span id=\"${linkId}\" style=\"color:#00FF00; text-decoration:underline; cursor:pointer;\">[CLICK TO UPLOAD]<\/span> OR TYPE \"NO\"`;\r\n                        chatOutput.appendChild(div);\r\n                        chatOutput.scrollTop = chatOutput.scrollHeight;\r\n\r\n                        document.getElementById(linkId).addEventListener('click', () => {\r\n                            fileInput.click();\r\n                        });\r\n                    }, 500);\r\n                } else {\r\n                    finishRequestStep();\r\n                }\r\n            }\r\n            \/\/ STATE 4: WAITING FOR FILE DECISION (if typed \"NO\")\r\n            else if (chatState === 4) {\r\n                if (cleanText === 'NO' || cleanText === 'SKIP') {\r\n                    renderMessage('SYSTEM', 'SKIPPING UPLOAD...', '#D4AF37');\r\n                    finishRequestStep();\r\n                } else {\r\n                    renderMessage('SYSTEM', 'INVALID. CLICK UPLOAD OR TYPE \"NO\".', '#FF0000');\r\n                }\r\n            }\r\n            \/\/ STATE 5: ANYTHING ELSE?\r\n            else if (chatState === 5) {\r\n                if (cleanText.includes('YES')) {\r\n                    chatState = 1; \/\/ Back to Seek\r\n                    setTimeout(() => {\r\n                        renderMessage('AORPHIS', 'WHAT DO YOU SEEK?', '#FFD700');\r\n                        renderMessage('SYSTEM', '[A] MESSAGE, [B] SERVICE, [C] PARTNERSHIP', '#D4AF37');\r\n                    }, 500);\r\n                } else {\r\n                    submitTerminalData();\r\n                }\r\n            }\r\n        }\r\n\r\n        function finishRequestStep() {\r\n            userData.requests.push(currentRequest);\r\n            currentRequest = {};\r\n            chatState = 5; \/\/ Anything else\r\n            setTimeout(() => renderMessage('AORPHIS', 'IS THERE ANYTHING ELSE?', '#FFD700'), 500);\r\n        }\r\n\r\n        function renderMessage(sender, text, color) {\r\n            const div = document.createElement('div');\r\n            \/\/ Check if text contains HTML (for the upload link)\r\n            if (text.includes('<span')) {\r\n                div.innerHTML = `<span style=\"color:${color}; opacity:0.7;\">[${sender}]:<\/span> ${text}`;\r\n            } else {\r\n                div.innerHTML = `<span style=\"color:${color}; opacity:0.7;\">[${sender}]:<\/span> ${text}`;\r\n            }\r\n            chatOutput.appendChild(div);\r\n            chatOutput.scrollTop = chatOutput.scrollHeight;\r\n        }\r\n\r\n        async function submitTerminalData() {\r\n            renderMessage('SYSTEM', 'COMPILING DATA...', '#D4AF37');\r\n\r\n            const formData = new FormData();\r\n            formData.append('name', userData.name);\r\n            formData.append('requests', JSON.stringify(userData.requests));\r\n\r\n            uploadedFiles.forEach((file, index) => {\r\n                formData.append('files[]', file);\r\n            });\r\n\r\n            try {\r\n                \/\/ Use absolute path to ensure we hit the file in the root directory\r\n                \/\/ regardless of where this page is loaded from (e.g. \/test\/ or \/v2\/)\r\n                const response = await fetch('\/terminal_core.php', {\r\n                    method: 'POST',\r\n                    body: formData\r\n                });\r\n\r\n                \/\/ Get raw text to debug PHP warnings\/errors that aren't JSON\r\n                const rawText = await response.text();\r\n                console.log('Server Response:', rawText);\r\n\r\n                let result;\r\n                try {\r\n                    result = JSON.parse(rawText);\r\n                } catch (e) {\r\n                    \/\/ JSON Parse failed, likely a PHP Fatal Error or HTML output\r\n                    throw new Error(`INVALID RESPONSE. HTTP ${response.status}. RAW: ${rawText.substring(0, 100)}...`);\r\n                }\r\n\r\n                if (response.ok && result.status === 'success') {\r\n                    renderMessage('SYSTEM', 'TRANSMISSION SENT SUCCESSFULLY.', '#00FF00');\r\n                    renderMessage('AORPHIS', 'THANK YOU. THE ORACLE HAS RECEIVED YOUR OFFERING.', '#FFD700');\r\n                    chatInput.disabled = true;\r\n                } else {\r\n                    renderMessage('SYSTEM', `TRANSMISSION ERROR: ${result.message || 'UNKNOWN SERVER ERROR'}`, '#FF0000');\r\n                }\r\n\r\n            } catch (error) {\r\n                console.error(error);\r\n                renderMessage('SYSTEM', `NETWORK ERROR: ${error.message}`, '#FF0000');\r\n            }\r\n        }\r\n\r\n        function generateResponse() {\r\n            \/\/ Legacy function override or removal\r\n            return \"\";\r\n        }\r\n\r\n        \/\/ Smooth Scroll\r\n        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n            anchor.addEventListener('click', function (e) {\r\n                e.preventDefault();\r\n                document.querySelector(this.getAttribute('href')).scrollIntoView({\r\n                    behavior: 'smooth'\r\n                });\r\n            });\r\n        });\r\n\r\n        \/\/ 5. Hero Button Animation on Click\r\n        const heroBtns = document.querySelectorAll('.hero-btn');\r\n        heroBtns.forEach(btn => {\r\n            btn.addEventListener('click', () => {\r\n                const bar = btn.querySelector('.loading-bar');\r\n                if (bar) {\r\n                    \/\/ Trigger reflow to restart animation if needed, \r\n                    \/\/ or just set width to full to animate\r\n                    bar.classList.remove('w-full');\r\n                    void bar.offsetWidth; \/\/ Force reflow\r\n                    bar.classList.add('w-full');\r\n                }\r\n            });\r\n        });\r\n\r\n    <\/script>\r\n<\/body>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AORPHIS \/\/ TECHNO-NECROMANCER<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":79,"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":354,"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/pages\/7\/revisions\/354"}],"wp:attachment":[{"href":"https:\/\/aorphis.com\/home\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}