{"id":143,"date":"2026-01-06T15:34:48","date_gmt":"2026-01-06T15:34:48","guid":{"rendered":"https:\/\/aorphis.com\/home\/?page_id=143"},"modified":"2026-02-17T12:06:45","modified_gmt":"2026-02-17T12:06:45","slug":"brands","status":"publish","type":"page","link":"https:\/\/aorphis.com\/app\/brands\/","title":{"rendered":"Brands"},"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 ENTITY \/\/ FRAMESHOT.PRODUCTIONS<\/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: Corporate Mysticism *\/\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 --tech-cyan: #00d4d4; \/* Subtle accent for Brand\/Tech feel *\/\r\n --magic-glow: rgba(212, 175, 55, 0.15);\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 \/* Pact 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 \/* 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 2.5s 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=\"index.html\" class=\"flex items-center gap-2 text-[#7d6519] hover:text-[#d4af37] transition-colors w-max group\">\r\n <i data-lucide=\"arrow-left\" class=\"w-5 h-5 group-hover:-translate-x-1 transition-transform\"><\/i>\r\n <span class=\"font-mono text-xs tracking-widest uppercase\">Return to Network<\/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: FACTION IDENTITY -->\r\n <div class=\"w-full lg:w-1\/3 flex flex-col gap-6\">\r\n \r\n <!-- 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 FRAMESHOT<br>.PRODUCTIONS\r\n <\/h1>\r\n\r\n <!-- BORDERLESS LOGO SLOT -->\r\n <div class=\"os-box-transparent w-full aspect-square flex items-center justify-center relative mb-4\">\r\n \r\n <!-- Main Logo -->\r\n <img decoding=\"async\" src=\"https:\/\/frameshot.productions\/wp-content\/uploads\/2025\/09\/cropped-LOGO-WEBSITE-NEW-2025-33.png\" \r\n class=\"w-3\/4 h-3\/4 object-contain z-10 filter brightness-110 drop-shadow-[0_0_15px_rgba(212,175,55,0.5)]\"\r\n alt=\"Frameshot Sigil\">\r\n \r\n <!-- Subtle magical glow behind -->\r\n <div class=\"absolute inset-0 bg-radial-gradient from-[#d4af37]\/10 to-transparent pointer-events-none\"><\/div>\r\n <\/div>\r\n\r\n <!-- META INFO (FACTION) -->\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\">ENTITY_CLASS: VISUAL_SYNTHESIS<\/div>\r\n <div class=\"text-[#d4af37]\/70 text-xs tracking-widest font-bold\">STATUS: OPERATIONAL \/\/ SCOPE: GLOBAL<\/div>\r\n <div class=\"text-[#7d6519] text-[10px] tracking-widest\">ID_CODE: #FS-PROD-V1<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- MANIFESTO 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\">CORE_DIRECTIVE<\/h3>\r\n <i data-lucide=\"aperture\" 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 We do not simply record; we engineer perception. Frameshot synthesizes raw reality into high-impact visual narratives. From kinetic typography to full-spectrum broadcast, our signal cuts through the noise.\r\n <\/p>\r\n\r\n <!-- FACTION 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>RENDER VELOCITY<\/span> <span>99%<\/span><\/div>\r\n <div class=\"stat-track\"><div class=\"stat-fill\" style=\"width: 99%;\"><\/div><\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"flex justify-between text-[#d4af37] mb-1\"><span>SIGNAL CLARITY<\/span> <span>MAXIMUM<\/span><\/div>\r\n <div class=\"stat-track\"><div class=\"stat-fill\" style=\"width: 100%;\"><\/div><\/div>\r\n <\/div>\r\n <div>\r\n <div class=\"flex justify-between text-[#d4af37] mb-1\"><span>CREATIVE CAPACITY<\/span> <span>UNLIMITED<\/span><\/div>\r\n <div class=\"stat-track\"><div class=\"stat-fill\" style=\"width: 100%;\"><\/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: BRAND IDENTITY KIT -->\r\n <div class=\"w-full lg:w-2\/3 flex flex-col gap-6\">\r\n \r\n <!-- SECTION 1: KINETIC SIGIL (16:9 VIDEO SLOT) -->\r\n <div class=\"flex flex-col gap-0 group w-full\">\r\n <div class=\"flex items-center justify-between mb-2 px-1\">\r\n <h4 class=\"text-[#d4af37] font-bold text-xs tracking-widest\">PRIMARY_FEED \/\/ SHOWREEL_2026<\/h4>\r\n <span class=\"text-[#7d6519] text-[10px] font-mono\">1920x1080 @ 60FPS<\/span>\r\n <\/div>\r\n\r\n <!-- 16:9 Video Container -->\r\n <div class=\"os-box w-full aspect-video relative cursor-pointer gallery-item bg-[#0e0e0e] flex items-center justify-center overflow-hidden\"\r\n data-type=\"video\" \r\n data-src=\"https:\/\/frameshot.productions\/wp-content\/uploads\/2025\/10\/BDPST_2025_2026_CC.mp4\"\r\n data-caption=\"Showreel: Kinetic_Cut_V4\">\r\n <div class=\"scan-line-anim\"><\/div>\r\n \r\n <!-- Main Video -->\r\n <video autoplay loop muted playsinline class=\"w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity z-10\">\r\n <source src=\"https:\/\/frameshot.productions\/wp-content\/uploads\/2025\/10\/BDPST_2025_2026_CC.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n \r\n <div class=\"absolute bottom-0 right-0 bg-black\/90 text-[#d4af37] text-[10px] px-2 py-1 font-mono border-t border-l border-[#d4af37] z-20\">AUTO_LOOP<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SECTION 2: IDENTITY ELEMENTS GRID -->\r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 items-start mt-2\">\r\n \r\n <!-- COLUMN 1: TYPOGRAPHY -->\r\n <div class=\"flex flex-col items-center gap-0 group w-full\">\r\n <!-- Connector from Video -->\r\n <div class=\"flex flex-col items-center h-8 w-full justify-center relative -mt-4 mb-2\">\r\n <div class=\"w-px h-full bg-[#7d6b49]\/30 relative overflow-hidden\">\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 <!-- Asset Slot -->\r\n <div class=\"os-box w-full aspect-[9\/16] relative cursor-pointer gallery-item mb-3 bg-[#0e0e0e] flex items-center justify-center overflow-hidden\"\r\n data-type=\"image\" \r\n data-src=\"https:\/\/images.unsplash.com\/photo-1518640467707-6811f4a6ab73?q=80&w=1000\"\r\n data-caption=\"System_Font: Typography_Stack\">\r\n <div class=\"scan-line-anim\"><\/div>\r\n \r\n <!-- IMG TAG ADDED HERE -->\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518640467707-6811f4a6ab73?q=80&w=600&auto=format&fit=crop\" \r\n class=\"w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity\" \r\n alt=\"Typography\">\r\n\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] z-20\">IMG<\/div>\r\n <\/div>\r\n\r\n <div class=\"text-center w-full\">\r\n <h4 class=\"text-[#d4af37] font-bold text-xs tracking-widest mb-1\">TYPOGRAPHY<\/h4>\r\n <div class=\"text-[10px] font-mono text-[#a8a095] uppercase\">Primary: Rajdhani<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- COLUMN 2: CHROMATICS -->\r\n <div class=\"flex flex-col items-center gap-0 group w-full\"> \r\n <!-- Connector from Video -->\r\n <div class=\"flex flex-col items-center h-8 w-full justify-center relative -mt-4 mb-2\">\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.2s;\"><\/div>\r\n <\/div>\r\n <div class=\"circuit-node mt-[1px]\"><\/div>\r\n <\/div>\r\n\r\n <!-- Asset Slot -->\r\n <div class=\"os-box w-full aspect-[9\/16] relative cursor-pointer gallery-item mb-3 bg-[#0e0e0e] flex items-center justify-center overflow-hidden\"\r\n data-type=\"image\" \r\n data-src=\"https:\/\/images.unsplash.com\/photo-1550684848-fac1c5b4e853?q=80&w=1000\"\r\n data-caption=\"Grade_LUT: Cinematic_Noir\">\r\n <div class=\"scan-line-anim\"><\/div>\r\n \r\n <!-- IMG TAG ADDED HERE -->\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1550684848-fac1c5b4e853?q=80&w=600&auto=format&fit=crop\" \r\n class=\"w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity\" \r\n alt=\"Chromatics\">\r\n \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] z-20\">IMG<\/div>\r\n <\/div>\r\n\r\n <div class=\"text-center w-full\">\r\n <h4 class=\"text-[#d4af37] font-bold text-xs tracking-widest mb-1\">CHROMATICS<\/h4>\r\n <div class=\"text-[10px] font-mono text-[#a8a095] uppercase\">LUT: Noir \/ Gold<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- COLUMN 3: ICONOGRAPHY -->\r\n <div class=\"flex flex-col items-center gap-0 group w-full\">\r\n <!-- Connector from Video -->\r\n <div class=\"flex flex-col items-center h-8 w-full justify-center relative -mt-4 mb-2\">\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.4s;\"><\/div>\r\n <\/div>\r\n <div class=\"circuit-node mt-[1px]\"><\/div>\r\n <\/div>\r\n\r\n <!-- Asset Slot -->\r\n <div class=\"os-box w-full aspect-[9\/16] relative cursor-pointer gallery-item mb-3 bg-[#0e0e0e] flex items-center justify-center overflow-hidden\"\r\n data-type=\"image\" \r\n data-src=\"https:\/\/images.unsplash.com\/photo-1614036417651-efe5912149d8?q=80&w=1000\"\r\n data-caption=\"Assets: Motion_Elements\">\r\n <div class=\"scan-line-anim\"><\/div>\r\n \r\n <!-- IMG TAG ADDED HERE -->\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1614036417651-efe5912149d8?q=80&w=600&auto=format&fit=crop\" \r\n class=\"w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity\" \r\n alt=\"Assets\">\r\n\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] z-20\">IMG<\/div>\r\n <\/div>\r\n\r\n <div class=\"text-center w-full\">\r\n <h4 class=\"text-[#d4af37] font-bold text-xs tracking-widest mb-1\">ASSETS<\/h4>\r\n <div class=\"text-[10px] font-mono text-[#a8a095] uppercase\">Motion Library<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- SECTION 3: MOCKUP BANNER -->\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-2\">\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\">CLIENT_DELIVERABLES<\/div>\r\n <div class=\"text-[#333] font-mono text-[10px]\">[INSERT_BROADCAST_MOCKUP]<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SECTION 4: ACTION -->\r\n <div class=\"flex flex-col gap-4 w-full lg:items-end lg:mt-4\">\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 <!-- Action Button -->\r\n <button class=\"buy-btn w-full lg:w-80 py-4 text-center cursor-pointer group flex items-center justify-center gap-2 border border-[#d4af37]\">\r\n <span>TRANSMIT BRIEF<\/span>\r\n <i data-lucide=\"send\" 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: ALLIED ENTITIES 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\">ALLIED_ENTITIES \/\/<\/h4>\r\n \r\n <div class=\"flex gap-4 overflow-x-auto pb-4 custom-scrollbar snap-x\">\r\n \r\n <!-- ENTITY 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 <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1550684848-fac1c5b4e853?q=80&w=300\" class=\"w-full h-full object-cover object-center opacity-80 group-hover:opacity-100 transition-opacity grayscale\">\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\">OBSIDIAN LABS<\/span>\r\n <span class=\"text-[#7d6519] text-[10px] font-mono\">R&D<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- ENTITY 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 <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1535156411267-27b23328e129?q=80&w=300\" class=\"w-full h-full object-cover object-center opacity-80 group-hover:opacity-100 transition-opacity grayscale\">\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\">ECHO SYSTEMS<\/span>\r\n <span class=\"text-[#7d6519] text-[10px] font-mono\">AUDIO<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- ENTITY 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 <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1620641788421-7a1c342ea42e?q=80&w=300\" class=\"w-full h-full object-cover object-center opacity-80 group-hover:opacity-100 transition-opacity grayscale\">\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\">NULL-POINT<\/span>\r\n <span class=\"text-[#7d6519] text-[10px] font-mono\">SECURITY<\/span>\r\n <\/div>\r\n <\/a>\r\n\r\n <!-- ENTITY 4 -->\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 <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1478760329108-5c3ed9d495a0?q=80&w=300\" class=\"w-full h-full object-cover object-center opacity-80 group-hover:opacity-100 transition-opacity grayscale\">\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 DYNAMICS<\/span>\r\n <span class=\"text-[#7d6519] text-[10px] font-mono\">ROBOTICS<\/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 <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 <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 <div id=\"lightbox-content\" class=\"flex-grow flex items-center justify-center p-2 bg-black overflow-hidden relative min-h-[50vh]\"><\/div>\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 <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; \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>ENTITY \/\/ FRAMESHOT.PRODUCTIONS<\/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-143","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aorphis.com\/app\/wp-json\/wp\/v2\/pages\/143","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=143"}],"version-history":[{"count":3,"href":"https:\/\/aorphis.com\/app\/wp-json\/wp\/v2\/pages\/143\/revisions"}],"predecessor-version":[{"id":248,"href":"https:\/\/aorphis.com\/app\/wp-json\/wp\/v2\/pages\/143\/revisions\/248"}],"wp:attachment":[{"href":"https:\/\/aorphis.com\/app\/wp-json\/wp\/v2\/media?parent=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}