{"id":360,"date":"2026-05-15T17:27:00","date_gmt":"2026-05-15T17:27:00","guid":{"rendered":"https:\/\/demowebdesign.live\/michaelmartino\/?page_id=360"},"modified":"2026-05-18T21:14:48","modified_gmt":"2026-05-18T21:14:48","slug":"books","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/books\/","title":{"rendered":"Books"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"360\" class=\"elementor elementor-360\">\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>COLLECTION \u00a9 MICHAEL MARTINO<\/span><\/div>\r\n\r\n    <div class=\"main-content\">\r\n        <div class=\"index-marker reveal\">THE LIBRARY<\/div>\r\n        \r\n        <h1 class=\"hero-title reveal\">\r\n            Architect of <br>\r\n            <span>Unseen Worlds<\/span><br>\r\n        <\/h1>\r\n        \r\n        <p class=\"hero-description reveal\">\r\n            Explore a curated collection of psychologically charged thrillers, tactical knowledge, and speculative fiction designed to challenge the boundaries of reality and human experience.\r\n        <\/p>\r\n        \r\n    <\/div>\r\n\r\n    <div class=\"scroll-hint\">\r\n        <span>Explore Collection<\/span>\r\n        <div class=\"scroll-line\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\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-a7158ba e-con-full e-flex e-con e-parent\" data-id=\"a7158ba\" 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-1bf84dc elementor-widget elementor-widget-html\" data-id=\"1bf84dc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<head>\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=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,600&family=Inter:wght@200;300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n*{margin:0;padding:0;box-sizing:border-box;}\r\n:root{\r\n  --gold:#C9A84C;\r\n  --gold-light:#E8C97A;\r\n  --gold-pale:rgba(201,168,76,0.12);\r\n  --black:#06060A;\r\n  --ease:cubic-bezier(0.19,1,0.22,1);\r\n}\r\nbody{background:var(--black);}\r\n#showcase{\r\n  background:var(--black);\r\n  color:#fff;\r\n  font-family:'Inter',sans-serif;\r\n  min-height:100vh;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  padding:80px 5%;\r\n  position:relative;\r\n  overflow:hidden;\r\n}\r\n.aura{position:absolute;border-radius:50%;pointer-events:none;z-index:1;}\r\n.aura-1{width:800px;height:800px;background:radial-gradient(circle,rgba(201,168,76,0.07) 0%,transparent 70%);top:-20%;left:-15%;}\r\n.aura-2{width:700px;height:700px;background:radial-gradient(circle,rgba(80,30,120,0.09) 0%,transparent 70%);bottom:-15%;right:-10%;}\r\n.aura-3{width:400px;height:400px;background:radial-gradient(circle,rgba(201,168,76,0.05) 0%,transparent 70%);top:50%;left:45%;transform:translate(-50%,-50%);}\r\n\r\n.grid{\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr;\r\n  gap:100px;\r\n  max-width:1300px;\r\n  width:100%;\r\n  position:relative;\r\n  z-index:10;\r\n  align-items:center;\r\n}\r\n\r\n.visual-col{display:flex;flex-direction:column;align-items:center;gap:50px;}\r\n\r\n.stage{position:relative;width:100%;max-width:400px;perspective:2500px;}\r\n\r\n.book-wrap{\r\n  width:100%;\r\n  transform-style:preserve-3d;\r\n  transition:transform 0.08s ease-out;\r\n}\r\n\r\n.book-frame{\r\n  width:100%;\r\n  aspect-ratio:2\/3;\r\n  position:relative;\r\n  transform-style:preserve-3d;\r\n  transition:box-shadow 0.8s var(--ease);\r\n  box-shadow:-25px 50px 100px rgba(0,0,0,0.95),0 0 60px rgba(201,168,76,0.05);\r\n}\r\n\r\n.book-frame img{\r\n  width:100%;height:100%;\r\n  object-fit:cover;\r\n  display:block;\r\n  border-radius:2px 10px 10px 2px;\r\n  border:1px solid rgba(255,255,255,0.06);\r\n}\r\n\r\n.book-frame::after{\r\n  content:'';\r\n  position:absolute;\r\n  left:0;top:0;bottom:0;\r\n  width:18px;\r\n  background:linear-gradient(to right,rgba(0,0,0,0.7),rgba(0,0,0,0.2));\r\n  border-radius:2px 0 0 2px;\r\n  z-index:3;\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(115deg,transparent 35%,rgba(255,255,255,0.06) 47%,rgba(255,255,255,0.08) 52%,transparent 64%);\r\n  z-index:4;\r\n  pointer-events:none;\r\n  background-size:250% 100%;\r\n  background-position:200% 0;\r\n  transition:background-position 1.8s var(--ease);\r\n  border-radius:2px 10px 10px 2px;\r\n}\r\n.book-wrap:hover .book-frame::before{background-position:-50% 0;}\r\n\r\n.corner-tl,.corner-br{\r\n  position:absolute;\r\n  width:28px;height:28px;\r\n  z-index:5;\r\n  pointer-events:none;\r\n}\r\n.corner-tl{top:14px;right:14px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);}\r\n.corner-br{bottom:14px;right:14px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);}\r\n\r\n.book-badge{\r\n  position:absolute;\r\n  top:-18px;left:-18px;\r\n  width:52px;height:52px;\r\n  background:var(--gold);\r\n  border-radius:50%;\r\n  display:flex;align-items:center;justify-content:center;\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:1.3rem;\r\n  font-weight:600;\r\n  color:#000;\r\n  z-index:6;\r\n  box-shadow:0 8px 24px rgba(201,168,76,0.4);\r\n  transition:all 0.5s var(--ease);\r\n}\r\n\r\n.thumb-nav{\r\n  display:flex;\r\n  gap:20px;\r\n  padding:16px 22px;\r\n  background:rgba(255,255,255,0.025);\r\n  backdrop-filter:blur(20px);\r\n  border:1px solid rgba(255,255,255,0.06);\r\n  border-radius:100px;\r\n}\r\n\r\n.thumb{\r\n  width:52px;\r\n  aspect-ratio:2\/3;\r\n  cursor:pointer;\r\n  opacity:0.25;\r\n  filter:grayscale(1);\r\n  transition:all 0.5s var(--ease);\r\n  border-radius:3px 7px 7px 3px;\r\n  overflow:hidden;\r\n  border:1px solid transparent;\r\n  flex-shrink:0;\r\n}\r\n.thumb img{width:100%;height:100%;object-fit:cover;display:block;}\r\n.thumb:hover,.thumb.active{\r\n  opacity:1;\r\n  filter:grayscale(0);\r\n  transform:scale(1.15) translateY(-4px);\r\n  border-color:var(--gold);\r\n  box-shadow:0 12px 30px rgba(201,168,76,0.35);\r\n}\r\n\r\n.content-col{display:flex;flex-direction:column;}\r\n\r\n.content-inner{\r\n  opacity:0;\r\n  transform:translateY(30px);\r\n  transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);\r\n}\r\n.content-inner.visible{opacity:1;transform:translateY(0);}\r\n\r\n.eyebrow{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:16px;\r\n  margin-bottom:28px;\r\n}\r\n.eyebrow-line{width:40px;height:1px;background:var(--gold);opacity:0.5;}\r\n.eyebrow-text{\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:0.82rem;\r\n  letter-spacing:0.55em;\r\n  text-transform:uppercase;\r\n  color:var(--gold);\r\n}\r\n\r\n.book-title{\r\n  font-family:'Playfair Display',serif;\r\n  font-size:clamp(2.8rem,5.5vw,4.4rem);\r\n  line-height:0.96;\r\n  font-weight:400;\r\n  letter-spacing:-0.03em;\r\n  margin-bottom:12px;\r\n  color:#fff !important ;\r\n}\r\n.book-title em{\r\n  font-style:italic;\r\n  color:var(--gold-light);\r\n}\r\n\r\n.divider{\r\n  width:60px;height:1px;\r\n  background:linear-gradient(to right,var(--gold),transparent);\r\n  margin:28px 0;\r\n  opacity:0.4;\r\n}\r\n\r\n.book-desc{\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:1.5rem;\r\n  line-height:1.55;\r\n  color:#fff !important;\r\n  max-width:500px;\r\n  margin-bottom:50px;\r\n}\r\n\r\n.meta-row{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:28px;\r\n  margin-bottom:56px;\r\n}\r\n.meta-item{display:flex;flex-direction:column;gap:4px;}\r\n.meta-label{font-size:0.68rem;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.3);font-weight:400;}\r\n.meta-value{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:rgba(255,255,255,0.75);}\r\n.meta-sep{width:1px;height:36px;background:rgba(255,255,255,0.1);}\r\n\r\n.btn-area{display:flex;align-items:center;gap:36px;}\r\n\r\n.circular-btn{\r\n  position:relative;\r\n  width:115px;height:115px;\r\n  cursor:pointer;\r\n  flex-shrink:0;\r\n  text-decoration:none;\r\n}\r\n\r\n.circular-btn svg.ring{\r\n  position:absolute;\r\n  inset:0;\r\n  width:100%;height:100%;\r\n  animation:spin-ring 12s linear infinite;\r\n  transform-origin:center;\r\n}\r\n\r\n@keyframes spin-ring{\r\n  from{transform:rotate(0deg);}\r\n  to{transform:rotate(360deg);}\r\n}\r\n\r\n.circular-btn:hover svg.ring{animation-duration:4s;}\r\n\r\n.btn-core{\r\n  position:absolute;\r\n  inset:12px;\r\n  border-radius:50%;\r\n  background:var(--gold);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  transition:all 0.5s var(--ease);\r\n  box-shadow:0 0 0 0 rgba(201,168,76,0.4);\r\n}\r\n.circular-btn:hover .btn-core{\r\n  background:#000;\r\n  box-shadow:0 0 0 8px rgba(201,168,76,0.15),inset 0 0 0 1px var(--gold);\r\n}\r\n\r\n.btn-arrow{\r\n  width:28px;height:28px;\r\n  border-radius:50%;\r\n  display:flex;align-items:center;justify-content:center;\r\n  transition:transform 0.5s var(--ease);\r\n}\r\n.circular-btn:hover .btn-arrow{transform:rotate(45deg);}\r\n\r\n.btn-arrow svg{\r\n  width:20px;height:20px;\r\n  stroke:#000;\r\n  transition:stroke 0.5s var(--ease);\r\n}\r\n.circular-btn:hover .btn-arrow svg{stroke:var(--gold);}\r\n\r\n.btn-tagline{\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:25px;\r\n  font-style:italic;\r\n  color:#fff !important;\r\n  letter-spacing:0.02em;\r\n}\r\n\r\n.edition-tag{\r\n  position:absolute;\r\n  bottom:-20px;\r\n  right:0;\r\n  display:flex;\r\n  align-items:center;\r\n  gap:12px;\r\n  background:rgba(10,10,15,0.95);\r\n  border:1px solid rgba(255,255,255,0.06);\r\n  border-radius:100px;\r\n  padding:10px 20px 10px 10px;\r\n  backdrop-filter:blur(20px);\r\n}\r\n.edition-dot{width:8px;height:8px;background:var(--gold);border-radius:50%;animation:pulse 2s ease infinite;}\r\n@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(0.7);}}\r\n.edition-text{font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.4);}\r\n\r\n@media(max-width:1050px){\r\n  .grid{grid-template-columns:1fr;gap:70px;}\r\n  .content-col{align-items:center;text-align:center;}\r\n  .book-desc{margin-left:auto;margin-right:auto;}\r\n  .eyebrow{justify-content:center;}\r\n  .divider{margin-left:auto;margin-right:auto;}\r\n  .meta-row{justify-content:center;}\r\n  .btn-area{justify-content:center;}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<section id=\"showcase\">\r\n  <div class=\"aura aura-1\"><\/div>\r\n  <div class=\"aura aura-2\"><\/div>\r\n  <div class=\"aura aura-3\"><\/div>\r\n\r\n  <div class=\"grid\">\r\n    <div class=\"visual-col\">\r\n      <div class=\"stage\">\r\n        <div class=\"book-wrap\" id=\"bookTilt\">\r\n          <div class=\"book-frame\">\r\n            <img decoding=\"async\" id=\"mainImg\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/3.png\" alt=\"Featured Book\">\r\n            <div class=\"corner-tl\"><\/div>\r\n            <div class=\"corner-br\"><\/div>\r\n            <div class=\"book-badge\" id=\"bookNum\">01<\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"edition-tag\">\r\n          <div class=\"edition-dot\"><\/div>\r\n          <span class=\"edition-text\">Limited Edition<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"thumb-nav\">\r\n        <div class=\"thumb active\" data-i=\"0\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/3.png\"><\/div>\r\n        <div class=\"thumb\" data-i=\"1\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/1.png\"><\/div>\r\n        <div class=\"thumb\" data-i=\"2\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/2.png\"><\/div>\r\n        <div class=\"thumb\" data-i=\"3\"><img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/1-cover.png\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"content-col\">\r\n      <div class=\"content-inner visible\" id=\"content\">\r\n        <div class=\"eyebrow\">\r\n          <div class=\"eyebrow-line\"><\/div>\r\n          <span class=\"eyebrow-text\" id=\"tag\">Psychological Thriller<\/span>\r\n        <\/div>\r\n\r\n        <h2 class=\"book-title\" id=\"title\">The Damage<br>of <em>Betrayal<\/em><\/h2>\r\n\r\n        <div class=\"divider\"><\/div>\r\n\r\n        <p class=\"book-desc\" id=\"desc\">Mastering the art of tension and truth. A gripping narrative that peels back the layers of human conflict and the shadows of the subconscious.<\/p>\r\n\r\n        <div class=\"meta-row\">\r\n          <div class=\"meta-item\">\r\n            <span class=\"meta-label\">Author<\/span>\r\n            <span class=\"meta-value\" id=\"author\">Michael Martino<\/span>\r\n          <\/div>\r\n          <div class=\"meta-sep\"><\/div>\r\n          <div class=\"meta-item\">\r\n            <span class=\"meta-label\">Genre<\/span>\r\n            <span class=\"meta-value\" id=\"genre\">Thriller<\/span>\r\n          <\/div>\r\n          <div class=\"meta-sep\"><\/div>\r\n          \r\n        <\/div>\r\n\r\n        <div class=\"btn-area\">\r\n          <a class=\"circular-btn\" id=\"circBtn\" href=\"#book-1-placeholder\" target=\"_blank\">\r\n            <svg class=\"ring\" viewBox=\"0 0 140 140\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n              <defs>\r\n                <path id=\"textCircle\" d=\"M70,70 m-46,0 a46,46 0 1,1 92,0 a46,46 0 1,1 -92,0\"\/>\r\n              <\/defs>\r\n              <text font-family=\"'Cormorant Garamond',serif\" font-size=\"9.5\" fill=\"#C9A84C\" letter-spacing=\"4\" opacity=\"0.85\">\r\n                <textPath href=\"#textCircle\">READ MORE \u00b7 READ MORE \u00b7 READ MORE \u00b7<\/textPath>\r\n              <\/text>\r\n            <\/svg>\r\n            <div class=\"btn-core\">\r\n              <div class=\"btn-arrow\">\r\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                  <line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"\/>\r\n                  <polyline points=\"7 7 17 7 17 17\"\/>\r\n                <\/svg>\r\n              <\/div>\r\n            <\/div>\r\n          <\/a>\r\n          <span class=\"btn-tagline\">Get<br>the Book<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n  (function(){\r\n    const books=[\r\n      {tag:\"Psychological Thriller\",title:\"The Damage<br>of <em>Betrayal<\/em>\",desc:\"Mastering the art of tension and truth. A gripping narrative that peels back the layers of human conflict and the shadows of the subconscious.\",author:\"Michael Martino\",genre:\"Thriller\",img:\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/3.png\",link:\"https:\/\/www.amazon.com\/dp\/B0GMDP4BBD\"},\r\n      {tag:\"Vehicle Guide\",title:\"Fix & Maintain<br>Your <em>Vehicle<\/em>\",desc:\"Tactical insights and real-world wisdom designed to empower and inform. Transform your understanding of modern mechanics from the ground up.\",author:\"Michael Martino\",genre:\"Non-Fiction\",img:\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/1.png\",link:\"https:\/\/www.amazon.com\/dp\/B0DNZQ6B14\"},\r\n      {tag:\"Immersive Worlds\",title:\"The Legend of<br><em>Mermalators<\/em>\",desc:\"Exploring the architecture of the unknown. A speculative journey into hidden dimensions beneath the shimmering surface of reality.\",author:\"Michael Martino\",genre:\"Fantasy\",img:\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/2.png\",link:\"\/#\"},\r\n      {tag:\"Self Development\",title:\"Manifestin The Law Of <em>Change<\/em>\",desc:\"An inspiring guide focused on personal transformation, mindset growth, and taking control of one's future through practical wisdom.\",author:\"Michael Martino\",genre:\"Motivational\",img:\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/1-cover.png\",link:\"https:\/\/www.amazon.com\/dp\/B0C41HG1QF\"}\r\n    ];\r\n\r\n    const thumbs=document.querySelectorAll('.thumb');\r\n    const mainImg=document.getElementById('mainImg');\r\n    const content=document.getElementById('content');\r\n    const tagEl=document.getElementById('tag');\r\n    const titleEl=document.getElementById('title');\r\n    const descEl=document.getElementById('desc');\r\n    const authorEl=document.getElementById('author');\r\n    const genreEl=document.getElementById('genre');\r\n    const bookNum=document.getElementById('bookNum');\r\n    const bookTilt=document.getElementById('bookTilt');\r\n    const circBtn=document.getElementById('circBtn');\r\n\r\n    thumbs.forEach(t=>{\r\n      t.addEventListener('click',function(){\r\n        const i=parseInt(this.dataset.i);\r\n        const b=books[i];\r\n        thumbs.forEach(x=>x.classList.remove('active'));\r\n        this.classList.add('active');\r\n        content.classList.remove('visible');\r\n        setTimeout(()=>{\r\n          mainImg.src=b.img;\r\n          tagEl.textContent=b.tag;\r\n          titleEl.innerHTML=b.title;\r\n          descEl.textContent=b.desc;\r\n          authorEl.textContent=b.author;\r\n          genreEl.textContent=b.genre;\r\n          bookNum.textContent=String(i+1).padStart(2,'0');\r\n          circBtn.href=b.link;\r\n          content.classList.add('visible');\r\n        },380);\r\n        bookTilt.style.transition='transform 0s';\r\n        bookTilt.style.transform='translateY(20px) scale(0.97)';\r\n        setTimeout(()=>{\r\n          bookTilt.style.transition='transform 1s cubic-bezier(0.19,1,0.22,1)';\r\n          bookTilt.style.transform='translateY(0) scale(1)';\r\n        },40);\r\n      });\r\n    });\r\n\r\n    document.addEventListener('mousemove',e=>{\r\n      const r=bookTilt.getBoundingClientRect();\r\n      const x=(e.clientX-r.left-r.width\/2)\/r.width*18;\r\n      const y=(e.clientY-r.top-r.height\/2)\/r.height*-18;\r\n      bookTilt.style.transform=`rotateX(${y}deg) rotateY(${x}deg)`;\r\n    });\r\n    document.addEventListener('mouseleave',()=>{\r\n      bookTilt.style.transform='rotateX(0) rotateY(0)';\r\n    });\r\n  })();\r\n  <\/script>\r\n<\/section>\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-3f61232 e-con-full e-flex e-con e-parent\" data-id=\"3f61232\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-50d828f elementor-widget elementor-widget-html\" data-id=\"50d828f\" 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,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Inter:wght@200;300;400;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<div id=\"mm-books-matter-wrapper\">\r\n  <style>\r\n    #mm-books-matter-wrapper {\r\n      --am-gold: #c5a059;\r\n      --am-black: #020203;\r\n      --am-ease: cubic-bezier(0.19, 1, 0.22, 1);\r\n      \r\n      background-color: var(--am-black);\r\n      min-height: 80vh;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      overflow: hidden;\r\n      padding: 120px 5%;\r\n      text-align: center;\r\n    }\r\n\r\n    \/* --- ATMOSPHERIC BACKGROUND --- *\/\r\n    .am-parallax-bg {\r\n        position: absolute;\r\n        inset: -10%;\r\n        background: \r\n            radial-gradient(circle at 50% 50%, rgba(197, 160, 89, 0.05) 0%, transparent 70%),\r\n            radial-gradient(circle at 20% 30%, rgba(60, 40, 100, 0.03) 0%, transparent 50%),\r\n            radial-gradient(circle at 80% 70%, rgba(20, 60, 100, 0.03) 0%, transparent 50%);\r\n        z-index: 1;\r\n        transition: transform 0.2s linear;\r\n    }\r\n\r\n    .am-grain {\r\n      position: absolute;\r\n      inset: 0;\r\n      background: url('https:\/\/grainy-gradients.vercel.app\/noise.svg');\r\n      opacity: 0.05;\r\n      pointer-events: none;\r\n      z-index: 2;\r\n    }\r\n\r\n    canvas#particles-canvas {\r\n        position: absolute;\r\n        inset: 0;\r\n        z-index: 2;\r\n        pointer-events: none;\r\n    }\r\n\r\n    \/* --- CONTENT --- *\/\r\n    .am-matter-container {\r\n        position: relative;\r\n        z-index: 10;\r\n        max-width: 1100px;\r\n    }\r\n\r\n    .am-matter-tag {\r\n        font-family: 'Inter', sans-serif;\r\n        font-size: 0.75rem;\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;\r\n        gap: 20px;\r\n        opacity: 0;\r\n        transform: translateY(20px);\r\n        transition: all 1s var(--am-ease);\r\n    }\r\n    .am-matter-tag::before, .am-matter-tag::after {\r\n        content: \"\"; width: 40px; height: 1px; background: var(--am-gold); opacity: 0.3;\r\n    }\r\n\r\n    .am-matter-quote {\r\n        font-family: 'Playfair Display', serif;\r\n        font-size: clamp(2.2rem, 5vw, 4rem);\r\n        line-height: 1.25;\r\n        font-weight: 400;\r\n        color: #fff;\r\n        letter-spacing: -0.02em;\r\n        margin: 0;\r\n    }\r\n\r\n    \/* Word Reveal Styling *\/\r\n    .am-word {\r\n        display: inline-block;\r\n        opacity: 0;\r\n        transform: translateY(30px);\r\n        filter: blur(10px);\r\n        transition: all 1.2s var(--am-ease);\r\n    }\r\n\r\n    \/* Active States *\/\r\n    #mm-books-matter-wrapper.active .am-matter-tag {\r\n        opacity: 0.8;\r\n        transform: translateY(0);\r\n    }\r\n\r\n    #mm-books-matter-wrapper.active .am-word {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n        filter: blur(0);\r\n    }\r\n\r\n    .am-gold-text {\r\n        color: var(--am-gold);\r\n        font-style: italic;\r\n    }\r\n\r\n    \/* Soft Moving Light Beam *\/\r\n    .am-light-beam {\r\n        position: absolute;\r\n        top: -50%;\r\n        left: -50%;\r\n        width: 200%;\r\n        height: 200%;\r\n        background: conic-gradient(from 0deg, transparent, rgba(197, 160, 89, 0.02), transparent 40%);\r\n        animation: rotate-beam 20s linear infinite;\r\n        z-index: 1;\r\n        pointer-events: none;\r\n    }\r\n\r\n    @keyframes rotate-beam {\r\n        from { transform: rotate(0deg); }\r\n        to { transform: rotate(360deg); }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n        .am-matter-quote { font-size: 1.8rem; }\r\n        .am-matter-tag { letter-spacing: 0.5em; }\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"am-grain\"><\/div>\r\n  <div class=\"am-parallax-bg\" id=\"parallaxBg\"><\/div>\r\n  <div class=\"am-light-beam\"><\/div>\r\n  <canvas id=\"particles-canvas\"><\/canvas>\r\n\r\n  <div class=\"am-matter-container\">\r\n    <div class=\"am-matter-tag\">THE MISSION<\/div>\r\n    \r\n    <h2 class=\"am-matter-quote\" id=\"matterQuote\">\r\n        These books were written to empower readers to <span class=\"am-gold-text\">embrace change<\/span>, rediscover purpose, and create a life aligned with their <span class=\"am-gold-text\">fullest potential<\/span>.\r\n    <\/h2>\r\n  <\/div>\r\n\r\n  <script>\r\n    (function() {\r\n      \/\/ 1. Text Reveal Orchestration\r\n      const quoteEl = document.getElementById('matterQuote');\r\n      const text = quoteEl.innerHTML;\r\n      const words = text.split(\/(\\s+|<span.*?<\\\/span>)\/); \/\/ Split keeping spans and spaces\r\n      \r\n      quoteEl.innerHTML = words.map((word, i) => {\r\n          if (word.trim() === '') return word;\r\n          return `<span class=\"am-word\" style=\"transition-delay: ${i * 0.08}s\">${word}<\/span>`;\r\n      }).join('');\r\n\r\n      \/\/ 2. Intersection Observer\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.3 });\r\n\r\n      observer.observe(document.getElementById('mm-books-matter-wrapper'));\r\n\r\n      \/\/ 3. Parallax Background Logic\r\n      window.addEventListener('mousemove', (e) => {\r\n          const bg = document.getElementById('parallaxBg');\r\n          const x = (window.innerWidth \/ 2 - e.clientX) \/ 50;\r\n          const y = (window.innerHeight \/ 2 - e.clientY) \/ 50;\r\n          bg.style.transform = `translate(${x}px, ${y}px)`;\r\n      });\r\n\r\n      \/\/ 4. Slow Particles Animation\r\n      const canvas = document.getElementById('particles-canvas');\r\n      const ctx = canvas.getContext('2d');\r\n      let particles = [];\r\n\r\n      function resize() {\r\n          canvas.width = canvas.offsetWidth;\r\n          canvas.height = canvas.offsetHeight;\r\n      }\r\n\r\n      function createParticles() {\r\n          particles = [];\r\n          for (let i = 0; i < 40; i++) {\r\n              particles.push({\r\n                  x: Math.random() * canvas.width,\r\n                  y: Math.random() * canvas.height,\r\n                  size: Math.random() * 2 + 0.5,\r\n                  vx: (Math.random() - 0.5) * 0.2,\r\n                  vy: (Math.random() - 0.5) * 0.2,\r\n                  alpha: Math.random() * 0.5 + 0.1\r\n              });\r\n          }\r\n      }\r\n\r\n      function animate() {\r\n          ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n          particles.forEach(p => {\r\n              p.x += p.vx;\r\n              p.y += p.vy;\r\n              if (p.x < 0) p.x = canvas.width;\r\n              if (p.x > canvas.width) p.x = 0;\r\n              if (p.y < 0) p.y = canvas.height;\r\n              if (p.y > canvas.height) p.y = 0;\r\n\r\n              ctx.beginPath();\r\n              ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);\r\n              ctx.fillStyle = `rgba(197, 160, 89, ${p.alpha})`;\r\n              ctx.fill();\r\n          });\r\n          requestAnimationFrame(animate);\r\n      }\r\n\r\n      window.addEventListener('resize', () => { resize(); createParticles(); });\r\n      resize();\r\n      createParticles();\r\n      animate();\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-87601c8 e-con-full e-flex e-con e-parent\" data-id=\"87601c8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-84ccc2b elementor-widget elementor-widget-html\" data-id=\"84ccc2b\" 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-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>COLLECTION \u00a9 MICHAEL MARTINO THE LIBRARY Architect of Unseen Worlds Explore a curated collection of psychologically charged thrillers, tactical knowledge, [&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-360","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/pages\/360","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=360"}],"version-history":[{"count":40,"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/pages\/360\/revisions"}],"predecessor-version":[{"id":548,"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/pages\/360\/revisions\/548"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/media?parent=360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}