{"id":138,"date":"2026-05-13T15:10:09","date_gmt":"2026-05-13T15:10:09","guid":{"rendered":"https:\/\/demowebdesign.live\/michaelmartino\/?page_id=138"},"modified":"2026-05-18T21:01:32","modified_gmt":"2026-05-18T21:01:32","slug":"about","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/about\/","title":{"rendered":"About"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"138\" class=\"elementor elementor-138\">\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\">\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<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             background-image: \r\n                radial-gradient(circle at 50% 50%, rgba(3, 3, 5, 0.5) 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        \/* --- 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: #fff !important;\r\n            max-width: 750px;\r\n            margin-bottom: 70px;\r\n            padding: 0 20px;\r\n        }\r\n\r\n        \/* --- NEW: PREMIUM BUTTON DESIGN --- *\/\r\n        #premium-hero-section .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        \/* Luxury Gold Fill Effect *\/\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        \/* --- SCROLL HINT --- *\/\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        \/* Entrance Reveal *\/\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        }\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>AUTHOR \u00a9 MICHAEL MARTINO<\/span><\/div>\r\n\r\n        <div class=\"main-content\">\r\n            <div class=\"index-marker reveal\">ABOUT THE AUTHOR<\/div>\r\n            \r\n            <h1 class=\"hero-title reveal\">\r\n                The Mind Behind <br>\r\n                <span>Stories & Truth<\/span><br>\r\n                \r\n            <\/h1>\r\n            \r\n            <p class=\"hero-description reveal\">\r\n                Michael Martino is an author driven by powerful storytelling and real world insight crafting narratives that explore psychological depth, practical knowledge, and worlds beyond imagination.\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 Books<\/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-f270cfa e-con-full e-flex e-con e-parent\" data-id=\"f270cfa\" data-element_type=\"container\" data-e-type=\"container\">\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<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=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  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n  :root {\r\n    --gold: #c5a059;\r\n    --gold-dim: rgba(197,160,89,0.15);\r\n    --gold-mid: rgba(197,160,89,0.35);\r\n    --bg: #050507;\r\n    --bg2: #0b0b0e;\r\n    --off: #f4f1eb;\r\n    --muted: rgba(244,241,235,0.55);\r\n    --ease: cubic-bezier(0.19,1,0.22,1);\r\n  }\r\n\r\n  html { scroll-behavior: smooth; }\r\n  body { background: var(--bg) !important; }\r\n\r\n  \/* \u2500\u2500\u2500 CURSOR \u2500\u2500\u2500 *\/\r\n  #cursor {\r\n    position: fixed; width: 6px; height: 6px;\r\n    background: var(--gold); border-radius: 50%;\r\n    pointer-events: none; z-index: 9999;\r\n    transform: translate(-50%,-50%);\r\n    mix-blend-mode: screen;\r\n  }\r\n  #cursor-ring {\r\n    position: fixed; width: 36px; height: 36px;\r\n    border: 1px solid rgba(197,160,89,0.4); border-radius: 50%;\r\n    pointer-events: none; z-index: 9998;\r\n    transform: translate(-50%,-50%);\r\n    transition: left 0.18s ease, top 0.18s ease;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 AUTHOR SECTION \u2500\u2500\u2500 *\/\r\n  .aw-root {\r\n    color: var(--off);\r\n    font-family: 'Inter', sans-serif;\r\n    padding: 90px 80px 110px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    max-width: 1300px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  \/* Ambient orbs *\/\r\n  .aw-ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; }\r\n  .aw-orb {\r\n    position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5;\r\n  }\r\n  .aw-orb-1 {\r\n    width: 500px; height: 500px; top: -120px; left: -80px;\r\n    background: radial-gradient(circle, rgba(197,160,89,0.08) 0%, transparent 70%);\r\n    animation: orbF1 20s ease-in-out infinite;\r\n  }\r\n  .aw-orb-2 {\r\n    width: 380px; height: 380px; bottom: -80px; right: -60px;\r\n    background: radial-gradient(circle, rgba(80,60,140,0.07) 0%, transparent 70%);\r\n    animation: orbF2 24s ease-in-out infinite;\r\n  }\r\n  @keyframes orbF1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,-35px)} }\r\n  @keyframes orbF2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,25px)} }\r\n\r\n  .aw-rule-top {\r\n    position: absolute; top: 0; left: 80px; right: 80px; height: 1px;\r\n    background: linear-gradient(90deg, transparent, var(--gold-mid), transparent);\r\n    opacity: 0.3; z-index: 2;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 EYEBROW \u2500\u2500\u2500 *\/\r\n  .aw-eyebrow {\r\n    position: relative; z-index: 3;\r\n    display: flex; align-items: center; gap: 14px;\r\n    margin-bottom: 56px;\r\n    opacity: 0; transform: translateY(16px);\r\n    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);\r\n  }\r\n  .aw-eyebrow-line { width: 40px; height: 1px; background: var(--gold); opacity: 0.5; }\r\n  .aw-eyebrow-text {\r\n    font-size: 11px; letter-spacing: 0.55em;\r\n    text-transform: uppercase; color: var(--gold);\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 BODY (float container) \u2500\u2500\u2500 *\/\r\n  .aw-body {\r\n    position: relative; z-index: 3;\r\n  }\r\n  .aw-body::after { content: ''; display: table; clear: both; }\r\n\r\n  \/* \u2500\u2500\u2500 FLOATED IMAGE \u2500\u2500\u2500 *\/\r\n  .aw-image-float {\r\n    float: left;\r\n    width: 360px;\r\n    margin: 4px 60px 32px 0;\r\n    position: relative;\r\n    opacity: 0; transform: translateX(-28px);\r\n    transition: opacity 1.2s var(--ease) 0.1s, transform 1.2s var(--ease) 0.1s;\r\n  }\r\n\r\n  .aw-corner {\r\n    position: absolute; width: 24px; height: 24px;\r\n    border-color: var(--gold); border-style: solid; opacity: 0.4;\r\n    transition: opacity 0.5s ease, transform 0.5s var(--ease);\r\n    z-index: 2;\r\n  }\r\n  .aw-corner-tl { top: -10px; left: -10px; border-width: 1px 0 0 1px; }\r\n  .aw-corner-tr { top: -10px; right: -10px; border-width: 1px 1px 0 0; }\r\n  .aw-corner-bl { bottom: -10px; left: -10px; border-width: 0 0 1px 1px; }\r\n  .aw-corner-br { bottom: -10px; right: -10px; border-width: 0 1px 1px 0; }\r\n  .aw-image-float:hover .aw-corner { opacity: 0.9; }\r\n  .aw-image-float:hover .aw-corner-tl { transform: translate(-4px,-4px); }\r\n  .aw-image-float:hover .aw-corner-tr { transform: translate(4px,-4px); }\r\n  .aw-image-float:hover .aw-corner-bl { transform: translate(-4px,4px); }\r\n  .aw-image-float:hover .aw-corner-br { transform: translate(4px,4px); }\r\n\r\n  .aw-img-wrap {\r\n    overflow: hidden; border-radius: 2px;\r\n    position: relative; aspect-ratio: 4\/5;\r\n  }\r\n  .aw-img-wrap::after {\r\n    content: ''; position: absolute; inset: 0;\r\n    background: linear-gradient(to top, rgba(5,5,7,0.72) 0%, transparent 55%);\r\n    z-index: 1;\r\n  }\r\n  .aw-img-wrap img {\r\n    width: 100%; height: 100%; object-fit: cover; display: block;\r\n    filter: contrast(1.1) brightness(0.85) saturate(0.88);\r\n    transition: transform 1.8s var(--ease), filter 0.8s ease;\r\n    transform: scale(1.04);\r\n  }\r\n  .aw-image-float:hover .aw-img-wrap img {\r\n    transform: scale(1.0);\r\n    filter: contrast(1.05) brightness(0.95) saturate(1);\r\n  }\r\n\r\n  .aw-img-stats {\r\n    position: absolute; bottom: 0; left: 0; right: 0;\r\n    padding: 22px 22px 20px;\r\n    display: flex; gap: 22px; align-items: flex-end;\r\n    z-index: 2;\r\n  }\r\n  .aw-stat-num {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: 1.65rem; color: #fff; display: block; line-height: 1;\r\n  }\r\n  .aw-stat-label {\r\n    font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;\r\n    color: var(--gold); display: block; margin-top: 4px;\r\n  }\r\n  .aw-stat-divider {\r\n    width: 1px; height: 36px; background: rgba(255,255,255,0.15); flex-shrink: 0;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 HEADER (name + role) \u2500\u2500\u2500 *\/\r\n  .aw-header {\r\n    margin-bottom: 28px;\r\n    opacity: 0; transform: translateY(20px);\r\n    transition: opacity 1s var(--ease) 0.2s, transform 1s var(--ease) 0.2s;\r\n  }\r\n  .aw-name {\r\n    font-family: 'Playfair Display', serif;\r\n    font-size: clamp(2.2rem, 3.5vw, 3.4rem);\r\n    font-weight: 400; line-height: 1.05; color: #fff;\r\n    margin-bottom: 8px;\r\n  }\r\n  .aw-name em { font-style: italic; color: var(--gold); }\r\n  .aw-role {\r\n    font-size: 11px; letter-spacing: 0.28em;\r\n    text-transform: uppercase; color: var(--muted);\r\n    margin-bottom: 24px; display: block;\r\n  }\r\n  .aw-hdivider {\r\n    width: 48px; height: 1px; background: var(--gold); opacity: 0.5;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 QUOTE \u2500\u2500\u2500 *\/\r\n  .aw-quote {\r\n    font-family: 'Cormorant Garamond', serif;\r\n    font-size: 1.35rem; font-style: italic;\r\n    line-height: 1.5; font-weight: 300;\r\n    color: rgba(244,241,235,0.88);\r\n    padding-left: 16px;\r\n    border-left: 1.5px solid var(--gold-mid);\r\n    margin-bottom: 28px;\r\n    opacity: 0; transform: translateY(16px);\r\n    transition: opacity 1s var(--ease) 0.35s, transform 1s var(--ease) 0.35s;\r\n  }\r\n\r\n  \/* \u2500\u2500\u2500 BIO PARAGRAPHS \u2500\u2500\u2500 *\/\r\n  .aw-para {\r\n    font-size: 0.93rem; line-height: 1.88;\r\n    color: rgba(244,241,235,0.7);\r\n    margin-bottom: 22px;\r\n    opacity: 0; transform: translateY(12px);\r\n  }\r\n  .aw-para:nth-of-type(1) { transition: opacity 0.9s var(--ease) 0.45s, transform 0.9s var(--ease) 0.45s; }\r\n  .aw-para:nth-of-type(2) { transition: opacity 0.9s var(--ease) 0.55s, transform 0.9s var(--ease) 0.55s; }\r\n  .aw-para:nth-of-type(3) { transition: opacity 0.9s var(--ease) 0.62s, transform 0.9s var(--ease) 0.62s; }\r\n  .aw-para:nth-of-type(4) { transition: opacity 0.9s var(--ease) 0.68s, transform 0.9s var(--ease) 0.68s; }\r\n  .aw-para:nth-of-type(5) { transition: opacity 0.9s var(--ease) 0.74s, transform 0.9s var(--ease) 0.74s; }\r\n\r\n  \/* \u2500\u2500\u2500 TAGS \u2500\u2500\u2500 *\/\r\n  .aw-tags {\r\n    display: flex; gap: 10px; flex-wrap: wrap;\r\n    margin-top: 48px; padding-top: 36px;\r\n    border-top: 1px solid rgba(244,241,235,0.07);\r\n    position: relative; z-index: 3;\r\n    opacity: 0; transform: translateY(12px);\r\n    transition: opacity 0.9s var(--ease) 0.85s, transform 0.9s var(--ease) 0.85s;\r\n  }\r\n  .aw-tag {\r\n    font-size: 10px; letter-spacing: 0.16em;\r\n    text-transform: uppercase; padding: 6px 16px;\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    cursor: default;\r\n  }\r\n  .aw-tag:hover { background: var(--gold-dim); border-color: rgba(197,160,89,0.5); }\r\n\r\n  \/* \u2500\u2500\u2500 REVEAL STATE \u2500\u2500\u2500 *\/\r\n  .aw-root.revealed .aw-eyebrow,\r\n  .aw-root.revealed .aw-header,\r\n  .aw-root.revealed .aw-quote,\r\n  .aw-root.revealed .aw-para,\r\n  .aw-root.revealed .aw-tags { opacity: 1; transform: translateY(0); }\r\n  .aw-root.revealed .aw-image-float { opacity: 1; transform: translateX(0); }\r\n\r\n  \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\r\n  @media (max-width: 900px) {\r\n    .aw-root { padding: 64px 28px 80px; }\r\n    .aw-rule-top { left: 28px; right: 28px; }\r\n    .aw-image-float {\r\n      float: none; width: 100%; max-width: 360px;\r\n      margin: 0 auto 40px auto;\r\n    }\r\n    .aw-name { font-size: clamp(2rem, 8vw, 2.8rem); }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <div id=\"cursor\"><\/div>\r\n  <div id=\"cursor-ring\"><\/div>\r\n\r\n  <div class=\"aw-root\" id=\"awRoot\">\r\n    <div class=\"aw-ambient\">\r\n      <div class=\"aw-orb aw-orb-1\"><\/div>\r\n      <div class=\"aw-orb aw-orb-2\"><\/div>\r\n    <\/div>\r\n    <div class=\"aw-rule-top\"><\/div>\r\n\r\n    <!-- Eyebrow -->\r\n    <div class=\"aw-eyebrow\">\r\n      <div class=\"aw-eyebrow-line\"><\/div>\r\n      <span class=\"aw-eyebrow-text\">About the Author<\/span>\r\n    <\/div>\r\n\r\n    <!-- Body (float wrap) -->\r\n    <div class=\"aw-body\">\r\n\r\n      <!-- Floated image \u2014 text wraps to its right and then below -->\r\n      <div class=\"aw-image-float\">\r\n        <div class=\"aw-corner aw-corner-tl\"><\/div>\r\n        <div class=\"aw-corner aw-corner-tr\"><\/div>\r\n        <div class=\"aw-corner aw-corner-bl\"><\/div>\r\n        <div class=\"aw-corner aw-corner-br\"><\/div>\r\n        <div class=\"aw-img-wrap\">\r\n          <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/image1-1.jpeg\" alt=\"Michael Martino\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Name + Role -->\r\n      <div class=\"aw-header\">\r\n        <h2 class=\"aw-name\">Michael <em>Martino<\/em><\/h2>\r\n        <span class=\"aw-role\">Author \u00b7 Storyteller \u00b7 Entrepreneur \u00b7 Inventor<\/span>\r\n        <div class=\"aw-hdivider\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Quote -->\r\n      <blockquote class=\"aw-quote\">\r\n        \"Stories are not escapes from truth they are the only path into it.\"\r\n      <\/blockquote>\r\n\r\n      \r\n      <p class=\"aw-para\">\r\n        Michael Martino is an entrepreneur, visionary, and inventor dedicated to solving problems and helping people through his professional skills. 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 a powerful medium for expressing the complex thoughts and ideas swirling in his mind.\r\n      <\/p>\r\n\r\n      <p class=\"aw-para\">\r\n        Martino's obsession and passion for storytelling led him to explore various forms of writing, from poetry to screenwriting. He found immense joy in crafting narratives that resonate with audiences, drawing them into the worlds he created. Music also played a vital role in his life, serving as a profound connection to his emotions and enhancing his creative expression. As an idealist author, he aims to inspire others to pursue their dreams, regardless of the barriers they may face.\r\n      <\/p>\r\n\r\n      <p class=\"aw-para\">\r\n        Entrepreneurship has been a natural extension of his creative pursuits. Driven by a desire to innovate, Michael has launched several ventures that blend his writing with problem-solving. He firmly believes that words have the power to instigate change and spark meaningful conversations and he strives to harness that power in his work. He has made it his mission to develop solutions that not only address challenges but also uplift and empower individuals.\r\n      <\/p>\r\n\r\n      <p class=\"aw-para\">\r\n        Throughout his career he has dedicated himself to various forms of writing whether poetry that touches the heart, screenplays that captivate the imagination, or motivational content that encourages resilience. Each piece he creates reflects his commitment to inspire and uplift others. He has learned that our struggles can be our greatest strengths, and that resilience is crucial for success.\r\n      <\/p>\r\n\r\n      <p class=\"aw-para\">\r\n        As Michael looks to the future, he remains committed to his craft and passionate about seeking new ways to impact lives positively. His journey is ongoing, and he is excited about the unwritten chapters that lie ahead. With each step, he aims to blend creativity with purpose helping others find their voice and navigate their own paths.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n    <!-- Tags -->\r\n    <div class=\"aw-tags\">\r\n      <span class=\"aw-tag\">Literary Fiction<\/span>\r\n      <span class=\"aw-tag\">Philosophical<\/span>\r\n      <span class=\"aw-tag\">Thriller<\/span>\r\n      <span class=\"aw-tag\">Poetry<\/span>\r\n      <span class=\"aw-tag\">Screenwriting<\/span>\r\n      <span class=\"aw-tag\">Motivational<\/span>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <script>\r\n    \/* Cursor *\/\r\n    const cur = document.getElementById('cursor');\r\n    const ring = document.getElementById('cursor-ring');\r\n    let mx = 0, my = 0, rx = 0, ry = 0;\r\n    window.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });\r\n    (function animCursor() {\r\n      cur.style.left = mx + 'px'; cur.style.top = my + 'px';\r\n      rx += (mx - rx) * 0.1; ry += (my - ry) * 0.1;\r\n      ring.style.left = rx + 'px'; ring.style.top = ry + 'px';\r\n      requestAnimationFrame(animCursor);\r\n    })();\r\n\r\n    \/* Scroll reveal *\/\r\n    const root = document.getElementById('awRoot');\r\n    const obs = new IntersectionObserver(entries => {\r\n      entries.forEach(e => {\r\n        if (e.isIntersecting) { root.classList.add('revealed'); obs.unobserve(root); }\r\n      });\r\n    }, { threshold: 0.1 });\r\n    obs.observe(root);\r\n  <\/script>\r\n\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 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    <style>\r\n        :root {\r\n            --am-gold: #c5a059;\r\n            --am-black: #050507;\r\n            --am-silver: rgba(255, 255, 255, 0.95);\r\n            --am-dim: rgba(255, 255, 255, 0.4);\r\n            --am-line: rgba(197, 160, 89, 0.1);\r\n            --am-ease: cubic-bezier(0.19, 1, 0.22, 1);\r\n            --am-glow: rgba(197, 160, 89, 0.15);\r\n        }\r\n\r\n        .am-premium-container {\r\n            background-color: var(--am-black);\r\n            color: #ffffff;\r\n            font-family: 'Inter', sans-serif;\r\n            overflow: hidden;\r\n            width: 100%;\r\n            position: relative;\r\n        }\r\n\r\n        \/* --- BACKGROUND ATMOSPHERE --- *\/\r\n        .am-atmosphere {\r\n            position: absolute;\r\n            inset: 0;\r\n            pointer-events: none;\r\n            z-index: 1;\r\n        }\r\n\r\n        .am-aura {\r\n            position: absolute;\r\n            border-radius: 50%;\r\n            filter: blur(120px);\r\n            opacity: 0.15;\r\n            transition: transform 0.5s ease-out;\r\n        }\r\n\r\n        .am-aura-1 { width: 600px; height: 600px; background: var(--am-gold); top: -10%; right: -10%; }\r\n        .am-aura-2 { width: 500px; height: 500px; background: #3c1361; bottom: 20%; left: -5%; }\r\n        .am-aura-3 { width: 400px; height: 400px; background: #1a2a6c; top: 40%; right: 20%; }\r\n\r\n        .am-grain {\r\n            position: fixed;\r\n            inset: 0;\r\n            background: url('https:\/\/grainy-gradients.vercel.app\/noise.svg');\r\n            opacity: 0.04;\r\n            pointer-events: none;\r\n            z-index: 99;\r\n        }\r\n\r\n        \/* --- SECTION 1: PHILOSOPHY --- *\/\r\n        .am-phil-section {\r\n            padding: 180px 5%;\r\n            position: relative;\r\n            text-align: center;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n            min-height: 80vh;\r\n            z-index: 2;\r\n        }\r\n\r\n        .am-bg-giant {\r\n            position: absolute;\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: 30vw;\r\n            font-weight: 900;\r\n            color: transparent;\r\n            -webkit-text-stroke: 1px rgba(255, 255, 255, 0.03);\r\n            z-index: 0;\r\n            pointer-events: none;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            user-select: none;\r\n            letter-spacing: -0.05em;\r\n        }\r\n\r\n        .am-phil-tag {\r\n            font-size: 0.7rem;\r\n            letter-spacing: 0.8em;\r\n            text-transform: uppercase;\r\n            color: var(--am-gold);\r\n            margin-bottom: 50px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center; \/* Centered Tag Content *\/\r\n            gap: 20px;\r\n        }\r\n\r\n        .am-phil-tag::before, .am-phil-tag::after {\r\n            content: \"\";\r\n            width: 40px;\r\n            height: 1px;\r\n            background: var(--am-gold);\r\n            opacity: 0.3;\r\n        }\r\n\r\n        .am-phil-quote {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-size: clamp(2rem, 5vw, 3.8rem);\r\n            line-height: 1.2;\r\n            font-weight: 300;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            position: relative;\r\n            z-index: 2;\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n\r\n        .am-phil-quote span {\r\n            color: var(--am-gold);\r\n            font-style: italic;\r\n            position: relative;\r\n            display: inline-block;\r\n        }\r\n\r\n        .am-phil-quote span::after {\r\n            content: \"\";\r\n            position: absolute;\r\n            bottom: 5px;\r\n            left: 0;\r\n            width: 0;\r\n            height: 1px;\r\n            background: var(--am-gold);\r\n            transition: width 1.5s var(--am-ease) 1s;\r\n        }\r\n\r\n        .am-reveal.am-active .am-phil-quote span::after {\r\n            width: 100%;\r\n        }\r\n\r\n        \/* --- SECTION 2: THE \"EXECUTIVE\" LADDER --- *\/\r\n        .am-ladder-section {\r\n            padding: 100px 0 200px;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .am-ladder-container {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            padding: 0 80px;\r\n            position: relative;\r\n        }\r\n\r\n        \/* Central Animated Spine *\/\r\n        .am-ladder-spine-wrap {\r\n            position: absolute;\r\n            left: 50%;\r\n            top: 0;\r\n            width: 1px;\r\n            height: 100%;\r\n            background: rgba(255, 255, 255, 0.05);\r\n            z-index: 1;\r\n            transform: translateX(-50%);\r\n        }\r\n\r\n        .am-ladder-spine-progress {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 0%;\r\n            background: linear-gradient(to bottom, transparent, var(--am-gold), transparent);\r\n            box-shadow: 0 0 15px var(--am-gold);\r\n            transition: height 0.1s linear;\r\n        }\r\n\r\n        .am-ladder-item {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 150px;\r\n            margin-bottom: 200px;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .am-ladder-item:last-child { margin-bottom: 0; }\r\n\r\n        \/* Pillar Number (Floating behind) *\/\r\n        .am-pillar-num {\r\n            position: absolute;\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: 15rem;\r\n            font-weight: 900;\r\n            color: rgba(255, 255, 255, 0.02);\r\n            top: -50px;\r\n            z-index: -1;\r\n            line-height: 1;\r\n        }\r\n\r\n        .am-ladder-item:nth-child(odd) .am-pillar-num { left: -50px; }\r\n        .am-ladder-item:nth-child(even) .am-pillar-num { right: -50px; }\r\n\r\n        \/* Left Side: Editorial Typography *\/\r\n        .am-ladder-meta {\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            text-align: right;\r\n            transform: translateX(-30px);\r\n            opacity: 0;\r\n            transition: all 1.2s var(--am-ease);\r\n        }\r\n\r\n        .am-ladder-item.am-active .am-ladder-meta {\r\n            transform: translateX(0);\r\n            opacity: 1;\r\n        }\r\n\r\n        .am-ladder-item:nth-child(even) .am-ladder-meta {\r\n            order: 2;\r\n            text-align: left;\r\n            transform: translateX(30px);\r\n        }\r\n\r\n        .am-l-tag {\r\n            font-family: 'Inter', sans-serif;\r\n            font-size: 0.75rem;\r\n            font-weight: 600;\r\n            letter-spacing: 0.4em;\r\n            text-transform: uppercase;\r\n            color: var(--am-gold);\r\n            margin-bottom: 25px;\r\n            opacity: 0.8;\r\n            display: block;\r\n        }\r\n\r\n        .am-l-title {\r\n            font-family: 'Playfair Display', serif;\r\n            font-size: clamp(2.5rem, 6vw, 4.5rem);\r\n            font-weight: 400;\r\n            line-height: 0.95;\r\n            margin-bottom: 30px;\r\n            color: #fff;\r\n            letter-spacing: -0.02em;\r\n        }\r\n\r\n        \/* Right Side: Content Area (Glassmorphism) *\/\r\n        .am-ladder-content {\r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: center;\r\n            padding: 60px;\r\n            background: rgba(255, 255, 255, 0.01);\r\n            border: 1px solid rgba(255, 255, 255, 0.05);\r\n            backdrop-filter: blur(20px);\r\n            transition: all 1s var(--am-ease);\r\n            position: relative;\r\n            transform: translateX(30px);\r\n            opacity: 0;\r\n            box-shadow: 0 40px 100px rgba(0,0,0,0.5);\r\n        }\r\n\r\n        .am-ladder-item.am-active .am-ladder-content {\r\n            transform: translateX(0);\r\n            opacity: 1;\r\n        }\r\n\r\n        .am-ladder-item:nth-child(even) .am-ladder-content {\r\n            order: 1;\r\n            transform: translateX(-30px);\r\n        }\r\n\r\n        .am-l-desc {\r\n            font-family: 'Cormorant Garamond', serif;\r\n            font-size: 1.6rem;\r\n            color: var(--am-silver);\r\n            line-height: 1.5;\r\n            opacity: 0.6;\r\n            transition: opacity 0.8s ease, transform 0.8s var(--am-ease);\r\n        }\r\n\r\n        \/* Interactive Elements *\/\r\n        .am-connect-line {\r\n            position: absolute;\r\n            top: 50%;\r\n            width: 0;\r\n            height: 1px;\r\n            background: linear-gradient(to right, transparent, var(--am-gold));\r\n            transition: width 1s var(--am-ease) 0.5s;\r\n            opacity: 0.5;\r\n        }\r\n\r\n        .am-ladder-item.am-active .am-connect-line { width: 100px; }\r\n\r\n        .am-ladder-item:nth-child(odd) .am-connect-line { right: -100px; }\r\n        .am-ladder-item:nth-child(even) .am-connect-line { \r\n            left: -100px; \r\n            background: linear-gradient(to left, transparent, var(--am-gold));\r\n        }\r\n\r\n        \/* HOVER STATES *\/\r\n        .am-ladder-item:hover .am-ladder-content {\r\n            background: rgba(197, 160, 89, 0.04);\r\n            border-color: rgba(197, 160, 89, 0.3);\r\n            transform: translateY(-15px) scale(1.02);\r\n            box-shadow: 0 50px 120px rgba(0,0,0,0.7);\r\n        }\r\n\r\n        .am-ladder-item:hover .am-l-desc {\r\n            opacity: 1;\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        .am-ladder-item:hover .am-connect-line {\r\n            opacity: 1;\r\n            box-shadow: 0 0 20px var(--am-gold);\r\n        }\r\n\r\n        .am-ladder-item:hover .am-l-title {\r\n            color: var(--am-gold);\r\n            text-shadow: 0 0 30px rgba(197, 160, 89, 0.3);\r\n        }\r\n\r\n        \/* --- ENTRANCE REVEAL --- *\/\r\n        .am-reveal {\r\n            opacity: 0;\r\n            transform: translateY(60px);\r\n            transition: all 1.5s var(--am-ease);\r\n        }\r\n\r\n        .am-reveal.am-active {\r\n            opacity: 1;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        \/* --- RESPONSIVE --- *\/\r\n        @media (max-width: 1100px) {\r\n            .am-ladder-spine-wrap { display: none; }\r\n            .am-ladder-container { padding: 0 40px; }\r\n            .am-ladder-item {\r\n                grid-template-columns: 1fr;\r\n                gap: 50px;\r\n                margin-bottom: 120px;\r\n            }\r\n            .am-ladder-meta, .am-ladder-item:nth-child(even) .am-ladder-meta {\r\n                text-align: center;\r\n                order: 1;\r\n                transform: translateY(0) !important;\r\n            }\r\n            .am-ladder-content, .am-ladder-item:nth-child(even) .am-ladder-content {\r\n                order: 2;\r\n                transform: translateY(0) !important;\r\n                padding: 40px;\r\n            }\r\n            .am-connect-line, .am-pillar-num { display: none; }\r\n            .am-phil-quote { font-size: 2.2rem; }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"am-premium-container\">\r\n    <div class=\"am-grain\"><\/div>\r\n    \r\n    <!-- Background Atmosphere Elements -->\r\n    <div class=\"am-atmosphere\">\r\n        <div class=\"am-aura am-aura-1\" id=\"aura1\"><\/div>\r\n        <div class=\"am-aura am-aura-2\" id=\"aura2\"><\/div>\r\n        <div class=\"am-aura am-aura-3\" id=\"aura3\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- SECTION 1: PHILOSOPHY -->\r\n    <section class=\"am-phil-section\">\r\n        <div class=\"am-bg-giant\" id=\"amParallax\">VISION<\/div>\r\n        \r\n        <div class=\"am-phil-content am-reveal\">\r\n            <span class=\"am-phil-tag\">Our Philosophy<\/span>\r\n            <p class=\"am-phil-quote\">\r\n                Every story begins with a question what happens when <span>truth is buried<\/span>, loyalty is tested, and survival is uncertain?\r\n                <br><br>\r\n                The goal is not just to tell a story, but to create an <span>experience<\/span> that stays with the reader forever.\r\n            <\/p>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- SECTION 2: EXECUTIVE LADDER -->\r\n    <section class=\"am-ladder-section\">\r\n        <!-- Central Progress Spine -->\r\n        <div class=\"am-ladder-spine-wrap\">\r\n            <div class=\"am-ladder-spine-progress\" id=\"ladderProgress\"><\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"am-ladder-container\">\r\n            \r\n            <!-- Pillar 01 -->\r\n            <div class=\"am-ladder-item am-reveal\">\r\n                <div class=\"am-pillar-num\">01<\/div>\r\n                <div class=\"am-ladder-meta\">\r\n                    <span class=\"am-l-tag\">Vol. 01 \u2014 The Mind<\/span>\r\n                    <h2 class=\"am-l-title\">Psychological <br>Thrillers<\/h2>\r\n                <\/div>\r\n                <div class=\"am-ladder-content\">\r\n                    <div class=\"am-connect-line\"><\/div>\r\n                    <p class=\"am-l-desc\">Mastering the art of tension and truth. Stories that peel back the layers of human conflict and the shadows of the subconscious.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Pillar 02 -->\r\n            <div class=\"am-ladder-item am-reveal\">\r\n                <div class=\"am-pillar-num\">02<\/div>\r\n                <div class=\"am-ladder-meta\">\r\n                    <span class=\"am-l-tag\">Vol. 02 \u2014 The Strategy<\/span>\r\n                    <h2 class=\"am-l-title\">Practical <br>Knowledge<\/h2>\r\n                <\/div>\r\n                <div class=\"am-ladder-content\">\r\n                    <div class=\"am-connect-line\"><\/div>\r\n                    <p class=\"am-l-desc\">Tactical insights and real-world wisdom designed to empower, inform, and transform the modern intellectual landscape.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Pillar 03 -->\r\n            <div class=\"am-ladder-item am-reveal\">\r\n                <div class=\"am-pillar-num\">03<\/div>\r\n                <div class=\"am-ladder-meta\">\r\n                    <span class=\"am-l-tag\">Vol. 03 \u2014 The Beyond<\/span>\r\n                    <h2 class=\"am-l-title\">Immersive <br>Worlds<\/h2>\r\n                <\/div>\r\n                <div class=\"am-ladder-content\">\r\n                    <div class=\"am-connect-line\"><\/div>\r\n                    <p class=\"am-l-desc\">Exploring the architecture of the unknown. Speculative fiction that builds hidden dimensions beneath the surface of reality.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Pillar 04 -->\r\n            <div class=\"am-ladder-item am-reveal\">\r\n                <div class=\"am-pillar-num\">04<\/div>\r\n                <div class=\"am-ladder-meta\">\r\n                    <span class=\"am-l-tag\">Vol. 04 \u2014 The Shadow<\/span>\r\n                    <h2 class=\"am-l-title\">Changing Life <br>Direction<\/h2>\r\n                <\/div>\r\n                <div class=\"am-ladder-content\">\r\n                    <div class=\"am-connect-line\"><\/div>\r\n                    <p class=\"am-l-desc\">Inspiring guide focused on personal transformation, mindset growth, and taking control of one\u2019s future. Through practical wisdom and motivational insights.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n        <\/div>\r\n    <\/section>\r\n<\/div>\r\n\r\n<script>\r\n    (function() {\r\n        \/\/ 1. Mouse Follow Aura Effect\r\n        const auras = [\r\n            document.getElementById('aura1'),\r\n            document.getElementById('aura2'),\r\n            document.getElementById('aura3')\r\n        ];\r\n\r\n        window.addEventListener('mousemove', (e) => {\r\n            const { clientX, clientY } = e;\r\n            const x = (clientX \/ window.innerWidth - 0.5) * 100;\r\n            const y = (clientY \/ window.innerHeight - 0.5) * 100;\r\n\r\n            auras.forEach((aura, index) => {\r\n                const factor = (index + 1) * 0.2;\r\n                aura.style.transform = `translate(${x * factor}px, ${y * factor}px)`;\r\n            });\r\n        });\r\n\r\n        \/\/ 2. Parallax and Progress Spine\r\n        const parallaxText = document.getElementById('amParallax');\r\n        const ladderProgress = document.getElementById('ladderProgress');\r\n        const ladderSection = document.querySelector('.am-ladder-section');\r\n\r\n        window.addEventListener('scroll', () => {\r\n            const scrolled = window.pageYOffset;\r\n            \r\n            \/\/ Parallax\r\n            if (parallaxText) {\r\n                const rate = scrolled * 0.15;\r\n                parallaxText.style.transform = `translate(-50%, calc(-50% + ${rate}px))`;\r\n            }\r\n\r\n            \/\/ Spine Progress\r\n            if (ladderSection) {\r\n                const rect = ladderSection.getBoundingClientRect();\r\n                const sectionHeight = ladderSection.offsetHeight;\r\n                const startPoint = window.innerHeight * 0.5;\r\n                \r\n                let progress = ((startPoint - rect.top) \/ sectionHeight) * 100;\r\n                progress = Math.max(0, Math.min(100, progress));\r\n                ladderProgress.style.height = `${progress}%`;\r\n            }\r\n        });\r\n\r\n        \/\/ 3. Intersection Observer for High-End Entrance\r\n        const observerOptions = {\r\n            threshold: 0.15,\r\n            rootMargin: \"0px 0px -50px 0px\"\r\n        };\r\n\r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    entry.target.classList.add('am-active');\r\n                }\r\n            });\r\n        }, observerOptions);\r\n\r\n        document.querySelectorAll('.am-reveal, .am-ladder-item').forEach(el => observer.observe(el));\r\n    })();\r\n<\/script>\r\n\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-023e9d2 e-con-full e-flex e-con e-parent\" data-id=\"023e9d2\" 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-e72c5b8 elementor-widget elementor-widget-html\" data-id=\"e72c5b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- PASTE THIS ENTIRE BLOCK INTO ELEMENTOR HTML WIDGET -->\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=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Bebas+Neue&family=DM+Serif+Display:ital@0;1&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n.mm-section *, .mm-section *::before, .mm-section *::after {\r\n    margin: 0; padding: 0; box-sizing: border-box;\r\n}\r\n.mm-section {\r\n    --gold: #b8965a;\r\n    --gold-light: rgba(184,150,90,0.12);\r\n    --gold-mid: rgba(184,150,90,0.35);\r\n    --ink: #09090b;\r\n    --ink2: #111114;\r\n    --off: #f4f1eb;\r\n    --muted: rgba(244,241,235,0.6);\r\n    --dim: rgba(244,241,235,0.12);\r\n    --ease: cubic-bezier(0.16,1,0.3,1);\r\n    background: var(--ink);\r\n    font-family: 'EB Garamond', serif;\r\n    color: var(--off);\r\n    overflow: hidden;\r\n    width: 100%;\r\n}\r\n\r\n\/* EYEBROW *\/\r\n.mm-eyebrow {\r\n    display: flex; align-items: center; gap: 20px;\r\n    padding: 60px 60px 44px;\r\n}\r\n.mm-eyebrow-line { flex: 1; height: 1px; background: var(--gold-mid); }\r\n.mm-eyebrow-text {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: 13px; letter-spacing: 0.5em;\r\n    color: var(--gold); white-space: nowrap;\r\n}\r\n\r\n\/* PROCESS GRID *\/\r\n.mm-process-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr 1fr;\r\n    gap: 1px;\r\n    background: var(--dim);\r\n    margin: 0 60px;\r\n    border: 1px solid var(--dim);\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n}\r\n.mm-phase-card {\r\n    background: var(--ink2);\r\n    padding: 40px 36px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    position: relative;\r\n    transition: background 0.5s ease;\r\n}\r\n.mm-phase-card:hover { background: #141417; }\r\n\r\n.mm-phase-num {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: 11px; letter-spacing: 0.4em;\r\n    color: var(--gold); margin-bottom: 24px;\r\n    display: flex; align-items: center; gap: 10px;\r\n}\r\n.mm-phase-num::after {\r\n    content: ''; flex: 1; height: 1px;\r\n    background: var(--gold-mid); max-width: 40px;\r\n}\r\n.mm-phase-img {\r\n    width: 100%; aspect-ratio: 4\/3;\r\n    overflow: hidden; border-radius: 3px;\r\n    margin-bottom: 24px; position: relative;\r\n}\r\n.mm-phase-img img {\r\n    width: 100%; height: 100%; object-fit: cover;\r\n    filter: grayscale(50%) contrast(1.1) brightness(0.75);\r\n    transition: filter 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);\r\n    transform: scale(1.04);\r\n    display: block;\r\n}\r\n.mm-phase-card:hover .mm-phase-img img {\r\n    filter: grayscale(20%) contrast(1.05) brightness(0.88);\r\n    transform: scale(1.0);\r\n}\r\n.mm-phase-img-overlay {\r\n    position: absolute; inset: 0;\r\n    background: linear-gradient(to top, rgba(9,9,11,0.55) 0%, transparent 60%);\r\n}\r\n.mm-phase-label {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: 12px; letter-spacing: 0.45em;\r\n    color: var(--muted); margin-bottom: 10px;\r\n    text-transform: uppercase;\r\n}\r\n.mm-phase-heading {\r\n    font-family: 'DM Serif Display', serif;\r\n    font-size: clamp(1.5rem, 2.2vw, 2rem);\r\n    font-weight: 400; line-height: 1.1;\r\n    letter-spacing: -0.01em;\r\n    color: var(--off); margin-bottom: 16px;\r\n}\r\n.mm-phase-heading em { font-style: italic; color: var(--gold); }\r\n.mm-phase-body {\r\n    font-size: 1.05rem; line-height: 1.72;\r\n    color: var(--muted); font-weight: 400;\r\n}\r\n.mm-phase-foot {\r\n    margin-top: 28px;\r\n    display: flex; align-items: center; justify-content: space-between;\r\n}\r\n.mm-phase-foot-rule { height: 1px; flex: 1; background: var(--dim); }\r\n.mm-phase-foot-glyph {\r\n    font-family: 'DM Serif Display', serif;\r\n    font-size: 0.9rem; color: var(--gold-mid);\r\n    padding-left: 12px; line-height: 1;\r\n}\r\n\r\n\/* DIVIDER *\/\r\n.mm-divider {\r\n    display: flex; align-items: center; gap: 20px;\r\n    padding: 60px;\r\n}\r\n.mm-divider-line { flex: 1; height: 1px; background: var(--dim); }\r\n.mm-divider-dot {\r\n    width: 6px; height: 6px;\r\n    background: var(--gold); border-radius: 50%; flex-shrink: 0;\r\n}\r\n\r\n\/* MANIFESTO *\/\r\n.mm-manifesto {\r\n    margin: 0 60px 60px;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 1px;\r\n    background: var(--dim);\r\n    border: 1px solid var(--dim);\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n}\r\n.mm-m-left {\r\n    background: var(--ink2);\r\n    padding: 56px 48px;\r\n    display: flex; flex-direction: column; justify-content: space-between;\r\n    position: relative;\r\n}\r\n.mm-m-tag {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: 11px; letter-spacing: 0.5em;\r\n    color: var(--gold); opacity: 0.7;\r\n    margin-bottom: 40px;\r\n}\r\n.mm-wordstack { display: flex; flex-direction: column; }\r\n.mm-word {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: clamp(4rem, 7vw, 7.5rem);\r\n    line-height: 0.9;\r\n    color: var(--off);\r\n}\r\n.mm-word.accent { color: var(--gold); }\r\n.mm-corner {\r\n    position: absolute; bottom: 40px; right: 40px;\r\n    width: 22px; height: 22px; opacity: 0.2;\r\n}\r\n.mm-corner::before, .mm-corner::after {\r\n    content: ''; position: absolute; background: var(--gold);\r\n}\r\n.mm-corner::before { width: 1px; height: 100%; left: 50%; transform: translateX(-50%); }\r\n.mm-corner::after { height: 1px; width: 100%; top: 50%; transform: translateY(-50%); }\r\n\r\n.mm-m-right {\r\n    background: var(--ink2);\r\n    padding: 56px 48px;\r\n    display: flex; flex-direction: column; justify-content: space-between;\r\n    border-left: 1px solid var(--dim);\r\n}\r\n.mm-quote { margin-bottom: 48px; }\r\n.mm-qmark {\r\n    font-family: 'DM Serif Display', serif;\r\n    font-size: 5rem; line-height: 0.65;\r\n    color: var(--gold); opacity: 0.18;\r\n    display: block; margin-bottom: 8px; user-select: none;\r\n}\r\n.mm-qtext {\r\n    font-family: 'DM Serif Display', serif;\r\n    font-size: clamp(1.2rem, 1.8vw, 1.65rem);\r\n    font-style: italic; line-height: 1.5;\r\n    color: var(--off); margin-bottom: 24px;\r\n}\r\n.mm-qtext em { font-style: normal; color: var(--gold); }\r\n.mm-attr { display: flex; align-items: center; gap: 14px; }\r\n.mm-attr-tick { height: 1px; width: 28px; background: var(--gold); opacity: 0.4; }\r\n.mm-attr-text {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: 0.7rem; letter-spacing: 0.3em;\r\n    color: var(--muted); text-transform: uppercase;\r\n}\r\n.mm-pillars { display: flex; flex-direction: column; }\r\n.mm-pillar {\r\n    display: flex; gap: 20px; align-items: flex-start;\r\n    padding: 20px 0; border-top: 1px solid var(--dim);\r\n}\r\n.mm-pillar:last-child { border-bottom: 1px solid var(--dim); }\r\n.mm-pnum {\r\n    font-family: 'Bebas Neue', sans-serif;\r\n    font-size: 0.8rem; letter-spacing: 0.1em;\r\n    color: var(--gold); opacity: 0.5;\r\n    flex-shrink: 0; padding-top: 3px; min-width: 18px;\r\n}\r\n.mm-ptext { font-size: 1.05rem; line-height: 1.65; color: var(--muted); }\r\n\r\n\/* SCROLL REVEAL *\/\r\n.mm-reveal {\r\n    opacity: 0;\r\n    transform: translateY(22px);\r\n    transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n.mm-reveal.mm-visible { opacity: 1; transform: translateY(0); }\r\n.mm-reveal-d1 { transition-delay: 0.1s; }\r\n.mm-reveal-d2 { transition-delay: 0.2s; }\r\n.mm-reveal-d3 { transition-delay: 0.3s; }\r\n\r\n\/* RESPONSIVE *\/\r\n@media (max-width: 900px) {\r\n    .mm-process-grid { grid-template-columns: 1fr; margin: 0 24px; }\r\n    .mm-manifesto { grid-template-columns: 1fr; margin: 0 24px 48px; }\r\n    .mm-eyebrow { padding: 40px 24px 32px; }\r\n    .mm-divider { padding: 40px 24px; }\r\n    .mm-m-left, .mm-m-right { padding: 40px 28px; }\r\n    .mm-phase-card { padding: 32px 24px; }\r\n    .mm-m-right { border-left: none; border-top: 1px solid var(--dim); }\r\n}\r\n@media (max-width: 600px) {\r\n    .mm-process-grid { margin: 0 16px; }\r\n    .mm-manifesto { margin: 0 16px 40px; }\r\n    .mm-eyebrow { padding: 32px 16px 24px; }\r\n    .mm-divider { padding: 32px 16px; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"mm-section\">\r\n\r\n    <!-- EYEBROW -->\r\n    <div class=\"mm-eyebrow mm-reveal\">\r\n        <div class=\"mm-eyebrow-line\"><\/div>\r\n        <span class=\"mm-eyebrow-text\">Behind the Process<\/span>\r\n        <div class=\"mm-eyebrow-line\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- PROCESS GRID -->\r\n    <div class=\"mm-process-grid\">\r\n\r\n        <div class=\"mm-phase-card mm-reveal mm-reveal-d1\">\r\n            <div class=\"mm-phase-num\">01<\/div>\r\n            <div class=\"mm-phase-img\">\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1455390582262-044cdead277a?q=80&w=800&auto=format&fit=crop\" alt=\"Genesis\">\r\n                <div class=\"mm-phase-img-overlay\"><\/div>\r\n            <\/div>\r\n            <div class=\"mm-phase-label\">Genesis<\/div>\r\n            <h2 class=\"mm-phase-heading\">Where <em>Ideas<\/em> Begin<\/h2>\r\n            <p class=\"mm-phase-body\">The genesis of every narrative starts in silence. A physical notebook, a cluttered desk, and the raw energy of a first sentence that refuses to be ignored.<\/p>\r\n            <div class=\"mm-phase-foot\">\r\n                <div class=\"mm-phase-foot-rule\"><\/div>\r\n                <span class=\"mm-phase-foot-glyph\">\u25c6<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"mm-phase-card mm-reveal mm-reveal-d2\">\r\n            <div class=\"mm-phase-num\">02<\/div>\r\n            <div class=\"mm-phase-img\">\r\n                <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/process-2.jpg\" alt=\"Architecture\">\r\n                <div class=\"mm-phase-img-overlay\"><\/div>\r\n            <\/div>\r\n            <div class=\"mm-phase-label\">Architecture<\/div>\r\n            <h2 class=\"mm-phase-heading\">Building <em>Characters<\/em><\/h2>\r\n            <p class=\"mm-phase-body\">I don't just write characters; I inhabit them. Architecture for the soul finding the flaws, the secrets, and the hidden truths that make them undeniably human.<\/p>\r\n            <div class=\"mm-phase-foot\">\r\n                <div class=\"mm-phase-foot-rule\"><\/div>\r\n                <span class=\"mm-phase-foot-glyph\">\u25c6<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"mm-phase-card mm-reveal mm-reveal-d3\">\r\n            <div class=\"mm-phase-num\">03<\/div>\r\n            <div class=\"mm-phase-img\">\r\n                <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1493612276216-ee3925520721?q=80&w=800&auto=format&fit=crop\" alt=\"Emotion\">\r\n                <div class=\"mm-phase-img-overlay\"><\/div>\r\n            <\/div>\r\n            <div class=\"mm-phase-label\">Emotion<\/div>\r\n            <h2 class=\"mm-phase-heading\">Writing Through <em>Emotion<\/em><\/h2>\r\n            <p class=\"mm-phase-body\">If the scene doesn't move me, it won't move the reader. I write through the lens of lived experience, channeling raw feeling into every rhythm of the prose.<\/p>\r\n            <div class=\"mm-phase-foot\">\r\n                <div class=\"mm-phase-foot-rule\"><\/div>\r\n                <span class=\"mm-phase-foot-glyph\">\u25c6<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- DIVIDER -->\r\n    <div class=\"mm-divider mm-reveal\">\r\n        <div class=\"mm-divider-line\"><\/div>\r\n        <div class=\"mm-divider-dot\"><\/div>\r\n        <div class=\"mm-divider-line\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- MANIFESTO -->\r\n    <div class=\"mm-manifesto\">\r\n\r\n        <div class=\"mm-m-left mm-reveal\">\r\n            <div>\r\n                <div class=\"mm-m-tag\">Manifesto<\/div>\r\n                <div class=\"mm-wordstack\">\r\n                    <span class=\"mm-word\">Every<\/span>\r\n                    <span class=\"mm-word\">story<\/span>\r\n                    <span class=\"mm-word accent\">leaves<\/span>\r\n                    <span class=\"mm-word\">marks.<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"mm-corner\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"mm-m-right mm-reveal mm-reveal-d2\">\r\n            <div class=\"mm-quote\">\r\n                <span class=\"mm-qmark\">&ldquo;<\/span>\r\n                <p class=\"mm-qtext\">Every story leaves <em>fingerprints<\/em> on the soul invisible, indelible, and entirely beyond the author's control.<\/p>\r\n                <div class=\"mm-attr\">\r\n                    <div class=\"mm-attr-tick\"><\/div>\r\n                    <span class=\"mm-attr-text\">The Author's Belief<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"mm-pillars\">\r\n                <div class=\"mm-pillar\">\r\n                    <span class=\"mm-pnum\">I<\/span>\r\n                    <p class=\"mm-ptext\">Truth lives in the detail others overlook. Precision is the highest form of empathy.<\/p>\r\n                <\/div>\r\n                <div class=\"mm-pillar\">\r\n                    <span class=\"mm-pnum\">II<\/span>\r\n                    <p class=\"mm-ptext\">Characters must cost the writer something. Nothing worthy is written from comfort.<\/p>\r\n                <\/div>\r\n                <div class=\"mm-pillar\">\r\n                    <span class=\"mm-pnum\">III<\/span>\r\n                    <p class=\"mm-ptext\">A story ends on the page, never in the reader's mind. That is the only immortality that matters.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n    var section = document.querySelector('.mm-section');\r\n    if (!section) return;\r\n    var reveals = section.querySelectorAll('.mm-reveal');\r\n    if (!reveals.length) return;\r\n\r\n    if ('IntersectionObserver' in window) {\r\n        var obs = new IntersectionObserver(function(entries) {\r\n            entries.forEach(function(e) {\r\n                if (e.isIntersecting) {\r\n                    e.target.classList.add('mm-visible');\r\n                    obs.unobserve(e.target);\r\n                }\r\n            });\r\n        }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\r\n        reveals.forEach(function(el) { obs.observe(el); });\r\n    } else {\r\n        reveals.forEach(function(el) { el.classList.add('mm-visible'); });\r\n    }\r\n})();\r\n<\/script>\r\n<!-- END ELEMENTOR HTML WIDGET -->\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-d617620 e-flex e-con-boxed e-con e-parent\" data-id=\"d617620\" 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-d26291a elementor-widget elementor-widget-html\" data-id=\"d26291a\" 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>AUTHOR \u00a9 MICHAEL MARTINO ABOUT THE AUTHOR The Mind Behind Stories &#038; Truth Michael Martino is an author driven by [&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-138","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/pages\/138","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=138"}],"version-history":[{"count":109,"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/pages\/138\/revisions"}],"predecessor-version":[{"id":538,"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/pages\/138\/revisions\/538"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/media?parent=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}