{"id":124,"date":"2026-01-06T09:11:45","date_gmt":"2026-01-06T09:11:45","guid":{"rendered":"https:\/\/aorphis.com\/home\/?page_id=124"},"modified":"2026-01-06T16:31:26","modified_gmt":"2026-01-06T16:31:26","slug":"products","status":"publish","type":"page","link":"https:\/\/aorphis.com\/app\/products\/","title":{"rendered":"Products"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n PRODUCT \/\/ MAGIC_WARRIOR<\/title>\r\n \r\n <!-- FAVICON -->\r\n <link rel=\"icon\" 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 -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@400;500;600;700&display=swap\" 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: #7d6b49;\r\n --gold-bright: #d4af37;\r\n --magic-glow: rgba(212, 175, 55, 0.2);\r\n }\r\n\r\n body {\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 h1, h2, h3, h4, .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 \/* --- AMBIENT EFFECTS --- *\/\r\n .noise-bg {\r\n position: fixed; inset: 0; pointer-events: none; z-index: 40; 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 @keyframes noiseShift { 0% { transform: translate(0,0); } 100% { transform: translate(1%, 1%); } }\r\n\r\n .scanlines {\r\n position: fixed; inset: 0; pointer-events: none; z-index: 50;\r\n background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(212, 175, 55, 0.05) 50%, rgba(212, 175, 55, 0.05)); \r\n background-size: 100% 4px;\r\n animation: scanMove 60s linear infinite;\r\n }\r\n @keyframes scanMove { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }\r\n\r\n \/* --- UI COMPONENTS --- *\/\r\n .os-box {\r\n position: relative;\r\n background-color: var(--obsidian);\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 }\r\n .os-box:hover {\r\n border-color: var(--gold-bright);\r\n box-shadow: 0 0 30px var(--magic-glow);\r\n }\r\n \r\n \/* Transparent\/Borderless Container *\/\r\n .os-box-transparent {\r\n position: relative;\r\n background: transparent;\r\n border: none;\r\n }\r\n\r\n \/* Scrollbar *\/\r\n ::-webkit-scrollbar { width: 6px; height: 6px; background: var(--void-black); }\r\n ::-webkit-scrollbar-thumb { background: #333; }\r\n ::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }\r\n\r\n \/* Corner Markers *\/\r\n .corner-marker::before, .corner-marker::after, .corner-marker-btm::before, .corner-marker-btm::after {\r\n content: ''; position: absolute; width: 6px; 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 .corner-marker::before { top: -3px; left: -3px; transform: rotate(45deg); }\r\n .corner-marker::after { top: -3px; right: -3px; transform: rotate(45deg); }\r\n .corner-marker-btm::before { bottom: -3px; left: -3px; transform: rotate(45deg); }\r\n .corner-marker-btm::after { bottom: -3px; right: -3px; transform: rotate(45deg); }\r\n\r\n \/* Hover Scanline *\/\r\n .scan-line-anim {\r\n position: absolute; top: 0; left: 0; width: 100%; height: 2px;\r\n background: var(--gold-bright);\r\n box-shadow: 0 0 15px var(--gold-bright);\r\n opacity: 0; z-index: 5; pointer-events: none;\r\n }\r\n .os-box:hover .scan-line-anim, .gallery-item:hover .scan-line-anim { opacity: 1; animation: scan 1.5s linear infinite; }\r\n @keyframes scan { 0% { top: 0%; opacity: 0; } 100% { top: 100%; opacity: 0; } }\r\n\r\n \/* Buy Button *\/\r\n .buy-btn {\r\n background: var(--gold-dim);\r\n color: #000;\r\n font-family: 'Orbitron', sans-serif;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n letter-spacing: 0.1em;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .buy-btn:hover {\r\n background: var(--gold-bright);\r\n box-shadow: 0 0 20px var(--gold-bright);\r\n }\r\n .buy-btn::before {\r\n content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\r\n transition: 0.5s;\r\n }\r\n .buy-btn:hover::before { left: 100%; }\r\n\r\n \/* Lightbox *\/\r\n #lightbox {\r\n opacity: 0; pointer-events: none; transition: opacity 0.3s ease;\r\n }\r\n #lightbox.active {\r\n opacity: 1; pointer-events: all;\r\n }\r\n .nav-btn-lightbox {\r\n color: var(--gold-dim);\r\n transition: color 0.3s;\r\n padding: 0.5rem;\r\n cursor: pointer;\r\n font-family: 'Orbitron', monospace;\r\n font-size: 1.25rem;\r\n }\r\n .nav-btn-lightbox:hover { color: var(--gold-bright); text-shadow: 0 0 10px var(--gold-bright); }\r\n\r\n \/* Stat Bar *\/\r\n .stat-track { width: 100%; height: 4px; background: #1a1a1a; margin-top: 4px; border: 1px solid #333; }\r\n .stat-fill { height: 100%; background: var(--gold-dim); width: 0%; transition: width 1s ease-out; }\r\n \r\n \/* Circuit Line Logic *\/\r\n .circuit-node {\r\n width: 4px; height: 4px; background: #d4af37; border-radius: 50%; box-shadow: 0 0 4px #d4af37; z-index: 10;\r\n }\r\n\r\n \/* NEW ANIMATIONS *\/\r\n @keyframes circuitFlow {\r\n 0% { background-position: 0% -100%; }\r\n 100% { background-position: 0% 200%; }\r\n }\r\n .animate-circuit-flow {\r\n background: linear-gradient(to bottom, transparent 0%, #d4af37 50%, transparent 100%);\r\n background-size: 100% 50%; \/* Height of the 'pulse' *\/\r\n background-repeat: no-repeat;\r\n animation: circuitFlow 2s linear infinite;\r\n }\r\n\r\n @keyframes pointRight {\r\n 0%, 100% { transform: translateX(0); opacity: 0.7; }\r\n 50% { transform: translateX(5px); opacity: 1; }\r\n }\r\n .animate-point-right {\r\n animation: pointRight 1.5s ease-in-out infinite;\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body class=\"min-h-screen flex flex-col p-4 md:p-8 relative\">\r\n\r\n <!-- Ambient Layers -->\r\n <div class=\"fixed inset-0 bg-black z-0\"><\/div>\r\n <div class=\"noise-bg\"><\/div>\r\n <div class=\"scanlines\"><\/div>\r\n\r\n <!-- MAIN CONTAINER -->\r\n <div class=\"w-full max-w-7xl mx-auto flex-grow flex flex-col gap-8 relative z-10 h-full\">\r\n \r\n <!-- TOP NAV -->\r\n <a href=\"https:\/\/aorphis.com\/home\" class=\"flex items-center \r\n gap-2 text-[#7d6519] hover:text-[#d4af37] \r\n transition-colors w-max group\">\r\n <i data-lucide=\"arrow-left\" class=\"w-5 h-5 \r\n group-hover:-translate-x-1 transition\r\n -transform\"><\/i>\r\n <span class=\"font-mono text-xs tracking\r\n -widest uppercase\">Return to Archives\r\n <\/span>\r\n<\/a>\r\n\r\n <!-- SPLIT LAYOUT -->\r\n <div class=\"flex flex-col lg:flex-row gap-12 h-full\">\r\n \r\n <!-- LEFT PANEL: PRODUCT DISPLAY & STATS -->\r\n <div class=\"w-full lg:w-1\/3 flex flex-col gap-6\">\r\n \r\n <!-- PRODUCT HEADER -->\r\n <div class=\"text-center\">\r\n <h1 class=\"text-2xl md:text-4xl font-black mb-6 tracking-tighter text-[#d4af37] drop-shadow-[0_0_10px_rgba(212,175,55,0.3)]\">\r\n TEST ITEM<br>T-SHIRT\r\n <\/h1>\r\n\r\n <!-- BORDERLESS PNG SLOT (CLEAN) -->\r\n <!-- Completely transparent container, ready for a PNG -->\r\n <div class=\"os-box-transparent w-full aspect-square flex items-center justify-center relative mb-4\">\r\n \r\n <!-- Placeholder IMG tag (opacity 0) to maintain aspect ratio -->\r\n <img decoding=\"async\" src=\"https:\/\/aorphis.com\/wp-content\/uploads\/2026\/01\/Gemini_Generated_Image_zaneszzaneszzane.png\" \r\n class=\"w-full h-full object-contain z-10 opacity-100\"\r\n alt=\"Product Slot\">\r\n \r\n <!-- Subtle radial glow behind product -->\r\n <div class=\"absolute inset-0 bg-radial-gradient from-[#d4af37]\/15 to-transparent pointer-events-none\"><\/div>\r\n <\/div>\r\n\r\n <!-- META INFO -->\r\n <div class=\"font-mono space-y-2 border-b border-[#7d6519]\/30 pb-4\">\r\n <div class=\"text-[#d4af37] text-sm tracking-[0.2em] font-bold uppercase\">APPAREL_CLASS: LIGHT_ARMOR<\/div>\r\n <div class=\"text-[#7d6519] text-xs tracking-widest\">AVAILABLE_SIZES: S \/\/ M \/\/ L \/\/ XL<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- DESCRIPTION LOG & STATS -->\r\n <div class=\"os-box flex-grow min-h-[250px] flex flex-col p-6 bg-[#0a0a0a]\/90\">\r\n <div class=\"corner-marker\"><\/div>\r\n <div class=\"flex items-center justify-between mb-4 border-b border-[#7d6519]\/30 pb-2\">\r\n <h3 class=\"text-lg font-bold\">ITEM_STATS<\/h3>\r\n <i data-lucide=\"bar-chart-2\" class=\"w-4 h-4 text-[#7d6519]\"><\/i>\r\n <\/div>\r\n \r\n <div class=\"overflow-y-auto pr-2 text-sm leading-relaxed text-[#a8a095] font-medium space-y-6 h-full custom-scrollbar\">\r\n <p>\r\n Woven from high-tensile organic cotton and imbued with digital sigils. This garment provides minimal physical protection but maximum aesthetic resonance in the urban sprawl.\r\n <\/p>\r\n\r\n <!-- RPG STATS -->\r\n <div class=\"space-y-3 font-mono text-xs\">\r\n <div>\r\n <div class=\"flex justify-between text-[#d4af37] mb-1\"><span>DURABILITY<\/span> <span>85\/100<\/span><\/div>\r\n <div class=\"stat-track\"><div class=\"stat-fill\" style=\"width: 85%;\"><\/div><\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"flex justify-between text-[#d4af37] mb-1\"><span>ARCANA<\/span> <span>40\/100<\/span><\/div>\r\n <div class=\"stat-track\"><div class=\"stat-fill\" style=\"width: 40%;\"><\/div><\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"flex justify-between text-[#d4af37] mb-1\"><span>STEALTH<\/span> <span>60\/100<\/span><\/div>\r\n <div class=\"stat-track\"><div class=\"stat-fill\" style=\"width: 60%;\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- RIGHT PANEL: VERTICAL INVENTORY & PERKS (STACKED WITH BANNER) -->\r\n <div class=\"w-full lg:w-2\/3 flex flex-col gap-8\">\r\n \r\n <!-- 3 Columns Grid -->\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 items-start\">\r\n \r\n <!-- COLUMN 1 -->\r\n <div class=\"flex flex-col items-center gap-0 group w-full\">\r\n <!-- 9:16 Media Slot -->\r\n <div class=\"os-box w-full aspect-[9\/16] relative cursor-pointer gallery-item mb-1 bg-[#0e0e0e] flex items-center justify-center\"\r\n data-type=\"image\" \r\n data-src=\"https:\/\/images.unsplash.com\/photo-1515886657613-9f3515b0c78f?q=80&w=1000\"\r\n data-caption=\"Detail_View: Fabric_Texture\">\r\n <div class=\"scan-line-anim\"><\/div>\r\n <i data-lucide=\"image\" class=\"w-8 h-8 text-[#333]\"><\/i>\r\n <div class=\"absolute bottom-0 right-0 bg-black\/80 text-[#d4af37] text-[10px] px-2 font-mono border-t border-l border-[#d4af37]\">IMG<\/div>\r\n <\/div>\r\n\r\n <!-- Circuit Connection (ANIMATED) -->\r\n <div class=\"flex flex-col items-center h-16 w-full justify-center relative\">\r\n <div class=\"circuit-node mb-[1px]\"><\/div>\r\n <!-- Static Base Line -->\r\n <div class=\"w-px h-full bg-[#7d6b49]\/30 relative overflow-hidden\">\r\n <!-- Animated Pulse -->\r\n <div class=\"absolute inset-0 animate-circuit-flow\"><\/div>\r\n <\/div>\r\n <div class=\"circuit-node mt-[1px]\"><\/div>\r\n <\/div>\r\n \r\n <!-- Icon -->\r\n <div class=\"os-box w-10 h-10 flex items-center justify-center bg-black z-10 mb-3 border border-[#7d6519] group-hover:border-[#d4af37] transition-colors\">\r\n <div class=\"corner-marker\"><\/div>\r\n <i data-lucide=\"shield\" class=\"w-5 h-5 text-[#d4af37]\"><\/i>\r\n <\/div>\r\n\r\n <!-- Perk List -->\r\n <div class=\"text-center w-full\">\r\n <h4 class=\"text-[#d4af37] font-bold text-xs tracking-widest mb-2 border-b border-[#7d6519]\/30 pb-1 mx-auto w-max\">MATERIAL_DATA<\/h4>\r\n <ul class=\"text-[10px] font-mono text-[#a8a095] space-y-1 uppercase tracking-wider\">\r\n <li>100% Cotton<\/li>\r\n <li>Breathable Weave<\/li>\r\n <li>Reinforced Stitching<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- COLUMN 2 (Middle) -->\r\n <div class=\"flex flex-col items-center gap-0 group w-full\"> \r\n <!-- 9:16 Media Slot -->\r\n <div class=\"os-box w-full aspect-[9\/16] relative cursor-pointer gallery-item mb-1 bg-[#0e0e0e] flex items-center justify-center\"\r\n data-type=\"image\" \r\n data-src=\"https:\/\/images.unsplash.com\/photo-1503341455253-b2e72333dbdb?q=80&w=1000\"\r\n data-caption=\"Model_View: Street_Fit\">\r\n <div class=\"scan-line-anim\"><\/div>\r\n <i data-lucide=\"image\" class=\"w-8 h-8 text-[#333]\"><\/i>\r\n <div class=\"absolute bottom-0 right-0 bg-black\/80 text-[#d4af37] text-[10px] px-2 font-mono border-t border-l border-[#d4af37]\">IMG<\/div>\r\n <\/div>\r\n\r\n <!-- Circuit Connection (ANIMATED) -->\r\n <div class=\"flex flex-col items-center h-16 w-full justify-center relative\">\r\n <div class=\"circuit-node mb-[1px]\"><\/div>\r\n <div class=\"w-px h-full bg-[#7d6b49]\/30 relative overflow-hidden\">\r\n <div class=\"absolute inset-0 animate-circuit-flow\" style=\"animation-delay: 0.5s;\"><\/div>\r\n <\/div>\r\n <div class=\"circuit-node mt-[1px]\"><\/div>\r\n <\/div>\r\n\r\n <!-- Icon -->\r\n <div class=\"os-box w-10 h-10 flex items-center justify-center bg-black z-10 mb-3 border border-[#7d6519] group-hover:border-[#d4af37] transition-colors\">\r\n <div class=\"corner-marker\"><\/div>\r\n <i data-lucide=\"zap\" class=\"w-5 h-5 text-[#d4af37]\"><\/i>\r\n <\/div>\r\n\r\n <!-- Perk List -->\r\n <div class=\"text-center w-full\">\r\n <h4 class=\"text-[#d4af37] font-bold text-xs tracking-widest mb-2 border-b border-[#7d6519]\/30 pb-1 mx-auto w-max\">ENCHANTMENTS<\/h4>\r\n <ul class=\"text-[10px] font-mono text-[#a8a095] space-y-1 uppercase tracking-wider\">\r\n <li>+5 Charisma<\/li>\r\n <li>Night Vision (False)<\/li>\r\n <li>Machine Washable<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- COLUMN 3 -->\r\n <div class=\"flex flex-col items-center gap-0 group w-full\">\r\n <!-- 9:16 Media Slot -->\r\n <div class=\"os-box w-full aspect-[9\/16] relative cursor-pointer gallery-item mb-1 bg-[#0e0e0e] flex items-center justify-center\"\r\n data-type=\"video\" \r\n data-src=\"https:\/\/assets.mixkit.co\/videos\/preview\/mixkit-man-dancing-under-colored-lights-1241-large.mp4\"\r\n data-caption=\"Motion_Test: Flexibility\">\r\n <div class=\"scan-line-anim\"><\/div>\r\n <div class=\"absolute inset-0 flex items-center justify-center z-10 pointer-events-none\">\r\n <i data-lucide=\"play-circle\" class=\"w-12 h-12 text-[#d4af37] drop-shadow-md opacity-50\"><\/i>\r\n <\/div>\r\n <div class=\"absolute bottom-0 right-0 bg-black\/80 text-[#d4af37] text-[10px] px-2 font-mono border-t border-l border-[#d4af37]\">VID<\/div>\r\n <\/div>\r\n\r\n <!-- Circuit Connection (ANIMATED) -->\r\n <div class=\"flex flex-col items-center h-16 w-full justify-center relative\">\r\n <div class=\"circuit-node mb-[1px]\"><\/div>\r\n <div class=\"w-px h-full bg-[#7d6b49]\/30 relative overflow-hidden\">\r\n <div class=\"absolute inset-0 animate-circuit-flow\" style=\"animation-delay: 1s;\"><\/div>\r\n <\/div>\r\n <div class=\"circuit-node mt-[1px]\"><\/div>\r\n <\/div>\r\n\r\n <!-- Icon -->\r\n <div class=\"os-box w-10 h-10 flex items-center justify-center bg-black z-10 mb-3 border border-[#7d6519] group-hover:border-[#d4af37] transition-colors\">\r\n <div class=\"corner-marker\"><\/div>\r\n <i data-lucide=\"truck\" class=\"w-5 h-5 text-[#d4af37]\"><\/i>\r\n <\/div>\r\n\r\n <!-- Perk List -->\r\n <div class=\"text-center w-full\">\r\n <h4 class=\"text-[#d4af37] font-bold text-xs tracking-widest mb-2 border-b border-[#7d6519]\/30 pb-1 mx-auto w-max\">LOGISTICS<\/h4>\r\n <ul class=\"text-[10px] font-mono text-[#a8a095] space-y-1 uppercase tracking-wider\">\r\n <li>Global Shipping<\/li>\r\n <li>Tracking ID: Included<\/li>\r\n <li>Void-Safe Packaging<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- NEW BANNER SLOT -->\r\n <div class=\"os-box w-full aspect-[3\/1] relative flex items-center justify-center bg-[#0e0e0e] group cursor-pointer hover:border-[#d4af37] transition-all mt-4\">\r\n <div class=\"corner-marker\"><\/div>\r\n <div class=\"corner-marker-btm\"><\/div>\r\n <div class=\"scan-line-anim\"><\/div>\r\n <div class=\"text-center\">\r\n <div class=\"text-[#d4af37]\/50 font-mono tracking-widest text-xs mb-1\">BANNER_AD_SPACE<\/div>\r\n <div class=\"text-[#333] font-mono text-[10px]\">[INSERT_MEDIA_1200x400]<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- PRICE & BUY (MOVED HERE) -->\r\n <div class=\"flex flex-col gap-4 w-full lg:items-end lg:mt-4\">\r\n <!-- Price Display -->\r\n <div class=\"flex justify-between items-end px-2 w-full lg:w-72 border-b border-[#7d6519]\/30 pb-2 lg:border-none lg:pb-0\">\r\n <span class=\"text-xs text-[#7d6519] font-mono tracking-widest uppercase mb-1\">UNIT_COST<\/span>\r\n <span class=\"text-3xl text-[#d4af37] font-header font-bold tracking-wider\">45.00\u20ac<\/span>\r\n <\/div>\r\n\r\n <!-- Buy Container with Animated Arrow -->\r\n <div class=\"flex items-center gap-4 w-full lg:w-auto justify-center lg:justify-end\">\r\n \r\n <!-- Animated Pointing Arrow -->\r\n <i data-lucide=\"move-right\" class=\"text-[#d4af37] w-8 h-8 animate-point-right hidden lg:block\"><\/i>\r\n \r\n <!-- Buy Button -->\r\n <button class=\"buy-btn w-full lg:w-72 py-4 text-center cursor-pointer group flex items-center justify-center gap-2 border border-[#d4af37]\">\r\n <span>INITIATE_ACQUISITION<\/span>\r\n <i data-lucide=\"shopping-bag\" class=\"w-5 h-5 group-hover:animate-bounce\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- FOOTER: RELATED PROJECTS SLIDER -->\r\n <div class=\"w-full border-t border-[#7d6519]\/30 pt-4 pb-8 mt-8\">\r\n <h4 class=\"text-sm font-bold text-[#7d6519] mb-4 tracking-widest pl-2\">RELATED_ARTIFACTS \/\/<\/h4>\r\n \r\n <div class=\"flex gap-4 overflow-x-auto pb-4 custom-scrollbar snap-x\">\r\n \r\n <!-- Slide Item 1 -->\r\n <a href=\"#\" class=\"group shrink-0 snap-start flex items-center gap-3 pr-4 hover:bg-[#d4af37]\/5 transition-colors p-2 border border-transparent hover:border-[#7d6519]\/30\">\r\n <div class=\"os-box w-16 h-16 relative flex items-center justify-center bg-black\/50 overflow-hidden shrink-0\">\r\n <div class=\"corner-marker\"><\/div>\r\n <div class=\"corner-marker-btm\"><\/div>\r\n <!-- Placeholder -->\r\n <div class=\"w-full h-full bg-[#111] flex items-center justify-center text-[#333] text-[10px] font-mono\">IMG<\/div>\r\n <\/div>\r\n <div class=\"flex flex-col justify-center w-24\">\r\n <span class=\"text-[#d4af37] font-bold text-xs tracking-wider group-hover:text-white transition-colors truncate\">CYBER MASK<\/span>\r\n <span class=\"text-[#7d6519] text-[10px] font-mono\">ACCESSORY<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Slide Item 2 -->\r\n <a href=\"#\" class=\"group shrink-0 snap-start flex items-center gap-3 pr-4 hover:bg-[#d4af37]\/5 transition-colors p-2 border border-transparent hover:border-[#7d6519]\/30\">\r\n <div class=\"os-box w-16 h-16 relative flex items-center justify-center bg-black\/50 overflow-hidden shrink-0\">\r\n <div class=\"corner-marker\"><\/div>\r\n <div class=\"corner-marker-btm\"><\/div>\r\n <!-- Placeholder -->\r\n <div class=\"w-full h-full bg-[#111] flex items-center justify-center text-[#333] text-[10px] font-mono\">IMG<\/div>\r\n <\/div>\r\n <div class=\"flex flex-col justify-center w-24\">\r\n <span class=\"text-[#d4af37] font-bold text-xs tracking-wider group-hover:text-white transition-colors truncate\">DATA HOODIE<\/span>\r\n <span class=\"text-[#7d6519] text-[10px] font-mono\">APPAREL<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- Slide Item 3 -->\r\n <a href=\"#\" class=\"group shrink-0 snap-start flex items-center gap-3 pr-4 hover:bg-[#d4af37]\/5 transition-colors p-2 border border-transparent hover:border-[#7d6519]\/30\">\r\n <div class=\"os-box w-16 h-16 relative flex items-center justify-center bg-black\/50 overflow-hidden shrink-0\">\r\n <div class=\"corner-marker\"><\/div>\r\n <div class=\"corner-marker-btm\"><\/div>\r\n <!-- Placeholder -->\r\n <div class=\"w-full h-full bg-[#111] flex items-center justify-center text-[#333] text-[10px] font-mono\">IMG<\/div>\r\n <\/div>\r\n <div class=\"flex flex-col justify-center w-24\">\r\n <span class=\"text-[#d4af37] font-bold text-xs tracking-wider group-hover:text-white transition-colors truncate\">VOID BOOTS<\/span>\r\n <span class=\"text-[#7d6519] text-[10px] font-mono\">FOOTWEAR<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- LIGHTBOX MODAL -->\r\n <div id=\"lightbox\" class=\"fixed inset-0 z-[100] flex items-center justify-center bg-black\/90 backdrop-blur-sm p-4\">\r\n \r\n <div class=\"os-box w-full max-w-5xl max-h-[90vh] flex flex-col bg-[#050505] shadow-[0_0_50px_rgba(0,0,0,0.9)] relative\">\r\n \r\n <button id=\"lightbox-close\" class=\"absolute -top-10 right-0 text-[#d4af37] hover:text-white font-mono text-xl\">[X]<\/button>\r\n <div class=\"corner-marker\"><\/div>\r\n <div class=\"corner-marker-btm\"><\/div>\r\n \r\n <!-- Content Container -->\r\n <div id=\"lightbox-content\" class=\"flex-grow flex items-center justify-center p-2 bg-black overflow-hidden relative min-h-[50vh]\">\r\n <!-- Img\/Video injected here -->\r\n <\/div>\r\n \r\n <!-- Footer: Caption + Nav -->\r\n <div class=\"p-4 border-t border-[#7d6519] bg-[#0a0a0a] flex flex-col md:flex-row justify-between items-center gap-4\">\r\n <h3 id=\"lightbox-caption\" class=\"text-[#d4af37] font-header text-lg\">ASSET_NAME<\/h3>\r\n \r\n <div class=\"flex items-center gap-6 select-none\">\r\n <button id=\"lightbox-prev\" class=\"nav-btn-lightbox\">[<]<\/button>\r\n <span id=\"lightbox-counter\" class=\"text-[#7d6519] font-mono text-xs\">1 \/ 3<\/span>\r\n <button id=\"lightbox-next\" class=\"nav-btn-lightbox\">[>]<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n lucide.createIcons();\r\n\r\n \/\/ LIGHTBOX LOGIC\r\n const galleryItems = Array.from(document.querySelectorAll('.gallery-item'));\r\n const lightbox = document.getElementById('lightbox');\r\n const lightboxContent = document.getElementById('lightbox-content');\r\n const lightboxCaption = document.getElementById('lightbox-caption');\r\n const lightboxCounter = document.getElementById('lightbox-counter');\r\n const closeBtn = document.getElementById('lightbox-close');\r\n const prevBtn = document.getElementById('lightbox-prev');\r\n const nextBtn = document.getElementById('lightbox-next');\r\n \r\n let currentIndex = 0;\r\n\r\n function openLightbox(index) {\r\n currentIndex = index;\r\n const item = galleryItems[currentIndex];\r\n const type = item.getAttribute('data-type');\r\n const src = item.getAttribute('data-src');\r\n const caption = item.getAttribute('data-caption');\r\n\r\n lightboxContent.innerHTML = ''; \r\n\r\n if (!src) return; \/\/ Guard against empty placeholders\r\n\r\n if (type === 'image') {\r\n const img = document.createElement('img');\r\n img.src = src;\r\n img.className = \"max-w-full max-h-[80vh] object-contain border border-[#333]\";\r\n lightboxContent.appendChild(img);\r\n } else if (type === 'video') {\r\n const video = document.createElement('video');\r\n video.src = src;\r\n video.controls = true;\r\n video.autoplay = true;\r\n video.className = \"max-w-full max-h-[80vh] border border-[#333]\";\r\n lightboxContent.appendChild(video);\r\n }\r\n\r\n lightboxCaption.innerText = caption;\r\n lightboxCounter.innerText = `${currentIndex + 1} \/ ${galleryItems.length}`;\r\n lightbox.classList.add('active');\r\n }\r\n\r\n function closeLightbox() {\r\n lightbox.classList.remove('active');\r\n setTimeout(() => { lightboxContent.innerHTML = ''; }, 300);\r\n }\r\n\r\n function nextImage() {\r\n let nextIndex = currentIndex + 1;\r\n if (nextIndex >= galleryItems.length) nextIndex = 0;\r\n openLightbox(nextIndex);\r\n }\r\n\r\n function prevImage() {\r\n let prevIndex = currentIndex - 1;\r\n if (prevIndex < 0) prevIndex = galleryItems.length - 1;\r\n openLightbox(prevIndex);\r\n }\r\n\r\n \/\/ SWIPE SUPPORT\r\n let touchStartX = 0;\r\n let touchEndX = 0;\r\n\r\n lightbox.addEventListener('touchstart', (e) => {\r\n touchStartX = e.changedTouches[0].screenX;\r\n }, {passive: true});\r\n\r\n lightbox.addEventListener('touchend', (e) => {\r\n touchEndX = e.changedTouches[0].screenX;\r\n handleSwipe();\r\n }, {passive: true});\r\n\r\n function handleSwipe() {\r\n const threshold = 50; \r\n if (touchEndX < touchStartX - threshold) {\r\n nextImage(); \/\/ Swipe Left -> Next\r\n }\r\n if (touchEndX > touchStartX + threshold) {\r\n prevImage(); \/\/ Swipe Right -> Prev\r\n }\r\n }\r\n\r\n \/\/ Event Listeners\r\n galleryItems.forEach((item, index) => {\r\n item.addEventListener('click', () => {\r\n if (item.getAttribute('data-src')) openLightbox(index);\r\n });\r\n });\r\n\r\n closeBtn.addEventListener('click', closeLightbox);\r\n nextBtn.addEventListener('click', (e) => { e.stopPropagation(); nextImage(); });\r\n prevBtn.addEventListener('click', (e) => { e.stopPropagation(); prevImage(); });\r\n\r\n lightbox.addEventListener('click', (e) => {\r\n if (e.target === lightbox || e.target.id === 'lightbox-content') {\r\n closeLightbox();\r\n }\r\n });\r\n\r\n \/\/ Keyboard Navigation\r\n document.addEventListener('keydown', (e) => {\r\n if (!lightbox.classList.contains('active')) return;\r\n if (e.key === 'Escape') closeLightbox();\r\n if (e.key === 'ArrowRight') nextImage();\r\n if (e.key === 'ArrowLeft') prevImage();\r\n });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\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>PRODUCT \/\/ MAGIC_WARRIOR<\/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-124","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aorphis.com\/app\/wp-json\/wp\/v2\/pages\/124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aorphis.com\/app\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aorphis.com\/app\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aorphis.com\/app\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aorphis.com\/app\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":0,"href":"https:\/\/aorphis.com\/app\/wp-json\/wp\/v2\/pages\/124\/revisions"}],"wp:attachment":[{"href":"https:\/\/aorphis.com\/app\/wp-json\/wp\/v2\/media?parent=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}