{"id":12,"date":"2026-05-11T16:31:37","date_gmt":"2026-05-11T16:31:37","guid":{"rendered":"https:\/\/demowebdesign.live\/michaelmartino\/?page_id=12"},"modified":"2026-05-18T19:53:59","modified_gmt":"2026-05-18T19:53:59","slug":"home","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/michaelmartino\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12\" class=\"elementor elementor-12\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1c7be40 e-con-full e-flex e-con e-parent\" data-id=\"1c7be40\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d89bd20 elementor-widget elementor-widget-html\" data-id=\"d89bd20\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- hero-updated.html -->\r\n<div id=\"premium-hero-section\">\r\n    <style>\r\n        #premium-hero-section {\r\n            --bg-deep: #030305;\r\n            --accent-gold: #c5a059;\r\n            --accent-silver: rgba(255, 255, 255, 0.1);\r\n            --text-primary: #ffffff;\r\n            --text-secondary: rgba(255, 255, 255, 0.5);\r\n            --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);\r\n            \r\n            background-color: var(--bg-deep);\r\n            color: var(--text-primary);\r\n            font-family: 'Inter', sans-serif;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        #premium-hero-section .hero-layout {\r\n            position: relative;\r\n            padding: 160px 0 !important;\r\n            width: 100%;\r\n            min-height: 100vh;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            background-color: var(--bg-deep) !important;\r\n            \r\n            \/* UPDATED: Background Image & Gradients *\/\r\n            background-image: \r\n                radial-gradient(circle at 50% 50%, rgba(3, 3, 5, 0.2) 0%, var(--bg-deep) 100%), \/* Dark vignette to focus center *\/\r\n                radial-gradient(circle at 80% 20%, rgba(20, 30, 80, 0.3) 0%, transparent 50%),\r\n                url('https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/hero-bg.png') !important; \r\n            \r\n            background-size: cover !important;\r\n            background-position: center !important;\r\n            background-repeat: no-repeat !important;\r\n            background-blend-mode: normal; \/* Changed to normal to ensure full image visibility *\/\r\n            z-index: 1;\r\n        }\r\n\r\n        \/* Subtle overlay to ensure text readability against the image *\/\r\n        #premium-hero-section .hero-layout::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            inset: 0;\r\n            background: rgba(3, 3, 5, 0.4); \/* Adjust opacity here to make image lighter\/darker *\/\r\n            z-index: -1;\r\n        }\r\n\r\n        \/* --- BACKGROUND ANIMATIONS --- *\/\r\n        .bg-orb {\r\n            position: absolute;\r\n            width: 800px;\r\n            height: 800px;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(20, 30, 80, 0.25) 0%, transparent 70%);\r\n            filter: blur(100px);\r\n            z-index: 0;\r\n            pointer-events: none;\r\n            animation: orbFloat 30s infinite ease-in-out;\r\n        }\r\n\r\n        .orb-1 { top: -10%; left: -10%; animation-delay: 0s; }\r\n        .orb-2 { bottom: -10%; right: -10%; animation-delay: -5s; }\r\n\r\n        @keyframes orbFloat {\r\n            0%, 100% { transform: translate(0, 0) scale(1); }\r\n            50% { transform: translate(50px, 50px) scale(1.2); }\r\n        }\r\n\r\n        .shooting-star {\r\n            position: absolute;\r\n            width: 2px;\r\n            height: 2px;\r\n            background: #fff;\r\n            border-radius: 50%;\r\n            opacity: 0;\r\n            box-shadow: 0 0 20px rgba(255,255,255,1);\r\n            animation: shoot 5s linear infinite;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        @keyframes shoot {\r\n            0% { transform: rotate(315deg) translateX(500px); opacity: 1; }\r\n            100% { transform: rotate(315deg) translateX(-1000px); opacity: 0; }\r\n        }\r\n\r\n        \/* Side Rail Branding *\/\r\n        #premium-hero-section .side-rail {\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n            height: 100%;\r\n            width: 80px;\r\n            border-right: 1px solid var(--accent-silver);\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            align-items: center;\r\n            z-index: 5;\r\n        }\r\n\r\n        #premium-hero-section .side-rail span {\r\n            transform: rotate(-90deg);\r\n            white-space: nowrap;\r\n            font-size: 0.7rem;\r\n            letter-spacing: 0.6em;\r\n            text-transform: uppercase;\r\n            color: var(--text-secondary);\r\n        }\r\n\r\n        #premium-hero-section .stars-bg {\r\n            position: absolute;\r\n            inset: 0;\r\n            pointer-events: none;\r\n            z-index: 0;\r\n        }\r\n\r\n        \/* CENTERED CONTENT COMPOSITION *\/\r\n        #premium-hero-section .main-content {\r\n            width: 100%;\r\n            max-width: 1000px;\r\n            margin: 0 auto;\r\n            padding: 0 60px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            text-align: center;\r\n            position: relative;\r\n            z-index: 10;\r\n        }\r\n\r\n        #premium-hero-section .index-marker {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-size: 0.9rem;\r\n            color: var(--accent-gold);\r\n            margin-bottom: 30px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 15px;\r\n            letter-spacing: 0.4em;\r\n            text-transform: uppercase;\r\n        }\r\n\r\n        #premium-hero-section .index-marker::before,\r\n        #premium-hero-section .index-marker::after {\r\n            content: \"\";\r\n            width: 40px;\r\n            height: 1px;\r\n            background: var(--accent-gold);\r\n        }\r\n\r\n        #premium-hero-section .hero-title {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: clamp(3rem, 7vw, 6.2rem);\r\n            font-weight: 400;\r\n            line-height: 0.95;\r\n            margin-bottom: 40px;\r\n            letter-spacing: -0.02em;\r\n            color: #fff;\r\n        }\r\n\r\n        #premium-hero-section .hero-title span {\r\n            font-style: italic;\r\n            font-weight: 700;\r\n            color: var(--accent-gold);\r\n        }\r\n\r\n        #premium-hero-section .hero-description {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-size: clamp(1.2rem, 2.5vw, 1.6rem);\r\n            line-height: 1.5;\r\n            color: var(--text-secondary);\r\n            max-width: 750px;\r\n            margin-bottom: 70px;\r\n            padding: 0 20px;\r\n        }\r\n\r\n        .cta-container {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 40px;\r\n        }\r\n\r\n        .btn-premium {\r\n            position: relative;\r\n            padding: 20px 50px;\r\n            font-size: 0.85rem;\r\n            font-weight: 500;\r\n            text-decoration: none !important;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.3em;\r\n            color: var(--text-primary) !important;\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            transition: var(--ease-out-expo) 0.6s;\r\n            overflow: hidden;\r\n            display: inline-block;\r\n        }\r\n\r\n        .btn-premium::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: var(--accent-gold);\r\n            transition: transform 0.6s var(--ease-out-expo);\r\n            z-index: -1;\r\n            transform: skewX(-20deg);\r\n        }\r\n\r\n        .btn-premium:hover {\r\n            color: #000 !important;\r\n            border-color: var(--accent-gold);\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 15px 35px rgba(197, 160, 89, 0.15);\r\n        }\r\n\r\n        .btn-premium:hover::before {\r\n            transform: translateX(100%) skewX(-20deg) scaleX(1.5);\r\n        }\r\n\r\n        .btn-secondary-text {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-size: 1.2rem;\r\n            color: var(--accent-gold) !important;\r\n            text-decoration: none !important;\r\n            border-bottom: 1px solid rgba(197, 160, 89, 0.3);\r\n            padding-bottom: 5px;\r\n            transition: var(--ease-out-expo) 0.4s;\r\n        }\r\n\r\n        .btn-secondary-text:hover {\r\n            border-bottom-color: var(--accent-gold);\r\n            opacity: 0.8;\r\n            transform: translateX(5px);\r\n        }\r\n\r\n        #premium-hero-section .scroll-hint {\r\n            position: absolute;\r\n            bottom: 40px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 15px;\r\n            font-size: 0.7rem;\r\n            letter-spacing: 0.3em;\r\n            text-transform: uppercase;\r\n            color: var(--text-secondary);\r\n            z-index: 10;\r\n        }\r\n\r\n        #premium-hero-section .scroll-line {\r\n            width: 1px;\r\n            height: 60px;\r\n            background: var(--accent-silver);\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n\r\n        #premium-hero-section .scroll-line::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: var(--accent-gold);\r\n            transform: translateY(-100%);\r\n            animation: scroll-anim-v 2.5s infinite;\r\n        }\r\n\r\n        @keyframes scroll-anim-v {\r\n            0% { transform: translateY(-100%); }\r\n            100% { transform: translateY(100%); }\r\n        }\r\n\r\n        #premium-hero-section .reveal {\r\n            opacity: 0;\r\n            transform: translateY(40px);\r\n            transition: opacity 1.5s var(--ease-out-expo), transform 1.5s var(--ease-out-expo);\r\n        }\r\n\r\n        #premium-hero-section .reveal.active {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n            color: white !important;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            #premium-hero-section .main-content { padding: 0 20px; }\r\n            #premium-hero-section .side-rail { display: none; }\r\n            #premium-hero-section .cta-container { flex-direction: column; gap: 30px; }\r\n            .btn-premium { width: 100%; text-align: center; }\r\n        }\r\n    <\/style>\r\n\r\n    <section class=\"hero-layout\">\r\n        <!-- Background Elements -->\r\n        <div class=\"bg-orb orb-1\"><\/div>\r\n        <div class=\"bg-orb orb-2\"><\/div>\r\n        <div class=\"stars-bg\" id=\"wpStarsContainerV4\"><\/div>\r\n        \r\n        <div class=\"shooting-star\" style=\"top: 10%; left: 85%; animation-delay: 2s;\"><\/div>\r\n        <div class=\"shooting-star\" style=\"top: 20%; left: 15%; animation-delay: 8s;\"><\/div>\r\n\r\n        <div class=\"side-rail\"><span>MICHAEL MARTINO<\/span><\/div>\r\n\r\n        <div class=\"main-content\">\r\n            <div class=\"index-marker reveal\">AUTHOR PORTFOLIO<\/div>\r\n            \r\n            <h1 class=\"hero-title reveal\">\r\n                Stories That <br>\r\n                <span>Reveal Truth,<\/span><br>\r\n                Power & Survival\r\n            <\/h1>\r\n            \r\n            <p class=\"hero-description reveal\">\r\n                Journey into gripping psychological thrillers and immersive worlds that challenge the mind and reveal the hidden depths of the human experience.\r\n            <\/p>\r\n            \r\n            <div class=\"cta-container reveal\">\r\n                <a href=\"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/books\/\" class=\"btn-premium\">Explore Works<\/a>\r\n                <a href=\"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/blogs\/\" class=\"btn-secondary-text\">Read Latest Release<\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"scroll-hint\">\r\n            <span>Scroll Down<\/span>\r\n            <div class=\"scroll-line\"><\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <script>\r\n        (function() {\r\n            const container = document.getElementById('wpStarsContainerV4');\r\n            if (container) {\r\n                for (let i = 0; i < 150; i++) {\r\n                    const star = document.createElement('div');\r\n                    star.style.position = 'absolute';\r\n                    star.style.width = Math.random() * 2 + 'px';\r\n                    star.style.height = star.style.width;\r\n                    star.style.background = 'white';\r\n                    star.style.borderRadius = '50%';\r\n                    star.style.left = Math.random() * 100 + '%';\r\n                    star.style.top = Math.random() * 100 + '%';\r\n                    star.style.opacity = Math.random() * 0.4;\r\n                    container.appendChild(star);\r\n                }\r\n            }\r\n\r\n            const observer = new IntersectionObserver((entries) => {\r\n                entries.forEach(entry => {\r\n                    if (entry.isIntersecting) entry.target.classList.add('active');\r\n                });\r\n            }, { threshold: 0.1 });\r\n\r\n            document.querySelectorAll('#premium-hero-section .reveal').forEach(el => observer.observe(el));\r\n        })();\r\n    <\/script>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-302b1ee e-con-full e-flex e-con e-parent\" data-id=\"302b1ee\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9d8b2a elementor-widget elementor-widget-html\" data-id=\"d9d8b2a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"wp-intro-strip\">\r\n    <style>\r\n        #wp-intro-strip {\r\n            --bg-deep: #08080a;\r\n            --accent-gold: #c5a059;\r\n            --text-primary: #ffffff;\r\n            --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);\r\n            \r\n            width: 100%;\r\n            background-color: var(--bg-deep) !important;\r\n            overflow: hidden;\r\n            display: block;\r\n        }\r\n\r\n        #wp-intro-strip .intro-strip-inner {\r\n            width: 100%;\r\n            padding: 100px 20px;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            position: relative;\r\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n            border-bottom: 1px solid rgba(255, 255, 255, 0.05);\r\n        }\r\n\r\n        #wp-intro-strip .strip-text {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: clamp(1.4rem, 4vw, 2.8rem);\r\n            color: var(--text-primary);\r\n            text-align: center;\r\n            letter-spacing: 0.1em;\r\n            margin: 0;\r\n            line-height: 1.2;\r\n            \r\n            \/* Initial Hidden State *\/\r\n            clip-path: inset(0 100% 0 0);\r\n            opacity: 0;\r\n            transition: \r\n                clip-path 1.5s var(--ease-out-expo), \r\n                letter-spacing 1.5s var(--ease-out-expo),\r\n                opacity 0.5s ease;\r\n        }\r\n\r\n        \/* --- ACTIVE STATE TRIGGERED BY SCRIPT --- *\/\r\n        #wp-intro-strip.is-visible .strip-text {\r\n            clip-path: inset(0 0 0 0);\r\n            letter-spacing: 0.25em;\r\n            opacity: 1;\r\n        }\r\n\r\n        #wp-intro-strip .strip-text span {\r\n            color: var(--accent-gold);\r\n            font-style: italic;\r\n        }\r\n\r\n        \/* Subtle center glow *\/\r\n        #wp-intro-strip .glow-effect {\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            width: 300px;\r\n            height: 100px;\r\n            background: radial-gradient(circle, rgba(197, 160, 89, 0.06) 0%, transparent 70%);\r\n            filter: blur(40px);\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"intro-strip-inner\">\r\n        <div class=\"glow-effect\"><\/div>\r\n        <h2 class=\"strip-text\">\r\n            Four <span>Books.<\/span> Four <span>Worlds.<\/span> One <span>Voice.<\/span>\r\n        <\/h2>\r\n    <\/div>\r\n\r\n    <script>\r\n        (function() {\r\n            const stripContainer = document.getElementById('wp-intro-strip');\r\n            \r\n            \/\/ Intersection Observer with safety check\r\n            const stripObserver = new IntersectionObserver((entries) => {\r\n                entries.forEach(entry => {\r\n                    if (entry.isIntersecting) {\r\n                        stripContainer.classList.add('is-visible');\r\n                        \/\/ Unobserve once triggered to save performance\r\n                        stripObserver.unobserve(entry.target);\r\n                    }\r\n                });\r\n            }, { \r\n                threshold: 0.1, \/\/ Trigger earlier (as soon as 10% is visible)\r\n                rootMargin: \"0px 0px -50px 0px\" \r\n            });\r\n\r\n            if (stripContainer) {\r\n                stripObserver.observe(stripContainer);\r\n            }\r\n        })();\r\n    <\/script>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f270cfa e-con-full e-flex e-con e-parent\" data-id=\"f270cfa\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1731d7e elementor-widget elementor-widget-html\" data-id=\"1731d7e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<head>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n  * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n  .aa-root {\r\n    --gold: #c5a059;\r\n    --gold-dim: rgba(197,160,89,0.18);\r\n    --gold-glow: rgba(197,160,89,0.06);\r\n    --bg: #050507;\r\n    --bg2: #0b0b0e;\r\n    --text: #fff;\r\n    --text-muted: #fff !important;\r\n    --ease: cubic-bezier(0.19,1,0.22,1);\r\n    width: 100%;\r\n    background: var(--bg);\r\n    color: var(--text);\r\n    font-family: 'Inter', sans-serif;\r\n    overflow: hidden;\r\n    position: relative;\r\n  }\r\n\r\n  .aa-ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; }\r\n  .aa-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; }\r\n  .aa-orb-1 {\r\n    width: 500px; height: 500px; top: -100px; left: -100px;\r\n    background: radial-gradient(circle, rgba(197,160,89,0.09) 0%, transparent 70%);\r\n    animation: orbFloat1 18s ease-in-out infinite;\r\n  }\r\n  .aa-orb-2 {\r\n    width: 400px; height: 400px; bottom: -80px; right: -80px;\r\n    background: radial-gradient(circle, rgba(80,60,140,0.08) 0%, transparent 70%);\r\n    animation: orbFloat2 22s ease-in-out infinite;\r\n  }\r\n  @keyframes orbFloat1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,-40px)} }\r\n  @keyframes orbFloat2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-50px,30px)} }\r\n\r\n  .aa-rule {\r\n    position: absolute; top: 0; left: 60px; right: 60px; height: 1px;\r\n    background: linear-gradient(90deg, transparent, var(--gold), transparent);\r\n    opacity: 0.25; z-index: 2;\r\n  }\r\n\r\n  .aa-layout {\r\n    position: relative; z-index: 3;\r\n    display: grid;\r\n    grid-template-columns: 420px 1fr;\r\n    gap: 100px;\r\n    padding: 100px 80px;\r\n    align-items: center;\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .aa-left { position: relative; }\r\n  .aa-frame-outer { position: relative; width: 100%; }\r\n\r\n  .aa-corner {\r\n    position: absolute; width: 28px; height: 28px;\r\n    border-color: var(--gold); border-style: solid; opacity: 0.5;\r\n    transition: opacity 0.6s ease, transform 0.6s var(--ease);\r\n  }\r\n  .aa-corner-tl { top: -12px; left: -12px; border-width: 1px 0 0 1px; }\r\n  .aa-corner-tr { top: -12px; right: -12px; border-width: 1px 1px 0 0; }\r\n  .aa-corner-bl { bottom: -12px; left: -12px; border-width: 0 0 1px 1px; }\r\n  .aa-corner-br { bottom: -12px; right: -12px; border-width: 0 1px 1px 0; }\r\n  .aa-frame-outer:hover .aa-corner { opacity: 1; }\r\n  .aa-frame-outer:hover .aa-corner-tl { transform: translate(-4px,-4px); }\r\n  .aa-frame-outer:hover .aa-corner-tr { transform: translate(4px,-4px); }\r\n  .aa-frame-outer:hover .aa-corner-bl { transform: translate(-4px,4px); }\r\n  .aa-frame-outer:hover .aa-corner-br { transform: translate(4px,4px); }\r\n\r\n  .aa-image-wrap {\r\n    position: relative; overflow: hidden;\r\n    border-radius: 2px; aspect-ratio: 4\/5;\r\n  }\r\n  .aa-image-wrap::after {\r\n    content: ''; position: absolute; inset: 0;\r\n    background: linear-gradient(to top, rgba(5,5,7,0.8) 0%, transparent 50%);\r\n    z-index: 1;\r\n  }\r\n  .aa-img {\r\n    width: 100%; height: 100%; object-fit: cover;\r\n    filter: contrast(1.12) brightness(0.88) saturate(0.9);\r\n    transition: transform 1.8s var(--ease), filter 0.9s ease;\r\n    display: block;\r\n  }\r\n  .aa-frame-outer:hover .aa-img {\r\n    transform: scale(1.08);\r\n    filter: contrast(1.05) brightness(1) saturate(1.05);\r\n  }\r\n\r\n  .aa-overlay {\r\n    position: absolute; bottom: 0; left: 0; right: 0;\r\n    padding: 28px 28px 24px; z-index: 2;\r\n    display: flex; gap: 28px; align-items: flex-end;\r\n  }\r\n  .aa-stat { flex: 1; }\r\n  .aa-stat-num {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 1.8rem; font-weight: 400;\r\n    color: #fff; line-height: 1; display: block;\r\n  }\r\n  .aa-stat-label {\r\n    font-size: 0.65rem; letter-spacing: 0.18em;\r\n    text-transform: uppercase; color: var(--gold);\r\n    display: block; margin-top: 4px;\r\n  }\r\n  .aa-stat-divider {\r\n    width: 1px; height: 40px; background: rgba(255,255,255,0.15); flex-shrink: 0;\r\n  }\r\n\r\n  .aa-right { position: relative; }\r\n\r\n  .aa-eyebrow {\r\n    font-size: 0.68rem; letter-spacing: 0.55em;\r\n    text-transform: uppercase; color: var(--gold);\r\n    display: flex; align-items: center; gap: 14px;\r\n    margin-bottom: 32px;\r\n    opacity: 0; transform: translateY(20px);\r\n    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);\r\n  }\r\n  .aa-eyebrow-line { flex: 0 0 40px; height: 1px; background: var(--gold); opacity: 0.5; }\r\n\r\n  .aa-name {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(2.4rem, 4vw, 3.8rem);\r\n    font-weight: 400; line-height: 1.05; color: #fff;\r\n    margin-bottom: 10px;\r\n    opacity: 0; transform: translateY(24px);\r\n    transition: opacity 1.1s var(--ease) 0.15s, transform 1.1s var(--ease) 0.15s;\r\n  }\r\n  .aa-name em { font-style: italic; color: var(--gold); }\r\n\r\n  .aa-title-role {\r\n    font-size: 0.78rem; letter-spacing: 0.25em;\r\n    text-transform: uppercase; color: var(--text-muted);\r\n    margin-bottom: 48px;\r\n    opacity: 0; transform: translateY(20px);\r\n    transition: opacity 0.9s var(--ease) 0.25s, transform 0.9s var(--ease) 0.25s;\r\n  }\r\n\r\n  .aa-divider {\r\n    width: 56px; height: 1px; background: var(--gold);\r\n    margin-bottom: 40px;\r\n    opacity: 0; transform: scaleX(0); transform-origin: left;\r\n    transition: opacity 0.8s var(--ease) 0.3s, transform 0.8s var(--ease) 0.3s;\r\n  }\r\n\r\n  .aa-quote {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 1.55rem; font-style: italic;\r\n    line-height: 1.45; color: rgba(255,255,255,0.88);\r\n    font-weight: 300;\r\n    padding-left: 20px;\r\n    border-left: 1.5px solid rgba(197,160,89,0.4);\r\n    margin-bottom: 36px;\r\n    opacity: 0; transform: translateY(20px);\r\n    transition: opacity 1.1s var(--ease) 0.4s, transform 1.1s var(--ease) 0.4s;\r\n  }\r\n\r\n  .aa-bio {\r\n    font-size: 0.92rem; line-height: 1.85;\r\n    color: var(--text-muted); max-width: 500px;\r\n    margin-bottom: 56px;\r\n    opacity: 0; transform: translateY(16px);\r\n    transition: opacity 1s var(--ease) 0.5s, transform 1s var(--ease) 0.5s;\r\n  }\r\n\r\n  .aa-bottom {\r\n    display: flex; align-items: center; justify-content: space-between; gap: 24px;\r\n    opacity: 0; transform: translateY(16px);\r\n    transition: opacity 1s var(--ease) 0.65s, transform 1s var(--ease) 0.65s;\r\n  }\r\n\r\n  .aa-tags { display: flex; gap: 10px; flex-wrap: wrap; }\r\n  .aa-tag {\r\n    font-size: 0.68rem; letter-spacing: 0.14em;\r\n    text-transform: uppercase; padding: 6px 14px;\r\n    border: 1px solid rgba(197,160,89,0.25);\r\n    color: var(--gold); border-radius: 40px;\r\n    transition: background 0.3s, border-color 0.3s;\r\n  }\r\n  .aa-tag:hover { background: var(--gold-dim); border-color: rgba(197,160,89,0.5); }\r\n\r\n  \/* \u2500\u2500 READ MORE CIRCLE BUTTON \u2500\u2500 *\/\r\n  .aa-read-btn {\r\n    position: relative; flex-shrink: 0;\r\n    width: 88px; height: 88px;\r\n    cursor: pointer;\r\n    display: flex; align-items: center; justify-content: center;\r\n    text-decoration: none;\r\n  }\r\n  .aa-ring {\r\n    position: absolute; inset: 0; border-radius: 50%;\r\n    border: 1px solid rgba(197,160,89,0.3);\r\n    transition: border-color 0.4s;\r\n  }\r\n  .aa-ring-dashed {\r\n    position: absolute; inset: -6px; border-radius: 50%;\r\n    border: 1px dashed rgba(197,160,89,0.2);\r\n    animation: spinSlow 20s linear infinite;\r\n  }\r\n  @keyframes spinSlow { to { transform: rotate(360deg); } }\r\n  .aa-read-btn:hover .aa-ring { border-color: rgba(197,160,89,0.7); }\r\n  .aa-read-btn:hover .aa-ring-dashed { border-color: rgba(197,160,89,0.45); }\r\n\r\n  .aa-ring-text {\r\n    position: absolute; inset: 0;\r\n    animation: spinSlow 16s linear infinite;\r\n  }\r\n  .aa-ring-text svg { width: 100%; height: 100%; overflow: visible; }\r\n\r\n  .aa-btn-core {\r\n    width: 52px; height: 52px; border-radius: 50%;\r\n    background: var(--gold);\r\n    display: flex; align-items: center; justify-content: center;\r\n    transition: transform 0.5s var(--ease), background 0.3s;\r\n    z-index: 1;\r\n  }\r\n  .aa-btn-core svg {\r\n    width: 16px; height: 16px; fill: none;\r\n    stroke: #050507; stroke-width: 1.8;\r\n    stroke-linecap: round; stroke-linejoin: round;\r\n    transition: transform 0.4s var(--ease);\r\n  }\r\n  .aa-read-btn:hover .aa-btn-core { transform: scale(1.1); background: #d4ae6a; }\r\n  .aa-read-btn:hover .aa-btn-core svg { transform: translate(2px,-2px); }\r\n\r\n  \/* \u2500\u2500 REVEAL \u2500\u2500 *\/\r\n  .aa-active .aa-eyebrow,\r\n  .aa-active .aa-name,\r\n  .aa-active .aa-title-role,\r\n  .aa-active .aa-quote,\r\n  .aa-active .aa-bio,\r\n  .aa-active .aa-bottom { opacity: 1; transform: translateY(0); }\r\n  .aa-active .aa-divider { opacity: 0.6; transform: scaleX(1); }\r\n  .aa-active .aa-left .aa-frame-outer { opacity: 1; transform: translateX(0); }\r\n\r\n  .aa-left .aa-frame-outer {\r\n    opacity: 0; transform: translateX(-30px);\r\n    transition: opacity 1.2s var(--ease) 0.1s, transform 1.2s var(--ease) 0.1s;\r\n  }\r\n\r\n  .aa-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }\r\n\r\n  @media (max-width: 900px) {\r\n    .aa-layout { grid-template-columns: 1fr; gap: 60px; padding: 70px 30px; }\r\n    .aa-left .aa-frame-outer { max-width: 380px; margin: 0 auto; }\r\n    .aa-quote { font-size: 1.3rem; }\r\n    .aa-bottom { flex-direction: column; align-items: flex-start; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"aa-root\" id=\"aaRoot\">\r\n  <div class=\"aa-ambient\">\r\n    <div class=\"aa-orb aa-orb-1\"><\/div>\r\n    <div class=\"aa-orb aa-orb-2\"><\/div>\r\n  <\/div>\r\n  <div class=\"aa-rule\"><\/div>\r\n  <div class=\"aa-particles\" id=\"aaParticles\"><\/div>\r\n\r\n  <div class=\"aa-layout\">\r\n    <!-- LEFT -->\r\n    <div class=\"aa-left\">\r\n      <div class=\"aa-frame-outer\" id=\"aaFrame\">\r\n        <div class=\"aa-corner aa-corner-tl\"><\/div>\r\n        <div class=\"aa-corner aa-corner-tr\"><\/div>\r\n        <div class=\"aa-corner aa-corner-bl\"><\/div>\r\n        <div class=\"aa-corner aa-corner-br\"><\/div>\r\n        <div class=\"aa-image-wrap\">\r\n          <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/image1-1.jpeg\"\r\n               alt=\"Michael Martino\" class=\"aa-img\">\r\n          <!--<div class=\"aa-overlay\">-->\r\n          <!--  <div class=\"aa-stat\">-->\r\n          <!--    <span class=\"aa-stat-num\">12<\/span>-->\r\n          <!--    <span class=\"aa-stat-label\">Novels<\/span>-->\r\n          <!--  <\/div>-->\r\n          <!--  <div class=\"aa-stat-divider\"><\/div>-->\r\n          <!--  <div class=\"aa-stat\">-->\r\n          <!--    <span class=\"aa-stat-num\">3M+<\/span>-->\r\n          <!--    <span class=\"aa-stat-label\">Readers<\/span>-->\r\n          <!--  <\/div>-->\r\n          <!--  <div class=\"aa-stat-divider\"><\/div>-->\r\n          <!--  <div class=\"aa-stat\">-->\r\n          <!--    <span class=\"aa-stat-num\">18<\/span>-->\r\n          <!--    <span class=\"aa-stat-label\">Awards<\/span>-->\r\n          <!--  <\/div>-->\r\n          <!--<\/div>-->\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- RIGHT -->\r\n    <div class=\"aa-right\" id=\"aaContent\">\r\n      <div class=\"aa-eyebrow\">\r\n        <span class=\"aa-eyebrow-line\"><\/span>\r\n        The Visionary\r\n      <\/div>\r\n      <h2 class=\"aa-name\">Michael <em>Martino<\/em><\/h2>\r\n      <p class=\"aa-title-role\">Author \u00b7 Storyteller \u00b7 Philosopher<\/p>\r\n      <div class=\"aa-divider\"><\/div>\r\n      <blockquote class=\"aa-quote\">\r\n        \"Stories are not escapes from truth<br>they are the only path into it.\"\r\n      <\/blockquote>\r\n      <p class=\"aa-bio\">\r\n        Michael Martino, an entrepreneur visionary and inventor dedicated to solving problems and helping people through his professional skills. And his journey began with the challenge of dyslexia which made reading and writing feel like an uphill battle during his childhood. Rather than letting this difficulty define him. Michael chose to embrace his unique perspective allowing it to fuel his creativity. Writing became his sanctuary and a powerful medium for expressing the complex thoughts and ideas swirling in his mind. Martino obsession and passion for storytelling led me to explore various forms of writing from poetry to screenwriting...\r\n      <\/p>\r\n      <div class=\"aa-bottom\">\r\n        <div class=\"aa-tags\">\r\n          <span class=\"aa-tag\">Literary Fiction<\/span>\r\n          <span class=\"aa-tag\">Philosophical<\/span>\r\n          <span class=\"aa-tag\">Thriller<\/span>\r\n        <\/div>\r\n        <!-- Read More Circle Button -->\r\n        <a class=\"aa-read-btn\" href=\"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/about\/\" aria-label=\"Read more about Michael Martino\">\r\n          <div class=\"aa-ring\"><\/div>\r\n          <div class=\"aa-ring-dashed\"><\/div>\r\n          <div class=\"aa-ring-text\">\r\n            <svg viewBox=\"0 0 88 88\">\r\n              <defs>\r\n                <path id=\"rp\" d=\"M44,44 m-32,0 a32,32 0 1,1 64,0 a32,32 0 1,1 -64,0\"\/>\r\n              <\/defs>\r\n              <text font-family=\"Inter,sans-serif\" font-size=\"8.5\" fill=\"rgba(197,160,89,0.7)\" letter-spacing=\"3.2\">\r\n                <textPath href=\"#rp\">READ MORE \u00b7 READ MORE \u00b7<\/textPath>\r\n              <\/text>\r\n            <\/svg>\r\n          <\/div>\r\n          <div class=\"aa-btn-core\">\r\n            <svg viewBox=\"0 0 16 16\">\r\n              <line x1=\"2\" y1=\"14\" x2=\"14\" y2=\"2\"\/>\r\n              <polyline points=\"6,2 14,2 14,10\"\/>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const root = document.getElementById('aaRoot');\r\n  const obs = new IntersectionObserver(entries => {\r\n    entries.forEach(e => { if(e.isIntersecting) root.classList.add('aa-active'); });\r\n  }, { threshold: 0.15 });\r\n  obs.observe(root);\r\n\r\n  const pc = document.getElementById('aaParticles');\r\n  for(let i=0;i<55;i++){\r\n    const p = document.createElement('div');\r\n    const s = Math.random()*1.8+0.4;\r\n    p.style.cssText = `position:absolute;width:${s}px;height:${s}px;background:rgba(197,160,89,0.5);border-radius:50%;left:${Math.random()*100}%;top:${Math.random()*100}%`;\r\n    p.animate(\r\n      [{transform:'translateY(0) scale(1)',opacity:0},\r\n       {opacity:Math.random()*0.5+0.1,offset:0.4},\r\n       {transform:`translateY(-${80+Math.random()*60}px) scale(0.4)`,opacity:0}],\r\n      {duration:6000+Math.random()*8000, delay:Math.random()*8000, iterations:Infinity}\r\n    );\r\n    pc.appendChild(p);\r\n  }\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-354c175 e-con-full e-flex e-con e-parent\" data-id=\"354c175\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d6a434d elementor-widget elementor-widget-html\" data-id=\"d6a434d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&display=swap\" rel=\"stylesheet\">\r\n<\/head>\r\n<body style=\"margin:0;padding:0;background:#030305;\">\r\n<div id=\"pro-portfolio-showcase\">\r\n  <style>\r\n    #pro-portfolio-showcase {\r\n      --bg-deep: #030305;\r\n      --accent-gold: #c5a059;\r\n      --accent-gold-bright: #e8c47a;\r\n      --accent-gold-dim: rgba(197,160,89,0.35);\r\n      --text-primary: #ffffff;\r\n      --text-secondary: rgba(255,255,255,0.4);\r\n      --ease-gallery: cubic-bezier(0.4,0,0.2,1);\r\n      --ease-expo: cubic-bezier(0.16,1,0.3,1);\r\n      background-color: var(--bg-deep);\r\n      color: var(--text-primary);\r\n      font-family: 'Cormorant Garamond', serif;\r\n      overflow: hidden;\r\n    }\r\n\r\n    \/* ===================== GALLERY SECTION ===================== *\/\r\n    .gallery-section {\r\n      padding: 160px 0 60px;\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    #gallery-canvas {\r\n      position: absolute;\r\n      inset: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      z-index: 0;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .gallery-grain {\r\n      position: absolute;\r\n      inset: 0;\r\n      z-index: 1;\r\n      pointer-events: none;\r\n      opacity: 0.035;\r\n      background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'\/%3E%3C\/svg%3E\");\r\n      background-size: 200px 200px;\r\n    }\r\n\r\n    .gallery-mouse-glow {\r\n      position: absolute;\r\n      width: 600px;\r\n      height: 600px;\r\n      border-radius: 50%;\r\n      background: radial-gradient(circle, rgba(197,160,89,0.06) 0%, transparent 70%);\r\n      pointer-events: none;\r\n      z-index: 1;\r\n      transform: translate(-50%,-50%);\r\n      transition: left 0.8s ease, top 0.8s ease;\r\n    }\r\n\r\n    .gallery-ruled {\r\n      position: absolute;\r\n      inset: 0;\r\n      z-index: 1;\r\n      pointer-events: none;\r\n    }\r\n    .gallery-ruled::before, .gallery-ruled::after {\r\n      content: '';\r\n      position: absolute;\r\n      left: 0; right: 0;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, transparent, rgba(197,160,89,0.12), transparent);\r\n    }\r\n    .gallery-ruled::before { top: 0; }\r\n    .gallery-ruled::after  { bottom: 0; }\r\n\r\n    .gallery-vlines {\r\n      position: absolute;\r\n      inset: 0;\r\n      z-index: 1;\r\n      pointer-events: none;\r\n    }\r\n    .gallery-vlines::before, .gallery-vlines::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0; bottom: 0;\r\n      width: 1px;\r\n      background: linear-gradient(to bottom, transparent, rgba(197,160,89,0.08) 20%, rgba(197,160,89,0.08) 80%, transparent);\r\n    }\r\n    .gallery-vlines::before { left: 60px; }\r\n    .gallery-vlines::after  { right: 60px; }\r\n\r\n    .gallery-container {\r\n      max-width: 1400px;\r\n      margin: 0 auto;\r\n      padding: 0 60px;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    .gallery-header {\r\n      text-align: center;\r\n      margin-bottom: 120px;\r\n    }\r\n\r\n    .gallery-header span {\r\n      font-size: 0.7rem;\r\n      letter-spacing: 0.8em;\r\n      color: var(--accent-gold);\r\n      text-transform: uppercase;\r\n      display: block;\r\n      margin-bottom: 25px;\r\n      font-family: 'Cormorant Garamond', serif;\r\n    }\r\n\r\n    .gallery-header h2 {\r\n      font-family: 'Playfair Display', serif;\r\n      font-size: clamp(2rem,4vw,3.5rem);\r\n      font-weight: 400;\r\n      color: #D4AE6A !important;\r\n      position: relative;\r\n      display: inline-block;\r\n    }\r\n\r\n    .gallery-header h2::after {\r\n      content: '';\r\n      display: block;\r\n      width: 60px;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);\r\n      margin: 20px auto 0;\r\n    }\r\n\r\n    .header-numeral {\r\n      position: absolute;\r\n      font-family: 'Playfair Display', serif;\r\n      font-size: 18rem;\r\n      color: rgba(197,160,89,0.025);\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%,-50%);\r\n      pointer-events: none;\r\n      letter-spacing: -0.05em;\r\n      animation: headerDrift 20s ease-in-out infinite alternate;\r\n    }\r\n\r\n    @keyframes headerDrift {\r\n      from { transform: translate(-50%,-50%) rotate(-2deg); }\r\n      to   { transform: translate(-50%,-52%) rotate(2deg); }\r\n    }\r\n\r\n    .gallery-stage {\r\n      display: flex;\r\n      justify-content: center;\r\n      gap: 50px;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    .gallery-stage::before {\r\n      content: '';\r\n      position: absolute;\r\n      bottom: -40px;\r\n      left: 10%; right: 10%;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, transparent, rgba(197,160,89,0.15) 20%, rgba(197,160,89,0.15) 80%, transparent);\r\n    }\r\n\r\n    .gallery-item {\r\n      position: relative;\r\n      flex: 0 0 250px;\r\n      cursor: pointer;\r\n      transition: transform 0.8s var(--ease-gallery), opacity 0.8s var(--ease-gallery), filter 0.8s var(--ease-gallery);\r\n    }\r\n\r\n    .gallery-stage:hover .gallery-item:not(:hover) {\r\n      opacity: 0.25;\r\n      filter: blur(3px) saturate(0);\r\n      transform: scale(0.93) translateY(10px);\r\n    }\r\n\r\n    .item-index {\r\n      position: absolute;\r\n      top: -70px;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      font-family: 'Playfair Display', serif;\r\n      font-size: 10rem;\r\n      color: rgba(255,255,255,0.025);\r\n      z-index: -1;\r\n      font-style: italic;\r\n      pointer-events: none;\r\n      transition: 0.8s var(--ease-gallery);\r\n    }\r\n\r\n    .gallery-item:hover .item-index {\r\n      color: rgba(197,160,89,0.10);\r\n      transform: translateX(-50%) translateY(-25px) scale(1.05);\r\n    }\r\n\r\n    .book-frame {\r\n      position: relative;\r\n      width: 100%;\r\n      aspect-ratio: 2\/3;\r\n      background: #0a0a0c;\r\n      border-radius: 3px;\r\n      overflow: hidden;\r\n      border: 1px solid rgba(255,255,255,0.06);\r\n      transition: 0.8s var(--ease-gallery);\r\n      box-shadow: -8px 0 20px rgba(0,0,0,0.9), 30px 30px 80px rgba(0,0,0,0.9), inset -3px 0 12px rgba(0,0,0,0.6);\r\n    }\r\n\r\n    .book-frame img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      transition: 1.2s var(--ease-gallery);\r\n      filter: brightness(0.85) saturate(0.9);\r\n    }\r\n\r\n    .book-frame::before {\r\n      content: '';\r\n      position: absolute;\r\n      inset: 0;\r\n      background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);\r\n      transform: translateX(-100%);\r\n      transition: transform 0s;\r\n      z-index: 3;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .gallery-item:hover .book-frame::before {\r\n      transform: translateX(200%);\r\n      transition: transform 0.9s var(--ease-gallery);\r\n    }\r\n\r\n    .gallery-item:hover .book-frame {\r\n      transform: translateY(-35px) rotateX(2deg);\r\n      box-shadow: -8px 0 20px rgba(0,0,0,0.9), 0 50px 100px rgba(197,160,89,0.18), 0 20px 40px rgba(0,0,0,0.8), inset -3px 0 12px rgba(0,0,0,0.6);\r\n      border-color: rgba(197,160,89,0.4);\r\n    }\r\n\r\n    .gallery-item:hover .book-frame img {\r\n      filter: brightness(1) saturate(1.1);\r\n      transform: scale(1.04);\r\n    }\r\n\r\n    .book-reflection {\r\n      position: absolute;\r\n      bottom: -50px;\r\n      left: 0; right: 0;\r\n      height: 50px;\r\n      overflow: hidden;\r\n      pointer-events: none;\r\n      opacity: 0;\r\n      transition: opacity 0.8s var(--ease-gallery);\r\n    }\r\n\r\n    .book-reflection img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      object-position: top;\r\n      transform: scaleY(-1);\r\n      filter: blur(3px) brightness(0.2);\r\n    }\r\n\r\n    .gallery-item:hover .book-reflection { opacity: 1; }\r\n\r\n    .book-glow {\r\n      position: absolute;\r\n      bottom: -70px;\r\n      left: 50%;\r\n      transform: translateX(-50%);\r\n      width: 60%;\r\n      height: 40px;\r\n      background: radial-gradient(ellipse, rgba(197,160,89,0.25) 0%, transparent 70%);\r\n      filter: blur(8px);\r\n      opacity: 0;\r\n      transition: opacity 0.8s var(--ease-gallery), width 0.8s var(--ease-gallery);\r\n      pointer-events: none;\r\n    }\r\n\r\n    .gallery-item:hover .book-glow { opacity: 1; width: 90%; }\r\n\r\n    .pedestal-line {\r\n      width: 0;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);\r\n      margin: 40px auto 30px auto;\r\n      transition: width 1s var(--ease-gallery);\r\n      opacity: 0.6;\r\n    }\r\n\r\n    .gallery-item:hover .pedestal-line { width: 100%; }\r\n\r\n    .item-info {\r\n      text-align: center;\r\n      opacity: 0;\r\n      transform: translateY(20px);\r\n      transition: 0.7s var(--ease-gallery) 0.15s;\r\n    }\r\n\r\n    .gallery-item:hover .item-info { opacity: 1; transform: translateY(0); }\r\n\r\n    .item-info h3 {\r\n      font-family: 'Playfair Display', serif;\r\n      font-size: 1.3rem;\r\n      font-weight: 400;\r\n      margin-bottom: 10px;\r\n      color: #D4AE6A !important;\r\n    }\r\n\r\n    .item-info p {\r\n      font-size: 13px;\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.4em;\r\n      color: var(--accent-gold);\r\n      font-family: 'Cormorant Garamond', serif;\r\n    }\r\n\r\n    \/* REFINED READ MORE BUTTON *\/\r\n    .item-read-more {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 12px;\r\n      margin-top: 15px;\r\n      font-size: 0.65rem;\r\n      letter-spacing: 0.5em;\r\n      text-transform: uppercase;\r\n      color: rgba(197, 160, 89, 0.75);\r\n      font-family: 'Cormorant Garamond', serif;\r\n      text-decoration: none !important;\r\n      transition: all 0.4s var(--ease-gallery);\r\n    }\r\n\r\n    .item-read-more-arrow {\r\n      width: 25px;\r\n      height: 1px;\r\n      background: rgba(197, 160, 89, 0.4);\r\n      position: relative;\r\n      transition: all 0.4s var(--ease-gallery);\r\n    }\r\n\r\n    .item-read-more-arrow::after {\r\n      content: '';\r\n      position: absolute;\r\n      right: 0;\r\n      top: 50%;\r\n      transform: translateY(-50%) rotate(45deg);\r\n      width: 5px; height: 5px;\r\n      border-top: 1px solid rgba(197, 160, 89, 0.4);\r\n      border-right: 1px solid rgba(197, 160, 89, 0.4);\r\n      transition: all 0.4s var(--ease-gallery);\r\n    }\r\n\r\n    .gallery-item:hover .item-read-more {\r\n      color: var(--accent-gold-bright);\r\n      letter-spacing: 0.6em;\r\n    }\r\n\r\n    .gallery-item:hover .item-read-more-arrow {\r\n      width: 40px;\r\n      background: var(--accent-gold-bright);\r\n    }\r\n\r\n    .gallery-item:hover .item-read-more-arrow::after {\r\n      border-color: var(--accent-gold-bright);\r\n    }\r\n\r\n    .is-coming-soon .book-frame::after {\r\n      content: \"COMING SOON !\";\r\n      position: absolute;\r\n      inset: 0;\r\n      background: rgba(0,0,0,0.65);\r\n      backdrop-filter: blur(5px);\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      font-size: 14px;\r\n      letter-spacing: 0.6em;\r\n      color: var(--accent-gold);\r\n      font-family: 'Cormorant Garamond', serif;\r\n    }\r\n\r\n    .gallery-progress {\r\n      width: 200px;\r\n      height: 1px;\r\n      background: rgba(255,255,255,0.08);\r\n      margin: 100px auto 0 auto;\r\n      position: relative;\r\n      overflow: visible;\r\n    }\r\n\r\n    .gallery-progress::before, .gallery-progress::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      width: 4px; height: 4px;\r\n      border-radius: 50%;\r\n      background: rgba(197,160,89,0.3);\r\n    }\r\n    .gallery-progress::before { left: 0; }\r\n    .gallery-progress::after  { right: 0; }\r\n\r\n    .progress-bar {\r\n      position: absolute;\r\n      top: 0; left: 0;\r\n      height: 100%;\r\n      width: 25%;\r\n      background: linear-gradient(90deg, transparent, var(--accent-gold), var(--accent-gold-bright));\r\n      transition: transform 0.6s var(--ease-gallery);\r\n    }\r\n\r\n    .progress-bar::after {\r\n      content: '';\r\n      position: absolute;\r\n      right: 0;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      width: 5px; height: 5px;\r\n      border-radius: 50%;\r\n      background: var(--accent-gold-bright);\r\n      box-shadow: 0 0 8px var(--accent-gold);\r\n    }\r\n\r\n    .reveal { opacity: 0; transform: translateY(60px); transition: 1.2s var(--ease-gallery); }\r\n    .reveal.active { opacity: 1; transform: translateY(0); }\r\n\r\n    .book-scroll-reveal {\r\n      opacity: 0;\r\n      transform: translateY(80px) rotateX(8deg);\r\n      transition: opacity 1s var(--ease-gallery), transform 1s var(--ease-gallery);\r\n      transform-style: preserve-3d;\r\n      perspective: 800px;\r\n    }\r\n    .book-scroll-reveal.active { opacity: 1; transform: translateY(0) rotateX(0deg); }\r\n\r\n    \/* ===================== DISCOVERY THEMES \u2014 PREMIUM REWORK ===================== *\/\r\n    .themes-discovery {\r\n      height: 100vh;\r\n      display: flex;\r\n      background: #000;\r\n      border-top: 1px solid rgba(255,255,255,0.04);\r\n      overflow: hidden;\r\n      position: relative;\r\n    }\r\n\r\n    \/* Ambient sweep *\/\r\n    .themes-discovery::before {\r\n      content: '';\r\n      position: absolute;\r\n      inset: 0;\r\n      background: linear-gradient(135deg, transparent 35%, rgba(197,160,89,0.025) 55%, transparent 75%);\r\n      z-index: 20;\r\n      pointer-events: none;\r\n      animation: discoverySweep 14s ease-in-out infinite alternate;\r\n    }\r\n    @keyframes discoverySweep {\r\n      from { opacity: 0.3; transform: translateX(-8%); }\r\n      to   { opacity: 1;   transform: translateX(8%); }\r\n    }\r\n\r\n    \/* ---- Panel ---- *\/\r\n    .theme-panel {\r\n      flex: 1;\r\n      position: relative;\r\n      overflow: hidden;\r\n      cursor: pointer;\r\n      transition: flex 1.2s var(--ease-expo);\r\n      will-change: flex;\r\n    }\r\n\r\n    \/* Diagonal dividers between panels *\/\r\n    .theme-panel:not(:last-child)::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0;\r\n      right: -1px;\r\n      width: 1px;\r\n      height: 100%;\r\n      background: linear-gradient(to bottom, transparent 5%, rgba(197,160,89,0.12) 30%, rgba(197,160,89,0.12) 70%, transparent 95%);\r\n      z-index: 15;\r\n      transition: opacity 0.6s ease;\r\n    }\r\n\r\n    .themes-discovery:has(.theme-panel:hover) .theme-panel:not(:hover)::after {\r\n      opacity: 0;\r\n    }\r\n\r\n    .theme-panel:hover {\r\n      flex: 2.4;\r\n      z-index: 10;\r\n    }\r\n\r\n    \/* ---- Background image ---- *\/\r\n    .panel-bg {\r\n      position: absolute;\r\n      inset: -5%;\r\n      background-size: cover;\r\n      background-position: center;\r\n      opacity: 0.25;\r\n      transform: scale(1.08);\r\n      filter: grayscale(1) brightness(0.55) contrast(1.1);\r\n      transition:\r\n        transform 1.4s var(--ease-expo),\r\n        opacity 1.2s ease,\r\n        filter 1.2s ease;\r\n      will-change: transform, opacity, filter;\r\n    }\r\n\r\n    .theme-panel:hover .panel-bg {\r\n      transform: scale(1.0);\r\n      opacity: 0.72;\r\n      filter: grayscale(0) brightness(0.95) contrast(1.05);\r\n    }\r\n\r\n    \/* ---- Gradient overlay ---- *\/\r\n    .panel-overlay {\r\n      position: absolute;\r\n      inset: 0;\r\n      z-index: 2;\r\n      transition: opacity 1s ease;\r\n      background:\r\n        linear-gradient(to top,\r\n          rgba(0,0,0,0.97) 0%,\r\n          rgba(0,0,0,0.7)  25%,\r\n          rgba(0,0,0,0.25) 55%,\r\n          rgba(0,0,0,0.1)  100%),\r\n        linear-gradient(to bottom,\r\n          rgba(0,0,0,0.6) 0%,\r\n          transparent 28%);\r\n    }\r\n\r\n    .theme-panel:hover .panel-overlay {\r\n      background:\r\n        linear-gradient(to top,\r\n          rgba(0,0,0,0.92) 0%,\r\n          rgba(0,0,0,0.45) 30%,\r\n          rgba(0,0,0,0.06) 65%,\r\n          transparent 100%),\r\n        linear-gradient(to bottom,\r\n          rgba(0,0,0,0.35) 0%,\r\n          transparent 22%);\r\n    }\r\n\r\n    \/* ---- Colour tint layer: unique per panel ---- *\/\r\n    .panel-tint {\r\n      position: absolute;\r\n      inset: 0;\r\n      z-index: 3;\r\n      opacity: 0;\r\n      transition: opacity 1.3s ease;\r\n      pointer-events: none;\r\n    }\r\n    .theme-panel:hover .panel-tint { opacity: 1; }\r\n\r\n    .panel-tint-mind   { background: radial-gradient(ellipse 80% 60% at 50% 85%, rgba(120,80,30,0.22) 0%, transparent 70%); }\r\n    .panel-tint-system { background: radial-gradient(ellipse 80% 60% at 50% 85%, rgba(20,60,120,0.2) 0%, transparent 70%); }\r\n    .panel-tint-vision { background: radial-gradient(ellipse 80% 60% at 50% 85%, rgba(40,80,50,0.2) 0%, transparent 70%); }\r\n    .panel-tint-legacy { background: radial-gradient(ellipse 80% 60% at 50% 85%, rgba(197,160,89,0.15) 0%, transparent 70%); }\r\n\r\n    \/* ---- Gold vignette ---- *\/\r\n    .panel-vignette {\r\n      position: absolute;\r\n      inset: 0;\r\n      z-index: 4;\r\n      pointer-events: none;\r\n      opacity: 0;\r\n      background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(197,160,89,0.05) 100%);\r\n      transition: opacity 1.4s ease;\r\n    }\r\n    .theme-panel:hover .panel-vignette { opacity: 1; }\r\n\r\n    \/* ---- Top & bottom accent lines ---- *\/\r\n    .panel-top-line {\r\n      position: absolute;\r\n      top: 0; left: 0; right: 0;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, transparent 0%, var(--accent-gold) 50%, transparent 100%);\r\n      z-index: 12;\r\n      transform: scaleX(0);\r\n      transform-origin: center;\r\n      transition: transform 0.9s var(--ease-expo) 0.1s;\r\n    }\r\n    .theme-panel:hover .panel-top-line { transform: scaleX(1); }\r\n\r\n    .panel-bottom-line {\r\n      position: absolute;\r\n      bottom: 0; left: 0; right: 0;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, transparent 0%, rgba(197,160,89,0.45) 50%, transparent 100%);\r\n      z-index: 12;\r\n      transform: scaleX(0);\r\n      transform-origin: center;\r\n      transition: transform 0.7s var(--ease-expo) 0.2s;\r\n    }\r\n    .theme-panel:hover .panel-bottom-line { transform: scaleX(1); }\r\n\r\n    \/* ---- Particles canvas ---- *\/\r\n    .panel-canvas {\r\n      position: absolute;\r\n      inset: 0;\r\n      z-index: 5;\r\n      pointer-events: none;\r\n      opacity: 0;\r\n      transition: opacity 0.8s ease;\r\n    }\r\n    .theme-panel:hover .panel-canvas { opacity: 1; }\r\n\r\n    \/* ---- Ghost index numeral ---- *\/\r\n    .panel-index {\r\n      position: absolute;\r\n      bottom: 30px;\r\n      right: 28px;\r\n      font-family: 'Playfair Display', serif;\r\n      font-size: 9rem;\r\n      font-style: italic;\r\n      line-height: 1;\r\n      color: rgba(255,255,255,0.04);\r\n      z-index: 6;\r\n      pointer-events: none;\r\n      transition: color 1.1s ease, transform 1.1s var(--ease-expo), opacity 0.9s ease;\r\n      opacity: 0.6;\r\n    }\r\n    .theme-panel:hover .panel-index {\r\n      color: rgba(197,160,89,0.10);\r\n      transform: translateY(-16px) scale(1.05);\r\n      opacity: 1;\r\n    }\r\n\r\n    \/* ---- Content wrapper ---- *\/\r\n    .panel-content {\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n      right: 0;\r\n      padding: 0 44px 68px;\r\n      z-index: 10;\r\n      transition: padding-bottom 0.9s var(--ease-expo);\r\n    }\r\n    .theme-panel:hover .panel-content { padding-bottom: 80px; }\r\n\r\n    \/* Label *\/\r\n    .panel-label {\r\n      font-size: 0.68rem;\r\n      letter-spacing: 0.65em;\r\n      color: var(--accent-gold);\r\n      text-transform: uppercase;\r\n      display: block;\r\n      margin-bottom: 0;\r\n      font-family: 'Cormorant Garamond', serif;\r\n      opacity: 0.5;\r\n      transform: translateY(6px);\r\n      transition: opacity 0.7s ease, letter-spacing 0.9s var(--ease-expo), transform 0.7s ease;\r\n    }\r\n    .theme-panel:hover .panel-label {\r\n      opacity: 1;\r\n      letter-spacing: 0.85em;\r\n      transform: translateY(0);\r\n    }\r\n\r\n    \/* Thin rule *\/\r\n    .panel-rule {\r\n      width: 0;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, var(--accent-gold-dim), transparent);\r\n      margin: 16px 0 18px;\r\n      transition: width 0.85s var(--ease-expo) 0.1s;\r\n    }\r\n    .theme-panel:hover .panel-rule { width: 56px; }\r\n\r\n    \/* Heading *\/\r\n    .panel-content h4 {\r\n      font-family: 'Playfair Display', serif;\r\n      font-size: clamp(1.9rem,3.2vw,2.9rem);\r\n      font-weight: 400;\r\n      line-height: 1.08;\r\n      color: #fff;\r\n      margin: 0 0 24px;\r\n      transition: text-shadow 0.9s ease, transform 0.9s var(--ease-expo), letter-spacing 0.9s ease;\r\n      letter-spacing: -0.01em;\r\n    }\r\n    .theme-panel:hover .panel-content h4 {\r\n      text-shadow: 0 4px 40px rgba(0,0,0,0.7);\r\n      letter-spacing: 0;\r\n    }\r\n\r\n    \/* Ornament row *\/\r\n    .panel-ornament {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 14px;\r\n      opacity: 0;\r\n      transform: translateY(14px);\r\n      transition: opacity 0.65s ease 0.32s, transform 0.65s var(--ease-expo) 0.32s;\r\n    }\r\n    .theme-panel:hover .panel-ornament { opacity: 1; transform: translateY(0); }\r\n\r\n    .panel-ornament-line {\r\n      flex: 1;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, var(--accent-gold-dim), transparent);\r\n      max-width: 48px;\r\n    }\r\n    .panel-ornament-line.right {\r\n      background: linear-gradient(90deg, transparent, var(--accent-gold-dim));\r\n    }\r\n    .panel-ornament-dot {\r\n      width: 4px;\r\n      height: 4px;\r\n      border-radius: 50%;\r\n      background: var(--accent-gold);\r\n      box-shadow: 0 0 7px var(--accent-gold), 0 0 14px rgba(197,160,89,0.4);\r\n    }\r\n\r\n    \/* CTA *\/\r\n    .panel-cta {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n      margin-top: 22px;\r\n      font-size: 0.72rem;\r\n      letter-spacing: 0.55em;\r\n      text-transform: uppercase;\r\n      color: rgba(197,160,89,0.75);\r\n      font-family: 'Cormorant Garamond', serif;\r\n      opacity: 0;\r\n      transform: translateY(12px);\r\n      transition: opacity 0.6s ease 0.42s, transform 0.6s var(--ease-expo) 0.42s, color 0.3s ease;\r\n    }\r\n    .panel-cta-arrow {\r\n      width: 20px;\r\n      height: 1px;\r\n      background: rgba(197,160,89,0.5);\r\n      position: relative;\r\n      transition: width 0.4s var(--ease-expo);\r\n    }\r\n    .panel-cta-arrow::after {\r\n      content: '';\r\n      position: absolute;\r\n      right: 0;\r\n      top: 50%;\r\n      transform: translateY(-50%) rotate(45deg);\r\n      width: 5px; height: 5px;\r\n      border-top: 1px solid rgba(197,160,89,0.5);\r\n      border-right: 1px solid rgba(197,160,89,0.5);\r\n    }\r\n    .theme-panel:hover .panel-cta { opacity: 1; transform: translateY(0); }\r\n    .theme-panel:hover .panel-cta:hover { color: var(--accent-gold-bright); }\r\n    .theme-panel:hover .panel-cta:hover .panel-cta-arrow { width: 30px; }\r\n\r\n    \/* Non-hovered panels get dim treatment *\/\r\n    .themes-discovery:has(.theme-panel:hover) .theme-panel:not(:hover) {\r\n      flex: 0.65;\r\n    }\r\n    .themes-discovery:has(.theme-panel:hover) .theme-panel:not(:hover) .panel-bg {\r\n      filter: grayscale(1) brightness(0.25) contrast(1.1);\r\n      opacity: 0.2;\r\n    }\r\n    .themes-discovery:has(.theme-panel:hover) .theme-panel:not(:hover) .panel-content h4 {\r\n      opacity: 0.35;\r\n    }\r\n    .themes-discovery:has(.theme-panel:hover) .theme-panel:not(:hover) .panel-label {\r\n      opacity: 0.2;\r\n    }\r\n\r\n    \/* ---- Scroll reveal ---- *\/\r\n    .reveal { opacity: 0; transform: translateY(60px); transition: 1.2s var(--ease-gallery); }\r\n    .reveal.active { opacity: 1; transform: translateY(0); }\r\n\r\n    @media (max-width: 1100px) {\r\n      .gallery-stage { flex-direction: column; align-items: center; gap: 80px; }\r\n      .themes-discovery { flex-direction: column; height: auto; }\r\n      .theme-panel { height: 500px; }\r\n      .themes-discovery:has(.theme-panel:hover) .theme-panel:not(:hover) { flex: 1; }\r\n      .gallery-progress { display: none; }\r\n      .gallery-vlines::before, .gallery-vlines::after { display: none; }\r\n    }\r\n  <\/style>\r\n\r\n  <!-- SECTION 1: BOOKS GALLERY -->\r\n  <section class=\"gallery-section\">\r\n    <canvas id=\"gallery-canvas\"><\/canvas>\r\n    <div class=\"gallery-grain\"><\/div>\r\n    <div class=\"gallery-ruled\"><\/div>\r\n    <div class=\"gallery-vlines\"><\/div>\r\n    <div class=\"gallery-mouse-glow\" id=\"mouseGlow\"><\/div>\r\n\r\n    <div class=\"gallery-container\">\r\n      <div class=\"gallery-header reveal\" style=\"position:relative;\">\r\n        <div class=\"header-numeral\">IV<\/div>\r\n        <span>SELECTED WORKS<\/span>\r\n        <h2>The Collection<\/h2>\r\n      <\/div>\r\n\r\n      <div class=\"gallery-stage\">\r\n        <div class=\"gallery-item book-scroll-reveal\" data-idx=\"0\" style=\"transition-delay:0s;\">\r\n          <div class=\"item-index\">I<\/div>\r\n          <div class=\"book-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/3.png\" alt=\"Book 1\">\r\n          <\/div>\r\n          <div class=\"book-reflection\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/3.png\" alt=\"\"><\/div>\r\n          <div class=\"book-glow\"><\/div>\r\n          <div class=\"pedestal-line\"><\/div>\r\n          <div class=\"item-info\">\r\n            <p>Psychological Thriller<\/p>\r\n            <h3>The Damage of Betrayal<\/h3>\r\n            <a href=\"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/books\/\" class=\"item-read-more\">Read More<span class=\"item-read-more-arrow\"><\/span><\/a>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gallery-item book-scroll-reveal\" data-idx=\"1\" style=\"transition-delay:0.1s;\">\r\n          <div class=\"item-index\">II<\/div>\r\n          <div class=\"book-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/1.png\" alt=\"Book 2\">\r\n          <\/div>\r\n          <div class=\"book-reflection\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/1.png\" alt=\"\"><\/div>\r\n          <div class=\"book-glow\"><\/div>\r\n          <div class=\"pedestal-line\"><\/div>\r\n          <div class=\"item-info\">\r\n            <p>Vehicle Guide<\/p>\r\n            <h3>How to Fix & Maintain Your Vehicle<\/h3>\r\n            <a href=\"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/books\/\" class=\"item-read-more\">Read More<span class=\"item-read-more-arrow\"><\/span><\/a>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gallery-item book-scroll-reveal\" data-idx=\"2\" style=\"transition-delay:0.2s;\">\r\n          <div class=\"item-index\">III<\/div>\r\n          <div class=\"book-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/1-cover.png\" alt=\"Book 4\">\r\n          <\/div>\r\n          <div class=\"book-reflection\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/1-cover.png\" alt=\"\"><\/div>\r\n          <div class=\"book-glow\"><\/div>\r\n          <div class=\"pedestal-line\"><\/div>\r\n          <div class=\"item-info\">\r\n            <p>Motivational<\/p>\r\n            <h3>Manifesting The Law Of Change<\/h3>\r\n            <a href=\"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/books\/\" class=\"item-read-more\">Read More<span class=\"item-read-more-arrow\"><\/span><\/a>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gallery-item is-coming-soon book-scroll-reveal\" data-idx=\"3\" style=\"transition-delay:0.3s;\">\r\n          <div class=\"item-index\">IV<\/div>\r\n          <div class=\"book-frame\">\r\n            <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/2.png\" alt=\"Book 3\">\r\n          <\/div>\r\n          <div class=\"book-reflection\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/2.png\" alt=\"\"><\/div>\r\n          <div class=\"book-glow\"><\/div>\r\n          <div class=\"pedestal-line\"><\/div>\r\n          <div class=\"item-info\">\r\n            <p>Coming Soon<\/p>\r\n            <h3>Mermalators<\/h3>\r\n            <a href=\"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/books\/\" class=\"item-read-more\">Read More<span class=\"item-read-more-arrow\"><\/span><\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"gallery-progress\">\r\n        <div class=\"progress-bar\" id=\"galleryProg\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 2: DISCOVERY THEMES -->\r\n  <section class=\"themes-discovery\">\r\n\r\n    <!-- Panel 1: MIND -->\r\n    <div class=\"theme-panel reveal\">\r\n      <canvas class=\"panel-canvas\" data-panel=\"0\"><\/canvas>\r\n      <div class=\"panel-bg\" style=\"background-image:url('https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/thriller.jpg');\"><\/div>\r\n      <div class=\"panel-overlay\"><\/div>\r\n      <div class=\"panel-tint panel-tint-mind\"><\/div>\r\n      <div class=\"panel-vignette\"><\/div>\r\n      <div class=\"panel-top-line\"><\/div>\r\n      <div class=\"panel-bottom-line\"><\/div>\r\n      <div class=\"panel-index\">I<\/div>\r\n      <div class=\"panel-content\">\r\n        <span class=\"panel-label\">01 \u2014 Mind<\/span>\r\n        <div class=\"panel-rule\"><\/div>\r\n        <h4>Psychological<br>Depth<\/h4>\r\n        <div class=\"panel-ornament\"><div class=\"panel-ornament-line\"><\/div><div class=\"panel-ornament-dot\"><\/div><div class=\"panel-ornament-line right\"><\/div><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Panel 2: SYSTEM -->\r\n    <div class=\"theme-panel reveal\" style=\"transition-delay:0.1s;\">\r\n      <canvas class=\"panel-canvas\" data-panel=\"1\"><\/canvas>\r\n      <div class=\"panel-bg\" style=\"background-image:url('https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/car.jpg');\"><\/div>\r\n      <div class=\"panel-overlay\"><\/div>\r\n      <div class=\"panel-tint panel-tint-system\"><\/div>\r\n      <div class=\"panel-vignette\"><\/div>\r\n      <div class=\"panel-top-line\"><\/div>\r\n      <div class=\"panel-bottom-line\"><\/div>\r\n      <div class=\"panel-index\">II<\/div>\r\n      <div class=\"panel-content\">\r\n        <span class=\"panel-label\">02 \u2014 System<\/span>\r\n        <div class=\"panel-rule\"><\/div>\r\n        <h4>Worldly<br>Knowledge<\/h4>\r\n        <div class=\"panel-ornament\"><div class=\"panel-ornament-line\"><\/div><div class=\"panel-ornament-dot\"><\/div><div class=\"panel-ornament-line right\"><\/div><\/div>\r\n        \r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Panel 3: VISION -->\r\n    <div class=\"theme-panel reveal\" style=\"transition-delay:0.2s;\">\r\n      <canvas class=\"panel-canvas\" data-panel=\"2\"><\/canvas>\r\n      <div class=\"panel-bg\" style=\"background-image:url('https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/coming-soon.png');\"><\/div>\r\n      <div class=\"panel-overlay\"><\/div>\r\n      <div class=\"panel-tint panel-tint-vision\"><\/div>\r\n      <div class=\"panel-vignette\"><\/div>\r\n      <div class=\"panel-top-line\"><\/div>\r\n      <div class=\"panel-bottom-line\"><\/div>\r\n      <div class=\"panel-index\">III<\/div>\r\n      <div class=\"panel-content\">\r\n        <span class=\"panel-label\">03 \u2014 Vision<\/span>\r\n        <div class=\"panel-rule\"><\/div>\r\n        <h4>Hidden<br>Worlds<\/h4>\r\n        <div class=\"panel-ornament\"><div class=\"panel-ornament-line\"><\/div><div class=\"panel-ornament-dot\"><\/div><div class=\"panel-ornament-line right\"><\/div><\/div>\r\n       \r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Panel 4: LEGACY -->\r\n    <div class=\"theme-panel reveal\" style=\"transition-delay:0.3s;\">\r\n      <canvas class=\"panel-canvas\" data-panel=\"3\"><\/canvas>\r\n      <div class=\"panel-bg\" style=\"background-image:url('https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/2151038387.jpg');\"><\/div>\r\n      <div class=\"panel-overlay\"><\/div>\r\n      <div class=\"panel-tint panel-tint-legacy\"><\/div>\r\n      <div class=\"panel-vignette\"><\/div>\r\n      <div class=\"panel-top-line\"><\/div>\r\n      <div class=\"panel-bottom-line\"><\/div>\r\n      <div class=\"panel-index\">IV<\/div>\r\n      <div class=\"panel-content\">\r\n        <span class=\"panel-label\">04 \u2014 Legacy<\/span>\r\n        <div class=\"panel-rule\"><\/div>\r\n        <h4>Life<br>Transformation<\/h4>\r\n        <div class=\"panel-ornament\"><div class=\"panel-ornament-line\"><\/div><div class=\"panel-ornament-dot\"><\/div><div class=\"panel-ornament-line right\"><\/div><\/div>\r\n    \r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n  <script>\r\n  (function() {\r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('active'); });\r\n    }, { threshold: 0.12 });\r\n    document.querySelectorAll('#pro-portfolio-showcase .reveal, #pro-portfolio-showcase .book-scroll-reveal').forEach(el => observer.observe(el));\r\n\r\n    const items = document.querySelectorAll('.gallery-item');\r\n    const progress = document.getElementById('galleryProg');\r\n    items.forEach(item => {\r\n      item.addEventListener('mouseenter', () => {\r\n        progress.style.transform = `translateX(${item.getAttribute('data-idx') * 100}%)`;\r\n      });\r\n    });\r\n\r\n    const glow = document.getElementById('mouseGlow');\r\n    const gallerySection = document.querySelector('.gallery-section');\r\n    gallerySection.addEventListener('mousemove', (e) => {\r\n      const rect = gallerySection.getBoundingClientRect();\r\n      glow.style.left = (e.clientX - rect.left) + 'px';\r\n      glow.style.top  = (e.clientY - rect.top)  + 'px';\r\n    });\r\n\r\n    const galCanvas = document.getElementById('gallery-canvas');\r\n    const ctx = galCanvas.getContext('2d');\r\n    let W, H, particles;\r\n    function resize() { W = galCanvas.width = galCanvas.offsetWidth; H = galCanvas.height = galCanvas.offsetHeight; }\r\n    function initParticles() {\r\n      particles = Array.from({ length: 90 }, () => ({\r\n        x: Math.random() * W, y: Math.random() * H,\r\n        r: Math.random() * 1.2 + 0.3,\r\n        vx: (Math.random() - 0.5) * 0.18,\r\n        vy: (Math.random() - 0.5) * 0.12 - 0.06,\r\n        a: Math.random() * 0.5 + 0.1,\r\n        life: Math.random() * Math.PI * 2,\r\n        speed: Math.random() * 0.008 + 0.004,\r\n      }));\r\n    }\r\n    function drawGallery() {\r\n      ctx.clearRect(0, 0, W, H);\r\n      const grad = ctx.createRadialGradient(W\/2, H, 0, W\/2, H, H * 0.9);\r\n      grad.addColorStop(0, 'rgba(197,160,89,0.04)'); grad.addColorStop(1, 'rgba(3,3,5,0)');\r\n      ctx.fillStyle = grad; ctx.fillRect(0, 0, W, H);\r\n      particles.forEach(p => {\r\n        p.life += p.speed; const alpha = p.a * (0.5 + 0.5 * Math.sin(p.life));\r\n        ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fillStyle = `rgba(197,160,89,${alpha.toFixed(3)})`; ctx.fill();\r\n        p.x += p.vx; p.y += p.vy;\r\n        if (p.y < -10) { p.y = H + 10; p.x = Math.random() * W; }\r\n        if (p.x < -10) p.x = W + 10; if (p.x > W + 10) p.x = -10;\r\n      });\r\n      requestAnimationFrame(drawGallery);\r\n    }\r\n    resize(); initParticles(); drawGallery();\r\n    window.addEventListener('resize', () => { resize(); initParticles(); });\r\n\r\n    document.querySelectorAll('.panel-canvas').forEach(canvas => {\r\n      const pCtx = canvas.getContext('2d');\r\n      let pW, pH, motes = [], active = false;\r\n      const panel = canvas.closest('.theme-panel');\r\n      function resizePanel() { pW = canvas.width = panel.offsetWidth; pH = canvas.height = panel.offsetHeight; }\r\n      function spawnMote() { motes.push({ x: Math.random() * pW, y: pH + 10, r: Math.random() * 1.8 + 0.3, vy: -(Math.random() * 1.1 + 0.4), vx: (Math.random() - 0.5) * 0.5, life: 1, decay: Math.random() * 0.0035 + 0.002 }); }\r\n      function drawPanel() {\r\n        pCtx.clearRect(0, 0, pW, pH);\r\n        if (active && Math.random() < 0.5) spawnMote();\r\n        motes = motes.filter(m => m.life > 0);\r\n        motes.forEach(m => { m.y += m.vy; m.x += m.vx; m.life -= m.decay; pCtx.beginPath(); pCtx.arc(m.x, m.y, m.r, 0, Math.PI * 2); pCtx.fillStyle = `rgba(197,160,89,${(m.life * 0.55).toFixed(3)})`; pCtx.fill(); });\r\n        requestAnimationFrame(drawPanel);\r\n      }\r\n      panel.addEventListener('mouseenter', () => { active = true; resizePanel(); });\r\n      panel.addEventListener('mouseleave', () => { active = false; });\r\n      resizePanel(); drawPanel();\r\n    });\r\n  })();\r\n  <\/script>\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-66d0933 e-con-full e-flex e-con e-parent\" data-id=\"66d0933\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bb8a85c elementor-widget elementor-widget-html\" data-id=\"bb8a85c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"mermalators-editorial-teaser\">\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,500;1,300&family=Inter:wght@200;400&family=Playfair+Display:wght@400;700&display=swap');\r\n\r\n        #mermalators-editorial-teaser {\r\n            --midnight: #05070a;\r\n            --gold-leaf: #c5a059;\r\n            --gold-dim: rgba(197, 160, 89, 0.2);\r\n            --platinum: #e5e5e5;\r\n            --text-muted: rgba(255, 255, 255, 0.5);\r\n            --ease-elegant: cubic-bezier(0.16, 1, 0.3, 1);\r\n            \r\n            position: relative;\r\n            width: 100%;\r\n            min-height: 95vh;\r\n            padding: 120px 8% !important;\r\n            background-color: var(--midnight) !important;\r\n            display: flex;\r\n            align-items: center;\r\n            overflow: hidden;\r\n            font-family: 'Inter', sans-serif;\r\n            color: var(--platinum);\r\n        }\r\n\r\n        \/* --- THE ATMOSPHERE --- *\/\r\n        #mermalators-editorial-teaser .canvas-overlay {\r\n            position: absolute;\r\n            inset: 0;\r\n            background: \r\n                radial-gradient(circle at 80% 20%, rgba(197, 160, 89, 0.05) 0%, transparent 50%),\r\n                radial-gradient(circle at 20% 80%, rgba(197, 160, 89, 0.03) 0%, transparent 50%);\r\n            z-index: 1;\r\n        }\r\n\r\n        \/* Silk Grain Texture *\/\r\n        #mermalators-editorial-teaser .texture {\r\n            position: absolute;\r\n            inset: 0;\r\n            background: url('https:\/\/www.transparenttextures.com\/patterns\/stardust.png');\r\n            opacity: 0.15;\r\n            z-index: 2;\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* --- EDITORIAL GRID --- *\/\r\n        #mermalators-editorial-teaser .main-layout {\r\n            position: relative;\r\n            z-index: 10;\r\n            width: 100%;\r\n            max-width: 1500px;\r\n            margin: 0 auto;\r\n            display: grid;\r\n            grid-template-columns: 1.1fr 0.9fr;\r\n            gap: 100px;\r\n            align-items: center;\r\n        }\r\n\r\n        \/* --- LEFT CONTENT: THE STATEMENT --- *\/\r\n        #mermalators-editorial-teaser .content-lockup {\r\n            position: relative;\r\n        }\r\n\r\n        \/* Top Accent *\/\r\n        #mermalators-editorial-teaser .chapter-mark {\r\n            font-size: 0.65rem;\r\n            letter-spacing: 0.6em;\r\n            text-transform: uppercase;\r\n            color: var(--gold-leaf);\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 20px;\r\n            margin-bottom: 40px;\r\n        }\r\n\r\n        #mermalators-editorial-teaser .chapter-mark::after {\r\n            content: '';\r\n            width: 60px;\r\n            height: 1px;\r\n            background: var(--gold-dim);\r\n        }\r\n\r\n        #mermalators-editorial-teaser h2 {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: clamp(3.5rem, 6vw, 6.5rem);\r\n            line-height: 0.95;\r\n            font-weight: 400;\r\n            margin-bottom: 40px;\r\n            letter-spacing: -0.03em;\r\n            color: #fff !important;\r\n        }\r\n\r\n        #mermalators-editorial-teaser h2 span {\r\n            display: block;\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-style: italic;\r\n            font-weight: 300;\r\n            font-size: 0.8em;\r\n            color: var(--gold-leaf);\r\n            margin-top: 10px;\r\n        }\r\n\r\n        #mermalators-editorial-teaser .editorial-copy {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-size: 1.4rem;\r\n            line-height: 1.7;\r\n            color: #fff !important;\r\n            max-width: 520px;\r\n            margin-bottom: 50px;\r\n            font-style: italic;\r\n        }\r\n\r\n        \/* Premium CTA *\/\r\n        #mermalators-editorial-teaser .cta-link {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 20px;\r\n            text-decoration: none;\r\n            color: #fff;\r\n            font-size: 0.8rem;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.4em;\r\n            transition: var(--ease-elegant);\r\n            padding-bottom: 8px;\r\n            border-bottom: 1px solid var(--gold-dim);\r\n        }\r\n\r\n        #mermalators-editorial-teaser .cta-link:hover {\r\n            color: var(--gold-leaf);\r\n            border-color: var(--gold-leaf);\r\n            padding-right: 15px;\r\n        }\r\n\r\n        \/* --- RIGHT CONTENT: THE EXHIBIT --- *\/\r\n        #mermalators-editorial-teaser .image-exhibit {\r\n            position: relative;\r\n            display: flex;\r\n            justify-content: center;\r\n        }\r\n\r\n        #mermalators-editorial-teaser .image-frame {\r\n            position: relative;\r\n            padding: 30px;\r\n            border: 1px solid rgba(197, 160, 89, 0.15);\r\n        }\r\n\r\n        #mermalators-editorial-teaser .image-frame::before,\r\n        #mermalators-editorial-teaser .image-frame::after {\r\n            content: '';\r\n            position: absolute;\r\n            width: 15px;\r\n            height: 15px;\r\n            border-color: var(--gold-leaf);\r\n            border-style: solid;\r\n        }\r\n\r\n        #mermalators-editorial-teaser .image-frame::before {\r\n            top: -1px; left: -1px; border-width: 1px 0 0 1px;\r\n        }\r\n\r\n        #mermalators-editorial-teaser .image-frame::after {\r\n            bottom: -1px; right: -1px; border-width: 0 1px 1px 0;\r\n        }\r\n\r\n        #mermalators-editorial-teaser .book-img {\r\n            width: 100%;\r\n            max-width: 420px;\r\n            height: auto;\r\n            display: block;\r\n            box-shadow: 0 40px 100px rgba(0,0,0,0.9);\r\n            filter: grayscale(10%) contrast(1.1);\r\n            transition: 1.5s var(--ease-elegant);\r\n        }\r\n\r\n        #mermalators-editorial-teaser .image-frame:hover .book-img {\r\n            transform: scale(1.02);\r\n            filter: grayscale(0%) contrast(1.1);\r\n        }\r\n\r\n        \/* Floating Particles *\/\r\n        .dust-particle {\r\n            position: absolute;\r\n            background: var(--gold-leaf);\r\n            border-radius: 50%;\r\n            pointer-events: none;\r\n            z-index: 5;\r\n            filter: blur(1px);\r\n        }\r\n\r\n        \/* --- REVEAL --- *\/\r\n        #mermalators-editorial-teaser .reveal {\r\n            opacity: 0;\r\n            transform: translateY(40px);\r\n            transition: all 1.8s var(--ease-elegant);\r\n        }\r\n\r\n        #mermalators-editorial-teaser.active .reveal {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        #mermalators-editorial-teaser.active .reveal-1 { transition-delay: 0.1s; }\r\n        #mermalators-editorial-teaser.active .reveal-2 { transition-delay: 0.3s; }\r\n        #mermalators-editorial-teaser.active .reveal-3 { transition-delay: 0.5s; }\r\n\r\n        @media (max-width: 1100px) {\r\n            #mermalators-editorial-teaser .main-layout {\r\n                grid-template-columns: 1fr;\r\n                gap: 60px;\r\n                text-align: center;\r\n            }\r\n            #mermalators-editorial-teaser .chapter-mark { justify-content: center; }\r\n            #mermalators-editorial-teaser .editorial-copy { margin-left: auto; margin-right: auto; }\r\n            #mermalators-editorial-teaser .cta-link { justify-content: center; }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"canvas-overlay\"><\/div>\r\n    <div class=\"texture\"><\/div>\r\n    <div id=\"particleCanvas\"><\/div>\r\n\r\n    <div class=\"main-layout\">\r\n        <!-- Content Column -->\r\n        <div class=\"content-lockup\">\r\n            <div class=\"chapter-mark reveal reveal-1\">Upcoming Book \u2014 Mermalators<\/div>\r\n            \r\n            <h2 class=\"reveal reveal-2\">\r\n                A New World\r\n                <span>Is Coming.<\/span>\r\n            <\/h2>\r\n\r\n            <div class=\"editorial-copy reveal reveal-3\">\r\n                \u201cBeneath the silent weight of the Atlantic, a forgotten legacy begins to breathe. Join Michael Martino as he unveils the first chapter of a cinematic odyssey.\u201d\r\n            <\/div>\r\n\r\n            <div class=\"reveal reveal-3\" style=\"transition-delay: 0.7s;\">\r\n                <a href=\"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/books\/\" class=\"cta-link\">\r\n                    Explore the book\r\n                    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Exhibit Column -->\r\n        <div class=\"image-exhibit reveal reveal-3\" style=\"transition-delay: 0.9s;\">\r\n            <div class=\"image-frame\">\r\n                <img decoding=\"async\" \r\n                    class=\"book-img\" \r\n                    src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/2.png\" \r\n                    alt=\"Mermalators Book Cover\"\r\n                \/>\r\n                <div style=\"position: absolute; bottom: -40px; right: 0; font-size: 0.6rem; letter-spacing: 0.3em; color: var(--gold-dim);\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        (function() {\r\n            const section = document.getElementById('mermalators-editorial-teaser');\r\n            const particleCanvas = document.getElementById('particleCanvas');\r\n\r\n            \/\/ Trigger animations\r\n            const observer = new IntersectionObserver((entries) => {\r\n                entries.forEach(entry => {\r\n                    if (entry.isIntersecting) {\r\n                        section.classList.add('active');\r\n                    }\r\n                });\r\n            }, { threshold: 0.2 });\r\n            observer.observe(section);\r\n\r\n            \/\/ Create \"Weighted\" Micro-Particles\r\n            for (let i = 0; i < 40; i++) {\r\n                const particle = document.createElement('div');\r\n                particle.className = 'dust-particle';\r\n                \r\n                const size = Math.random() * 2 + 1;\r\n                const duration = Math.random() * 15 + 20;\r\n                const delay = Math.random() * -20;\r\n                const opacity = Math.random() * 0.4 + 0.1;\r\n\r\n                particle.style.cssText = `\r\n                    width: ${size}px;\r\n                    height: ${size}px;\r\n                    left: ${Math.random() * 100}%;\r\n                    top: ${Math.random() * 100}%;\r\n                    opacity: ${opacity};\r\n                    animation: drift ${duration}s linear ${delay}s infinite;\r\n                `;\r\n                particleCanvas.appendChild(particle);\r\n            }\r\n\r\n            \/\/ Keyframes for the drift\r\n            const style = document.createElement('style');\r\n            style.innerHTML = `\r\n                @keyframes drift {\r\n                    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }\r\n                    20% { opacity: var(--opacity); }\r\n                    80% { opacity: var(--opacity); }\r\n                    100% { transform: translate(${Math.random() * 100 - 50}px, -100vh) rotate(360deg); opacity: 0; }\r\n                }\r\n            `;\r\n            document.head.appendChild(style);\r\n        })();\r\n    <\/script>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-88de544 e-con-full e-flex e-con e-parent\" data-id=\"88de544\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a54e6e elementor-widget elementor-widget-html\" data-id=\"0a54e6e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ELEMENTOR ULTIMATE COMPONENT: REVIEW SLIDER -->\r\n<!-- FIX: Removed all visibility-blocking defaults to ensure it SHOWS in Elementor -->\r\n\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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Inter:wght@100;200;300;400;600&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* GLOBAL SCROLLBAR FIX *\/\r\n    html::-webkit-scrollbar, \r\n    body::-webkit-scrollbar { width: 10px; }\r\n    html::-webkit-scrollbar-thumb, \r\n    body::-webkit-scrollbar-thumb { background: #D4AE6A; border-radius: 10px; }\r\n    html { scrollbar-color: #D4AE6A #000; scrollbar-width: thin; }\r\n\r\n    .rev-ultimate-wrapper {\r\n        --rev-gold: #D4AE6A;\r\n        --rev-black: #000000;\r\n        --rev-silver: rgba(255, 255, 255, 0.9);\r\n        --rev-card-bg: rgba(15, 15, 15, 0.85);\r\n        --rev-border: rgba(255, 255, 255, 0.15);\r\n        \r\n        background-color: var(--rev-black);\r\n        color: #ffffff;\r\n        font-family: 'Inter', sans-serif;\r\n        padding: 100px 0;\r\n        width: 100%;\r\n        position: relative;\r\n        z-index: 76; \/* High z-index to stay above Elementor layers *\/\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* --- BACKGROUND ANIMATIONS: HIGH VISIBILITY --- *\/\r\n    .rev-bg-layer {\r\n        position: absolute;\r\n        inset: 0;\r\n        z-index: -1;\r\n        pointer-events: none;\r\n        background: #000; \/* Force black background *\/\r\n    }\r\n\r\n    .rev-orb {\r\n        position: absolute;\r\n        width: 800px;\r\n        height: 800px;\r\n        border-radius: 50%;\r\n        \/* HIGH OPACITY FOR VISIBILITY *\/\r\n        background: radial-gradient(circle, rgba(212, 174, 106, 0.4) 0%, transparent 70%);\r\n        filter: blur(100px);\r\n        will-change: transform;\r\n    }\r\n\r\n    .rev-orb-1 { top: -20%; left: -10%; }\r\n    .rev-orb-2 { bottom: -20%; right: -10%; background: radial-gradient(circle, rgba(212, 174, 106, 0.3) 0%, transparent 70%); }\r\n    .rev-orb-3 { top: 20%; left: 30%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); }\r\n\r\n    \/* Moving Dust\/Grain *\/\r\n    .rev-grain-overlay {\r\n        position: absolute;\r\n        inset: 0;\r\n        background-image: url('https:\/\/grainy-gradients.vercel.app\/noise.svg');\r\n        opacity: 0.05;\r\n        mix-blend-mode: overlay;\r\n    }\r\n\r\n    \/* --- CONTENT --- *\/\r\n    .rev-header-box {\r\n        text-align: center;\r\n        margin-bottom: 80px;\r\n        position: relative;\r\n        z-index: 10;\r\n        \/* Default visible but with transition *\/\r\n        transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);\r\n    }\r\n\r\n    .rev-header-box.hidden {\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n    }\r\n\r\n    .rev-tag-line {\r\n        font-size: 0.7rem;\r\n        letter-spacing: 0.8em;\r\n        text-transform: uppercase;\r\n        color: var(--rev-gold);\r\n        display: block;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .rev-main-title {\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: clamp(2.5rem, 5vw, 4rem);\r\n        font-weight: 400;\r\n        line-height: 1.1;\r\n        color: #D4AE6A !important;\r\n    }\r\n\r\n    \/* --- SLIDER ENGINE --- *\/\r\n    .rev-slider-area {\r\n        width: 100%;\r\n        position: relative;\r\n        display: flex;\r\n        overflow: hidden;\r\n        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\r\n        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);\r\n        transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);\r\n    }\r\n\r\n    .rev-slider-area.hidden {\r\n        opacity: 0;\r\n        transform: scale(0.98);\r\n    }\r\n\r\n    .rev-track-container {\r\n        display: flex;\r\n        gap: 30px;\r\n        width: max-content;\r\n        padding: 40px 0;\r\n        animation: rev-scroll-loop 60s linear infinite;\r\n    }\r\n\r\n    .rev-track-container:hover { animation-play-state: paused; }\r\n\r\n    @keyframes rev-scroll-loop {\r\n        0% { transform: translateX(0); }\r\n        100% { transform: translateX(calc(-50% - 15px)); }\r\n    }\r\n\r\n    \/* CARD DESIGN *\/\r\n    .rev-premium-card {\r\n        width: 400px;\r\n        background: var(--rev-card-bg);\r\n        border: 1px solid var(--rev-border);\r\n        padding: 50px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: space-between;\r\n        transition: all 0.5s ease;\r\n        backdrop-filter: blur(20px);\r\n        -webkit-backdrop-filter: blur(20px);\r\n        position: relative;\r\n    }\r\n\r\n    .rev-premium-card:hover {\r\n        border-color: var(--rev-gold);\r\n        transform: translateY(-10px);\r\n        box-shadow: 0 30px 60px rgba(0,0,0,0.8);\r\n    }\r\n\r\n    .rev-quote-bg {\r\n        position: absolute;\r\n        top: 20px;\r\n        right: 30px;\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: 8rem;\r\n        color: rgba(212, 174, 106, 0.1);\r\n        line-height: 1;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .rev-stars-box {\r\n        display: flex;\r\n        gap: 6px;\r\n        margin-bottom: 30px;\r\n    }\r\n\r\n    .rev-star-icon {\r\n        width: 14px;\r\n        height: 14px;\r\n        fill: var(--rev-gold);\r\n    }\r\n\r\n    .rev-quote-text {\r\n        font-family: 'Cormorant Garamond', serif;\r\n        font-size: 1.4rem;\r\n        font-style: italic;\r\n        color: var(--rev-silver);\r\n        line-height: 1.5;\r\n        margin-bottom: 40px;\r\n    }\r\n\r\n    .rev-author-box {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 20px;\r\n    }\r\n\r\n    .rev-initials {\r\n        width: 50px;\r\n        height: 50px;\r\n        border: 1px solid var(--rev-gold);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        font-family: 'Playfair Display', serif;\r\n        color: var(--rev-gold);\r\n        font-size: 1.1rem;\r\n    }\r\n\r\n    .rev-name-text {\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: 1.25rem;\r\n        color: #fff;\r\n        display: block;\r\n    }\r\n\r\n    .rev-role-text {\r\n        font-family: 'Inter', sans-serif;\r\n        font-size: 0.7rem;\r\n        letter-spacing: 0.2em;\r\n        text-transform: uppercase;\r\n        color: var(--rev-gold);\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .rev-premium-card { width: 340px; padding: 35px; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"rev-ultimate-wrapper\" id=\"revWidget\">\r\n    <!-- Visible Background Layer -->\r\n    <div class=\"rev-bg-layer\">\r\n        <div class=\"rev-orb rev-orb-1\" id=\"amOrb1\"><\/div>\r\n        <div class=\"rev-orb rev-orb-2\" id=\"amOrb2\"><\/div>\r\n        <div class=\"rev-orb rev-orb-3\" id=\"amOrb3\"><\/div>\r\n        <div class=\"rev-grain-overlay\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- Header (Starts Hidden, Revealed by JS) -->\r\n    <div class=\"rev-header-box hidden\" id=\"amHeader\">\r\n        <span class=\"rev-tag-line\">Testimonials<\/span>\r\n        <h2 class=\"rev-main-title\">Voices of the Elite<\/h2>\r\n    <\/div>\r\n\r\n    <!-- Slider (Starts Hidden, Revealed by JS) -->\r\n    <div class=\"rev-slider-area hidden\" id=\"amSlider\">\r\n        <div class=\"rev-track-container\" id=\"amTrack\">\r\n            <!-- Review 1 -->\r\n            <div class=\"rev-premium-card\">\r\n                <div class=\"rev-quote-bg\">\u201c<\/div>\r\n                <div class=\"rev-stars-box\">\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                <\/div>\r\n                <p class=\"rev-quote-text\">\"Every chapter feels like a carefully constructed puzzle. The psychological depth is unlike anything I've read in recent thrillers.\"<\/p>\r\n                <div class=\"rev-author-box\">\r\n                    <div class=\"rev-initials\">ER<\/div>\r\n                    <div class=\"rev-info-box\">\r\n                        <span class=\"rev-name-text\">Matthew<\/span>\r\n                        <span class=\"rev-role-text\">Literary Critic<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Review 2 -->\r\n            <div class=\"rev-premium-card\">\r\n                <div class=\"rev-quote-bg\">\u201c<\/div>\r\n                <div class=\"rev-stars-box\">\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                <\/div>\r\n                <p class=\"rev-quote-text\">\"Practical knowledge that actually shifts your perspective. This isn't just a book; it's a manual for modern empowerment.\"<\/p>\r\n                <div class=\"rev-author-box\">\r\n                    <div class=\"rev-initials\">MC<\/div>\r\n                    <div class=\"rev-info-box\">\r\n                        <span class=\"rev-name-text\">Mason<\/span>\r\n                        <span class=\"rev-role-text\">Entrepreneur<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Review 3 -->\r\n            <div class=\"rev-premium-card\">\r\n                <div class=\"rev-quote-bg\">\u201c<\/div>\r\n                <div class=\"rev-stars-box\">\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                    <svg class=\"rev-star-icon\" viewBox=\"0 0 24 24\"><path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\"\/><\/svg>\r\n                <\/div>\r\n                <p class=\"rev-quote-text\">\"The world-building is immersive. You don't just read these stories; you live them. A masterclass in speculative fiction.\"<\/p>\r\n                <div class=\"rev-author-box\">\r\n                    <div class=\"rev-initials\">SJ<\/div>\r\n                    <div class=\"rev-info-box\">\r\n                        <span class=\"rev-name-text\">Barbara<\/span>\r\n                        <span class=\"rev-role-text\">Novelist<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        \/\/ 1. Loop Track\r\n        const track = document.getElementById('amTrack');\r\n        if (track) {\r\n            track.innerHTML += track.innerHTML;\r\n        }\r\n\r\n        \/\/ 2. Elementor-Safe Reveal Logic\r\n        const amHeader = document.getElementById('amHeader');\r\n        const amSlider = document.getElementById('amSlider');\r\n        const amWidget = document.getElementById('revWidget');\r\n\r\n        const triggerReveal = () => {\r\n            amHeader.classList.remove('hidden');\r\n            amSlider.classList.remove('hidden');\r\n        };\r\n\r\n        \/\/ Reveal on scroll\r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) triggerReveal();\r\n            });\r\n        }, { threshold: 0.1 });\r\n\r\n        observer.observe(amWidget);\r\n\r\n        \/\/ FAILSAFE: Force reveal after 1.5 seconds if observer fails\r\n        setTimeout(triggerReveal, 1500);\r\n\r\n        \/\/ 3. High-Visibility Parallax\r\n        window.addEventListener('scroll', () => {\r\n            const scrolled = window.pageYOffset;\r\n            const orb1 = document.getElementById('amOrb1');\r\n            const orb2 = document.getElementById('amOrb2');\r\n            const orb3 = document.getElementById('amOrb3');\r\n            \r\n            if (orb1) orb1.style.transform = `translateY(${scrolled * 0.25}px)`;\r\n            if (orb2) orb2.style.transform = `translateY(${-scrolled * 0.15}px)`;\r\n            if (orb3) orb3.style.transform = `translateY(${scrolled * 0.1}px) scale(${1 + scrolled * 0.0001})`;\r\n        });\r\n    })();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7365fdc e-con-full e-flex e-con e-parent\" data-id=\"7365fdc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-46d68cd elementor-widget elementor-widget-html\" data-id=\"46d68cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"immersive-final-cta\">\r\n    <style>\r\n        #immersive-final-cta {\r\n            --bg-deep: #030305;\r\n            --accent-gold: #c5a059;\r\n            --accent-glow: rgba(197, 160, 89, 0.2);\r\n            --text-white: #ffffff;\r\n            --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);\r\n            \r\n            position: relative;\r\n            width: 100%;\r\n            padding: 180px 20px;\r\n            background-color: var(--bg-deep) !important;\r\n            overflow: hidden;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n\r\n        \/* --- LAYER 1: ATMOSPHERIC MIST & GLOWS --- *\/\r\n        .cta-atmosphere {\r\n            position: absolute;\r\n            inset: 0;\r\n            z-index: 1;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .mist-orb {\r\n            position: absolute;\r\n            width: 800px;\r\n            height: 800px;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);\r\n            filter: blur(100px);\r\n            opacity: 0.5;\r\n            animation: mistFloat 20s infinite ease-in-out;\r\n        }\r\n        .mist-1 { top: -20%; left: -10%; }\r\n        .mist-2 { bottom: -20%; right: -10%; animation-delay: -5s; }\r\n\r\n        @keyframes mistFloat {\r\n            0%, 100% { transform: translate(0, 0) scale(1); }\r\n            50% { transform: translate(100px, 50px) scale(1.2); }\r\n        }\r\n\r\n        \/* --- LAYER 2: PARALLAX GHOST TEXT --- *\/\r\n        .ghost-layer {\r\n            position: absolute;\r\n            inset: 0;\r\n            z-index: 2;\r\n            pointer-events: none;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n        }\r\n\r\n        .ghost-word {\r\n            position: absolute;\r\n            font-family: 'Playfair Display', serif;\r\n            font-weight: 900;\r\n            color: rgba(255, 255, 255, 0.03);\r\n            text-transform: uppercase;\r\n            white-space: nowrap;\r\n            letter-spacing: 0.1em;\r\n            user-select: none;\r\n        }\r\n\r\n        .word-1 { font-size: 15rem; top: 10%; left: -5%; transform: rotate(-5deg); }\r\n        .word-2 { font-size: 12rem; bottom: 10%; right: -5%; transform: rotate(5deg); }\r\n        .word-3 { font-size: 8rem; top: 40%; right: 10%; opacity: 0.02; }\r\n\r\n        \/* --- LAYER 3: DUST & STARS --- *\/\r\n        #immersive-final-cta .particles-container {\r\n            position: absolute;\r\n            inset: 0;\r\n            z-index: 3;\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* --- CENTRAL CONTENT --- *\/\r\n        .cta-content-wrapper {\r\n            position: relative;\r\n            z-index: 10;\r\n            max-width: 900px;\r\n            text-align: center;\r\n        }\r\n\r\n        .cta-pre-title {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-size: 1rem;\r\n            letter-spacing: 0.6em;\r\n            color: var(--accent-gold);\r\n            text-transform: uppercase;\r\n            margin-bottom: 30px;\r\n            display: block;\r\n        }\r\n\r\n        #immersive-final-cta h2 {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: clamp(3.5rem, 8vw, 6.5rem);\r\n            line-height: 0.95;\r\n            color: var(--text-white);\r\n            margin-bottom: 60px;\r\n            text-shadow: 0 0 50px rgba(0,0,0,0.5);\r\n        }\r\n\r\n        #immersive-final-cta h2 span {\r\n            display: block;\r\n            font-style: italic;\r\n            color: var(--accent-gold);\r\n        }\r\n\r\n        \/* --- PREMIUM BUTTONS --- *\/\r\n        .cta-btns {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 40px;\r\n            align-items: center;\r\n        }\r\n\r\n        .btn-premium {\r\n            position: relative;\r\n            padding: 24px 55px;\r\n            font-size: 0.85rem;\r\n            font-weight: 600;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.4em;\r\n            text-decoration: none !important;\r\n            border-radius: 4px;\r\n            transition: all 0.8s var(--ease-out-expo);\r\n            overflow: hidden;\r\n            display: inline-block;\r\n        }\r\n\r\n        \/* Gold Button *\/\r\n        .btn-gold {\r\n            background: var(--accent-gold);\r\n            color: #000 !important;\r\n            border: 1px solid var(--accent-gold);\r\n            box-shadow: 0 0 30px var(--accent-glow);\r\n        }\r\n\r\n        .btn-gold:hover {\r\n            transform: scale(1.1) translateY(-10px);\r\n            background: #fff;\r\n            box-shadow: 0 25px 50px rgba(197, 160, 89, 0.4);\r\n        }\r\n\r\n        \/* Ghost Button *\/\r\n        .btn-ghost {\r\n            background: transparent;\r\n            color: #fff !important;\r\n            border: 1px solid rgba(255, 255, 255, 0.2);\r\n            backdrop-filter: blur(10px);\r\n        }\r\n\r\n        .btn-ghost:hover {\r\n            transform: scale(1.1) translateY(-10px);\r\n            border-color: var(--accent-gold);\r\n            background: rgba(197, 160, 89, 0.1);\r\n            color: #fff !important;\r\n        }\r\n\r\n        \/* --- ENTRANCE REVEAL --- *\/\r\n        .reveal-node {\r\n            opacity: 0;\r\n            transform: translateY(50px);\r\n            transition: all 1.8s var(--ease-out-expo);\r\n        }\r\n\r\n        #immersive-final-cta.active .reveal-node {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            #immersive-final-cta { padding: 120px 20px; }\r\n            .cta-btns { flex-direction: column; width: 100%; }\r\n            .btn-premium { width: 100%; text-align: center; }\r\n            .word-1, .word-2, .word-3 { font-size: 6rem; }\r\n        }\r\n    <\/style>\r\n\r\n    <!-- Background Layers -->\r\n    <div class=\"cta-atmosphere\">\r\n        <div class=\"mist-orb mist-1\"><\/div>\r\n        <div class=\"mist-orb mist-2\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ghost-layer\">\r\n        <div class=\"ghost-word word-1\">Imagine<\/div>\r\n        <div class=\"ghost-word word-2\">Survive<\/div>\r\n        <div class=\"ghost-word word-3\">Discover<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"particles-container\" id=\"ctaParticles\"><\/div>\r\n\r\n    <!-- Content -->\r\n    <div class=\"cta-content-wrapper\">\r\n        <span class=\"cta-pre-title reveal-node\">The Journey Continues<\/span>\r\n        \r\n        <h2 class=\"reveal-node\" style=\"transition-delay: 0.2s;\">\r\n            Step Into <br>\r\n            <span>The Story<\/span>\r\n        <\/h2>\r\n        \r\n        <div class=\"cta-btns reveal-node\" style=\"transition-delay: 0.4s;\">\r\n            <a href=\"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/books\/#\" class=\"btn-premium btn-gold\">Explore Books<\/a>\r\n            <a href=\"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/contact\/\" class=\"btn-premium btn-ghost\">Contact Michael<\/a>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        (function() {\r\n            const section = document.getElementById('immersive-final-cta');\r\n            const pContainer = document.getElementById('ctaParticles');\r\n\r\n            \/\/ 1. Entrance Trigger\r\n            const observer = new IntersectionObserver((entries) => {\r\n                entries.forEach(entry => {\r\n                    if (entry.isIntersecting) section.classList.add('active');\r\n                });\r\n            }, { threshold: 0.3 });\r\n            observer.observe(section);\r\n\r\n            \/\/ 2. High-Density Dust Particle Generator\r\n            for (let i = 0; i < 80; i++) {\r\n                const p = document.createElement('div');\r\n                p.style.position = 'absolute';\r\n                p.style.width = Math.random() * 3 + 'px';\r\n                p.style.height = p.style.width;\r\n                p.style.background = 'rgba(197, 160, 89, 0.4)';\r\n                p.style.borderRadius = '50%';\r\n                p.style.left = Math.random() * 100 + '%';\r\n                p.style.top = Math.random() * 100 + '%';\r\n                \r\n                \/\/ Random floating animation\r\n                p.animate([\r\n                    { transform: 'translateY(0) rotate(0deg)', opacity: 0 },\r\n                    { opacity: 0.6, offset: 0.5 },\r\n                    { transform: `translateY(-${Math.random() * 200 + 100}px) rotate(360deg)`, opacity: 0 }\r\n                ], {\r\n                    duration: Math.random() * 10000 + 8000,\r\n                    iterations: Infinity,\r\n                    delay: Math.random() * 5000\r\n                });\r\n                \r\n                pContainer.appendChild(p);\r\n            }\r\n\r\n            \/\/ 3. Mouse Parallax for Ghost Words\r\n            window.addEventListener('mousemove', (e) => {\r\n                const words = document.querySelectorAll('.ghost-word');\r\n                const x = (e.clientX \/ window.innerWidth - 0.5) * 50;\r\n                const y = (e.clientY \/ window.innerHeight - 0.5) * 50;\r\n                \r\n                words.forEach((w, idx) => {\r\n                    const factor = (idx + 1) * 0.5;\r\n                    w.style.transform = `translate(${x * factor}px, ${y * factor}px)`;\r\n                });\r\n            });\r\n        })();\r\n    <\/script>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-46d8f74 e-flex e-con-boxed e-con e-parent\" data-id=\"46d8f74\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38ae071 elementor-widget elementor-widget-html\" data-id=\"38ae071\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- GLOBAL EXECUTIVE CURSOR COMPONENT -->\r\n<!-- Place this in your Global Footer\/Header to apply the \"Luxury Physics\" across the site -->\r\n\r\n<style>\r\n    \/* 1. HIDE DEFAULT CURSOR *\/\r\n    a, button, [role=\"button\"], .am-hoverable, .rev-card, .pillar-row, .rev-premium-card, .btn-luxury {\r\n        cursor: none !important;\r\n    }\r\n\r\n    \/* 2. CURSOR STRUCTURE *\/\r\n    .am-cursor-manager {\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        pointer-events: none;\r\n        z-index: 999999;\r\n        mix-blend-mode: normal;\r\n    }\r\n\r\n    \/* The Precision Dot (Moves Instantly) *\/\r\n    .am-cursor-dot {\r\n        position: absolute;\r\n        width: 4px;\r\n        height: 4px;\r\n        background: #D4AE6A;\r\n        border-radius: 50%;\r\n        transform: translate(-50%, -50%);\r\n        transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;\r\n    }\r\n\r\n    \/* The Luxury Aura (Follows with Lag) *\/\r\n    .am-cursor-aura {\r\n        position: absolute;\r\n        width: 14px;\r\n        height: 14px;\r\n        border: 1px solid rgba(212, 174, 106, 0.4);\r\n        border-radius: 50%;\r\n        transform: translate(-50%, -50%);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1), height 0.5s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.5s ease;\r\n    }\r\n\r\n    \/* Inner Icon Shell (Revealed on Hover) *\/\r\n    .am-cursor-core {\r\n        width: 0;\r\n        height: 0;\r\n        background: #D4AE6A;\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        opacity: 0;\r\n        transform: scale(0);\r\n        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\r\n        box-shadow: 0 0 20px rgba(212, 174, 106, 0.2);\r\n    }\r\n\r\n    .am-cursor-arrow {\r\n        width: 0;\r\n        height: 0;\r\n        fill: #000;\r\n        transform: rotate(45deg);\r\n        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\r\n    }\r\n\r\n    \/* The Rotating Ring (Revealed on Hover) *\/\r\n    .am-cursor-ring {\r\n        position: absolute;\r\n        inset: -10px;\r\n        border: 1px dashed rgba(212, 174, 106, 0.2);\r\n        border-radius: 50%;\r\n        opacity: 0;\r\n        transform: scale(0.8);\r\n        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\r\n        animation: am-spin 12s linear infinite;\r\n    }\r\n\r\n    \/* 3. CLASSY STATES *\/\r\n    \/* Hovering State *\/\r\n    .am-cursor-manager.is-hovering .am-cursor-dot {\r\n        width: 0; height: 0; opacity: 0;\r\n    }\r\n\r\n    .am-cursor-manager.is-hovering .am-cursor-aura {\r\n        width: 70px; height: 70px;\r\n        border-color: rgba(212, 174, 106, 0.1);\r\n    }\r\n\r\n    .am-cursor-manager.is-hovering .am-cursor-core {\r\n        width: 35px; height: 35px; opacity: 1; transform: scale(1);\r\n    }\r\n\r\n    .am-cursor-manager.is-hovering .am-cursor-arrow {\r\n        width: 14px; height: 14px;\r\n    }\r\n\r\n    .am-cursor-manager.is-hovering .am-cursor-ring {\r\n        opacity: 1; transform: scale(1);\r\n    }\r\n\r\n    \/* Clicking State (Classy Implosion) *\/\r\n    .am-cursor-manager.is-clicking .am-cursor-core {\r\n        transform: scale(0.8);\r\n    }\r\n    .am-cursor-manager.is-clicking .am-cursor-aura {\r\n        transform: translate(-50%, -50%) scale(1.2);\r\n        opacity: 0.5;\r\n    }\r\n\r\n    @keyframes am-spin {\r\n        from { transform: rotate(0deg); }\r\n        to { transform: rotate(360deg); }\r\n    }\r\n\r\n    \/* Prevent flickering *\/\r\n    .am-cursor-manager { pointer-events: none !important; }\r\n<\/style>\r\n\r\n<div class=\"am-cursor-manager\" id=\"amCursorManager\">\r\n    <div class=\"am-cursor-aura\" id=\"amAura\">\r\n        <div class=\"am-cursor-core\">\r\n            <svg class=\"am-cursor-arrow\" viewBox=\"0 0 24 24\">\r\n                <path d=\"M12,2L10.59,3.41L18.17,11H2V13H18.17L10.59,20.59L12,22L22,12L12,2Z\"\/>\r\n            <\/svg>\r\n        <\/div>\r\n        <div class=\"am-cursor-ring\"><\/div>\r\n    <\/div>\r\n    <div class=\"am-cursor-dot\" id=\"amDot\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        const manager = document.getElementById('amCursorManager');\r\n        const dot = document.getElementById('amDot');\r\n        const aura = document.getElementById('amAura');\r\n        \r\n        let mouseX = 0, mouseY = 0;\r\n        let auraX = 0, auraY = 0;\r\n        \r\n        \/\/ Silky Smooth Physics: Aura follows with interpolation\r\n        const lerp = (start, end, amt) => (1 - amt) * start + amt * end;\r\n\r\n        document.addEventListener('mousemove', (e) => {\r\n            mouseX = e.clientX;\r\n            mouseY = e.clientY;\r\n            \r\n            \/\/ Dot follows instantly\r\n            dot.style.left = mouseX + 'px';\r\n            dot.style.top = mouseY + 'px';\r\n        });\r\n\r\n        \/\/ Animation Loop for the \"Aura\" Lag\r\n        const render = () => {\r\n            auraX = lerp(auraX, mouseX, 0.15); \/\/ 0.15 is the \"lag\" factor\r\n            auraY = lerp(auraY, mouseY, 0.15);\r\n            \r\n            aura.style.left = auraX + 'px';\r\n            aura.style.top = auraY + 'px';\r\n            \r\n            requestAnimationFrame(render);\r\n        };\r\n        render();\r\n\r\n        \/\/ Universal Hover Logic\r\n        const handleEnter = () => manager.classList.add('is-hovering');\r\n        const handleLeave = () => manager.classList.remove('is-hovering');\r\n\r\n        const updateTargets = () => {\r\n            const targets = document.querySelectorAll('a, button, .am-hoverable, .rev-card, .pillar-row, .rev-premium-card, .btn-luxury, [role=\"button\"]');\r\n            targets.forEach(el => {\r\n                el.removeEventListener('mouseenter', handleEnter);\r\n                el.removeEventListener('mouseleave', handleLeave);\r\n                el.addEventListener('mouseenter', handleEnter);\r\n                el.addEventListener('mouseleave', handleLeave);\r\n            });\r\n        };\r\n\r\n        updateTargets();\r\n        const observer = new MutationObserver(updateTargets);\r\n        observer.observe(document.body, { childList: true, subtree: true });\r\n\r\n        \/\/ Click States\r\n        document.addEventListener('mousedown', () => manager.classList.add('is-clicking'));\r\n        document.addEventListener('mouseup', () => manager.classList.remove('is-clicking'));\r\n\r\n        \/\/ Visibility Failsafe\r\n        document.addEventListener('mouseleave', () => manager.style.opacity = '0');\r\n        document.addEventListener('mouseenter', () => manager.style.opacity = '1');\r\n    })();\r\n<\/script>\r\n\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>MICHAEL MARTINO AUTHOR PORTFOLIO Stories That Reveal Truth, Power &#038; Survival Journey into gripping psychological thrillers and immersive worlds that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":169,"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":520,"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/pages\/12\/revisions\/520"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}