{"id":383,"date":"2026-05-15T17:56:24","date_gmt":"2026-05-15T17:56:24","guid":{"rendered":"https:\/\/demowebdesign.live\/michaelmartino\/?page_id=383"},"modified":"2026-05-18T21:20:15","modified_gmt":"2026-05-18T21:20:15","slug":"blogs","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/blogs\/","title":{"rendered":"Blogs"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"383\" class=\"elementor elementor-383\">\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>JOURNAL \u00a9 MICHAEL MARTINO<\/span><\/div>\r\n\r\n    <div class=\"main-content\">\r\n        <div class=\"index-marker reveal\">THE JOURNAL<\/div>\r\n        \r\n        <h1 class=\"hero-title reveal\">\r\n            Insights into <br>\r\n            <span>Stories & Life<\/span><br>\r\n        <\/h1>\r\n        \r\n        <p class=\"hero-description reveal\">\r\n            Deep dives into the creative process, psychological explorations, and practical wisdom. Pull back the curtain on the art of storytelling and the hidden nuances of the human experience.\r\n        <\/p>\r\n        \r\n    <\/div>\r\n\r\n    <div class=\"scroll-hint\">\r\n        <span>Scroll to Read<\/span>\r\n        <div class=\"scroll-line\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\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-39169fb e-con-full e-flex e-con e-parent\" data-id=\"39169fb\" 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-6bdfe8e elementor-widget elementor-widget-html\" data-id=\"6bdfe8e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<head>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Inter:wght@200;300;400;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n*{margin:0;padding:0;box-sizing:border-box}\r\n:root{\r\n  --gold:#c5a059;\r\n  --gold-dim:rgba(197,160,89,0.15);\r\n  --gold-glow:rgba(197,160,89,0.06);\r\n  --ink:#060608;\r\n  --ease:cubic-bezier(0.19,1,0.22,1);\r\n}\r\nbody{background:#060608;overflow-x:hidden;min-height:100vh}\r\n\r\n.wrapper{\r\n  background:#060608;\r\n  min-height:100vh;\r\n  position:relative;\r\n  overflow:hidden;\r\n  display:flex;\r\n  flex-direction:column;\r\n  align-items:center;\r\n  justify-content:center;\r\n  padding:80px 5%;\r\n}\r\n\r\n\/* BG ANIMATIONS *\/\r\n.orb{\r\n  position:absolute;\r\n  border-radius:50%;\r\n  pointer-events:none;\r\n  filter:blur(80px);\r\n}\r\n.orb-1{\r\n  width:600px;height:600px;\r\n  background:radial-gradient(circle,rgba(197,160,89,0.07) 0%,transparent 70%);\r\n  top:-100px;right:-150px;\r\n  animation:floatOrb1 12s ease-in-out infinite;\r\n}\r\n.orb-2{\r\n  width:400px;height:400px;\r\n  background:radial-gradient(circle,rgba(197,160,89,0.04) 0%,transparent 70%);\r\n  bottom:0;left:-100px;\r\n  animation:floatOrb2 15s ease-in-out infinite;\r\n}\r\n.orb-3{\r\n  width:200px;height:200px;\r\n  background:radial-gradient(circle,rgba(255,255,255,0.02) 0%,transparent 70%);\r\n  top:40%;right:30%;\r\n  animation:floatOrb3 9s ease-in-out infinite;\r\n}\r\n@keyframes floatOrb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.1)}}\r\n@keyframes floatOrb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.05)}}\r\n@keyframes floatOrb3{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,20px)}}\r\n\r\n\/* SCANLINES *\/\r\n.scanlines{\r\n  position:absolute;inset:0;\r\n  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,0.008) 2px,rgba(255,255,255,0.008) 4px);\r\n  pointer-events:none;z-index:1;\r\n}\r\n\r\n\/* ANIMATED GRID *\/\r\n.bg-grid{\r\n  position:absolute;inset:0;\r\n  background-image:linear-gradient(rgba(197,160,89,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(197,160,89,0.04) 1px,transparent 1px);\r\n  background-size:80px 80px;\r\n  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 0%,transparent 100%);\r\n  pointer-events:none;z-index:0;\r\n  animation:gridDrift 20s linear infinite;\r\n}\r\n@keyframes gridDrift{0%{background-position:0 0}100%{background-position:80px 80px}}\r\n\r\n\/* FLOATING PARTICLES *\/\r\n.particles{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}\r\n.particle{\r\n  position:absolute;\r\n  width:2px;height:2px;\r\n  background:var(--gold);\r\n  border-radius:50%;\r\n  opacity:0;\r\n  animation:particleDrift var(--d,8s) ease-in-out var(--delay,0s) infinite;\r\n}\r\n@keyframes particleDrift{\r\n  0%{opacity:0;transform:translateY(0) translateX(0)}\r\n  20%{opacity:0.6}\r\n  80%{opacity:0.3}\r\n  100%{opacity:0;transform:translateY(-120px) translateX(var(--dx,20px))}\r\n}\r\n\r\n\/* LAYOUT *\/\r\n.grid{\r\n  display:grid;\r\n  grid-template-columns:1fr 1.4fr;\r\n  gap:0;\r\n  max-width:1400px;\r\n  width:100%;\r\n  position:relative;z-index:10;\r\n  border:1px solid rgba(197,160,89,0.12);\r\n}\r\n\r\n\/* LEFT PANEL *\/\r\n.left-panel{\r\n  padding:60px 50px;\r\n  border-right:1px solid rgba(197,160,89,0.12);\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:0;\r\n  background:rgba(255,255,255,0.01);\r\n  backdrop-filter:blur(10px);\r\n}\r\n\r\n.section-eyebrow{\r\n  font-family:'Inter',sans-serif;\r\n  font-size:0.65rem;\r\n  letter-spacing:0.5em;\r\n  color:var(--gold);\r\n  opacity:0.7;\r\n  text-transform:uppercase;\r\n  margin-bottom:40px;\r\n  display:flex;\r\n  align-items:center;\r\n  gap:15px;\r\n}\r\n.section-eyebrow::after{content:'';flex:1;height:1px;background:rgba(197,160,89,0.2)}\r\n\r\n.nav-item{\r\n  cursor:pointer;\r\n  padding:30px 0;\r\n  border-bottom:1px solid rgba(255,255,255,0.04);\r\n  position:relative;\r\n  transition:all 0.6s var(--ease);\r\n  display:flex;\r\n  align-items:flex-start;\r\n  gap:20px;\r\n}\r\n.nav-item:last-child{border-bottom:none}\r\n\r\n.nav-num{\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:25px !important;\r\n  color:var(--gold);\r\n  opacity:0.3;\r\n  min-width:25px;\r\n  padding-top:5px;\r\n  transition:opacity 0.4s;\r\n}\r\n.nav-item.active .nav-num,.nav-item:hover .nav-num{opacity:1}\r\n\r\n.nav-text-wrap{flex:1}\r\n\r\n.nav-date{\r\n  font-family:'Inter',sans-serif;\r\n  font-size:0.65rem;\r\n  letter-spacing:0.3em;\r\n  color:var(--gold);\r\n  opacity:0.5;\r\n  margin-bottom:8px;\r\n  display:block;\r\n}\r\n\r\n.nav-title{\r\n  font-family:'Playfair Display',serif;\r\n  font-size:1.15rem;\r\n  line-height:1.3;\r\n  color:rgba(255,255,255,0.3);\r\n  transition:all 0.5s var(--ease);\r\n}\r\n.nav-item.active .nav-title,.nav-item:hover .nav-title{\r\n  color:rgba(255,255,255,0.9);\r\n}\r\n\r\n.nav-tag{\r\n  font-family:'Inter',sans-serif;\r\n  font-size:0.6rem;\r\n  letter-spacing:0.25em;\r\n  text-transform:uppercase;\r\n  color:var(--gold);\r\n  background:rgba(197,160,89,0.08);\r\n  border:1px solid rgba(197,160,89,0.2);\r\n  padding:4px 10px;\r\n  display:inline-block;\r\n  margin-top:10px;\r\n  opacity:0;\r\n  transition:opacity 0.4s;\r\n}\r\n.nav-item.active .nav-tag,.nav-item:hover .nav-tag{opacity:1}\r\n\r\n\/* Active indicator line *\/\r\n.nav-item::before{\r\n  content:'';\r\n  position:absolute;\r\n  left:0;top:50%;transform:translateY(-50%);\r\n  width:0;height:60%;\r\n  background:linear-gradient(to bottom,transparent,var(--gold),transparent);\r\n  left:-1px;\r\n  transition:height 0.5s var(--ease),opacity 0.4s;\r\n  opacity:0;\r\n}\r\n.nav-item.active::before{height:60%;opacity:1;width:1px}\r\n\r\n\/* Progress bar below nav *\/\r\n.progress-container{\r\n  margin-top:40px;\r\n  display:flex;\r\n  gap:6px;\r\n}\r\n.progress-dot{\r\n  height:2px;\r\n  flex:1;\r\n  background:rgba(255,255,255,0.1);\r\n  transition:background 0.5s,flex 0.5s var(--ease);\r\n}\r\n.progress-dot.active{\r\n  background:var(--gold);\r\n  flex:3;\r\n}\r\n\r\n\/* RIGHT PANEL *\/\r\n.right-panel{\r\n  position:relative;\r\n  overflow:hidden;\r\n  background:rgba(0,0,0,0.3);\r\n}\r\n\r\n.blog-slide{\r\n  position:absolute;inset:0;\r\n  display:flex;\r\n  flex-direction:column;\r\n  opacity:0;\r\n  transform:translateX(30px);\r\n  transition:opacity 0.8s var(--ease),transform 0.8s var(--ease);\r\n  pointer-events:none;\r\n}\r\n.blog-slide.active{\r\n  opacity:1;\r\n  transform:translateX(0);\r\n  pointer-events:all;\r\n  position:relative;\r\n}\r\n\r\n.img-container{\r\n  width:100%;\r\n  height:320px;\r\n  overflow:hidden;\r\n  position:relative;\r\n  flex-shrink:0;\r\n}\r\n.img-container::after{\r\n  content:'';\r\n  position:absolute;inset:0;\r\n  background:linear-gradient(to bottom,transparent 30%,#060608 100%);\r\n}\r\n.img-container img{\r\n  width:100%;height:100%;\r\n  object-fit:cover;\r\n  transition:transform 8s var(--ease);\r\n}\r\n.blog-slide.active .img-container img{\r\n  transform:scale(1.06);\r\n}\r\n\r\n.blog-content{\r\n  padding:0 55px 55px;\r\n  display:flex;\r\n  flex-direction:column;\r\n  flex:1;\r\n  margin-top:-40px;\r\n  position:relative;z-index:2;\r\n}\r\n\r\n.meta-row{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:20px;\r\n  margin-bottom:24px;\r\n}\r\n.cat-badge{\r\n  font-family:'Inter',sans-serif;\r\n  font-size:0.62rem;\r\n  letter-spacing:0.4em;\r\n  text-transform:uppercase;\r\n  color:var(--gold);\r\n  border:1px solid rgba(197,160,89,0.35);\r\n  padding:5px 14px;\r\n}\r\n.meta-date{\r\n  font-family:'Inter',sans-serif;\r\n  font-size:0.65rem;\r\n  color:rgba(255,255,255,0.3);\r\n  letter-spacing:0.15em;\r\n}\r\n\r\n.blog-title{\r\n  font-family:'Playfair Display',serif;\r\n  font-size:clamp(1.6rem,3vw,2.4rem);\r\n  line-height:1.15;\r\n  color:#fff;\r\n  margin-bottom:22px;\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-bottom:22px;\r\n}\r\n\r\n.blog-desc{\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:1.25rem;\r\n  line-height:1.75;\r\n  color:rgba(255,255,255,0.6);\r\n  flex:1;\r\n}\r\n\r\n\/* Decorative corner *\/\r\n.corner-deco{\r\n  position:absolute;\r\n  bottom:30px;right:30px;\r\n  width:60px;height:60px;\r\n  border-right:1px solid rgba(197,160,89,0.2);\r\n  border-bottom:1px solid rgba(197,160,89,0.2);\r\n  pointer-events:none;\r\n}\r\n.corner-deco-tl{\r\n  position:absolute;\r\n  top:20px;left:0;\r\n  width:40px;height:40px;\r\n  border-left:1px solid rgba(197,160,89,0.15);\r\n  border-top:1px solid rgba(197,160,89,0.15);\r\n  pointer-events:none;\r\n}\r\n\r\n\/* Reading time & author strip *\/\r\n.author-strip{\r\n  margin-top:30px;\r\n  padding-top:24px;\r\n  border-top:1px solid rgba(255,255,255,0.05);\r\n  display:flex;\r\n  align-items:center;\r\n  gap:20px;\r\n}\r\n.author-avatar{\r\n  width:38px;height:38px;\r\n  border-radius:50%;\r\n  background:linear-gradient(135deg,rgba(197,160,89,0.3),rgba(197,160,89,0.05));\r\n  border:1px solid rgba(197,160,89,0.3);\r\n  display:flex;align-items:center;justify-content:center;\r\n  font-family:'Playfair Display',serif;\r\n  font-size:0.8rem;\r\n  color:var(--gold);\r\n  flex-shrink:0;\r\n}\r\n.author-info{flex:1}\r\n.author-name{\r\n  font-family:'Inter',sans-serif;\r\n  font-size:0.75rem;\r\n  color:rgba(255,255,255,0.7);\r\n  margin-bottom:2px;\r\n}\r\n.read-time{\r\n  font-family:'Inter',sans-serif;\r\n  font-size:0.65rem;\r\n  color:rgba(255,255,255,0.25);\r\n  letter-spacing:0.15em;\r\n}\r\n\r\n\/* Slide counter *\/\r\n.slide-counter{\r\n  position:absolute;\r\n  top:24px;right:30px;\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:0.85rem;\r\n  color:rgba(197,160,89,0.5);\r\n  letter-spacing:0.2em;\r\n  z-index:20;\r\n}\r\n\r\n@media(max-width:900px){\r\n  .wrapper{\r\n    padding:40px 4%;\r\n    justify-content:flex-start;\r\n  }\r\n \r\n  .grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n \r\n  .left-panel{\r\n    padding:36px 28px;\r\n    border-right:none;\r\n    border-bottom:1px solid rgba(197,160,89,0.12);\r\n  }\r\n \r\n  .section-eyebrow{\r\n    margin-bottom:24px;\r\n  }\r\n \r\n  .nav-item{\r\n    padding:20px 0;\r\n  }\r\n \r\n  .nav-title{\r\n    font-size:1rem;\r\n  }\r\n \r\n  .nav-tag{\r\n    opacity:0;\r\n  }\r\n \r\n  .nav-item.active .nav-tag{\r\n    opacity:1;\r\n  }\r\n \r\n  .progress-container{\r\n    margin-top:28px;\r\n  }\r\n \r\n  .right-panel{\r\n    min-height:520px;\r\n  }\r\n \r\n  .blog-slide{\r\n    position:absolute;\r\n  }\r\n  .blog-slide.active{\r\n    position:relative;\r\n  }\r\n \r\n  .img-container{\r\n    height:220px;\r\n  }\r\n \r\n  .blog-content{\r\n    padding:0 28px 40px;\r\n    margin-top:-30px;\r\n  }\r\n \r\n  .blog-title{\r\n    font-size:clamp(1.35rem,5vw,1.8rem);\r\n  }\r\n \r\n  .blog-desc{\r\n    font-size:1.1rem;\r\n  }\r\n \r\n  .slide-counter{\r\n    top:16px;right:20px;\r\n  }\r\n \r\n  .corner-deco{\r\n    display:none;\r\n  }\r\n  .corner-deco-tl{\r\n    display:none;\r\n  }\r\n \r\n  .author-strip{\r\n    margin-top:20px;\r\n    padding-top:18px;\r\n  }\r\n}\r\n \r\n@media(max-width:480px){\r\n  .wrapper{\r\n    padding:28px 4%;\r\n  }\r\n \r\n  .left-panel{\r\n    padding:28px 20px;\r\n  }\r\n \r\n  .nav-item{\r\n    padding:16px 0;\r\n    gap:14px;\r\n  }\r\n \r\n  .nav-num{\r\n    font-size:20px !important;\r\n    min-width:20px;\r\n  }\r\n \r\n  .nav-title{\r\n    font-size:0.95rem;\r\n  }\r\n \r\n  .section-eyebrow{\r\n    font-size:0.6rem;\r\n    letter-spacing:0.35em;\r\n  }\r\n \r\n  .img-container{\r\n    height:180px;\r\n  }\r\n \r\n  .blog-content{\r\n    padding:0 20px 32px;\r\n    margin-top:-24px;\r\n  }\r\n \r\n  .meta-row{\r\n    gap:12px;\r\n    margin-bottom:16px;\r\n    flex-wrap:wrap;\r\n  }\r\n \r\n  .blog-title{\r\n    font-size:1.25rem;\r\n    margin-bottom:14px;\r\n  }\r\n \r\n  .blog-desc{\r\n    font-size:1rem;\r\n    line-height:1.65;\r\n  }\r\n \r\n  .author-avatar{\r\n    width:32px;height:32px;\r\n    font-size:0.7rem;\r\n  }\r\n \r\n  .author-name{\r\n    font-size:0.7rem;\r\n  }\r\n \r\n  .read-time{\r\n    font-size:0.6rem;\r\n  }\r\n \r\n  .progress-container{\r\n    margin-top:20px;\r\n    gap:4px;\r\n  }\r\n \r\n  .orb-1{\r\n    width:300px;height:300px;\r\n  }\r\n  .orb-2{\r\n    width:200px;height:200px;\r\n  }\r\n  .orb-3{\r\n    display:none;\r\n  }\r\n}\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"wrapper\">\r\n\r\n  <div class=\"bg-grid\"><\/div>\r\n  <div class=\"scanlines\"><\/div>\r\n  <div class=\"orb orb-1\"><\/div>\r\n  <div class=\"orb orb-2\"><\/div>\r\n  <div class=\"orb orb-3\"><\/div>\r\n\r\n  <div class=\"particles\" id=\"particles\"><\/div>\r\n\r\n  <div class=\"grid\">\r\n    <div class=\"corner-deco-tl\"><\/div>\r\n    <div class=\"corner-deco\"><\/div>\r\n\r\n    <!-- LEFT -->\r\n    <div class=\"left-panel\">\r\n      <div class=\"section-eyebrow\">Journal<\/div>\r\n\r\n      <div class=\"nav-item active\" data-i=\"0\">\r\n        <div class=\"nav-num\">01<\/div>\r\n        <div class=\"nav-text-wrap\">\r\n          <div class=\"nav-title\">The Architecture of a Thriller: Crafting Tension<\/div>\r\n          <span class=\"nav-tag\">Process & Craft<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"nav-item\" data-i=\"1\">\r\n        <div class=\"nav-num\">02<\/div>\r\n        <div class=\"nav-text-wrap\">\r\n          <div class=\"nav-title\">Finding Your Voice in a Digital Age<\/div>\r\n          <span class=\"nav-tag\">Philosophy<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"nav-item\" data-i=\"2\">\r\n        <div class=\"nav-num\">03<\/div>\r\n        <div class=\"nav-text-wrap\">\r\n          <div class=\"nav-title\">The Psychology of Character Flaws<\/div>\r\n          <span class=\"nav-tag\">Psychology<\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"nav-item\" data-i=\"3\">\r\n        <div class=\"nav-num\">04<\/div>\r\n        <div class=\"nav-text-wrap\">\r\n          <div class=\"nav-title\">Speculative Fiction: Building Better Worlds<\/div>\r\n          <span class=\"nav-tag\">Speculative Fiction<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"progress-container\">\r\n        <div class=\"progress-dot active\" data-p=\"0\"><\/div>\r\n        <div class=\"progress-dot\" data-p=\"1\"><\/div>\r\n        <div class=\"progress-dot\" data-p=\"2\"><\/div>\r\n        <div class=\"progress-dot\" data-p=\"3\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- RIGHT -->\r\n    <div class=\"right-panel\" id=\"rightPanel\">\r\n      <div class=\"slide-counter\" id=\"slideCounter\">01 \/ 04<\/div>\r\n\r\n      <div class=\"blog-slide active\" data-s=\"0\">\r\n        <div class=\"img-container\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1455390582262-044cdead277a?q=80&w=2573&auto=format&fit=crop\" alt=\"\">\r\n        <\/div>\r\n        <div class=\"blog-content\">\r\n          <div class=\"meta-row\">\r\n            <span class=\"cat-badge\">Process & Craft<\/span>\r\n          <\/div>\r\n          <h2 class=\"blog-title\">The Architecture of a Thriller: Crafting Tension<\/h2>\r\n          <div class=\"divider\"><\/div>\r\n          <p class=\"blog-desc\">Great thrillers are not built on plot twists alone they are constructed with the precision of a clock. Each chapter is a gear, each sentence a spring, coiled tight. The reader must feel the mechanism ticking beneath the prose, sensing danger before they can name it.<br><br>To craft genuine tension, a writer must first understand what their characters fear most not the surface fear, but the wound beneath it. The protagonist's dread of failure, of being exposed, of loving something they cannot protect. When the external threat mirrors the internal terror, readers stop reading and start <em>surviving<\/em> alongside your character.<br><br>Pacing is architecture. Slow, luxurious scenes build the walls; sharp, staccato chapters are the trapdoors. Learn to control the reader's breath and you will own their attention completely.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"blog-slide\" data-s=\"1\">\r\n        <div class=\"img-container\">\r\n          <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/95102.jpg\" alt=\"\">\r\n        <\/div>\r\n        <div class=\"blog-content\">\r\n          <div class=\"meta-row\">\r\n            <span class=\"cat-badge\">Philosophy<\/span>\r\n          <\/div>\r\n          <h2 class=\"blog-title\">Finding Your Voice in a Digital Age<\/h2>\r\n          <div class=\"divider\"><\/div>\r\n          <p class=\"blog-desc\">There is a particular kind of silence that precedes an authentic sentence. It is the pause between what you almost wrote the safe, expected phrase and what you actually mean. In a world of algorithmic content and perpetual noise, this silence has become the most radical act available to a writer.<br><br>Your voice is not a style you adopt. It is the residue of every book you have read, every conversation that cracked something open in you, every private obsession you once thought too strange to name. It arrives when you stop performing and start confessing not your secrets necessarily, but your <em>way of seeing<\/em>.<br><br>Protect it fiercely. The internet will offer you templates, trending formats, optimised hooks. Use them as tools if you must, but never mistake the container for the wine.<\/p>\r\n          \r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"blog-slide\" data-s=\"2\">\r\n        <div class=\"img-container\">\r\n          <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/michaelmartino\/wp-content\/uploads\/2026\/05\/2150038501.jpg\" alt=\"\">\r\n        <\/div>\r\n        <div class=\"blog-content\">\r\n          <div class=\"meta-row\">\r\n            <span class=\"cat-badge\">Psychology<\/span>\r\n            <span class=\"meta-date\">May 5, 2026<\/span>\r\n          <\/div>\r\n          <h2 class=\"blog-title\">The Psychology of Character Flaws<\/h2>\r\n          <div class=\"divider\"><\/div>\r\n          <p class=\"blog-desc\">Perfection is the enemy of empathy. A character without flaw is a marble statue beautiful from a distance, cold to the touch. Readers do not fall in love with what is admirable; they fall in love with what is <em>recognisable<\/em>. The crack in the armour. The old wound that never fully healed.<br><br>The most enduring characters in literature share one quality: their flaw is inseparable from their gift. The detective who notices everything because she trusts no one. The writer who conjures worlds because she cannot survive this one. The flaw is not a mistake in the design it is the design.<br><br>When you know your character's deepest shame, you know the engine of your story. Drive toward it, not away. The reader will follow you anywhere if you have the courage to go there first.<\/p>\r\n          \r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"blog-slide\" data-s=\"3\">\r\n        <div class=\"img-container\">\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1543002588-bfa74002ed7e?q=80&w=2730&auto=format&fit=crop\" alt=\"\">\r\n        <\/div>\r\n        <div class=\"blog-content\">\r\n          <div class=\"meta-row\">\r\n            <span class=\"cat-badge\">Speculative Fiction<\/span>\r\n            <span class=\"meta-date\">Apr 28, 2026<\/span>\r\n          <\/div>\r\n          <h2 class=\"blog-title\">Speculative Fiction: Building Better Worlds<\/h2>\r\n          <div class=\"divider\"><\/div>\r\n          <p class=\"blog-desc\">The world you build is never really about another planet, another century, another species. It is always, in the end, about this one. The best speculative fiction holds a mirror up to the present moment through the clear, strange lens of the imagined.<br><br>Internal logic is everything. A reader will accept dragons if they obey consistent rules. They will reject a single anachronistic smartphone in a Victorian novel. The contract between writer and reader is simple: you may invent any world you choose, provided you inhabit it fully and never betray its rules for the convenience of your plot.<br><br>Begin not with technology or politics, but with a single human question what does love cost here? what is justice in this place? and build outward from that. The world will follow, and so will the reader.<\/p>\r\n          \r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  const navItems=document.querySelectorAll('.nav-item');\r\n  const slides=document.querySelectorAll('.blog-slide');\r\n  const dots=document.querySelectorAll('.progress-dot');\r\n  const counter=document.getElementById('slideCounter');\r\n  const panel=document.getElementById('rightPanel');\r\n  let current=0,animating=false;\r\n\r\n  function go(i){\r\n    if(i===current||animating)return;\r\n    animating=true;\r\n    const prev=current;\r\n    current=i;\r\n    navItems.forEach(n=>n.classList.remove('active'));\r\n    navItems[i].classList.add('active');\r\n    dots.forEach(d=>d.classList.remove('active'));\r\n    dots[i].classList.add('active');\r\n    counter.textContent=(i+1<10?'0'+(i+1):i+1)+' \/ 04';\r\n    slides[prev].style.transition='opacity 0.4s ease,transform 0.4s ease';\r\n    slides[prev].style.opacity='0';\r\n    slides[prev].style.transform='translateX(-20px)';\r\n    setTimeout(()=>{\r\n      slides[prev].classList.remove('active');\r\n      slides[prev].style.opacity='';\r\n      slides[prev].style.transform='';\r\n      slides[prev].style.transition='';\r\n      slides[i].classList.add('active');\r\n      setTimeout(()=>{animating=false},800);\r\n    },400);\r\n  }\r\n\r\n  navItems.forEach((item,idx)=>{\r\n    item.addEventListener('click',()=>go(idx));\r\n  });\r\n\r\n  \/\/ Particles\r\n  const particlesEl=document.getElementById('particles');\r\n  const positions=[\r\n    {x:15,dx:-10},{x:30,dx:15},{x:50,dx:-20},{x:65,dx:10},\r\n    {x:80,dx:-15},{x:45,dx:25},{x:20,dx:5},{x:70,dx:-8},\r\n    {x:90,dx:12},{x:10,dx:-5}\r\n  ];\r\n  positions.forEach((p,i)=>{\r\n    const el=document.createElement('div');\r\n    el.className='particle';\r\n    el.style.left=p.x+'%';\r\n    el.style.bottom='0';\r\n    el.style.setProperty('--d',(6+i%5)+'s');\r\n    el.style.setProperty('--delay',(i*0.7)+'s');\r\n    el.style.setProperty('--dx',p.dx+'px');\r\n    particlesEl.appendChild(el);\r\n  });\r\n\r\n  \/\/ Auto-advance REMOVED \u2014 blogs only switch on click\r\n})();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-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>JOURNAL \u00a9 MICHAEL MARTINO THE JOURNAL Insights into Stories &#038; Life Deep dives into the creative process, psychological explorations, and [&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-383","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/pages\/383","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=383"}],"version-history":[{"count":25,"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/pages\/383\/revisions"}],"predecessor-version":[{"id":551,"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/pages\/383\/revisions\/551"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/michaelmartino\/index.php\/wp-json\/wp\/v2\/media?parent=383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}