Maven Hero Section<\/title>\n\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: auto;\n }\n\n body {\n font-family: \"Montserrat\", Arial, sans-serif;\n background: #55c7f7;\n overflow-x: hidden;\n }\n\n .maven-hero-wrapper {\n position: relative;\n height: 320vh;\n background: #55c7f7;\n }\n\n .maven-hero {\n position: sticky;\n top: 0;\n width: 100%;\n height: 100vh;\n height: 100svh;\n overflow: hidden;\n background: #55c7f7;\n }\n\n .maven-hero-video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n z-index: 1;\n background: #55c7f7;\n }\n\n .hero-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n pointer-events: none;\n background: linear-gradient(\n 90deg,\n rgba(33, 8, 74, 0.58) 0%,\n rgba(33, 8, 74, 0.25) 38%,\n rgba(33, 8, 74, 0.04) 72%\n );\n }\n\n .hero-content {\n position: relative;\n z-index: 3;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 7%;\n max-width: 1500px;\n margin: 0 auto;\n pointer-events: none;\n }\n\n .hero-copy {\n max-width: 590px;\n color: #ffffff;\n transform: translateY(40px);\n opacity: 0;\n transition: opacity 0.9s ease, transform 0.9s ease;\n }\n\n .hero-copy.show {\n transform: translateY(0);\n opacity: 1;\n }\n\n .eyebrow {\n display: inline-block;\n margin-bottom: 18px;\n padding: 9px 18px;\n border-radius: 999px;\n background: rgba(255, 201, 40, 0.96);\n color: #6b1dba;\n font-weight: 900;\n letter-spacing: 1px;\n text-transform: uppercase;\n box-shadow: 0 5px 0 #6b1dba;\n }\n\n .hero-title {\n font-size: clamp(64px, 10vw, 145px);\n line-height: 0.82;\n font-weight: 900;\n color: #ffc928;\n letter-spacing: 1px;\n text-shadow:\n 4px 4px 0 #6b1dba,\n 7px 7px 0 rgba(70, 22, 128, 0.45);\n margin-bottom: 24px;\n transform: rotate(-3deg);\n transform-origin: left center;\n }\n\n .hero-subtitle {\n font-size: clamp(28px, 4vw, 58px);\n line-height: 1;\n font-weight: 900;\n color: #ffffff;\n text-transform: uppercase;\n text-shadow:\n 3px 3px 0 #6b1dba,\n 5px 5px 0 rgba(70, 22, 128, 0.35);\n margin-bottom: 22px;\n }\n\n .hero-description {\n font-size: clamp(17px, 1.5vw, 22px);\n line-height: 1.7;\n color: #fff8d6;\n max-width: 530px;\n margin-bottom: 34px;\n text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);\n }\n\n .hero-buttons {\n display: flex;\n gap: 18px;\n flex-wrap: wrap;\n pointer-events: auto;\n }\n\n .hero-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 56px;\n padding: 0 28px;\n border-radius: 999px;\n text-decoration: none;\n font-weight: 900;\n font-size: 16px;\n letter-spacing: 0.4px;\n transition: transform 0.25s ease;\n text-decoration: none !important;\n }\n\n .hero-btn.primary {\n background: #ffc928;\n color: #6b1dba;\n box-shadow: 0 6px 0 #6b1dba;\n }\n\n .hero-btn.secondary {\n background: #ffffff;\n color: #6b1dba;\n box-shadow: 0 6px 0 #c5c5c5;\n text-decoration: none !important;\n }\n\n .hero-btn:hover {\n transform: translateY(-4px);\n }\n\n .scroll-hint {\n position: absolute;\n z-index: 4;\n bottom: 28px;\n left: 50%;\n transform: translateX(-50%);\n color: #ffffff;\n font-weight: 900;\n font-size: 14px;\n letter-spacing: 1px;\n text-transform: uppercase;\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);\n transition: opacity 0.45s ease;\n animation: bounce 1.6s infinite;\n pointer-events: none;\n }\n\n @keyframes bounce {\n 0%, 100% {\n transform: translate(-50%, 0);\n }\n 50% {\n transform: translate(-50%, -10px);\n }\n }\n\n @media (max-width: 768px) {\n .maven-hero-wrapper {\n height: 280vh;\n }\n\n .maven-hero-video {\n object-position: center center;\n }\n\n .hero-overlay {\n background: linear-gradient(\n 0deg,\n rgba(33, 8, 74, 0.78) 0%,\n rgba(33, 8, 74, 0.32) 56%,\n rgba(33, 8, 74, 0.04) 100%\n );\n }\n\n .hero-content {\n align-items: flex-end;\n padding: 0 22px 105px;\n }\n\n .hero-copy {\n max-width: 100%;\n }\n\n .eyebrow {\n font-size: 12px;\n padding: 8px 14px;\n margin-bottom: 14px;\n }\n\n .hero-title {\n font-size: clamp(68px, 22vw, 98px);\n margin-bottom: 18px;\n }\n\n .hero-subtitle {\n font-size: clamp(30px, 9vw, 44px);\n margin-bottom: 16px;\n }\n\n .hero-description {\n font-size: 16px;\n line-height: 1.55;\n margin-bottom: 24px;\n }\n\n .hero-buttons {\n gap: 12px;\n }\n\n .hero-btn {\n min-height: 50px;\n padding: 0 21px;\n font-size: 14px;\n }\n\n .scroll-hint {\n bottom: 18px;\n font-size: 12px;\n }\n }\n\n @media (max-width: 480px) {\n .maven-hero-wrapper {\n height: 260vh;\n }\n\n .hero-content {\n padding-bottom: 92px;\n }\n\n .hero-buttons {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .hero-btn {\n width: auto;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n\n <section class=\"maven-hero-wrapper\" id=\"mavenHeroWrapper\">\n <div class=\"maven-hero\">\n\n <video\n id=\"mavenHeroVideo\"\n class=\"maven-hero-video\"\n muted\n playsinline\n webkit-playsinline\n preload=\"auto\"\n data-desktop-src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/ezgif-6a02ae9068ba801c.mp4\"\n data-mobile-src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/Monica-Hero-Video-Mob.mp4\"\n data-desktop-poster=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/Monica-Hero-Thumbnail.png\"\n data-mobile-poster=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/Monica-Hero-Thumbnail-Mob.png\"\n ><\/video>\n\n <div class=\"hero-overlay\"><\/div>\n\n <div class=\"hero-content\">\n <div class=\"hero-copy\" id=\"heroCopy\">\n <span class=\"eyebrow\">A Magical Children\u2019s Book<\/span>\n\n <h1 class=\"hero-title\">Maven<\/h1>\n\n <h2 class=\"hero-subtitle\">\n Small Mouse.<br \/>\n Big Courage.\n <\/h2>\n\n <p class=\"hero-description\">\n Join Maven as she rides through a peaceful meadow and reminds every child\n that even the tiniest mouse can do brave things.\n <\/p>\n\n <div class=\"hero-buttons\">\n <a href=\"#\" class=\"hero-btn primary\">Buy the Book<\/a>\n <a href=\"#\" class=\"hero-btn secondary\">Explore Maven\u2019s World<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"scroll-hint\" id=\"scrollHint\">Scroll to Play<\/div>\n\n <\/div>\n <\/section>\n\n <script>\n const video = document.getElementById(\"mavenHeroVideo\");\n const wrapper = document.getElementById(\"mavenHeroWrapper\");\n const heroCopy = document.getElementById(\"heroCopy\");\n const scrollHint = document.getElementById(\"scrollHint\");\n\n const mobileQuery = window.matchMedia(\"(max-width: 768px)\");\n\n let videoDuration = 0;\n let targetTime = 0;\n let currentTime = 0;\n let isReady = false;\n let activeMode = null;\n let rafId = null;\n\n function getVideoConfig() {\n const isMobile = mobileQuery.matches;\n\n return {\n mode: isMobile ? \"mobile\" : \"desktop\",\n src: isMobile ? video.dataset.mobileSrc : video.dataset.desktopSrc,\n poster: isMobile ? video.dataset.mobilePoster : video.dataset.desktopPoster\n };\n }\n\n function loadResponsiveVideo() {\n const config = getVideoConfig();\n\n if (activeMode === config.mode) return;\n\n activeMode = config.mode;\n isReady = false;\n videoDuration = 0;\n targetTime = 0;\n currentTime = 0;\n\n video.pause();\n video.removeAttribute(\"src\");\n video.setAttribute(\"poster\", config.poster);\n video.src = config.src;\n video.load();\n }\n\n function getScrollProgress() {\n const rect = wrapper.getBoundingClientRect();\n const scrollable = wrapper.offsetHeight - window.innerHeight;\n\n if (scrollable <= 0) return 0;\n\n return Math.min(Math.max(-rect.top \/ scrollable, 0), 1);\n }\n\n function updateVideoByScroll() {\n if (!isReady || !videoDuration) {\n rafId = requestAnimationFrame(updateVideoByScroll);\n return;\n }\n\n const progress = getScrollProgress();\n\n targetTime = progress * videoDuration;\n\n currentTime += (targetTime - currentTime) * 0.18;\n\n if (Math.abs(video.currentTime - currentTime) > 0.09) {\n try {\n video.currentTime = currentTime;\n } catch (error) {}\n }\n\n if (progress > 0.68) {\n heroCopy.classList.add(\"show\");\n scrollHint.style.opacity = \"0\";\n } else {\n heroCopy.classList.remove(\"show\");\n scrollHint.style.opacity = \"1\";\n }\n\n rafId = requestAnimationFrame(updateVideoByScroll);\n }\n\n video.addEventListener(\"loadedmetadata\", () => {\n videoDuration = video.duration || 0;\n isReady = true;\n\n const progress = getScrollProgress();\n currentTime = progress * videoDuration;\n targetTime = currentTime;\n\n try {\n video.currentTime = Math.max(0.01, currentTime);\n } catch (error) {}\n });\n\n function unlockVideoForMobile() {\n video.play()\n .then(() => {\n video.pause();\n try {\n video.currentTime = 0.01;\n } catch (error) {}\n })\n .catch(() => {});\n\n window.removeEventListener(\"touchstart\", unlockVideoForMobile);\n window.removeEventListener(\"click\", unlockVideoForMobile);\n }\n\n window.addEventListener(\"touchstart\", unlockVideoForMobile, { once: true });\n window.addEventListener(\"click\", unlockVideoForMobile, { once: true });\n\n mobileQuery.addEventListener(\"change\", () => {\n loadResponsiveVideo();\n });\n\n window.addEventListener(\"resize\", () => {\n loadResponsiveVideo();\n });\n\n window.addEventListener(\"load\", () => {\n loadResponsiveVideo();\n\n if (!rafId) {\n updateVideoByScroll();\n }\n });\n\n loadResponsiveVideo();\n updateVideoByScroll();\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4097f33 e-con-full e-flex e-con e-parent\" data-id=\"4097f33\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-14ca05c elementor-widget elementor-widget-html\" data-id=\"14ca05c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"maven-heart-section\" id=\"mavenHeartSection\">\r\n <div class=\"mh-bg-orb mh-orb-1\"><\/div>\r\n <div class=\"mh-bg-orb mh-orb-2\"><\/div>\r\n <div class=\"mh-bg-orb mh-orb-3\"><\/div>\r\n\r\n <div class=\"mh-container\">\r\n <div class=\"mh-left\">\r\n <span class=\"mh-kicker\" data-mh-reveal>A Story With a Big Message<\/span>\r\n\r\n <h2 class=\"mh-title\" data-mh-reveal>\r\n The Heart Behind<br \/>\r\n Maven\u2019s Story\r\n <\/h2>\r\n\r\n <p class=\"mh-lead\" data-mh-reveal>\r\n Maven\u2019s journey is more than a playful meadow adventure. It is a gentle\r\n reminder for every child who has ever felt too small, too shy, too nervous,\r\n or too different.\r\n <\/p>\r\n\r\n <p class=\"mh-text\" data-mh-reveal>\r\n Through friendship, family love, school-day challenges, and brave little\r\n moments, Maven learns that courage does not always have to be loud.\r\n Sometimes courage is simply taking one tiny step forward.\r\n <\/p>\r\n\r\n <div class=\"mh-progress-wrap\" data-mh-reveal>\r\n <div class=\"mh-progress-label\">\r\n <span>Tiny Steps<\/span>\r\n <span>Big Courage<\/span>\r\n <\/div>\r\n <div class=\"mh-progress-track\">\r\n <div class=\"mh-progress-fill\" id=\"mhProgressFill\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"#mavenAdventures\" class=\"mh-button\" data-mh-reveal>\r\n Discover Maven\u2019s Message\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"mh-right\" id=\"mhVisualArea\">\r\n <div class=\"mh-visual-card\">\r\n <div class=\"mh-soft-glow\"><\/div>\r\n\r\n <div class=\"mh-maven-wrap\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/Maven-1.png\"\r\n alt=\"Maven the Mouse\"\r\n class=\"mh-maven-img\"\r\n \/>\r\n <\/div>\r\n\r\n <div class=\"mh-mini-card mh-card-1\">\r\n <h3>Courage<\/h3>\r\n <p>Trying again, even when the world feels big.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mh-mini-card mh-card-2\">\r\n <h3>Friendship<\/h3>\r\n <p>Letting others walk beside you when things feel hard.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mh-mini-card mh-card-3\">\r\n <h3>Confidence<\/h3>\r\n <p>Learning that your size does not decide your worth.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mh-mini-card mh-card-4\">\r\n <h3>Self-Belief<\/h3>\r\n <p>Discovering that you can shine in your own way.<\/p>\r\n <\/div>\r\n\r\n <span class=\"mh-spark mh-spark-1\"><\/span>\r\n <span class=\"mh-spark mh-spark-2\"><\/span>\r\n <span class=\"mh-spark mh-spark-3\"><\/span>\r\n <span class=\"mh-spark mh-spark-4\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800;900&family=Luckiest+Guy&display=swap\");\r\n\r\n .maven-heart-section {\r\n position: relative;\r\n overflow: hidden;\r\n padding: 80px 6% 85px;\r\n background:\r\n radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.9), transparent 18%),\r\n radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.65), transparent 20%),\r\n linear-gradient(180deg, #55c7f7 0%, #8ee5ff 42%, #fff8d6 100%);\r\n font-family: \"Fredoka\", Arial, sans-serif;\r\n }\r\n\r\n .mh-container {\r\n position: relative;\r\n z-index: 3;\r\n max-width: 1340px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 0.95fr 1.05fr;\r\n align-items: center;\r\n gap: 46px;\r\n }\r\n\r\n .mh-left {\r\n position: relative;\r\n z-index: 5;\r\n }\r\n\r\n .mh-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 16px;\r\n padding: 10px 20px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 13px;\r\n font-weight: 900;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mh-title {\r\n margin: 0 0 18px;\r\n font-family: \"Luckiest Guy\", \"Fredoka\", Arial, sans-serif;\r\n font-size: clamp(46px, 5.4vw, 82px);\r\n line-height: 0.92;\r\n color: #ffc928;\r\n letter-spacing: 1px;\r\n text-shadow:\r\n 4px 4px 0 #6b1dba,\r\n 8px 8px 0 rgba(107, 29, 186, 0.24);\r\n }\r\n\r\n .mh-lead {\r\n max-width: 690px;\r\n margin: 0 0 16px;\r\n font-size: clamp(18px, 1.55vw, 23px);\r\n line-height: 1.45;\r\n color: #4b207f;\r\n font-weight: 800;\r\n }\r\n\r\n .mh-text {\r\n max-width: 640px;\r\n margin: 0 0 24px;\r\n font-size: clamp(16px, 1.15vw, 18px);\r\n line-height: 1.65;\r\n color: #5b3a80;\r\n font-weight: 600;\r\n }\r\n\r\n .mh-progress-wrap {\r\n max-width: 560px;\r\n margin: 0 0 28px;\r\n }\r\n\r\n .mh-progress-label {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 10px;\r\n color: #6b1dba;\r\n font-size: 14px;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n }\r\n\r\n .mh-progress-track {\r\n position: relative;\r\n width: 100%;\r\n height: 14px;\r\n border-radius: 999px;\r\n background: rgba(107, 29, 186, 0.14);\r\n overflow: hidden;\r\n box-shadow: inset 0 2px 5px rgba(72, 31, 112, 0.16);\r\n }\r\n\r\n .mh-progress-fill {\r\n width: 0%;\r\n height: 100%;\r\n border-radius: inherit;\r\n background: linear-gradient(90deg, #ffc928, #f28b22, #ffc928);\r\n box-shadow: 0 0 22px rgba(255, 201, 40, 0.75);\r\n transition: width 0.1s linear;\r\n }\r\n\r\n .mh-button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 52px;\r\n padding: 0 28px;\r\n border-radius: 999px;\r\n background: #6b1dba;\r\n color: #ffffff !important;\r\n text-decoration: none !important;\r\n font-size: 15px;\r\n font-weight: 900;\r\n box-shadow: 0 8px 0 #4c0097;\r\n transition: transform 0.25s ease, box-shadow 0.25s ease !important;\r\n }\r\n\r\n .mh-button:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 12px 0 #4c0097;\r\n }\r\n\r\n .mh-right {\r\n position: relative;\r\n min-height: 560px;\r\n }\r\n\r\n .mh-visual-card {\r\n position: relative;\r\n width: 100%;\r\n min-height: 560px;\r\n border-radius: 42px;\r\n overflow: hidden;\r\n background:\r\n radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.98), transparent 30%),\r\n linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 248, 214, 0.88));\r\n border: 8px solid rgba(255, 255, 255, 0.9);\r\n box-shadow:\r\n 0 35px 80px rgba(65, 22, 117, 0.24),\r\n inset 0 0 0 2px rgba(255, 255, 255, 0.55);\r\n transform: perspective(1100px) rotateY(0deg) rotateX(0deg);\r\n transition: transform 0.18s ease-out;\r\n }\r\n\r\n .mh-visual-card::before {\r\n content: \"\";\r\n position: absolute;\r\n left: -12%;\r\n right: -12%;\r\n bottom: -12%;\r\n height: 34%;\r\n background:\r\n radial-gradient(circle at 12% 40%, #ff78b7 0 9px, transparent 10px),\r\n radial-gradient(circle at 24% 62%, #ffffff 0 7px, transparent 8px),\r\n radial-gradient(circle at 38% 45%, #ffc928 0 8px, transparent 9px),\r\n radial-gradient(circle at 56% 66%, #a96bff 0 8px, transparent 9px),\r\n radial-gradient(circle at 73% 42%, #ff78b7 0 9px, transparent 10px),\r\n radial-gradient(circle at 88% 61%, #ffffff 0 7px, transparent 8px),\r\n linear-gradient(180deg, #94df5c, #4fae45);\r\n border-radius: 50% 50% 0 0;\r\n opacity: 0.86;\r\n }\r\n\r\n .mh-soft-glow {\r\n position: absolute;\r\n left: 50%;\r\n top: 45%;\r\n width: 350px;\r\n height: 350px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255, 201, 40, 0.45), transparent 64%);\r\n transform: translate(-50%, -50%);\r\n animation: mhGlowPulse 3.8s ease-in-out infinite;\r\n }\r\n\r\n @keyframes mhGlowPulse {\r\n 0%, 100% {\r\n transform: translate(-50%, -50%) scale(0.95);\r\n opacity: 0.6;\r\n }\r\n\r\n 50% {\r\n transform: translate(-50%, -50%) scale(1.08);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .mh-maven-wrap {\r\n position: absolute;\r\n z-index: 5;\r\n left: 50%;\r\n bottom: 34px;\r\n width: min(74%, 500px);\r\n transform: translateX(-50%);\r\n filter: drop-shadow(0 28px 28px rgba(65, 22, 117, 0.25));\r\n z-index: 9;\r\n }\r\n\r\n .mh-maven-img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n transform-origin: center bottom;\r\n animation: mhMavenFloat 3.6s ease-in-out infinite;\r\n }\r\n\r\n @keyframes mhMavenFloat {\r\n 0%, 100% {\r\n transform: translateY(0) rotate(-1.5deg);\r\n }\r\n\r\n 50% {\r\n transform: translateY(-14px) rotate(1.5deg);\r\n }\r\n }\r\n\r\n .mh-mini-card {\r\n position: absolute;\r\n z-index: 7;\r\n width: 205px;\r\n padding: 15px 16px 16px;\r\n border-radius: 20px;\r\n background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 248, 214, 0.97));\r\n border: 4px solid #ffc928;\r\n box-shadow: 0 20px 44px rgba(65, 22, 117, 0.18);\r\n transition: transform 0.28s ease, box-shadow 0.28s ease;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .mh-mini-card:hover {\r\n transform: translateY(-10px) rotate(0deg) scale(1.03) !important;\r\n box-shadow: 0 28px 58px rgba(65, 22, 117, 0.24);\r\n }\r\n\r\n .mh-mini-card h3 {\r\n margin: 0 0 5px;\r\n color: #6b1dba;\r\n font-size: 19px;\r\n line-height: 1;\r\n font-weight: 900;\r\n }\r\n\r\n .mh-mini-card p {\r\n margin: 0;\r\n color: #5b3a80;\r\n font-size: 13px;\r\n line-height: 1.32;\r\n font-weight: 700;\r\n }\r\n\r\n .mh-card-1 {\r\n left: 5%;\r\n bottom: 13%;\r\n transform: rotate(-3deg);\r\n }\r\n\r\n .mh-card-2 {\r\n right: 4%;\r\n bottom: 14%;\r\n transform: rotate(3deg);\r\n }\r\n\r\n .mh-card-3 {\r\n left: 8%;\r\n top: 22%;\r\n transform: rotate(2deg);\r\n }\r\n\r\n .mh-card-4 {\r\n right: 7%;\r\n top: 30%;\r\n transform: rotate(-2deg);\r\n }\r\n\r\n .mh-spark {\r\n position: absolute;\r\n z-index: 6;\r\n width: 14px;\r\n height: 14px;\r\n background: #ffc928;\r\n clip-path: polygon(50% 0%, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0% 50%, 37% 36%);\r\n filter: drop-shadow(0 0 10px rgba(255, 201, 40, 0.9));\r\n animation: mhSparkle 2.8s ease-in-out infinite;\r\n }\r\n\r\n .mh-spark-1 {\r\n left: 28%;\r\n top: 18%;\r\n }\r\n\r\n .mh-spark-2 {\r\n right: 25%;\r\n top: 15%;\r\n animation-delay: -0.8s;\r\n }\r\n\r\n .mh-spark-3 {\r\n left: 22%;\r\n bottom: 36%;\r\n animation-delay: -1.6s;\r\n }\r\n\r\n .mh-spark-4 {\r\n right: 20%;\r\n bottom: 32%;\r\n animation-delay: -2.2s;\r\n }\r\n\r\n @keyframes mhSparkle {\r\n 0%, 100% {\r\n transform: scale(0.65) rotate(0deg);\r\n opacity: 0.45;\r\n }\r\n\r\n 50% {\r\n transform: scale(1.25) rotate(30deg);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .mh-bg-orb {\r\n position: absolute;\r\n z-index: 1;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n opacity: 0.5;\r\n filter: blur(1px);\r\n animation: mhOrbFloat 8s ease-in-out infinite;\r\n }\r\n\r\n .mh-orb-1 {\r\n width: 145px;\r\n height: 145px;\r\n left: 6%;\r\n top: 13%;\r\n background: rgba(255, 201, 40, 0.35);\r\n }\r\n\r\n .mh-orb-2 {\r\n width: 100px;\r\n height: 100px;\r\n right: 10%;\r\n top: 12%;\r\n background: rgba(255, 255, 255, 0.65);\r\n animation-delay: -2s;\r\n }\r\n\r\n .mh-orb-3 {\r\n width: 190px;\r\n height: 190px;\r\n right: 3%;\r\n bottom: 8%;\r\n background: rgba(107, 29, 186, 0.13);\r\n animation-delay: -4s;\r\n }\r\n\r\n @keyframes mhOrbFloat {\r\n 0%, 100% {\r\n transform: translateY(0);\r\n }\r\n\r\n 50% {\r\n transform: translateY(-24px);\r\n }\r\n }\r\n\r\n [data-mh-reveal] {\r\n opacity: 0;\r\n transform: translateY(34px);\r\n transition:\r\n opacity 0.8s ease,\r\n transform 0.8s cubic-bezier(.2, .8, .2, 1);\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal] {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal]:nth-child(1) {\r\n transition-delay: 0.05s;\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal]:nth-child(2) {\r\n transition-delay: 0.12s;\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal]:nth-child(3) {\r\n transition-delay: 0.2s;\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal]:nth-child(4) {\r\n transition-delay: 0.28s;\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal]:nth-child(5) {\r\n transition-delay: 0.36s;\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal]:nth-child(6) {\r\n transition-delay: 0.44s;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .maven-heart-section {\r\n padding: 70px 22px 80px;\r\n }\r\n\r\n .mh-container {\r\n grid-template-columns: 1fr;\r\n gap: 38px;\r\n }\r\n\r\n .mh-left {\r\n text-align: center;\r\n }\r\n\r\n .mh-lead,\r\n .mh-text,\r\n .mh-progress-wrap {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .mh-right {\r\n min-height: 540px;\r\n }\r\n\r\n .mh-visual-card {\r\n min-height: 540px;\r\n }\r\n\r\n .mh-maven-wrap {\r\n width: min(68%, 420px);\r\n bottom: 28px;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .maven-heart-section {\r\n padding: 60px 18px 70px;\r\n }\r\n\r\n .mh-title {\r\n font-size: clamp(38px, 11vw, 58px);\r\n }\r\n\r\n .mh-lead {\r\n font-size: 17px;\r\n }\r\n\r\n .mh-text {\r\n font-size: 15px;\r\n }\r\n\r\n .mh-right {\r\n min-height: 620px;\r\n }\r\n\r\n .mh-visual-card {\r\n min-height: 620px;\r\n border-radius: 28px;\r\n border-width: 6px;\r\n }\r\n\r\n .mh-maven-wrap {\r\n width: min(82%, 350px);\r\n bottom: 120px;\r\n }\r\n\r\n .mh-mini-card {\r\n width: calc(50% - 18px);\r\n padding: 13px;\r\n }\r\n\r\n .mh-mini-card h3 {\r\n font-size: 16px;\r\n }\r\n\r\n .mh-mini-card p {\r\n font-size: 12px;\r\n }\r\n\r\n .mh-card-1 {\r\n left: 12px;\r\n bottom: 18px;\r\n transform: rotate(-2deg);\r\n }\r\n\r\n .mh-card-2 {\r\n right: 12px;\r\n bottom: 18px;\r\n transform: rotate(2deg);\r\n }\r\n\r\n .mh-card-3 {\r\n left: 12px;\r\n top: 18px;\r\n transform: rotate(2deg);\r\n }\r\n\r\n .mh-card-4 {\r\n right: 12px;\r\n top: 18px;\r\n transform: rotate(-2deg);\r\n }\r\n\r\n .mh-soft-glow {\r\n width: 280px;\r\n height: 280px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .maven-heart-section {\r\n padding: 54px 16px 64px;\r\n }\r\n\r\n .mh-title {\r\n font-size: clamp(34px, 12vw, 50px);\r\n }\r\n\r\n .mh-kicker {\r\n font-size: 11px;\r\n padding: 9px 16px;\r\n }\r\n\r\n .mh-button {\r\n min-height: 50px;\r\n padding: 0 22px;\r\n font-size: 14px;\r\n }\r\n\r\n .mh-right {\r\n min-height: 680px;\r\n }\r\n\r\n .mh-visual-card {\r\n min-height: 680px;\r\n }\r\n\r\n .mh-maven-wrap {\r\n width: min(92%, 330px);\r\n bottom: 150px;\r\n }\r\n\r\n .mh-mini-card {\r\n width: calc(50% - 14px);\r\n border-width: 3px;\r\n }\r\n\r\n .mh-mini-card p {\r\n font-size: 11.5px;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .mh-maven-img,\r\n .mh-soft-glow,\r\n .mh-spark,\r\n .mh-bg-orb {\r\n animation: none !important;\r\n }\r\n\r\n [data-mh-reveal] {\r\n transition: none;\r\n opacity: 1;\r\n transform: none;\r\n }\r\n\r\n .mh-visual-card {\r\n transition: none;\r\n }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n document.addEventListener(\"DOMContentLoaded\", function () {\r\n const section = document.getElementById(\"mavenHeartSection\");\r\n const progressFill = document.getElementById(\"mhProgressFill\");\r\n const visualArea = document.getElementById(\"mhVisualArea\");\r\n const visualCard = visualArea ? visualArea.querySelector(\".mh-visual-card\") : null;\r\n\r\n if (!section) return;\r\n\r\n const observer = new IntersectionObserver(\r\n function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n section.classList.add(\"mh-in-view\");\r\n }\r\n });\r\n },\r\n { threshold: 0.25 }\r\n );\r\n\r\n observer.observe(section);\r\n\r\n function clamp(value, min, max) {\r\n return Math.min(Math.max(value, min), max);\r\n }\r\n\r\n function updateProgress() {\r\n if (!progressFill) return;\r\n\r\n const rect = section.getBoundingClientRect();\r\n const total = rect.height + window.innerHeight;\r\n const current = window.innerHeight - rect.top;\r\n const progress = clamp(current \/ total, 0, 1);\r\n\r\n progressFill.style.width = Math.round(progress * 100) + \"%\";\r\n }\r\n\r\n window.addEventListener(\"scroll\", updateProgress, { passive: true });\r\n window.addEventListener(\"resize\", updateProgress);\r\n updateProgress();\r\n\r\n if (visualArea && visualCard) {\r\n visualArea.addEventListener(\"mousemove\", function (event) {\r\n const rect = visualArea.getBoundingClientRect();\r\n const x = (event.clientX - rect.left) \/ rect.width - 0.5;\r\n const y = (event.clientY - rect.top) \/ rect.height - 0.5;\r\n\r\n visualCard.style.transform =\r\n \"perspective(1100px) rotateY(\" +\r\n x * 4 +\r\n \"deg) rotateX(\" +\r\n y * -4 +\r\n \"deg)\";\r\n });\r\n\r\n visualArea.addEventListener(\"mouseleave\", function () {\r\n visualCard.style.transform =\r\n \"perspective(1100px) rotateY(0deg) rotateX(0deg)\";\r\n });\r\n }\r\n });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7df4dc1 e-con-full e-flex e-con e-parent\" data-id=\"7df4dc1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cf0670a elementor-widget elementor-widget-html\" data-id=\"cf0670a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"maven-adventures-section\" id=\"mavenAdventures\">\r\n <div class=\"ma-container\">\r\n <div class=\"ma-header\">\r\n <span class=\"ma-kicker\">Explore Maven\u2019s World<\/span>\r\n\r\n <h2>Pick Maven\u2019s Brave Adventure<\/h2>\r\n\r\n <p>\r\n Every adventure teaches Maven something new about courage, friendship,\r\n and believing in herself.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"ma-carousel-shell\">\r\n\r\n <div class=\"ma-3d-stage\">\r\n <div class=\"ma-stage-shadow\"><\/div>\r\n\r\n <article\r\n class=\"ma-card\"\r\n style=\"--card-img: url('https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-bike-monica.png');\"\r\n data-title=\"Bike Ride Adventure\"\r\n data-subtitle=\"Trying again can turn fear into freedom.\"\r\n data-text=\"Maven learns that falling once does not mean giving up. With patience, courage, and a little encouragement, she discovers the joy of moving forward on her own.\"\r\n data-lesson=\"Lesson: Keep trying, one tiny step at a time.\"\r\n data-bg=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-bike-monica.png\"\r\n >\r\n <div class=\"ma-card-media\"><\/div>\r\n <div class=\"ma-card-shine\"><\/div>\r\n\r\n <div class=\"ma-card-content\">\r\n <span class=\"ma-card-label\">Adventure 01<\/span>\r\n <h3>Bike Ride Adventure<\/h3>\r\n <p>Maven learns that trying again can turn fear into freedom.<\/p>\r\n <button class=\"ma-card-btn\" type=\"button\">View Adventure<\/button>\r\n <\/div>\r\n <\/article>\r\n\r\n <article\r\n class=\"ma-card\"\r\n style=\"--card-img: url('https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-dance.png');\"\r\n data-title=\"The School Dance\"\r\n data-subtitle=\"Friendship helps fear fade away.\"\r\n data-text=\"Maven feels nervous about the dance floor, but with a trusted friend by her side, she finds a way to feel safe, included, and joyful.\"\r\n data-lesson=\"Lesson: You do not have to face big moments alone.\"\r\n data-bg=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-dance.png\"\r\n >\r\n <div class=\"ma-card-media\"><\/div>\r\n <div class=\"ma-card-shine\"><\/div>\r\n\r\n <div class=\"ma-card-content\">\r\n <span class=\"ma-card-label\">Adventure 02<\/span>\r\n <h3>The School Dance<\/h3>\r\n <p>Maven discovers that friendship can help fear fade away.<\/p>\r\n <button class=\"ma-card-btn\" type=\"button\">View Adventure<\/button>\r\n <\/div>\r\n <\/article>\r\n\r\n <article\r\n class=\"ma-card\"\r\n style=\"--card-img: url('https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-swim.png');\"\r\n data-title=\"Swimming Lesson\"\r\n data-subtitle=\"Maven learns she can do hard things.\"\r\n data-text=\"The water feels big and scary at first, but Maven takes the plunge with help from a kind friend and learns that courage can grow in the middle of fear.\"\r\n data-lesson=\"Lesson: Brave does not mean never being scared.\"\r\n data-bg=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-swim.png\"\r\n >\r\n <div class=\"ma-card-media\"><\/div>\r\n <div class=\"ma-card-shine\"><\/div>\r\n\r\n <div class=\"ma-card-content\">\r\n <span class=\"ma-card-label\">Adventure 03<\/span>\r\n <h3>Swimming Lesson<\/h3>\r\n <p>Maven faces the water and learns she can do hard things.<\/p>\r\n <button class=\"ma-card-btn\" type=\"button\">View Adventure<\/button>\r\n <\/div>\r\n <\/article>\r\n\r\n <article\r\n class=\"ma-card\"\r\n style=\"--card-img: url('https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-dojo.png');\"\r\n data-title=\"Golden Cheddar Dojo\"\r\n data-subtitle=\"Strength comes from focus and heart.\"\r\n data-text=\"At the dojo, Maven learns that strength is not only about size. With focus, effort, and courage, she begins to feel stronger in her own way.\"\r\n data-lesson=\"Lesson: Small does not mean weak.\"\r\n data-bg=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-dojo.png\"\r\n >\r\n <div class=\"ma-card-media\"><\/div>\r\n <div class=\"ma-card-shine\"><\/div>\r\n\r\n <div class=\"ma-card-content\">\r\n <span class=\"ma-card-label\">Adventure 04<\/span>\r\n <h3>Golden Cheddar Dojo<\/h3>\r\n <p>Maven learns that strength comes from focus and heart.<\/p>\r\n <button class=\"ma-card-btn\" type=\"button\">View Adventure<\/button>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"ma-dots\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"ma-modal\" aria-hidden=\"true\">\r\n <div class=\"ma-modal-backdrop\"><\/div>\r\n\r\n <div class=\"ma-modal-panel\">\r\n <button class=\"ma-modal-close\" type=\"button\">\u00d7<\/button>\r\n\r\n <div class=\"ma-modal-image\"><\/div>\r\n\r\n <div class=\"ma-modal-copy\">\r\n <span class=\"ma-modal-kicker\">Maven\u2019s Adventure<\/span>\r\n <h3 class=\"ma-modal-title\">Bike Ride Adventure<\/h3>\r\n <h4 class=\"ma-modal-subtitle\">Trying again can turn fear into freedom.<\/h4>\r\n <p class=\"ma-modal-text\"><\/p>\r\n <div class=\"ma-modal-lesson\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800;900&family=Luckiest+Guy&display=swap\");\r\n\r\n .maven-adventures-section {\r\n position: relative;\r\n padding: 84px 0 94px;\r\n background: #fff8d6;\r\n font-family: \"Fredoka\", Arial, sans-serif;\r\n overflow: hidden;\r\n }\r\n\r\n .ma-container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 1420px;\r\n margin: 0 auto;\r\n padding: 0 6%;\r\n }\r\n\r\n .ma-header {\r\n text-align: center;\r\n max-width: 880px;\r\n margin: 0 auto 30px;\r\n }\r\n\r\n .ma-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 16px;\r\n padding: 10px 22px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 13px;\r\n font-weight: 900;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .ma-header h2 {\r\n margin: 0 0 18px;\r\n font-family: \"Luckiest Guy\", \"Fredoka\", Arial, sans-serif;\r\n font-size: clamp(42px, 5.4vw, 82px);\r\n line-height: 0.95;\r\n color: #ffc928;\r\n letter-spacing: 1px;\r\n text-shadow:\r\n 4px 4px 0 #6b1dba,\r\n 8px 8px 0 rgba(107, 29, 186, 0.22);\r\n }\r\n\r\n .ma-header p {\r\n margin: 0 auto;\r\n max-width: 740px;\r\n font-size: clamp(17px, 1.45vw, 21px);\r\n line-height: 1.55;\r\n color: #55218f;\r\n font-weight: 800;\r\n }\r\n\r\n .ma-carousel-shell {\r\n position: relative;\r\n width: 100%;\r\n min-height: 560px;\r\n perspective: 1500px;\r\n overflow: visible;\r\n }\r\n\r\n .ma-3d-stage {\r\n position: relative;\r\n width: 100%;\r\n height: 540px;\r\n overflow: visible;\r\n transform-style: preserve-3d;\r\n user-select: none;\r\n touch-action: pan-y;\r\n }\r\n\r\n .ma-stage-shadow {\r\n position: absolute;\r\n left: 50%;\r\n bottom: 28px;\r\n width: min(760px, 80vw);\r\n height: 86px;\r\n border-radius: 50%;\r\n transform: translateX(-50%) rotateX(65deg);\r\n filter: blur(2px);\r\n pointer-events: none;\r\n }\r\n\r\n .ma-card {\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n width: clamp(350px, 30vw, 580px);\r\n height: 510px;\r\n border-radius: 34px;\r\n overflow: hidden;\r\n background: #6b1dba;\r\n border: 6px solid rgba(255, 255, 255, 0.96);\r\n box-shadow:\r\n 0 24px 55px rgba(65, 22, 117, 0.22),\r\n 0 8px 0 rgba(107, 29, 186, 0.16);\r\n cursor: pointer;\r\n isolation: isolate;\r\n transform: translate(-50%, -50%) scale(0.65);\r\n opacity: 0;\r\n pointer-events: none;\r\n transition:\r\n transform 0.72s cubic-bezier(.18, .9, .22, 1),\r\n opacity 0.45s ease,\r\n filter 0.45s ease,\r\n box-shadow 0.35s ease,\r\n border-color 0.35s ease;\r\n will-change: transform, opacity, filter;\r\n }\r\n\r\n .ma-card.is-active {\r\n border-color: #ffc928;\r\n box-shadow:\r\n 0 38px 80px rgba(65, 22, 117, 0.32),\r\n 0 11px 0 rgba(107, 29, 186, 0.24);\r\n }\r\n\r\n .ma-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: 3;\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n rgba(20, 4, 48, 0.02) 0%,\r\n rgba(20, 4, 48, 0.15) 40%,\r\n rgba(20, 4, 48, 0.86) 100%\r\n );\r\n pointer-events: none;\r\n }\r\n\r\n .ma-card::after {\r\n content: \"\";\r\n position: absolute;\r\n left: -20%;\r\n right: -20%;\r\n bottom: -18%;\r\n z-index: 4;\r\n height: 38%;\r\n border-radius: 50% 50% 0 0;\r\n transform: translateY(12px);\r\n transition: transform 0.45s ease;\r\n pointer-events: none;\r\n }\r\n\r\n .ma-card.is-active:hover::after {\r\n transform: translateY(0);\r\n }\r\n\r\n .ma-card-media {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 1;\r\n background:\r\n linear-gradient(135deg, rgba(85, 199, 247, 0.45), rgba(255, 248, 214, 0.16)),\r\n var(--card-img);\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.04);\r\n transition: transform 0.7s ease, filter 0.7s ease;\r\n }\r\n\r\n .ma-card.is-active:hover .ma-card-media {\r\n transform: scale(1.12);\r\n filter: saturate(1.12) brightness(1.04);\r\n }\r\n\r\n .ma-card-shine {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 2;\r\n background: linear-gradient(\r\n 115deg,\r\n transparent 0%,\r\n transparent 36%,\r\n rgba(255, 255, 255, 0.35) 48%,\r\n transparent 62%,\r\n transparent 100%\r\n );\r\n transform: translateX(-125%);\r\n transition: transform 0.85s ease;\r\n pointer-events: none;\r\n }\r\n\r\n .ma-card.is-active:hover .ma-card-shine {\r\n transform: translateX(125%);\r\n }\r\n\r\n .ma-card-content {\r\n position: absolute;\r\n left: 24px;\r\n right: 24px;\r\n bottom: 22px;\r\n z-index: 6;\r\n color: #ffffff;\r\n transform: translateY(30px);\r\n transition: transform 0.35s ease;\r\n }\r\n\r\n .ma-card.is-active .ma-card-content {\r\n transform: translateY(0);\r\n }\r\n\r\n .ma-card-label {\r\n display: inline-flex;\r\n margin-bottom: 12px;\r\n padding: 8px 14px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 12px;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n box-shadow: 0 5px 0 #6b1dba;\r\n }\r\n\r\n .ma-card h3 {\r\n margin: 0 0 10px;\r\n font-size: 31px;\r\n line-height: 0.98;\r\n color: #ffc928;\r\n font-weight: 900;\r\n text-shadow:\r\n 2px 2px 0 #6b1dba,\r\n 4px 4px 0 rgba(107, 29, 186, 0.28);\r\n }\r\n\r\n .ma-card p {\r\n margin: 0 0 17px;\r\n max-width: 310px;\r\n font-size: 15.5px;\r\n line-height: 1.35;\r\n font-weight: 800;\r\n color: #fff8d6;\r\n text-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);\r\n }\r\n\r\n .ma-card-btn {\r\n border: 0;\r\n cursor: pointer;\r\n min-height: 42px;\r\n padding: 0 18px;\r\n border-radius: 999px;\r\n background: #ffffff !important;\r\n color: #6b1dba !important;\r\n font-family: inherit;\r\n font-size: 14px;\r\n font-weight: 900;\r\n box-shadow: 0 5px 0 #FCC928;\r\n opacity: 0;\r\n transform: translateY(12px);\r\n transition:\r\n opacity 0.3s ease,\r\n transform 0.3s ease,\r\n box-shadow 0.25s ease;\r\n }\r\n\r\n .ma-card.is-active .ma-card-btn {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .ma-card-btn:hover {\r\n box-shadow: 0 8px 0 #FCC928;\r\n transform: translateY(-3px);\r\n }\r\n\r\n .ma-nav {\r\n position: absolute;\r\n top: 50%;\r\n z-index: 80;\r\n width: 58px;\r\n height: 58px;\r\n border: 4px solid #ffffff;\r\n border-radius: 50%;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n cursor: pointer;\r\n font-size: 44px;\r\n line-height: 0;\r\n font-weight: 900;\r\n box-shadow: 0 7px 0 #6b1dba, 0 18px 28px rgba(65, 22, 117, 0.2);\r\n transform: translateY(-50%);\r\n transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n }\r\n\r\n .ma-nav:hover {\r\n transform: translateY(-50%) scale(1.07);\r\n box-shadow: 0 10px 0 #6b1dba, 0 24px 35px rgba(65, 22, 117, 0.25);\r\n }\r\n\r\n .ma-prev {\r\n left: 6px;\r\n }\r\n\r\n .ma-next {\r\n right: 6px;\r\n }\r\n\r\n .ma-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-top: -4px;\r\n }\r\n\r\n .ma-dot {\r\n width: 13px;\r\n height: 13px;\r\n border: 0;\r\n border-radius: 50%;\r\n background: rgba(107, 29, 186, 0.26) !important;\r\n cursor: pointer;\r\n transition: width 0.25s ease, background 0.25s ease;\r\n }\r\n\r\n .ma-dot.active {\r\n width: 13px;\r\n height: 13px;\r\n border: 0;\r\n border-radius: 50%;\r\n background: #ffc928 !important;\r\n box-shadow: 0 4px 0 #6b1dba;\r\n }\r\n\r\n .ma-modal {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 99999;\r\n display: grid;\r\n place-items: center;\r\n padding: 24px;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.25s ease;\r\n }\r\n\r\n .ma-modal.show {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .ma-modal-backdrop {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(33, 8, 74, 0.62);\r\n backdrop-filter: blur(8px);\r\n }\r\n\r\n .ma-modal-panel {\r\n position: relative;\r\n z-index: 2;\r\n width: min(980px, 100%);\r\n min-height: 560px;\r\n display: grid;\r\n grid-template-columns: 1fr 0.85fr;\r\n overflow: hidden;\r\n border-radius: 36px;\r\n background: #fff8d6;\r\n border: 7px solid #ffffff;\r\n box-shadow: 0 45px 110px rgba(20, 4, 48, 0.42);\r\n transform: translateY(28px) scale(0.94);\r\n transition: transform 0.32s cubic-bezier(.18, 1.35, .45, 1);\r\n }\r\n\r\n .ma-modal.show .ma-modal-panel {\r\n transform: translateY(0) scale(1);\r\n }\r\n\r\n .ma-modal-image {\r\n min-height: 560px;\r\n background:\r\n linear-gradient(180deg, rgba(85, 199, 247, 0.12), rgba(33, 8, 74, 0.12)),\r\n var(--modal-img);\r\n background-size: cover;\r\n background-position: center;\r\n }\r\n\r\n .ma-modal-copy {\r\n padding: 54px 44px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n background: #fff8d6;\r\n }\r\n\r\n .ma-modal-kicker {\r\n display: inline-flex;\r\n width: fit-content;\r\n margin-bottom: 18px;\r\n padding: 9px 16px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 12px;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n box-shadow: 0 5px 0 #6b1dba;\r\n }\r\n\r\n .ma-modal-copy h3 {\r\n margin: 0 0 10px;\r\n font-size: clamp(34px, 4vw, 58px);\r\n line-height: 0.95;\r\n color: #ffc928;\r\n font-weight: 900;\r\n text-shadow:\r\n 3px 3px 0 #6b1dba,\r\n 5px 5px 0 rgba(107, 29, 186, 0.25);\r\n }\r\n\r\n .ma-modal-copy h4 {\r\n margin: 0 0 20px;\r\n font-size: 22px;\r\n line-height: 1.25;\r\n color: #6b1dba;\r\n font-weight: 900;\r\n }\r\n\r\n .ma-modal-copy p {\r\n margin: 0 0 22px;\r\n font-size: 17px;\r\n line-height: 1.6;\r\n color: #5b3a80;\r\n font-weight: 700;\r\n }\r\n\r\n .ma-modal-lesson {\r\n padding: 16px 18px;\r\n border-radius: 20px;\r\n background: #ffffff;\r\n color: #6b1dba;\r\n font-size: 16px;\r\n line-height: 1.35;\r\n font-weight: 900;\r\n border: 3px solid #ffc928;\r\n }\r\n\r\n .ma-modal-close {\r\n position: absolute;\r\n top: 18px;\r\n right: 18px;\r\n z-index: 5;\r\n width: 42px;\r\n height: 42px;\r\n border: 0;\r\n border-radius: 50%;\r\n background: #e7332f;\r\n color: #ffffff;\r\n cursor: pointer;\r\n font-size: 28px;\r\n line-height: 1;\r\n font-weight: 900;\r\n box-shadow: 0 5px 0 rgba(107, 29, 186, 0.45);\r\n }\r\n\r\n @media (max-width: 1180px) {\r\n .ma-carousel-shell {\r\n min-height: 530px;\r\n }\r\n\r\n .ma-3d-stage {\r\n height: 515px;\r\n }\r\n\r\n .ma-card {\r\n width: clamp(285px, 33vw, 340px);\r\n height: 455px;\r\n }\r\n }\r\n\r\n @media (max-width: 820px) {\r\n .maven-adventures-section {\r\n padding: 68px 0 78px;\r\n }\r\n\r\n .ma-container {\r\n padding: 0 18px;\r\n }\r\n\r\n .ma-header {\r\n margin-bottom: 24px;\r\n }\r\n\r\n .ma-carousel-shell {\r\n min-height: 500px;\r\n }\r\n\r\n .ma-3d-stage {\r\n height: 485px;\r\n }\r\n\r\n .ma-card {\r\n width: min(315px, 78vw);\r\n height: 430px;\r\n border-radius: 28px;\r\n }\r\n\r\n .ma-card h3 {\r\n font-size: 27px;\r\n }\r\n\r\n .ma-card p {\r\n font-size: 14.5px;\r\n }\r\n\r\n .ma-nav {\r\n width: 48px;\r\n height: 48px;\r\n font-size: 36px;\r\n }\r\n\r\n .ma-prev {\r\n left: -4px;\r\n }\r\n\r\n .ma-next {\r\n right: -4px;\r\n }\r\n\r\n .ma-stage-shadow {\r\n width: 74vw;\r\n height: 70px;\r\n bottom: 34px;\r\n }\r\n\r\n .ma-modal-panel {\r\n grid-template-columns: 1fr;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n }\r\n\r\n .ma-modal-image {\r\n min-height: 310px;\r\n }\r\n\r\n .ma-modal-copy {\r\n padding: 34px 26px 30px;\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .maven-adventures-section {\r\n padding: 60px 0 70px;\r\n }\r\n\r\n .ma-kicker {\r\n font-size: 11px;\r\n padding: 9px 16px;\r\n }\r\n\r\n .ma-header h2 {\r\n font-size: clamp(38px, 12vw, 56px);\r\n }\r\n\r\n .ma-header p {\r\n font-size: 16px;\r\n }\r\n\r\n .ma-carousel-shell {\r\n min-height: 470px;\r\n }\r\n\r\n .ma-3d-stage {\r\n height: 455px;\r\n }\r\n\r\n .ma-card {\r\n width: 80vw;\r\n height: 400px;\r\n border-width: 5px;\r\n }\r\n\r\n .ma-card-content {\r\n left: 18px;\r\n right: 18px;\r\n bottom: 18px;\r\n }\r\n\r\n .ma-card h3 {\r\n font-size: 24px;\r\n }\r\n\r\n .ma-card p {\r\n font-size: 13.5px;\r\n }\r\n\r\n .ma-nav {\r\n width: 42px;\r\n height: 42px;\r\n font-size: 32px;\r\n }\r\n\r\n .ma-prev {\r\n left: -10px;\r\n }\r\n\r\n .ma-next {\r\n right: -10px;\r\n }\r\n\r\n .ma-modal {\r\n padding: 14px;\r\n }\r\n\r\n .ma-modal-panel {\r\n border-radius: 26px;\r\n border-width: 5px;\r\n }\r\n\r\n .ma-modal-copy h4 {\r\n font-size: 18px;\r\n }\r\n\r\n .ma-modal-copy p {\r\n font-size: 15px;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .ma-card,\r\n .ma-card-media,\r\n .ma-card-shine,\r\n .ma-card-content,\r\n .ma-modal,\r\n .ma-modal-panel {\r\n transition: none !important;\r\n animation: none !important;\r\n }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n (function () {\r\n function initMavenAdventureCarousels() {\r\n const sections = document.querySelectorAll(\".maven-adventures-section:not([data-ma-ready='true'])\");\r\n\r\n sections.forEach(function (section) {\r\n section.setAttribute(\"data-ma-ready\", \"true\");\r\n\r\n const stage = section.querySelector(\".ma-3d-stage\");\r\n const cards = Array.from(section.querySelectorAll(\".ma-card\"));\r\n const prevBtn = section.querySelector(\".ma-prev\");\r\n const nextBtn = section.querySelector(\".ma-next\");\r\n const dotsWrap = section.querySelector(\".ma-dots\");\r\n\r\n const modal = section.querySelector(\".ma-modal\");\r\n const modalBackdrop = section.querySelector(\".ma-modal-backdrop\");\r\n const modalClose = section.querySelector(\".ma-modal-close\");\r\n const modalImage = section.querySelector(\".ma-modal-image\");\r\n const modalTitle = section.querySelector(\".ma-modal-title\");\r\n const modalSubtitle = section.querySelector(\".ma-modal-subtitle\");\r\n const modalText = section.querySelector(\".ma-modal-text\");\r\n const modalLesson = section.querySelector(\".ma-modal-lesson\");\r\n\r\n if (!stage || !cards.length) return;\r\n\r\n let activeIndex = 0;\r\n let isDragging = false;\r\n let pointerStartX = 0;\r\n let autoplayTimer = null;\r\n const autoplayDelay = 4500;\r\n\r\n function mod(number, length) {\r\n return ((number % length) + length) % length;\r\n }\r\n\r\n function getCircularDiff(index, active, total) {\r\n let diff = index - active;\r\n\r\n if (diff > total \/ 2) {\r\n diff -= total;\r\n }\r\n\r\n if (diff < -total \/ 2) {\r\n diff += total;\r\n }\r\n\r\n return diff;\r\n }\r\n\r\n function getSettings() {\r\n const width = window.innerWidth;\r\n\r\n if (width <= 520) {\r\n return {\r\n xStep: 128,\r\n zStep: 130,\r\n rotateStep: 16,\r\n scaleStep: 0.15,\r\n yStep: 12,\r\n visibleLimit: 1\r\n };\r\n }\r\n\r\n if (width <= 820) {\r\n return {\r\n xStep: 178,\r\n zStep: 145,\r\n rotateStep: 18,\r\n scaleStep: 0.13,\r\n yStep: 14,\r\n visibleLimit: 1\r\n };\r\n }\r\n\r\n return {\r\n xStep: 300,\r\n zStep: 180,\r\n rotateStep: 24,\r\n scaleStep: 0.11,\r\n yStep: 16,\r\n visibleLimit: 2\r\n };\r\n }\r\n\r\n function renderCarousel() {\r\n const total = cards.length;\r\n const settings = getSettings();\r\n\r\n cards.forEach(function (card, index) {\r\n const diff = getCircularDiff(index, activeIndex, total);\r\n const abs = Math.abs(diff);\r\n const isActive = diff === 0;\r\n\r\n let x = diff * settings.xStep;\r\n let z = -abs * settings.zStep;\r\n let y = isActive ? -8 : abs * settings.yStep;\r\n let rotateY = diff * -settings.rotateStep;\r\n let scale = Math.max(0.68, 1 - abs * settings.scaleStep);\r\n let opacity = abs > settings.visibleLimit ? 0 : Math.max(0.38, 1 - abs * 0.24);\r\n let blur = abs > 1 ? 1.2 : 0;\r\n let pointerEvents = abs > settings.visibleLimit ? \"none\" : \"auto\";\r\n\r\n card.classList.toggle(\"is-active\", isActive);\r\n\r\n card.style.transform =\r\n \"translate(-50%, -50%) \" +\r\n \"translateX(\" + x + \"px) \" +\r\n \"translateY(\" + y + \"px) \" +\r\n \"translateZ(\" + z + \"px) \" +\r\n \"rotateY(\" + rotateY + \"deg) \" +\r\n \"scale(\" + scale + \")\";\r\n\r\n card.style.opacity = opacity;\r\n card.style.filter = \"blur(\" + blur + \"px)\";\r\n card.style.zIndex = String(100 - abs);\r\n card.style.pointerEvents = pointerEvents;\r\n });\r\n\r\n updateDots();\r\n }\r\n\r\n function goTo(index) {\r\n activeIndex = mod(index, cards.length);\r\n renderCarousel();\r\n restartAutoplay();\r\n }\r\n\r\n function nextSlide() {\r\n goTo(activeIndex + 1);\r\n }\r\n\r\n function prevSlide() {\r\n goTo(activeIndex - 1);\r\n }\r\n\r\n function createDots() {\r\n if (!dotsWrap) return;\r\n\r\n dotsWrap.innerHTML = \"\";\r\n\r\n cards.forEach(function (_, index) {\r\n const dot = document.createElement(\"button\");\r\n dot.className = \"ma-dot\";\r\n dot.type = \"button\";\r\n dot.setAttribute(\"aria-label\", \"Go to adventure \" + (index + 1));\r\n\r\n dot.addEventListener(\"click\", function () {\r\n goTo(index);\r\n });\r\n\r\n dotsWrap.appendChild(dot);\r\n });\r\n\r\n updateDots();\r\n }\r\n\r\n function updateDots() {\r\n if (!dotsWrap) return;\r\n\r\n const dots = dotsWrap.querySelectorAll(\".ma-dot\");\r\n\r\n dots.forEach(function (dot, index) {\r\n dot.classList.toggle(\"active\", index === activeIndex);\r\n });\r\n }\r\n\r\n function openModal(card) {\r\n if (!modal) return;\r\n\r\n modalTitle.textContent = card.dataset.title || \"\";\r\n modalSubtitle.textContent = card.dataset.subtitle || \"\";\r\n modalText.textContent = card.dataset.text || \"\";\r\n modalLesson.textContent = card.dataset.lesson || \"\";\r\n modalImage.style.setProperty(\"--modal-img\", \"url('\" + (card.dataset.bg || \"\") + \"')\");\r\n\r\n modal.classList.add(\"show\");\r\n modal.setAttribute(\"aria-hidden\", \"false\");\r\n document.body.style.overflow = \"hidden\";\r\n stopAutoplay();\r\n }\r\n\r\n function closeModal() {\r\n if (!modal) return;\r\n\r\n modal.classList.remove(\"show\");\r\n modal.setAttribute(\"aria-hidden\", \"true\");\r\n document.body.style.overflow = \"\";\r\n restartAutoplay();\r\n }\r\n\r\n function startAutoplay() {\r\n stopAutoplay();\r\n\r\n autoplayTimer = setInterval(function () {\r\n nextSlide();\r\n }, autoplayDelay);\r\n }\r\n\r\n function stopAutoplay() {\r\n if (autoplayTimer) {\r\n clearInterval(autoplayTimer);\r\n autoplayTimer = null;\r\n }\r\n }\r\n\r\n function restartAutoplay() {\r\n stopAutoplay();\r\n startAutoplay();\r\n }\r\n\r\n cards.forEach(function (card, index) {\r\n card.addEventListener(\"click\", function () {\r\n if (isDragging) return;\r\n\r\n if (!card.classList.contains(\"is-active\")) {\r\n goTo(index);\r\n return;\r\n }\r\n\r\n openModal(card);\r\n });\r\n\r\n const btn = card.querySelector(\".ma-card-btn\");\r\n\r\n if (btn) {\r\n btn.addEventListener(\"click\", function (event) {\r\n event.stopPropagation();\r\n\r\n if (!card.classList.contains(\"is-active\")) {\r\n goTo(index);\r\n return;\r\n }\r\n\r\n openModal(card);\r\n });\r\n }\r\n });\r\n\r\n if (prevBtn) {\r\n prevBtn.addEventListener(\"click\", function (event) {\r\n event.preventDefault();\r\n prevSlide();\r\n });\r\n }\r\n\r\n if (nextBtn) {\r\n nextBtn.addEventListener(\"click\", function (event) {\r\n event.preventDefault();\r\n nextSlide();\r\n });\r\n }\r\n\r\n stage.addEventListener(\"pointerdown\", function (event) {\r\n isDragging = false;\r\n pointerStartX = event.clientX;\r\n stopAutoplay();\r\n\r\n try {\r\n stage.setPointerCapture(event.pointerId);\r\n } catch (error) {}\r\n });\r\n\r\n stage.addEventListener(\"pointermove\", function (event) {\r\n const delta = event.clientX - pointerStartX;\r\n\r\n if (Math.abs(delta) > 8) {\r\n isDragging = true;\r\n }\r\n });\r\n\r\n stage.addEventListener(\"pointerup\", function (event) {\r\n const delta = event.clientX - pointerStartX;\r\n\r\n if (Math.abs(delta) > 45) {\r\n if (delta < 0) {\r\n nextSlide();\r\n } else {\r\n prevSlide();\r\n }\r\n }\r\n\r\n setTimeout(function () {\r\n isDragging = false;\r\n }, 90);\r\n\r\n restartAutoplay();\r\n });\r\n\r\n stage.addEventListener(\"pointercancel\", restartAutoplay);\r\n\r\n section.addEventListener(\"mouseenter\", stopAutoplay);\r\n section.addEventListener(\"mouseleave\", startAutoplay);\r\n section.addEventListener(\"focusin\", stopAutoplay);\r\n section.addEventListener(\"focusout\", startAutoplay);\r\n\r\n if (modalClose) {\r\n modalClose.addEventListener(\"click\", closeModal);\r\n }\r\n\r\n if (modalBackdrop) {\r\n modalBackdrop.addEventListener(\"click\", closeModal);\r\n }\r\n\r\n document.addEventListener(\"keydown\", function (event) {\r\n if (modal && modal.classList.contains(\"show\") && event.key === \"Escape\") {\r\n closeModal();\r\n return;\r\n }\r\n\r\n if (document.activeElement && section.contains(document.activeElement)) {\r\n if (event.key === \"ArrowRight\") nextSlide();\r\n if (event.key === \"ArrowLeft\") prevSlide();\r\n }\r\n });\r\n\r\n window.addEventListener(\"resize\", renderCarousel);\r\n\r\n createDots();\r\n renderCarousel();\r\n startAutoplay();\r\n });\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", initMavenAdventureCarousels);\r\n } else {\r\n initMavenAdventureCarousels();\r\n }\r\n\r\n window.addEventListener(\"load\", initMavenAdventureCarousels);\r\n\r\n setTimeout(initMavenAdventureCarousels, 300);\r\n setTimeout(initMavenAdventureCarousels, 1000);\r\n\r\n if (window.elementorFrontend && window.elementorFrontend.hooks) {\r\n window.elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function () {\r\n initMavenAdventureCarousels();\r\n });\r\n }\r\n })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f36cd84 e-con-full e-flex e-con e-parent\" data-id=\"f36cd84\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d5910e elementor-widget elementor-widget-html\" data-id=\"4d5910e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"maven-book-section\" id=\"mavenBookReveal\">\r\n <div class=\"mb-container\">\r\n <div class=\"mb-book-area\" id=\"mbBookArea\">\r\n <div class=\"mb-book-scene\">\r\n <div class=\"mb-book\" style=\"--book-cover: url('https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/monica-book-mokcup.png');\">\r\n <div class=\"mb-book-front\">\r\n <div class=\"mb-cover-shine\"><\/div>\r\n <\/div>\r\n <div class=\"mb-book-spine\"><\/div>\r\n <div class=\"mb-book-pages\"><\/div>\r\n <div class=\"mb-book-back\"><\/div>\r\n <\/div>\r\n\r\n <span class=\"mb-spark mb-spark-1\"><\/span>\r\n <span class=\"mb-spark mb-spark-2\"><\/span>\r\n <span class=\"mb-spark mb-spark-3\"><\/span>\r\n <span class=\"mb-spark mb-spark-4\"><\/span>\r\n <\/div>\r\n\r\n <div class=\"mb-shadow\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-copy\">\r\n <span class=\"mb-kicker\">The Book Reveal<\/span>\r\n\r\n <h2>\r\n Meet the Story<br \/>\r\n Behind the Courage\r\n <\/h2>\r\n\r\n <p class=\"mb-lead\">\r\n Maven may be tiny, but her story carries a big message for little hearts.\r\n <\/p>\r\n\r\n <p class=\"mb-text\">\r\n <em>Maven: Small Mouse. Big Courage.<\/em> is a heartwarming children\u2019s book\r\n about confidence, friendship, bravery, and learning to believe in yourself.\r\n Through Maven\u2019s playful adventures, young readers discover that courage does\r\n not always have to be loud \u2014 sometimes it begins with one tiny step.\r\n <\/p>\r\n\r\n <div class=\"mb-features\">\r\n <div class=\"mb-feature\">\r\n <strong>Perfect For<\/strong>\r\n <span>Young readers, bedtime stories, and classroom reading.<\/span>\r\n <\/div>\r\n\r\n <div class=\"mb-feature\">\r\n <strong>Main Message<\/strong>\r\n <span>Even the tiniest mouse can do brave things.<\/span>\r\n <\/div>\r\n\r\n <div class=\"mb-feature\">\r\n <strong>Theme<\/strong>\r\n <span>Courage, confidence, friendship, and self-belief.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-buttons\">\r\n <a href=\"#\" class=\"mb-btn mb-btn-primary\">Buy the Book<\/a>\r\n <a href=\"#\" class=\"mb-btn mb-btn-secondary\">Preview the Story<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800;900&family=Luckiest+Guy&display=swap\");\r\n\r\n .maven-book-section {\r\n position: relative;\r\n overflow: hidden;\r\n padding: 95px 6% 105px;\r\n background: #fffdf1;\r\n font-family: \"Fredoka\", Arial, sans-serif;\r\n }\r\n\r\n .maven-book-section::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: auto -10% -28% -10%;\r\n height: 48%;\r\n background: radial-gradient(ellipse at center, rgba(255, 201, 40, 0.18), transparent 65%);\r\n pointer-events: none;\r\n }\r\n\r\n .mb-container {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1340px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 0.95fr 1.05fr;\r\n align-items: center;\r\n gap: 70px;\r\n }\r\n\r\n .mb-book-area {\r\n position: relative;\r\n min-height: 620px;\r\n display: grid;\r\n place-items: center;\r\n perspective: 1600px;\r\n }\r\n\r\n .mb-book-scene {\r\n position: relative;\r\n width: min(420px, 76vw);\r\n height: 570px;\r\n transform-style: preserve-3d;\r\n }\r\n\r\n .mb-book {\r\n position: absolute;\r\n inset: 0;\r\n transform-style: preserve-3d;\r\n transform:\r\n rotateY(-34deg)\r\n rotateX(7deg)\r\n translateY(30px)\r\n scale(0.88);\r\n opacity: 0;\r\n transition:\r\n transform 1.1s cubic-bezier(.18, 1.05, .28, 1),\r\n opacity 0.8s ease;\r\n filter: drop-shadow(0 38px 36px rgba(65, 22, 117, 0.26));\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-book {\r\n opacity: 1;\r\n transform:\r\n rotateY(-13deg)\r\n rotateX(4deg)\r\n translateY(0)\r\n scale(1);\r\n }\r\n\r\n .mb-book-front,\r\n .mb-book-back,\r\n .mb-book-pages,\r\n .mb-book-spine {\r\n position: absolute;\r\n border-radius: 20px;\r\n transform-style: preserve-3d;\r\n }\r\n\r\n .mb-book-front {\r\n inset: 0;\r\n z-index: 5;\r\n background-image: var(--book-cover);\r\n background-size: cover;\r\n background-position: center;\r\n border: 7px solid #ffffff;\r\n box-shadow:\r\n inset 0 0 0 2px rgba(255, 201, 40, 0.28),\r\n 0 26px 55px rgba(65, 22, 117, 0.28);\r\n transform: translateZ(28px);\r\n overflow: hidden;\r\n }\r\n\r\n .mb-cover-shine {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 115deg,\r\n transparent 0%,\r\n transparent 36%,\r\n rgba(255, 255, 255, 0.46) 48%,\r\n transparent 62%,\r\n transparent 100%\r\n );\r\n transform: translateX(-130%);\r\n animation: mbCoverShine 4.4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes mbCoverShine {\r\n 0%, 52% {\r\n transform: translateX(-130%);\r\n }\r\n\r\n 78%, 100% {\r\n transform: translateX(130%);\r\n }\r\n }\r\n\r\n .mb-book-spine {\r\n left: -42px;\r\n top: 16px;\r\n width: 62px;\r\n height: calc(100% - 32px);\r\n background:\r\n linear-gradient(90deg, #4d158f, #6b1dba 48%, #8b36d6);\r\n border-radius: 18px 5px 5px 18px;\r\n transform: rotateY(90deg) translateZ(-3px);\r\n box-shadow: inset -10px 0 20px rgba(0, 0, 0, 0.18);\r\n }\r\n\r\n .mb-book-pages {\r\n right: -30px;\r\n top: 20px;\r\n width: 62px;\r\n height: calc(100% - 40px);\r\n background:\r\n repeating-linear-gradient(\r\n 90deg,\r\n #fffef4 0 5px,\r\n #eadfbf 6px 7px\r\n );\r\n transform: rotateY(88deg) translateZ(9px);\r\n border-radius: 4px 18px 18px 4px;\r\n box-shadow: inset 10px 0 22px rgba(107, 29, 186, 0.1);\r\n }\r\n\r\n .mb-book-back {\r\n inset: 0;\r\n background: #ffffff00;\r\n transform: translateZ(-30px);\r\n box-shadow: 0 22px 45px rgba(65, 22, 117, 0.22);\r\n }\r\n\r\n .mb-shadow {\r\n position: absolute;\r\n left: 50%;\r\n bottom: 35px;\r\n width: min(460px, 78vw);\r\n height: 82px;\r\n border-radius: 50%;\r\n transform: translateX(-50%);\r\n background: radial-gradient(ellipse at center, rgba(65, 22, 117, 0.24), transparent 70%);\r\n filter: blur(3px);\r\n opacity: 0;\r\n transition: opacity 0.9s ease;\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-shadow {\r\n opacity: 1;\r\n }\r\n\r\n .mb-book-area:hover .mb-book {\r\n transform:\r\n rotateY(-5deg)\r\n rotateX(3deg)\r\n translateY(-8px)\r\n scale(1.025);\r\n }\r\n\r\n .mb-spark {\r\n position: absolute;\r\n width: 17px;\r\n height: 17px;\r\n background: #ffc928;\r\n clip-path: polygon(50% 0%, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0% 50%, 37% 36%);\r\n filter: drop-shadow(0 0 12px rgba(255, 201, 40, 0.95));\r\n opacity: 0;\r\n animation: mbSparkle 2.8s ease-in-out infinite;\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-spark {\r\n opacity: 1;\r\n }\r\n\r\n .mb-spark-1 {\r\n left: 3%;\r\n top: 16%;\r\n }\r\n\r\n .mb-spark-2 {\r\n right: 8%;\r\n top: 10%;\r\n animation-delay: -0.7s;\r\n }\r\n\r\n .mb-spark-3 {\r\n left: 10%;\r\n bottom: 24%;\r\n animation-delay: -1.4s;\r\n }\r\n\r\n .mb-spark-4 {\r\n right: 3%;\r\n bottom: 30%;\r\n animation-delay: -2.1s;\r\n }\r\n\r\n @keyframes mbSparkle {\r\n 0%, 100% {\r\n transform: scale(0.65) rotate(0deg);\r\n opacity: 0.35;\r\n }\r\n\r\n 50% {\r\n transform: scale(1.28) rotate(35deg);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .mb-copy {\r\n position: relative;\r\n z-index: 3;\r\n }\r\n\r\n .mb-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 18px;\r\n padding: 10px 22px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 13px;\r\n font-weight: 900;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mb-copy h2 {\r\n margin: 0 0 20px;\r\n font-family: \"Luckiest Guy\", \"Fredoka\", Arial, sans-serif;\r\n font-size: clamp(44px, 5.4vw, 84px);\r\n line-height: 0.94;\r\n color: #ffc928;\r\n letter-spacing: 1px;\r\n text-shadow:\r\n 4px 4px 0 #6b1dba,\r\n 8px 8px 0 rgba(107, 29, 186, 0.2);\r\n }\r\n\r\n .mb-lead {\r\n max-width: 690px;\r\n margin: 0 0 16px;\r\n color: #4b207f;\r\n font-size: clamp(19px, 1.75vw, 25px);\r\n line-height: 1.45;\r\n font-weight: 900;\r\n }\r\n\r\n .mb-text {\r\n max-width: 690px;\r\n margin: 0 0 26px;\r\n color: #5b3a80;\r\n font-size: clamp(16px, 1.22vw, 19px);\r\n line-height: 1.7;\r\n font-weight: 650;\r\n }\r\n\r\n .mb-features {\r\n display: grid;\r\n gap: 14px;\r\n margin: 0 0 30px;\r\n max-width: 720px;\r\n }\r\n\r\n .mb-feature {\r\n padding: 17px 20px;\r\n border-radius: 22px;\r\n background: #ffffff;\r\n border: 3px solid rgba(255, 201, 40, 0.85);\r\n box-shadow: 0 14px 30px rgba(65, 22, 117, 0.1);\r\n transform: translateY(22px);\r\n opacity: 0;\r\n transition:\r\n opacity 0.65s ease,\r\n transform 0.65s cubic-bezier(.18, 1.05, .28, 1),\r\n box-shadow 0.25s ease;\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-feature {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-feature:nth-child(1) {\r\n transition-delay: 0.16s;\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-feature:nth-child(2) {\r\n transition-delay: 0.28s;\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-feature:nth-child(3) {\r\n transition-delay: 0.4s;\r\n }\r\n\r\n .mb-feature:hover {\r\n box-shadow: 0 20px 38px rgba(65, 22, 117, 0.16);\r\n transform: translateY(-5px);\r\n }\r\n\r\n .mb-feature strong {\r\n display: block;\r\n margin-bottom: 5px;\r\n color: #6b1dba;\r\n font-size: 17px;\r\n font-weight: 900;\r\n }\r\n\r\n .mb-feature span {\r\n display: block;\r\n color: #5b3a80;\r\n font-size: 15.5px;\r\n line-height: 1.4;\r\n font-weight: 700;\r\n }\r\n\r\n .mb-buttons {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 16px;\r\n }\r\n\r\n .mb-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 54px;\r\n padding: 0 28px;\r\n border-radius: 999px;\r\n text-decoration: none !important;\r\n font-size: 15px;\r\n font-weight: 900;\r\n transition:\r\n transform 0.25s ease,\r\n box-shadow 0.25s ease;\r\n }\r\n\r\n .mb-btn-primary {\r\n background: #6b1dba;\r\n color: #ffffff !important;\r\n box-shadow: 0 7px 0 #ffc928;\r\n }\r\n\r\n .mb-btn-secondary {\r\n background: #ffc928 !important;\r\n color: #6b1dba;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mb-btn:hover {\r\n transform: translateY(-4px);\r\n }\r\n\r\n .mb-btn-primary:hover {\r\n box-shadow: 0 11px 0 #ffc928;\r\n }\r\n\r\n .mb-btn-secondary:hover {\r\n box-shadow: 0 11px 0 #6b1dba;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .maven-book-section {\r\n padding: 78px 22px 90px;\r\n }\r\n\r\n .mb-container {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .mb-copy {\r\n text-align: center;\r\n }\r\n\r\n .mb-lead,\r\n .mb-text,\r\n .mb-features {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .mb-buttons {\r\n justify-content: center;\r\n }\r\n\r\n .mb-book-area {\r\n min-height: 560px;\r\n order: 2;\r\n }\r\n\r\n .mb-copy {\r\n order: 1;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .maven-book-section {\r\n padding: 66px 18px 78px;\r\n }\r\n\r\n .mb-copy h2 {\r\n font-size: clamp(38px, 12vw, 60px);\r\n }\r\n\r\n .mb-book-area {\r\n min-height: 500px;\r\n }\r\n\r\n .mb-book-scene {\r\n width: min(320px, 74vw);\r\n height: 440px;\r\n }\r\n\r\n .mb-book-spine {\r\n left: -32px;\r\n width: 48px;\r\n }\r\n\r\n .mb-book-pages {\r\n right: -24px;\r\n width: 48px;\r\n }\r\n\r\n .mb-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .mb-btn {\r\n width: min(280px, 100%);\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .maven-book-section {\r\n padding: 58px 16px 68px;\r\n }\r\n\r\n .mb-book-area {\r\n min-height: 440px;\r\n }\r\n\r\n .mb-book-scene {\r\n width: min(285px, 76vw);\r\n height: 392px;\r\n }\r\n\r\n .mb-feature {\r\n padding: 15px 16px;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .mb-book,\r\n .mb-cover-shine,\r\n .mb-spark,\r\n .mb-feature {\r\n animation: none !important;\r\n transition: none !important;\r\n opacity: 1;\r\n transform: none;\r\n }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n (function () {\r\n function initMavenBookReveal() {\r\n const sections = document.querySelectorAll(\".maven-book-section:not([data-mb-ready='true'])\");\r\n\r\n sections.forEach(function (section) {\r\n section.setAttribute(\"data-mb-ready\", \"true\");\r\n\r\n const bookArea = section.querySelector(\".mb-book-area\");\r\n const book = section.querySelector(\".mb-book\");\r\n\r\n const observer = new IntersectionObserver(\r\n function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n section.classList.add(\"mb-in-view\");\r\n }\r\n });\r\n },\r\n { threshold: 0.28 }\r\n );\r\n\r\n observer.observe(section);\r\n\r\n if (bookArea && book) {\r\n bookArea.addEventListener(\"mousemove\", function (event) {\r\n const rect = bookArea.getBoundingClientRect();\r\n const x = (event.clientX - rect.left) \/ rect.width - 0.5;\r\n const y = (event.clientY - rect.top) \/ rect.height - 0.5;\r\n\r\n book.style.transform =\r\n \"rotateY(\" + (-8 + x * 14) + \"deg) \" +\r\n \"rotateX(\" + (3 + y * -8) + \"deg) \" +\r\n \"translateY(-8px) scale(1.025)\";\r\n });\r\n\r\n bookArea.addEventListener(\"mouseleave\", function () {\r\n if (section.classList.contains(\"mb-in-view\")) {\r\n book.style.transform =\r\n \"rotateY(-13deg) rotateX(4deg) translateY(0) scale(1)\";\r\n }\r\n });\r\n }\r\n });\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", initMavenBookReveal);\r\n } else {\r\n initMavenBookReveal();\r\n }\r\n\r\n window.addEventListener(\"load\", initMavenBookReveal);\r\n setTimeout(initMavenBookReveal, 300);\r\n setTimeout(initMavenBookReveal, 1000);\r\n\r\n if (window.elementorFrontend && window.elementorFrontend.hooks) {\r\n window.elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function () {\r\n initMavenBookReveal();\r\n });\r\n }\r\n })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d2a46b9 e-con-full e-flex e-con e-parent\" data-id=\"d2a46b9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66eb3f9 elementor-widget elementor-widget-html\" data-id=\"66eb3f9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"maven-courage-wheel-section\" id=\"mavenCourageWheel\">\r\n <div class=\"mcw-container\">\r\n <div class=\"mcw-header\">\r\n <span class=\"mcw-kicker\">Play & Learn With Maven<\/span>\r\n <h2>Maven\u2019s Courage Wheel<\/h2>\r\n <p>\r\n Spin the wheel and discover a brave little lesson from Maven\u2019s world.\r\n Every turn reminds children that courage can begin with one tiny step.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"mcw-layout\">\r\n <div class=\"mcw-wheel-area\">\r\n <div class=\"mcw-pointer\">\r\n <span><\/span>\r\n <\/div>\r\n\r\n <div class=\"mcw-wheel-wrap\">\r\n <div class=\"mcw-wheel\" id=\"mcwWheel\">\r\n <div class=\"mcw-segment-label mcw-label-1\">\r\n <strong>Try Again<\/strong>\r\n <\/div>\r\n\r\n <div class=\"mcw-segment-label mcw-label-2\">\r\n <strong>Ask for Help<\/strong>\r\n <\/div>\r\n\r\n <div class=\"mcw-segment-label mcw-label-3\">\r\n <strong>Be Brave<\/strong>\r\n <\/div>\r\n\r\n <div class=\"mcw-segment-label mcw-label-4\">\r\n <strong>Speak Up<\/strong>\r\n <\/div>\r\n\r\n <div class=\"mcw-segment-label mcw-label-5\">\r\n <strong>Keep Going<\/strong>\r\n <\/div>\r\n\r\n <div class=\"mcw-segment-label mcw-label-6\">\r\n <strong>Shine Bright<\/strong>\r\n <\/div>\r\n\r\n <div class=\"mcw-inner-ring\"><\/div>\r\n\r\n <div class=\"mcw-maven-center\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/Maven-1.png\"\r\n alt=\"Maven the Mouse\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"mcw-spin-btn\" id=\"mcwSpinBtn\" type=\"button\">\r\n Spin the Wheel\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"mcw-result-panel\" id=\"mcwResultPanel\">\r\n <span class=\"mcw-result-kicker\">Today\u2019s Brave Lesson<\/span>\r\n\r\n <h3 id=\"mcwResultTitle\">Ready to Spin?<\/h3>\r\n\r\n <p id=\"mcwResultText\">\r\n Click the button and let Maven\u2019s Courage Wheel choose a special lesson\r\n about confidence, friendship, and bravery.\r\n <\/p>\r\n\r\n <div class=\"mcw-story-note\" id=\"mcwStoryNote\">\r\n Maven\u2019s world is full of tiny steps that lead to big courage.\r\n <\/div>\r\n\r\n <div class=\"mcw-mini-lessons\">\r\n <div>\r\n <strong>For Kids<\/strong>\r\n <span>A fun little game with a meaningful message.<\/span>\r\n <\/div>\r\n\r\n <div>\r\n <strong>For Parents<\/strong>\r\n <span>A gentle way to talk about courage and confidence.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <span class=\"mcw-spark mcw-spark-1\"><\/span>\r\n <span class=\"mcw-spark mcw-spark-2\"><\/span>\r\n <span class=\"mcw-spark mcw-spark-3\"><\/span>\r\n <span class=\"mcw-spark mcw-spark-4\"><\/span>\r\n<\/section>\r\n\r\n<style>\r\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800;900&family=Luckiest+Guy&display=swap\");\r\n\r\n .maven-courage-wheel-section {\r\n position: relative;\r\n overflow: hidden;\r\n padding: 90px 6% 105px;\r\n background: #fff8d6;\r\n font-family: \"Fredoka\", Arial, sans-serif;\r\n }\r\n\r\n .mcw-container {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n }\r\n\r\n .mcw-header {\r\n max-width: 880px;\r\n margin: 0 auto 52px;\r\n text-align: center;\r\n }\r\n\r\n .mcw-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 16px;\r\n padding: 10px 22px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 13px;\r\n font-weight: 900;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mcw-header h2 {\r\n margin: 0 0 18px;\r\n font-family: \"Luckiest Guy\", \"Fredoka\", Arial, sans-serif;\r\n font-size: clamp(42px, 5.5vw, 86px);\r\n line-height: 0.95;\r\n color: #ffc928;\r\n letter-spacing: 1px;\r\n text-shadow:\r\n 4px 4px 0 #6b1dba,\r\n 8px 8px 0 rgba(107, 29, 186, 0.22);\r\n }\r\n\r\n .mcw-header p {\r\n margin: 0 auto;\r\n max-width: 760px;\r\n color: #55218f;\r\n font-size: clamp(17px, 1.45vw, 21px);\r\n line-height: 1.6;\r\n font-weight: 800;\r\n }\r\n\r\n .mcw-layout {\r\n display: grid;\r\n grid-template-columns: 1fr 0.9fr;\r\n gap: 70px;\r\n align-items: center;\r\n }\r\n\r\n .mcw-wheel-area {\r\n position: relative;\r\n min-height: 650px;\r\n display: grid;\r\n place-items: center;\r\n }\r\n\r\n .mcw-pointer {\r\n position: absolute;\r\n z-index: 12;\r\n top: 35px;\r\n left: 50%;\r\n width: 68px;\r\n height: 82px;\r\n transform: translateX(-50%);\r\n filter: drop-shadow(0 10px 12px rgba(65, 22, 117, 0.24));\r\n }\r\n\r\n .mcw-pointer span {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n background: #e7332f;\r\n clip-path: polygon(50% 100%, 0 0, 100% 0);\r\n border-radius: 18px 18px 12px 12px;\r\n }\r\n\r\n .mcw-wheel-wrap {\r\n position: relative;\r\n width: min(560px, 82vw);\r\n aspect-ratio: 1 \/ 1;\r\n border-radius: 50%;\r\n perspective: 1400px;\r\n filter: drop-shadow(0 34px 38px rgba(65, 22, 117, 0.24));\r\n }\r\n\r\n .mcw-wheel-wrap::after {\r\n content: \"\";\r\n position: absolute;\r\n left: 50%;\r\n bottom: -48px;\r\n width: 78%;\r\n height: 80px;\r\n border-radius: 50%;\r\n transform: translateX(-50%);\r\n background: radial-gradient(ellipse at center, rgba(65, 22, 117, 0.22), transparent 70%);\r\n filter: blur(3px);\r\n z-index: -1;\r\n }\r\n\r\n .mcw-wheel {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n transform: rotate(0deg);\r\n transition: transform 4.2s cubic-bezier(.12, .72, .14, 1);\r\n transform-style: preserve-3d;\r\n background:\r\n conic-gradient(\r\n from -90deg,\r\n #ffc928 0deg 60deg,\r\n #ff78b7 60deg 120deg,\r\n #6b1dba 120deg 180deg,\r\n #55c7f7 180deg 240deg,\r\n #4fae45 240deg 300deg,\r\n #f28b22 300deg 360deg\r\n );\r\n border: 12px solid #ffffff;\r\n box-shadow:\r\n inset 0 0 0 8px rgba(107, 29, 186, 0.18),\r\n inset 0 0 45px rgba(255, 255, 255, 0.32),\r\n 0 12px 0 rgba(107, 29, 186, 0.25);\r\n }\r\n\r\n .mcw-wheel::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 32px;\r\n border-radius: 50%;\r\n border: 4px dashed rgba(255, 255, 255, 0.72);\r\n animation: mcwDashSpin 18s linear infinite;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes mcwDashSpin {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n .mcw-inner-ring {\r\n position: absolute;\r\n inset: 31%;\r\n z-index: 4;\r\n border-radius: 50%;\r\n background:\r\n radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.95), rgba(255, 248, 214, 0.96));\r\n border: 8px solid #ffffff;\r\n box-shadow:\r\n 0 0 0 6px rgba(255, 201, 40, 0.65),\r\n 0 18px 34px rgba(65, 22, 117, 0.2);\r\n }\r\n\r\n .mcw-maven-center {\r\n position: absolute;\r\n z-index: 7;\r\n left: 50%;\r\n top: 52%;\r\n width: 36%;\r\n transform: translate(-50%, -50%);\r\n filter: drop-shadow(0 18px 20px rgba(65, 22, 117, 0.22));\r\n }\r\n\r\n .mcw-maven-center img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n animation: mcwMavenFloat 2.8s ease-in-out infinite;\r\n }\r\n\r\n @keyframes mcwMavenFloat {\r\n 0%, 100% {\r\n transform: translateY(0) rotate(-1deg);\r\n }\r\n\r\n 50% {\r\n transform: translateY(-9px) rotate(1deg);\r\n }\r\n }\r\n\r\n .mcw-segment-label {\r\n position: absolute;\r\n z-index: 5;\r\n left: 50%;\r\n top: 50%;\r\n width: 140px;\r\n min-height: 54px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 9px 13px;\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.92);\r\n border: 3px solid rgba(255, 255, 255, 0.75);\r\n color: #6b1dba;\r\n text-align: center;\r\n box-shadow: 0 10px 22px rgba(65, 22, 117, 0.15);\r\n transform-origin: center;\r\n pointer-events: none;\r\n }\r\n\r\n .mcw-segment-label strong {\r\n display: block;\r\n font-size: 15px;\r\n line-height: 1.05;\r\n font-weight: 900;\r\n }\r\n\r\n .mcw-label-1 {\r\n transform: translate(-50%, -50%) rotate(30deg) translateY(-206px) rotate(-30deg);\r\n }\r\n\r\n .mcw-label-2 {\r\n transform: translate(-50%, -50%) rotate(90deg) translateY(-206px) rotate(-90deg);\r\n }\r\n\r\n .mcw-label-3 {\r\n transform: translate(-50%, -50%) rotate(150deg) translateY(-206px) rotate(-150deg);\r\n }\r\n\r\n .mcw-label-4 {\r\n transform: translate(-50%, -50%) rotate(210deg) translateY(-206px) rotate(-210deg);\r\n }\r\n\r\n .mcw-label-5 {\r\n transform: translate(-50%, -50%) rotate(270deg) translateY(-206px) rotate(-270deg);\r\n }\r\n\r\n .mcw-label-6 {\r\n transform: translate(-50%, -50%) rotate(330deg) translateY(-206px) rotate(-330deg);\r\n }\r\n\r\n .mcw-spin-btn {\r\n position: absolute;\r\n z-index: 20;\r\n bottom: -40px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n min-height: 58px;\r\n padding: 0 34px;\r\n border: 0;\r\n border-radius: 999px;\r\n background: #6b1dba !important;\r\n color: #ffffff !important;\r\n cursor: pointer;\r\n font-family: inherit;\r\n font-size: 17px;\r\n font-weight: 900;\r\n box-shadow: 0 8px 0 #ffc928;\r\n transition:\r\n transform 0.25s ease,\r\n box-shadow 0.25s ease,\r\n opacity 0.25s ease;\r\n }\r\n\r\n .mcw-spin-btn:hover {\r\n transform: translateX(-50%) translateY(-4px);\r\n box-shadow: 0 12px 0 #ffc928;\r\n }\r\n\r\n .mcw-spin-btn:disabled {\r\n opacity: 0.65;\r\n cursor: not-allowed;\r\n }\r\n\r\n .mcw-result-panel {\r\n position: relative;\r\n padding: 42px;\r\n border-radius: 36px;\r\n background: #ffffff;\r\n border: 6px solid #ffc928;\r\n box-shadow:\r\n 0 28px 64px rgba(65, 22, 117, 0.15),\r\n inset 0 0 0 2px rgba(255, 255, 255, 0.72);\r\n overflow: hidden;\r\n }\r\n\r\n .mcw-result-panel::before {\r\n content: \"\";\r\n position: absolute;\r\n right: -80px;\r\n top: -80px;\r\n width: 220px;\r\n height: 220px;\r\n border-radius: 50%;\r\n background: rgba(255, 201, 40, 0.22);\r\n }\r\n\r\n .mcw-result-kicker {\r\n position: relative;\r\n z-index: 2;\r\n display: inline-flex;\r\n margin-bottom: 18px;\r\n padding: 9px 17px;\r\n border-radius: 999px;\r\n background: #fff8d6;\r\n color: #6b1dba;\r\n font-size: 12px;\r\n font-weight: 900;\r\n letter-spacing: 0.7px;\r\n text-transform: uppercase;\r\n box-shadow: 0 5px 0 rgba(107, 29, 186, 0.18);\r\n }\r\n\r\n .mcw-result-panel h3 {\r\n position: relative;\r\n z-index: 2;\r\n margin: 0 0 14px;\r\n font-size: clamp(34px, 4vw, 58px);\r\n line-height: 0.96;\r\n color: #ffc928;\r\n font-weight: 900;\r\n text-shadow:\r\n 3px 3px 0 #6b1dba,\r\n 5px 5px 0 rgba(107, 29, 186, 0.22);\r\n }\r\n\r\n .mcw-result-panel p {\r\n position: relative;\r\n z-index: 2;\r\n margin: 0 0 24px;\r\n color: #5b3a80;\r\n font-size: clamp(17px, 1.4vw, 20px);\r\n line-height: 1.65;\r\n font-weight: 700;\r\n }\r\n\r\n .mcw-story-note {\r\n position: relative;\r\n z-index: 2;\r\n margin-bottom: 26px;\r\n padding: 18px 20px;\r\n border-radius: 22px;\r\n background: #fff8d6;\r\n color: #6b1dba;\r\n border: 3px solid rgba(255, 201, 40, 0.88);\r\n font-size: 16px;\r\n line-height: 1.45;\r\n font-weight: 900;\r\n }\r\n\r\n .mcw-mini-lessons {\r\n position: relative;\r\n z-index: 2;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 14px;\r\n }\r\n\r\n .mcw-mini-lessons div {\r\n padding: 16px;\r\n border-radius: 20px;\r\n background: #ffffff;\r\n border: 3px solid rgba(107, 29, 186, 0.12);\r\n box-shadow: 0 12px 26px rgba(65, 22, 117, 0.08);\r\n }\r\n\r\n .mcw-mini-lessons strong {\r\n display: block;\r\n margin-bottom: 5px;\r\n color: #6b1dba;\r\n font-size: 15px;\r\n font-weight: 900;\r\n }\r\n\r\n .mcw-mini-lessons span {\r\n display: block;\r\n color: #5b3a80;\r\n font-size: 14px;\r\n line-height: 1.35;\r\n font-weight: 700;\r\n }\r\n\r\n .mcw-result-panel.mcw-pop {\r\n animation: mcwPanelPop 0.55s cubic-bezier(.18, 1.45, .45, 1);\r\n }\r\n\r\n @keyframes mcwPanelPop {\r\n 0% {\r\n transform: scale(0.94);\r\n }\r\n\r\n 55% {\r\n transform: scale(1.035);\r\n }\r\n\r\n 100% {\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n .mcw-spark {\r\n position: absolute;\r\n width: 16px;\r\n height: 16px;\r\n background: #ffc928;\r\n clip-path: polygon(50% 0%, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0% 50%, 37% 36%);\r\n filter: drop-shadow(0 0 12px rgba(255, 201, 40, 0.9));\r\n animation: mcwSparkle 3s ease-in-out infinite;\r\n pointer-events: none;\r\n }\r\n\r\n .mcw-spark-1 {\r\n left: 8%;\r\n top: 24%;\r\n }\r\n\r\n .mcw-spark-2 {\r\n right: 10%;\r\n top: 18%;\r\n animation-delay: -0.8s;\r\n }\r\n\r\n .mcw-spark-3 {\r\n left: 12%;\r\n bottom: 18%;\r\n animation-delay: -1.6s;\r\n }\r\n\r\n .mcw-spark-4 {\r\n right: 16%;\r\n bottom: 22%;\r\n animation-delay: -2.4s;\r\n }\r\n\r\n @keyframes mcwSparkle {\r\n 0%, 100% {\r\n transform: scale(0.7) rotate(0deg);\r\n opacity: 0.45;\r\n }\r\n\r\n 50% {\r\n transform: scale(1.25) rotate(35deg);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .maven-courage-wheel-section {\r\n padding: 78px 22px 92px;\r\n }\r\n\r\n .mcw-layout {\r\n grid-template-columns: 1fr;\r\n gap: 50px;\r\n }\r\n\r\n .mcw-wheel-area {\r\n min-height: 620px;\r\n }\r\n\r\n .mcw-result-panel {\r\n max-width: 760px;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .maven-courage-wheel-section {\r\n padding: 66px 18px 80px;\r\n }\r\n\r\n .mcw-header {\r\n margin-bottom: 38px;\r\n }\r\n\r\n .mcw-header h2 {\r\n font-size: clamp(38px, 12vw, 60px);\r\n }\r\n\r\n .mcw-wheel-area {\r\n min-height: 560px;\r\n }\r\n\r\n .mcw-wheel-wrap {\r\n width: min(470px, 88vw);\r\n }\r\n\r\n .mcw-segment-label {\r\n width: 112px;\r\n min-height: 46px;\r\n padding: 7px 10px;\r\n }\r\n\r\n .mcw-segment-label strong {\r\n font-size: 12.5px;\r\n }\r\n\r\n .mcw-label-1 {\r\n transform: translate(-50%, -50%) rotate(30deg) translateY(-174px) rotate(-30deg);\r\n }\r\n\r\n .mcw-label-2 {\r\n transform: translate(-50%, -50%) rotate(90deg) translateY(-174px) rotate(-90deg);\r\n }\r\n\r\n .mcw-label-3 {\r\n transform: translate(-50%, -50%) rotate(150deg) translateY(-174px) rotate(-150deg);\r\n }\r\n\r\n .mcw-label-4 {\r\n transform: translate(-50%, -50%) rotate(210deg) translateY(-174px) rotate(-210deg);\r\n }\r\n\r\n .mcw-label-5 {\r\n transform: translate(-50%, -50%) rotate(270deg) translateY(-174px) rotate(-270deg);\r\n }\r\n\r\n .mcw-label-6 {\r\n transform: translate(-50%, -50%) rotate(330deg) translateY(-174px) rotate(-330deg);\r\n }\r\n\r\n .mcw-spin-btn {\r\n min-height: 52px;\r\n padding: 0 26px;\r\n font-size: 15px;\r\n }\r\n\r\n .mcw-result-panel {\r\n padding: 30px 22px;\r\n border-radius: 28px;\r\n }\r\n\r\n .mcw-mini-lessons {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .maven-courage-wheel-section {\r\n padding: 58px 16px 70px;\r\n }\r\n\r\n .mcw-wheel-area {\r\n min-height: 500px;\r\n }\r\n\r\n .mcw-pointer {\r\n width: 50px;\r\n height: 62px;\r\n top: 32px;\r\n }\r\n\r\n .mcw-segment-label {\r\n width: 92px;\r\n min-height: 40px;\r\n border-width: 2px;\r\n }\r\n\r\n .mcw-segment-label strong {\r\n font-size: 10.5px;\r\n }\r\n\r\n .mcw-label-1 {\r\n transform: translate(-50%, -50%) rotate(30deg) translateY(-142px) rotate(-30deg);\r\n }\r\n\r\n .mcw-label-2 {\r\n transform: translate(-50%, -50%) rotate(90deg) translateY(-142px) rotate(-90deg);\r\n }\r\n\r\n .mcw-label-3 {\r\n transform: translate(-50%, -50%) rotate(150deg) translateY(-142px) rotate(-150deg);\r\n }\r\n\r\n .mcw-label-4 {\r\n transform: translate(-50%, -50%) rotate(210deg) translateY(-142px) rotate(-210deg);\r\n }\r\n\r\n .mcw-label-5 {\r\n transform: translate(-50%, -50%) rotate(270deg) translateY(-142px) rotate(-270deg);\r\n }\r\n\r\n .mcw-label-6 {\r\n transform: translate(-50%, -50%) rotate(330deg) translateY(-142px) rotate(-330deg);\r\n }\r\n\r\n .mcw-inner-ring {\r\n inset: 32%;\r\n border-width: 5px;\r\n }\r\n\r\n .mcw-maven-center {\r\n width: 39%;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .mcw-wheel,\r\n .mcw-wheel::before,\r\n .mcw-maven-center img,\r\n .mcw-spark,\r\n .mcw-result-panel {\r\n animation: none !important;\r\n transition: none !important;\r\n }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n (function () {\r\n function initMavenCourageWheel() {\r\n const sections = document.querySelectorAll(\".maven-courage-wheel-section:not([data-mcw-ready='true'])\");\r\n\r\n sections.forEach(function (section) {\r\n section.setAttribute(\"data-mcw-ready\", \"true\");\r\n\r\n const wheel = section.querySelector(\"#mcwWheel\");\r\n const spinBtn = section.querySelector(\"#mcwSpinBtn\");\r\n const resultPanel = section.querySelector(\"#mcwResultPanel\");\r\n const resultTitle = section.querySelector(\"#mcwResultTitle\");\r\n const resultText = section.querySelector(\"#mcwResultText\");\r\n const storyNote = section.querySelector(\"#mcwStoryNote\");\r\n\r\n if (!wheel || !spinBtn || !resultPanel || !resultTitle || !resultText || !storyNote) return;\r\n\r\n const lessons = [\r\n {\r\n title: \"Try Again\",\r\n text: \"Maven learns that one wobble, one fall, or one nervous moment does not mean the adventure is over.\",\r\n note: \"Story Moment: On her bike ride, Maven discovers that practice can turn fear into freedom.\"\r\n },\r\n {\r\n title: \"Ask for Help\",\r\n text: \"Maven discovers that asking for help is not weakness. It can be one of the bravest things a child can do.\",\r\n note: \"Story Moment: When something feels too big, Maven learns that friends and family can walk beside her.\"\r\n },\r\n {\r\n title: \"Be Brave\",\r\n text: \"Maven learns that bravery does not mean never feeling scared. It means trying even when her heart feels nervous.\",\r\n note: \"Story Moment: Whether at school, in the meadow, or near the water, Maven takes one tiny brave step.\"\r\n },\r\n {\r\n title: \"Speak Up\",\r\n text: \"Maven learns that her voice matters. Even a tiny mouse can stand tall and say what she feels.\",\r\n note: \"Story Moment: Maven finds courage when she remembers that being small does not make her less important.\"\r\n },\r\n {\r\n title: \"Keep Going\",\r\n text: \"Maven learns that falling does not mean stopping. It means trying one more time.\",\r\n note: \"Story Moment: With patience and encouragement, Maven keeps moving forward until she feels proud.\"\r\n },\r\n {\r\n title: \"Shine Bright\",\r\n text: \"Maven discovers that she does not need to be the biggest or loudest to shine in her own special way.\",\r\n note: \"Story Moment: During her adventures, Maven learns that tiny can still be mighty.\"\r\n }\r\n ];\r\n\r\n let currentRotation = 0;\r\n let spinning = false;\r\n\r\n function normalizeAngle(angle) {\r\n return ((angle % 360) + 360) % 360;\r\n }\r\n\r\n function spinWheel() {\r\n if (spinning) return;\r\n\r\n spinning = true;\r\n spinBtn.disabled = true;\r\n spinBtn.textContent = \"Spinning...\";\r\n\r\n const selectedIndex = Math.floor(Math.random() * lessons.length);\r\n const segmentSize = 360 \/ lessons.length;\r\n const segmentCenter = selectedIndex * segmentSize + segmentSize \/ 2;\r\n\r\n const currentMod = normalizeAngle(currentRotation);\r\n const targetMod = normalizeAngle(360 - segmentCenter);\r\n const delta = normalizeAngle(targetMod - currentMod);\r\n const extraSpins = 360 * 6;\r\n\r\n currentRotation += extraSpins + delta;\r\n\r\n wheel.style.transform = \"rotate(\" + currentRotation + \"deg)\";\r\n\r\n window.setTimeout(function () {\r\n const lesson = lessons[selectedIndex];\r\n\r\n resultTitle.textContent = lesson.title;\r\n resultText.textContent = lesson.text;\r\n storyNote.textContent = lesson.note;\r\n\r\n resultPanel.classList.remove(\"mcw-pop\");\r\n void resultPanel.offsetWidth;\r\n resultPanel.classList.add(\"mcw-pop\");\r\n\r\n spinBtn.disabled = false;\r\n spinBtn.textContent = \"Spin Again\";\r\n spinning = false;\r\n }, 4300);\r\n }\r\n\r\n spinBtn.addEventListener(\"click\", spinWheel);\r\n });\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", initMavenCourageWheel);\r\n } else {\r\n initMavenCourageWheel();\r\n }\r\n\r\n window.addEventListener(\"load\", initMavenCourageWheel);\r\n setTimeout(initMavenCourageWheel, 300);\r\n setTimeout(initMavenCourageWheel, 1000);\r\n\r\n if (window.elementorFrontend && window.elementorFrontend.hooks) {\r\n window.elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function () {\r\n initMavenCourageWheel();\r\n });\r\n }\r\n })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ce02cd9 e-con-full e-flex e-con e-parent\" data-id=\"ce02cd9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76e0de7 elementor-widget elementor-widget-html\" data-id=\"76e0de7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"maven-author-section\" id=\"mavenAuthorSection\">\r\n <div class=\"mas-container\">\r\n \r\n <div class=\"mas-visual\" id=\"masVisualArea\">\r\n <div class=\"mas-photo-card\">\r\n <div class=\"mas-photo-frame\">\r\n <img decoding=\"async\" src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/placeholder_author.png\" alt=\"Monica M. Savioz\" class=\"mas-author-img\" \/>\r\n <\/div>\r\n\r\n <div class=\"mas-book-badge\">\r\n <img decoding=\"async\" src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/monica-book-mokcup.png\" alt=\"Maven Small Mouse Big Courage Book Cover\" \/>\r\n <\/div>\r\n\r\n <span class=\"mas-spark mas-spark-1\"><\/span>\r\n <span class=\"mas-spark mas-spark-2\"><\/span>\r\n <span class=\"mas-spark mas-spark-3\"><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mas-copy\">\r\n <span class=\"mas-kicker\" data-mas-reveal>About the Author<\/span>\r\n\r\n <h2 data-mas-reveal>\r\n Meet Monica<br \/>\r\n M. Savioz\r\n <\/h2>\r\n\r\n <p class=\"mas-lead\" data-mas-reveal>\r\n The heart behind <em>Maven: Small Mouse. Big Courage.<\/em>\r\n <\/p>\r\n\r\n <p class=\"mas-text\" data-mas-reveal>\r\n Monica M. Savioz brings Maven\u2019s world to life with warmth, imagination,\r\n and a meaningful message for children and families. Through Maven\u2019s\r\n adventures, she shares a gentle reminder that courage is not about being\r\n the biggest or the loudest \u2014 it is about believing in yourself, trying\r\n again, and finding your own special way to shine.\r\n <\/p>\r\n\r\n <div class=\"mas-quote\" data-mas-reveal>\r\n <span>\u201c<\/span>\r\n <p>\r\n Every child deserves to know they are brave, important, and wonderfully\r\n made \u2014 exactly as they are.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"mas-author-cards\" data-mas-reveal>\r\n <div class=\"mas-mini-card\">\r\n <strong>Her Message<\/strong>\r\n <p>Even the tiniest mouse can do brave things.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mas-mini-card\">\r\n <strong>For Families<\/strong>\r\n <p>A story filled with love, courage, and encouragement.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mas-mini-card\">\r\n <strong>For Young Readers<\/strong>\r\n <p>A gentle reminder to believe, try, and shine.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mas-buttons\" data-mas-reveal>\r\n <a href=\"#mavenBookReveal\" class=\"mas-btn mas-btn-primary\">Discover the Book<\/a>\r\n <a href=\"#contact\" class=\"mas-btn mas-btn-secondary\">Contact the Author<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800;900&family=Luckiest+Guy&display=swap\");\r\n\r\n .maven-author-section {\r\n position: relative;\r\n overflow: hidden;\r\n padding: 95px 6% 105px;\r\n background: #fffdf1;\r\n font-family: \"Fredoka\", Arial, sans-serif;\r\n }\r\n\r\n .mas-container {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1340px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 0.95fr 1.05fr;\r\n gap: 70px;\r\n align-items: center;\r\n }\r\n\r\n .mas-visual {\r\n position: relative;\r\n min-height: 610px;\r\n display: grid;\r\n place-items: center;\r\n perspective: 1200px;\r\n }\r\n\r\n .mas-photo-card {\r\n position: relative;\r\n width: min(530px, 80vw);\r\n min-height: 600px;\r\n border-radius: 42px;\r\n background: #fff8d6;\r\n border: 7px solid #ffffff;\r\n box-shadow:\r\n 0 34px 80px rgba(65, 22, 117, 0.18),\r\n 0 10px 0 rgba(107, 29, 186, 0.14);\r\n transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);\r\n transition: transform 0.25s ease;\r\n }\r\n\r\n .mas-photo-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 18px;\r\n border-radius: 32px;\r\n border: 3px dashed rgba(107, 29, 186, 0.18);\r\n pointer-events: none;\r\n }\r\n\r\n .mas-photo-frame {\r\n position: absolute;\r\n left: 50%;\r\n top: 40px;\r\n width: 78%;\r\n aspect-ratio: 1 \/ 1.08;\r\n transform: translateX(-50%);\r\n border-radius: 34px;\r\n overflow: hidden;\r\n background: #ffffff;\r\n border: 6px solid #ffc928;\r\n box-shadow: 0 22px 48px rgba(65, 22, 117, 0.18);\r\n }\r\n\r\n .mas-author-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n .mas-book-badge {\r\n position: absolute;\r\n right: -34px;\r\n bottom: 38px;\r\n width: 168px;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n border: 5px solid #ffffff;\r\n box-shadow:\r\n 0 22px 44px rgba(65, 22, 117, 0.28),\r\n 0 7px 0 #6b1dba;\r\n transform: rotate(5deg);\r\n animation: masBookFloat 3.4s ease-in-out infinite;\r\n }\r\n\r\n .mas-book-badge img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n @keyframes masBookFloat {\r\n 0%, 100% {\r\n transform: translateY(0) rotate(5deg);\r\n }\r\n\r\n 50% {\r\n transform: translateY(-10px) rotate(2deg);\r\n }\r\n }\r\n\r\n .mas-spark {\r\n position: absolute;\r\n width: 16px;\r\n height: 16px;\r\n background: #ffc928;\r\n clip-path: polygon(50% 0%, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0% 50%, 37% 36%);\r\n filter: drop-shadow(0 0 12px rgba(255, 201, 40, 0.9));\r\n animation: masSparkle 2.8s ease-in-out infinite;\r\n }\r\n\r\n .mas-spark-1 {\r\n left: 42px;\r\n top: 70px;\r\n }\r\n\r\n .mas-spark-2 {\r\n right: 48px;\r\n top: 105px;\r\n animation-delay: -0.9s;\r\n }\r\n\r\n .mas-spark-3 {\r\n left: 70px;\r\n bottom: 80px;\r\n animation-delay: -1.8s;\r\n }\r\n\r\n @keyframes masSparkle {\r\n 0%, 100% {\r\n transform: scale(0.65) rotate(0deg);\r\n opacity: 0.45;\r\n }\r\n\r\n 50% {\r\n transform: scale(1.25) rotate(35deg);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .mas-copy {\r\n position: relative;\r\n z-index: 3;\r\n }\r\n\r\n .mas-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 18px;\r\n padding: 10px 22px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 13px;\r\n font-weight: 900;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mas-copy h2 {\r\n margin: 0 0 18px;\r\n font-family: \"Luckiest Guy\", \"Fredoka\", Arial, sans-serif;\r\n font-size: clamp(44px, 5.4vw, 84px);\r\n line-height: 0.94;\r\n color: #ffc928;\r\n letter-spacing: 1px;\r\n text-shadow:\r\n 4px 4px 0 #6b1dba,\r\n 8px 8px 0 rgba(107, 29, 186, 0.2);\r\n }\r\n\r\n .mas-lead {\r\n max-width: 690px;\r\n margin: 0 0 14px;\r\n color: #4b207f;\r\n font-size: clamp(19px, 1.7vw, 25px);\r\n line-height: 1.45;\r\n font-weight: 900;\r\n }\r\n\r\n .mas-text {\r\n max-width: 720px;\r\n margin: 0 0 24px;\r\n color: #5b3a80;\r\n font-size: clamp(16px, 1.2vw, 19px);\r\n line-height: 1.7;\r\n font-weight: 650;\r\n }\r\n\r\n .mas-quote {\r\n position: relative;\r\n max-width: 720px;\r\n margin: 0 0 26px;\r\n padding: 24px 26px 24px 72px;\r\n border-radius: 28px;\r\n background: #ffffff;\r\n border: 4px solid rgba(255, 201, 40, 0.86);\r\n box-shadow: 0 18px 36px rgba(65, 22, 117, 0.1);\r\n }\r\n\r\n .mas-quote span {\r\n position: absolute;\r\n left: 22px;\r\n top: 7px;\r\n color: #ffc928;\r\n font-family: Georgia, serif;\r\n font-size: 76px;\r\n line-height: 1;\r\n text-shadow: 2px 2px 0 #6b1dba;\r\n }\r\n\r\n .mas-quote p {\r\n margin: 0;\r\n color: #6b1dba;\r\n font-size: 18px;\r\n line-height: 1.48;\r\n font-weight: 900;\r\n }\r\n\r\n .mas-author-cards {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 14px;\r\n margin: 0 0 30px;\r\n }\r\n\r\n .mas-mini-card {\r\n padding: 17px 16px;\r\n border-radius: 22px;\r\n background: #ffffff;\r\n border: 3px solid rgba(107, 29, 186, 0.12);\r\n box-shadow: 0 14px 28px rgba(65, 22, 117, 0.08);\r\n transition:\r\n transform 0.25s ease,\r\n box-shadow 0.25s ease,\r\n border-color 0.25s ease;\r\n }\r\n\r\n .mas-mini-card:hover {\r\n transform: translateY(-7px);\r\n border-color: #ffc928;\r\n box-shadow: 0 20px 38px rgba(65, 22, 117, 0.13);\r\n }\r\n\r\n .mas-mini-card strong {\r\n display: block;\r\n margin-bottom: 6px;\r\n color: #6b1dba;\r\n font-size: 16px;\r\n font-weight: 900;\r\n }\r\n\r\n .mas-mini-card p {\r\n margin: 0;\r\n color: #5b3a80;\r\n font-size: 14px;\r\n line-height: 1.35;\r\n font-weight: 700;\r\n }\r\n\r\n .mas-buttons {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 16px;\r\n }\r\n\r\n .mas-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 54px;\r\n padding: 0 28px;\r\n border-radius: 999px;\r\n text-decoration: none !important;\r\n font-size: 15px;\r\n font-weight: 900;\r\n transition:\r\n transform 0.25s ease,\r\n box-shadow 0.25s ease;\r\n }\r\n\r\n .mas-btn-primary {\r\n background: #6b1dba;\r\n color: #ffffff !important;\r\n box-shadow: 0 7px 0 #ffc928;\r\n }\r\n\r\n .mas-btn-secondary {\r\n background: #ffc928;\r\n color: #6b1dba !important;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mas-btn:hover {\r\n transform: translateY(-4px);\r\n }\r\n\r\n .mas-btn-primary:hover {\r\n box-shadow: 0 11px 0 #ffc928;\r\n }\r\n\r\n .mas-btn-secondary:hover {\r\n box-shadow: 0 11px 0 #6b1dba;\r\n }\r\n\r\n [data-mas-reveal] {\r\n opacity: 0;\r\n transform: translateY(28px);\r\n transition:\r\n opacity 0.72s ease,\r\n transform 0.72s cubic-bezier(.18, 1, .28, 1);\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal] {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(1) {\r\n transition-delay: 0.05s;\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(2) {\r\n transition-delay: 0.14s;\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(3) {\r\n transition-delay: 0.22s;\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(4) {\r\n transition-delay: 0.3s;\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(5) {\r\n transition-delay: 0.38s;\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(6) {\r\n transition-delay: 0.46s;\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(7) {\r\n transition-delay: 0.54s;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .maven-author-section {\r\n padding: 78px 22px 92px;\r\n }\r\n\r\n .mas-container {\r\n grid-template-columns: 1fr;\r\n gap: 48px;\r\n }\r\n\r\n .mas-copy {\r\n text-align: center;\r\n }\r\n\r\n .mas-lead,\r\n .mas-text,\r\n .mas-quote {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .mas-author-cards {\r\n max-width: 760px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .mas-buttons {\r\n justify-content: center;\r\n }\r\n\r\n .mas-visual {\r\n order: 2;\r\n min-height: 570px;\r\n }\r\n\r\n .mas-copy {\r\n order: 1;\r\n }\r\n }\r\n\r\n @media (max-width: 760px) {\r\n .maven-author-section {\r\n padding: 66px 18px 80px;\r\n }\r\n\r\n .mas-copy h2 {\r\n font-size: clamp(38px, 12vw, 60px);\r\n }\r\n\r\n .mas-visual {\r\n min-height: 530px;\r\n }\r\n\r\n .mas-photo-card {\r\n width: min(370px, 88vw);\r\n min-height: 505px;\r\n border-radius: 34px;\r\n }\r\n\r\n .mas-photo-frame {\r\n top: 34px;\r\n width: 78%;\r\n border-radius: 28px;\r\n }\r\n\r\n .mas-book-badge {\r\n width: 132px;\r\n right: -8px;\r\n bottom: 36px;\r\n }\r\n\r\n .mas-author-cards {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .mas-quote {\r\n padding: 22px 22px 22px 60px;\r\n text-align: left;\r\n }\r\n\r\n .mas-quote span {\r\n left: 18px;\r\n top: 8px;\r\n font-size: 64px;\r\n }\r\n\r\n .mas-quote p {\r\n font-size: 16px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .maven-author-section {\r\n padding: 58px 16px 70px;\r\n }\r\n\r\n .mas-kicker {\r\n font-size: 11px;\r\n padding: 9px 16px;\r\n }\r\n\r\n .mas-visual {\r\n min-height: 485px;\r\n }\r\n\r\n .mas-photo-card {\r\n min-height: 460px;\r\n }\r\n\r\n .mas-book-badge {\r\n width: 112px;\r\n bottom: 28px;\r\n }\r\n\r\n .mas-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .mas-btn {\r\n width: min(280px, 100%);\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .mas-book-badge,\r\n .mas-spark,\r\n [data-mas-reveal] {\r\n animation: none !important;\r\n transition: none !important;\r\n opacity: 1;\r\n transform: none;\r\n }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n (function () {\r\n function initMavenAuthorSection() {\r\n const sections = document.querySelectorAll(\".maven-author-section:not([data-mas-ready='true'])\");\r\n\r\n sections.forEach(function (section) {\r\n section.setAttribute(\"data-mas-ready\", \"true\");\r\n\r\n const visualArea = section.querySelector(\"#masVisualArea\");\r\n const photoCard = section.querySelector(\".mas-photo-card\");\r\n\r\n const observer = new IntersectionObserver(\r\n function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n section.classList.add(\"mas-in-view\");\r\n }\r\n });\r\n },\r\n { threshold: 0.25 }\r\n );\r\n\r\n observer.observe(section);\r\n\r\n if (visualArea && photoCard) {\r\n visualArea.addEventListener(\"mousemove\", function (event) {\r\n const rect = visualArea.getBoundingClientRect();\r\n const x = (event.clientX - rect.left) \/ rect.width - 0.5;\r\n const y = (event.clientY - rect.top) \/ rect.height - 0.5;\r\n\r\n photoCard.style.transform =\r\n \"perspective(1000px) rotateY(\" +\r\n (-4 + x * 8) +\r\n \"deg) rotateX(\" +\r\n (2 + y * -8) +\r\n \"deg)\";\r\n });\r\n\r\n visualArea.addEventListener(\"mouseleave\", function () {\r\n photoCard.style.transform =\r\n \"perspective(1000px) rotateY(-4deg) rotateX(2deg)\";\r\n });\r\n }\r\n });\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", initMavenAuthorSection);\r\n } else {\r\n initMavenAuthorSection();\r\n }\r\n\r\n window.addEventListener(\"load\", initMavenAuthorSection);\r\n setTimeout(initMavenAuthorSection, 300);\r\n setTimeout(initMavenAuthorSection, 1000);\r\n\r\n if (window.elementorFrontend && window.elementorFrontend.hooks) {\r\n window.elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function () {\r\n initMavenAuthorSection();\r\n });\r\n }\r\n })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-531bdb0 e-con-full e-flex e-con e-parent\" data-id=\"531bdb0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b8094d elementor-widget elementor-widget-html\" data-id=\"3b8094d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"maven-final-cta\" id=\"mavenFinalCTA\">\r\n <div class=\"mfc-container\">\r\n \r\n <div class=\"mfc-copy\">\r\n <span class=\"mfc-kicker\" data-mfc-reveal>Bring Maven Home<\/span>\r\n\r\n <h2 data-mfc-reveal>\r\n A Little Story<br \/>\r\n With Big Courage\r\n <\/h2>\r\n\r\n <p class=\"mfc-lead\" data-mfc-reveal>\r\n Join Maven on a heartwarming journey that reminds every child they are brave,\r\n special, and capable of shining in their own way.\r\n <\/p>\r\n\r\n <div class=\"mfc-points\" data-mfc-reveal>\r\n <div class=\"mfc-point\">\r\n <span>\u2726<\/span>\r\n <p>Perfect for bedtime reading<\/p>\r\n <\/div>\r\n\r\n <div class=\"mfc-point\">\r\n <span>\u2726<\/span>\r\n <p>Encourages confidence and self-belief<\/p>\r\n <\/div>\r\n\r\n <div class=\"mfc-point\">\r\n <span>\u2726<\/span>\r\n <p>A gentle story for little hearts<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mfc-buttons\" data-mfc-reveal>\r\n <a href=\"#\" class=\"mfc-btn mfc-btn-primary\">Buy the Book<\/a>\r\n <a href=\"#\" class=\"mfc-btn mfc-btn-secondary\">Preview the Story<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mfc-visual\" id=\"mfcVisualArea\">\r\n <div class=\"mfc-book-wrap\">\r\n <div class=\"mfc-book-glow\"><\/div>\r\n\r\n <div class=\"mfc-book-card\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/monica-book-mokcup.png\"\r\n alt=\"Maven Small Mouse Big Courage Book Cover\"\r\n class=\"mfc-book-img\"\r\n \/>\r\n <\/div>\r\n\r\n <div class=\"mfc-message-bubble\">\r\n <strong>Even the tiniest mouse<\/strong>\r\n <span>can do brave things.<\/span>\r\n <\/div>\r\n\r\n <span class=\"mfc-spark mfc-spark-1\"><\/span>\r\n <span class=\"mfc-spark mfc-spark-2\"><\/span>\r\n <span class=\"mfc-spark mfc-spark-3\"><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800;900&family=Luckiest+Guy&display=swap\");\r\n\r\n .maven-final-cta {\r\n position: relative;\r\n overflow: hidden;\r\n padding: 95px 6% 105px;\r\n background: #fff8d6;\r\n font-family: \"Fredoka\", Arial, sans-serif;\r\n }\r\n\r\n .mfc-container {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1.05fr 0.95fr;\r\n gap: 70px;\r\n align-items: center;\r\n }\r\n\r\n .mfc-copy {\r\n position: relative;\r\n z-index: 4;\r\n }\r\n\r\n .mfc-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 18px;\r\n padding: 10px 22px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 13px;\r\n font-weight: 900;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mfc-copy h2 {\r\n margin: 0 0 20px;\r\n font-family: \"Luckiest Guy\", \"Fredoka\", Arial, sans-serif;\r\n font-size: clamp(46px, 5.7vw, 92px);\r\n line-height: 0.92;\r\n color: #ffc928;\r\n letter-spacing: 1px;\r\n text-shadow:\r\n 4px 4px 0 #6b1dba,\r\n 8px 8px 0 rgba(107, 29, 186, 0.22);\r\n }\r\n\r\n .mfc-lead {\r\n max-width: 700px;\r\n margin: 0 0 28px;\r\n color: #4b207f;\r\n font-size: clamp(18px, 1.55vw, 24px);\r\n line-height: 1.55;\r\n font-weight: 800;\r\n }\r\n\r\n .mfc-points {\r\n display: grid;\r\n gap: 13px;\r\n max-width: 620px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n .mfc-point {\r\n display: flex;\r\n align-items: center;\r\n gap: 13px;\r\n padding: 15px 18px;\r\n border-radius: 999px;\r\n background: #ffffff;\r\n border: 3px solid rgba(255, 201, 40, 0.85);\r\n box-shadow: 0 12px 26px rgba(65, 22, 117, 0.08);\r\n transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n }\r\n\r\n .mfc-point:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 18px 34px rgba(65, 22, 117, 0.13);\r\n }\r\n\r\n .mfc-point span {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 34px;\r\n height: 34px;\r\n flex: 0 0 34px;\r\n border-radius: 50%;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 17px;\r\n font-weight: 900;\r\n box-shadow: 0 4px 0 #6b1dba;\r\n }\r\n\r\n .mfc-point p {\r\n margin: 0;\r\n color: #5b3a80;\r\n font-size: 16px;\r\n line-height: 1.35;\r\n font-weight: 800;\r\n }\r\n\r\n .mfc-buttons {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 16px;\r\n }\r\n\r\n .mfc-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 56px;\r\n padding: 0 32px;\r\n border-radius: 999px;\r\n text-decoration: none !important;\r\n font-size: 16px;\r\n font-weight: 900;\r\n transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n }\r\n\r\n .mfc-btn-primary {\r\n background: #6b1dba !important;\r\n color: #ffffff !important;\r\n box-shadow: 0 8px 0 #ffc928;\r\n }\r\n\r\n .mfc-btn-secondary {\r\n background: #ffc928;\r\n color: #6b1dba;\r\n box-shadow: 0 8px 0 #6b1dba;\r\n }\r\n\r\n .mfc-btn:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n .mfc-btn-primary:hover {\r\n box-shadow: 0 12px 0 #ffc928;\r\n }\r\n\r\n .mfc-btn-secondary:hover {\r\n box-shadow: 0 12px 0 #6b1dba;\r\n }\r\n\r\n .mfc-visual {\r\n position: relative;\r\n min-height: 620px;\r\n display: grid;\r\n place-items: center;\r\n perspective: 1300px;\r\n }\r\n\r\n .mfc-book-wrap {\r\n position: relative;\r\n width: min(430px, 78vw);\r\n min-height: 580px;\r\n display: grid;\r\n place-items: center;\r\n }\r\n\r\n .mfc-book-glow {\r\n position: absolute;\r\n width: 430px;\r\n height: 430px;\r\n max-width: 90vw;\r\n max-height: 90vw;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255, 201, 40, 0.36), transparent 66%);\r\n animation: mfcGlowPulse 3.6s ease-in-out infinite;\r\n }\r\n\r\n @keyframes mfcGlowPulse {\r\n 0%, 100% {\r\n transform: scale(0.95);\r\n opacity: 0.7;\r\n }\r\n\r\n 50% {\r\n transform: scale(1.08);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .mfc-book-card {\r\n position: relative;\r\n z-index: 4;\r\n width: min(435px, 70vw);\r\n border-radius: 24px;\r\n overflow: hidden;\r\n border: 7px solid #ffffff;\r\n background: #ffffff;\r\n box-shadow:\r\n 0 38px 80px rgba(65, 22, 117, 0.28),\r\n 0 10px 0 rgba(107, 29, 186, 0.22);\r\n transform:\r\n perspective(1000px)\r\n rotateY(-12deg)\r\n rotateX(4deg)\r\n translateY(20px)\r\n scale(0.92);\r\n opacity: 0;\r\n transition:\r\n opacity 0.8s ease,\r\n transform 1s cubic-bezier(.18, 1.05, .28, 1);\r\n }\r\n\r\n .maven-final-cta.mfc-in-view .mfc-book-card {\r\n opacity: 1;\r\n transform:\r\n perspective(1000px)\r\n rotateY(-8deg)\r\n rotateX(3deg)\r\n translateY(0)\r\n scale(1);\r\n }\r\n\r\n .mfc-book-card::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 115deg,\r\n transparent 0%,\r\n transparent 36%,\r\n rgba(255, 255, 255, 0.42) 48%,\r\n transparent 62%,\r\n transparent 100%\r\n );\r\n transform: translateX(-130%);\r\n animation: mfcCoverShine 4.2s ease-in-out infinite;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes mfcCoverShine {\r\n 0%, 55% {\r\n transform: translateX(-130%);\r\n }\r\n\r\n 80%, 100% {\r\n transform: translateX(130%);\r\n }\r\n }\r\n\r\n .mfc-book-img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n .mfc-message-bubble {\r\n position: absolute;\r\n z-index: 6;\r\n right: -18px;\r\n bottom: 72px;\r\n width: 245px;\r\n padding: 18px 20px;\r\n border-radius: 26px;\r\n background: #ffffff;\r\n border: 4px solid #ffc928;\r\n box-shadow:\r\n 0 22px 44px rgba(65, 22, 117, 0.18),\r\n 0 6px 0 #6b1dba;\r\n transform: rotate(4deg) translateY(24px);\r\n opacity: 0;\r\n transition:\r\n opacity 0.75s ease 0.28s,\r\n transform 0.75s cubic-bezier(.18, 1.25, .28, 1) 0.28s;\r\n }\r\n\r\n .maven-final-cta.mfc-in-view .mfc-message-bubble {\r\n opacity: 1;\r\n transform: rotate(4deg) translateY(0);\r\n }\r\n\r\n .mfc-message-bubble strong {\r\n display: block;\r\n margin-bottom: 4px;\r\n color: #6b1dba;\r\n font-size: 19px;\r\n line-height: 1.1;\r\n font-weight: 900;\r\n }\r\n\r\n .mfc-message-bubble span {\r\n display: block;\r\n color: #5b3a80;\r\n font-size: 15px;\r\n line-height: 1.3;\r\n font-weight: 800;\r\n }\r\n\r\n .mfc-spark {\r\n position: absolute;\r\n z-index: 8;\r\n width: 16px;\r\n height: 16px;\r\n background: #ffc928;\r\n clip-path: polygon(50% 0%, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0% 50%, 37% 36%);\r\n filter: drop-shadow(0 0 12px rgba(255, 201, 40, 0.9));\r\n animation: mfcSparkle 2.7s ease-in-out infinite;\r\n }\r\n\r\n .mfc-spark-1 {\r\n left: 38px;\r\n top: 88px;\r\n }\r\n\r\n .mfc-spark-2 {\r\n right: 44px;\r\n top: 118px;\r\n animation-delay: -0.9s;\r\n }\r\n\r\n .mfc-spark-3 {\r\n left: 78px;\r\n bottom: 100px;\r\n animation-delay: -1.8s;\r\n }\r\n\r\n @keyframes mfcSparkle {\r\n 0%, 100% {\r\n transform: scale(0.65) rotate(0deg);\r\n opacity: 0.45;\r\n }\r\n\r\n 50% {\r\n transform: scale(1.25) rotate(35deg);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n [data-mfc-reveal] {\r\n opacity: 0;\r\n transform: translateY(28px);\r\n transition:\r\n opacity 0.72s ease,\r\n transform 0.72s cubic-bezier(.18, 1, .28, 1);\r\n }\r\n\r\n .maven-final-cta.mfc-in-view [data-mfc-reveal] {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .maven-final-cta.mfc-in-view [data-mfc-reveal]:nth-child(1) {\r\n transition-delay: 0.05s;\r\n }\r\n\r\n .maven-final-cta.mfc-in-view [data-mfc-reveal]:nth-child(2) {\r\n transition-delay: 0.14s;\r\n }\r\n\r\n .maven-final-cta.mfc-in-view [data-mfc-reveal]:nth-child(3) {\r\n transition-delay: 0.22s;\r\n }\r\n\r\n .maven-final-cta.mfc-in-view [data-mfc-reveal]:nth-child(4) {\r\n transition-delay: 0.3s;\r\n }\r\n\r\n .maven-final-cta.mfc-in-view [data-mfc-reveal]:nth-child(5) {\r\n transition-delay: 0.38s;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .maven-final-cta {\r\n padding: 78px 22px 92px;\r\n }\r\n\r\n .mfc-container {\r\n grid-template-columns: 1fr;\r\n gap: 48px;\r\n }\r\n\r\n .mfc-copy {\r\n text-align: center;\r\n }\r\n\r\n .mfc-lead,\r\n .mfc-points {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .mfc-buttons {\r\n justify-content: center;\r\n }\r\n\r\n .mfc-visual {\r\n min-height: 560px;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .maven-final-cta {\r\n padding: 66px 18px 80px;\r\n }\r\n\r\n .mfc-copy h2 {\r\n font-size: clamp(38px, 12vw, 60px);\r\n }\r\n\r\n .mfc-lead {\r\n font-size: 17px;\r\n }\r\n\r\n .mfc-point {\r\n border-radius: 22px;\r\n align-items: flex-start;\r\n }\r\n\r\n .mfc-visual {\r\n min-height: 520px;\r\n }\r\n\r\n .mfc-book-wrap {\r\n min-height: 500px;\r\n }\r\n\r\n .mfc-book-card {\r\n width: min(290px, 70vw);\r\n }\r\n\r\n .mfc-message-bubble {\r\n right: 50%;\r\n bottom: 28px;\r\n width: min(260px, 82vw);\r\n transform: translateX(50%) rotate(2deg) translateY(24px);\r\n text-align: center;\r\n }\r\n\r\n .maven-final-cta.mfc-in-view .mfc-message-bubble {\r\n transform: translateX(50%) rotate(2deg) translateY(0);\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .maven-final-cta {\r\n padding: 58px 16px 70px;\r\n }\r\n\r\n .mfc-kicker {\r\n font-size: 11px;\r\n padding: 9px 16px;\r\n }\r\n\r\n .mfc-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .mfc-btn {\r\n width: min(280px, 100%);\r\n }\r\n\r\n .mfc-visual {\r\n min-height: 480px;\r\n }\r\n\r\n .mfc-book-wrap {\r\n min-height: 460px;\r\n }\r\n\r\n .mfc-book-card {\r\n width: min(260px, 72vw);\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .mfc-book-card,\r\n .mfc-book-card::after,\r\n .mfc-book-glow,\r\n .mfc-spark,\r\n .mfc-message-bubble,\r\n [data-mfc-reveal] {\r\n animation: none !important;\r\n transition: none !important;\r\n opacity: 1;\r\n transform: none !important;\r\n }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n (function () {\r\n function initMavenFinalCTA() {\r\n const sections = document.querySelectorAll(\".maven-final-cta:not([data-mfc-ready='true'])\");\r\n\r\n sections.forEach(function (section) {\r\n section.setAttribute(\"data-mfc-ready\", \"true\");\r\n\r\n const visualArea = section.querySelector(\"#mfcVisualArea\");\r\n const bookCard = section.querySelector(\".mfc-book-card\");\r\n\r\n const observer = new IntersectionObserver(\r\n function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n section.classList.add(\"mfc-in-view\");\r\n }\r\n });\r\n },\r\n { threshold: 0.28 }\r\n );\r\n\r\n observer.observe(section);\r\n\r\n if (visualArea && bookCard) {\r\n visualArea.addEventListener(\"mousemove\", function (event) {\r\n const rect = visualArea.getBoundingClientRect();\r\n const x = (event.clientX - rect.left) \/ rect.width - 0.5;\r\n const y = (event.clientY - rect.top) \/ rect.height - 0.5;\r\n\r\n bookCard.style.transform =\r\n \"perspective(1000px) rotateY(\" +\r\n (-8 + x * 12) +\r\n \"deg) rotateX(\" +\r\n (3 + y * -8) +\r\n \"deg) translateY(-8px) scale(1.025)\";\r\n });\r\n\r\n visualArea.addEventListener(\"mouseleave\", function () {\r\n if (section.classList.contains(\"mfc-in-view\")) {\r\n bookCard.style.transform =\r\n \"perspective(1000px) rotateY(-8deg) rotateX(3deg) translateY(0) scale(1)\";\r\n }\r\n });\r\n }\r\n });\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", initMavenFinalCTA);\r\n } else {\r\n initMavenFinalCTA();\r\n }\r\n\r\n window.addEventListener(\"load\", initMavenFinalCTA);\r\n setTimeout(initMavenFinalCTA, 300);\r\n setTimeout(initMavenFinalCTA, 1000);\r\n\r\n if (window.elementorFrontend && window.elementorFrontend.hooks) {\r\n window.elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function () {\r\n initMavenFinalCTA();\r\n });\r\n }\r\n })();\r\n<\/script>\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>Maven Hero Section A Magical Children\u2019s Book Maven Small Mouse. Big Courage. Join Maven as she rides through a peaceful […]<\/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-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":82,"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":118,"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/118"}],"wp:attachment":[{"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Maven Hero Section<\/title>\n\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: auto;\n }\n\n body {\n font-family: \"Montserrat\", Arial, sans-serif;\n background: #55c7f7;\n overflow-x: hidden;\n }\n\n .maven-hero-wrapper {\n position: relative;\n height: 320vh;\n background: #55c7f7;\n }\n\n .maven-hero {\n position: sticky;\n top: 0;\n width: 100%;\n height: 100vh;\n height: 100svh;\n overflow: hidden;\n background: #55c7f7;\n }\n\n .maven-hero-video {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center center;\n z-index: 1;\n background: #55c7f7;\n }\n\n .hero-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n pointer-events: none;\n background: linear-gradient(\n 90deg,\n rgba(33, 8, 74, 0.58) 0%,\n rgba(33, 8, 74, 0.25) 38%,\n rgba(33, 8, 74, 0.04) 72%\n );\n }\n\n .hero-content {\n position: relative;\n z-index: 3;\n height: 100%;\n display: flex;\n align-items: center;\n padding: 0 7%;\n max-width: 1500px;\n margin: 0 auto;\n pointer-events: none;\n }\n\n .hero-copy {\n max-width: 590px;\n color: #ffffff;\n transform: translateY(40px);\n opacity: 0;\n transition: opacity 0.9s ease, transform 0.9s ease;\n }\n\n .hero-copy.show {\n transform: translateY(0);\n opacity: 1;\n }\n\n .eyebrow {\n display: inline-block;\n margin-bottom: 18px;\n padding: 9px 18px;\n border-radius: 999px;\n background: rgba(255, 201, 40, 0.96);\n color: #6b1dba;\n font-weight: 900;\n letter-spacing: 1px;\n text-transform: uppercase;\n box-shadow: 0 5px 0 #6b1dba;\n }\n\n .hero-title {\n font-size: clamp(64px, 10vw, 145px);\n line-height: 0.82;\n font-weight: 900;\n color: #ffc928;\n letter-spacing: 1px;\n text-shadow:\n 4px 4px 0 #6b1dba,\n 7px 7px 0 rgba(70, 22, 128, 0.45);\n margin-bottom: 24px;\n transform: rotate(-3deg);\n transform-origin: left center;\n }\n\n .hero-subtitle {\n font-size: clamp(28px, 4vw, 58px);\n line-height: 1;\n font-weight: 900;\n color: #ffffff;\n text-transform: uppercase;\n text-shadow:\n 3px 3px 0 #6b1dba,\n 5px 5px 0 rgba(70, 22, 128, 0.35);\n margin-bottom: 22px;\n }\n\n .hero-description {\n font-size: clamp(17px, 1.5vw, 22px);\n line-height: 1.7;\n color: #fff8d6;\n max-width: 530px;\n margin-bottom: 34px;\n text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);\n }\n\n .hero-buttons {\n display: flex;\n gap: 18px;\n flex-wrap: wrap;\n pointer-events: auto;\n }\n\n .hero-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 56px;\n padding: 0 28px;\n border-radius: 999px;\n text-decoration: none;\n font-weight: 900;\n font-size: 16px;\n letter-spacing: 0.4px;\n transition: transform 0.25s ease;\n text-decoration: none !important;\n }\n\n .hero-btn.primary {\n background: #ffc928;\n color: #6b1dba;\n box-shadow: 0 6px 0 #6b1dba;\n }\n\n .hero-btn.secondary {\n background: #ffffff;\n color: #6b1dba;\n box-shadow: 0 6px 0 #c5c5c5;\n text-decoration: none !important;\n }\n\n .hero-btn:hover {\n transform: translateY(-4px);\n }\n\n .scroll-hint {\n position: absolute;\n z-index: 4;\n bottom: 28px;\n left: 50%;\n transform: translateX(-50%);\n color: #ffffff;\n font-weight: 900;\n font-size: 14px;\n letter-spacing: 1px;\n text-transform: uppercase;\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);\n transition: opacity 0.45s ease;\n animation: bounce 1.6s infinite;\n pointer-events: none;\n }\n\n @keyframes bounce {\n 0%, 100% {\n transform: translate(-50%, 0);\n }\n 50% {\n transform: translate(-50%, -10px);\n }\n }\n\n @media (max-width: 768px) {\n .maven-hero-wrapper {\n height: 280vh;\n }\n\n .maven-hero-video {\n object-position: center center;\n }\n\n .hero-overlay {\n background: linear-gradient(\n 0deg,\n rgba(33, 8, 74, 0.78) 0%,\n rgba(33, 8, 74, 0.32) 56%,\n rgba(33, 8, 74, 0.04) 100%\n );\n }\n\n .hero-content {\n align-items: flex-end;\n padding: 0 22px 105px;\n }\n\n .hero-copy {\n max-width: 100%;\n }\n\n .eyebrow {\n font-size: 12px;\n padding: 8px 14px;\n margin-bottom: 14px;\n }\n\n .hero-title {\n font-size: clamp(68px, 22vw, 98px);\n margin-bottom: 18px;\n }\n\n .hero-subtitle {\n font-size: clamp(30px, 9vw, 44px);\n margin-bottom: 16px;\n }\n\n .hero-description {\n font-size: 16px;\n line-height: 1.55;\n margin-bottom: 24px;\n }\n\n .hero-buttons {\n gap: 12px;\n }\n\n .hero-btn {\n min-height: 50px;\n padding: 0 21px;\n font-size: 14px;\n }\n\n .scroll-hint {\n bottom: 18px;\n font-size: 12px;\n }\n }\n\n @media (max-width: 480px) {\n .maven-hero-wrapper {\n height: 260vh;\n }\n\n .hero-content {\n padding-bottom: 92px;\n }\n\n .hero-buttons {\n flex-direction: column;\n align-items: flex-start;\n }\n\n .hero-btn {\n width: auto;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n\n <section class=\"maven-hero-wrapper\" id=\"mavenHeroWrapper\">\n <div class=\"maven-hero\">\n\n <video\n id=\"mavenHeroVideo\"\n class=\"maven-hero-video\"\n muted\n playsinline\n webkit-playsinline\n preload=\"auto\"\n data-desktop-src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/ezgif-6a02ae9068ba801c.mp4\"\n data-mobile-src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/Monica-Hero-Video-Mob.mp4\"\n data-desktop-poster=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/Monica-Hero-Thumbnail.png\"\n data-mobile-poster=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/Monica-Hero-Thumbnail-Mob.png\"\n ><\/video>\n\n <div class=\"hero-overlay\"><\/div>\n\n <div class=\"hero-content\">\n <div class=\"hero-copy\" id=\"heroCopy\">\n <span class=\"eyebrow\">A Magical Children\u2019s Book<\/span>\n\n <h1 class=\"hero-title\">Maven<\/h1>\n\n <h2 class=\"hero-subtitle\">\n Small Mouse.<br \/>\n Big Courage.\n <\/h2>\n\n <p class=\"hero-description\">\n Join Maven as she rides through a peaceful meadow and reminds every child\n that even the tiniest mouse can do brave things.\n <\/p>\n\n <div class=\"hero-buttons\">\n <a href=\"#\" class=\"hero-btn primary\">Buy the Book<\/a>\n <a href=\"#\" class=\"hero-btn secondary\">Explore Maven\u2019s World<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"scroll-hint\" id=\"scrollHint\">Scroll to Play<\/div>\n\n <\/div>\n <\/section>\n\n <script>\n const video = document.getElementById(\"mavenHeroVideo\");\n const wrapper = document.getElementById(\"mavenHeroWrapper\");\n const heroCopy = document.getElementById(\"heroCopy\");\n const scrollHint = document.getElementById(\"scrollHint\");\n\n const mobileQuery = window.matchMedia(\"(max-width: 768px)\");\n\n let videoDuration = 0;\n let targetTime = 0;\n let currentTime = 0;\n let isReady = false;\n let activeMode = null;\n let rafId = null;\n\n function getVideoConfig() {\n const isMobile = mobileQuery.matches;\n\n return {\n mode: isMobile ? \"mobile\" : \"desktop\",\n src: isMobile ? video.dataset.mobileSrc : video.dataset.desktopSrc,\n poster: isMobile ? video.dataset.mobilePoster : video.dataset.desktopPoster\n };\n }\n\n function loadResponsiveVideo() {\n const config = getVideoConfig();\n\n if (activeMode === config.mode) return;\n\n activeMode = config.mode;\n isReady = false;\n videoDuration = 0;\n targetTime = 0;\n currentTime = 0;\n\n video.pause();\n video.removeAttribute(\"src\");\n video.setAttribute(\"poster\", config.poster);\n video.src = config.src;\n video.load();\n }\n\n function getScrollProgress() {\n const rect = wrapper.getBoundingClientRect();\n const scrollable = wrapper.offsetHeight - window.innerHeight;\n\n if (scrollable <= 0) return 0;\n\n return Math.min(Math.max(-rect.top \/ scrollable, 0), 1);\n }\n\n function updateVideoByScroll() {\n if (!isReady || !videoDuration) {\n rafId = requestAnimationFrame(updateVideoByScroll);\n return;\n }\n\n const progress = getScrollProgress();\n\n targetTime = progress * videoDuration;\n\n currentTime += (targetTime - currentTime) * 0.18;\n\n if (Math.abs(video.currentTime - currentTime) > 0.09) {\n try {\n video.currentTime = currentTime;\n } catch (error) {}\n }\n\n if (progress > 0.68) {\n heroCopy.classList.add(\"show\");\n scrollHint.style.opacity = \"0\";\n } else {\n heroCopy.classList.remove(\"show\");\n scrollHint.style.opacity = \"1\";\n }\n\n rafId = requestAnimationFrame(updateVideoByScroll);\n }\n\n video.addEventListener(\"loadedmetadata\", () => {\n videoDuration = video.duration || 0;\n isReady = true;\n\n const progress = getScrollProgress();\n currentTime = progress * videoDuration;\n targetTime = currentTime;\n\n try {\n video.currentTime = Math.max(0.01, currentTime);\n } catch (error) {}\n });\n\n function unlockVideoForMobile() {\n video.play()\n .then(() => {\n video.pause();\n try {\n video.currentTime = 0.01;\n } catch (error) {}\n })\n .catch(() => {});\n\n window.removeEventListener(\"touchstart\", unlockVideoForMobile);\n window.removeEventListener(\"click\", unlockVideoForMobile);\n }\n\n window.addEventListener(\"touchstart\", unlockVideoForMobile, { once: true });\n window.addEventListener(\"click\", unlockVideoForMobile, { once: true });\n\n mobileQuery.addEventListener(\"change\", () => {\n loadResponsiveVideo();\n });\n\n window.addEventListener(\"resize\", () => {\n loadResponsiveVideo();\n });\n\n window.addEventListener(\"load\", () => {\n loadResponsiveVideo();\n\n if (!rafId) {\n updateVideoByScroll();\n }\n });\n\n loadResponsiveVideo();\n updateVideoByScroll();\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4097f33 e-con-full e-flex e-con e-parent\" data-id=\"4097f33\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-14ca05c elementor-widget elementor-widget-html\" data-id=\"14ca05c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"maven-heart-section\" id=\"mavenHeartSection\">\r\n <div class=\"mh-bg-orb mh-orb-1\"><\/div>\r\n <div class=\"mh-bg-orb mh-orb-2\"><\/div>\r\n <div class=\"mh-bg-orb mh-orb-3\"><\/div>\r\n\r\n <div class=\"mh-container\">\r\n <div class=\"mh-left\">\r\n <span class=\"mh-kicker\" data-mh-reveal>A Story With a Big Message<\/span>\r\n\r\n <h2 class=\"mh-title\" data-mh-reveal>\r\n The Heart Behind<br \/>\r\n Maven\u2019s Story\r\n <\/h2>\r\n\r\n <p class=\"mh-lead\" data-mh-reveal>\r\n Maven\u2019s journey is more than a playful meadow adventure. It is a gentle\r\n reminder for every child who has ever felt too small, too shy, too nervous,\r\n or too different.\r\n <\/p>\r\n\r\n <p class=\"mh-text\" data-mh-reveal>\r\n Through friendship, family love, school-day challenges, and brave little\r\n moments, Maven learns that courage does not always have to be loud.\r\n Sometimes courage is simply taking one tiny step forward.\r\n <\/p>\r\n\r\n <div class=\"mh-progress-wrap\" data-mh-reveal>\r\n <div class=\"mh-progress-label\">\r\n <span>Tiny Steps<\/span>\r\n <span>Big Courage<\/span>\r\n <\/div>\r\n <div class=\"mh-progress-track\">\r\n <div class=\"mh-progress-fill\" id=\"mhProgressFill\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"#mavenAdventures\" class=\"mh-button\" data-mh-reveal>\r\n Discover Maven\u2019s Message\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"mh-right\" id=\"mhVisualArea\">\r\n <div class=\"mh-visual-card\">\r\n <div class=\"mh-soft-glow\"><\/div>\r\n\r\n <div class=\"mh-maven-wrap\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/Maven-1.png\"\r\n alt=\"Maven the Mouse\"\r\n class=\"mh-maven-img\"\r\n \/>\r\n <\/div>\r\n\r\n <div class=\"mh-mini-card mh-card-1\">\r\n <h3>Courage<\/h3>\r\n <p>Trying again, even when the world feels big.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mh-mini-card mh-card-2\">\r\n <h3>Friendship<\/h3>\r\n <p>Letting others walk beside you when things feel hard.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mh-mini-card mh-card-3\">\r\n <h3>Confidence<\/h3>\r\n <p>Learning that your size does not decide your worth.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mh-mini-card mh-card-4\">\r\n <h3>Self-Belief<\/h3>\r\n <p>Discovering that you can shine in your own way.<\/p>\r\n <\/div>\r\n\r\n <span class=\"mh-spark mh-spark-1\"><\/span>\r\n <span class=\"mh-spark mh-spark-2\"><\/span>\r\n <span class=\"mh-spark mh-spark-3\"><\/span>\r\n <span class=\"mh-spark mh-spark-4\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800;900&family=Luckiest+Guy&display=swap\");\r\n\r\n .maven-heart-section {\r\n position: relative;\r\n overflow: hidden;\r\n padding: 80px 6% 85px;\r\n background:\r\n radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.9), transparent 18%),\r\n radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.65), transparent 20%),\r\n linear-gradient(180deg, #55c7f7 0%, #8ee5ff 42%, #fff8d6 100%);\r\n font-family: \"Fredoka\", Arial, sans-serif;\r\n }\r\n\r\n .mh-container {\r\n position: relative;\r\n z-index: 3;\r\n max-width: 1340px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 0.95fr 1.05fr;\r\n align-items: center;\r\n gap: 46px;\r\n }\r\n\r\n .mh-left {\r\n position: relative;\r\n z-index: 5;\r\n }\r\n\r\n .mh-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 16px;\r\n padding: 10px 20px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 13px;\r\n font-weight: 900;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mh-title {\r\n margin: 0 0 18px;\r\n font-family: \"Luckiest Guy\", \"Fredoka\", Arial, sans-serif;\r\n font-size: clamp(46px, 5.4vw, 82px);\r\n line-height: 0.92;\r\n color: #ffc928;\r\n letter-spacing: 1px;\r\n text-shadow:\r\n 4px 4px 0 #6b1dba,\r\n 8px 8px 0 rgba(107, 29, 186, 0.24);\r\n }\r\n\r\n .mh-lead {\r\n max-width: 690px;\r\n margin: 0 0 16px;\r\n font-size: clamp(18px, 1.55vw, 23px);\r\n line-height: 1.45;\r\n color: #4b207f;\r\n font-weight: 800;\r\n }\r\n\r\n .mh-text {\r\n max-width: 640px;\r\n margin: 0 0 24px;\r\n font-size: clamp(16px, 1.15vw, 18px);\r\n line-height: 1.65;\r\n color: #5b3a80;\r\n font-weight: 600;\r\n }\r\n\r\n .mh-progress-wrap {\r\n max-width: 560px;\r\n margin: 0 0 28px;\r\n }\r\n\r\n .mh-progress-label {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 10px;\r\n color: #6b1dba;\r\n font-size: 14px;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n }\r\n\r\n .mh-progress-track {\r\n position: relative;\r\n width: 100%;\r\n height: 14px;\r\n border-radius: 999px;\r\n background: rgba(107, 29, 186, 0.14);\r\n overflow: hidden;\r\n box-shadow: inset 0 2px 5px rgba(72, 31, 112, 0.16);\r\n }\r\n\r\n .mh-progress-fill {\r\n width: 0%;\r\n height: 100%;\r\n border-radius: inherit;\r\n background: linear-gradient(90deg, #ffc928, #f28b22, #ffc928);\r\n box-shadow: 0 0 22px rgba(255, 201, 40, 0.75);\r\n transition: width 0.1s linear;\r\n }\r\n\r\n .mh-button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 52px;\r\n padding: 0 28px;\r\n border-radius: 999px;\r\n background: #6b1dba;\r\n color: #ffffff !important;\r\n text-decoration: none !important;\r\n font-size: 15px;\r\n font-weight: 900;\r\n box-shadow: 0 8px 0 #4c0097;\r\n transition: transform 0.25s ease, box-shadow 0.25s ease !important;\r\n }\r\n\r\n .mh-button:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 12px 0 #4c0097;\r\n }\r\n\r\n .mh-right {\r\n position: relative;\r\n min-height: 560px;\r\n }\r\n\r\n .mh-visual-card {\r\n position: relative;\r\n width: 100%;\r\n min-height: 560px;\r\n border-radius: 42px;\r\n overflow: hidden;\r\n background:\r\n radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.98), transparent 30%),\r\n linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 248, 214, 0.88));\r\n border: 8px solid rgba(255, 255, 255, 0.9);\r\n box-shadow:\r\n 0 35px 80px rgba(65, 22, 117, 0.24),\r\n inset 0 0 0 2px rgba(255, 255, 255, 0.55);\r\n transform: perspective(1100px) rotateY(0deg) rotateX(0deg);\r\n transition: transform 0.18s ease-out;\r\n }\r\n\r\n .mh-visual-card::before {\r\n content: \"\";\r\n position: absolute;\r\n left: -12%;\r\n right: -12%;\r\n bottom: -12%;\r\n height: 34%;\r\n background:\r\n radial-gradient(circle at 12% 40%, #ff78b7 0 9px, transparent 10px),\r\n radial-gradient(circle at 24% 62%, #ffffff 0 7px, transparent 8px),\r\n radial-gradient(circle at 38% 45%, #ffc928 0 8px, transparent 9px),\r\n radial-gradient(circle at 56% 66%, #a96bff 0 8px, transparent 9px),\r\n radial-gradient(circle at 73% 42%, #ff78b7 0 9px, transparent 10px),\r\n radial-gradient(circle at 88% 61%, #ffffff 0 7px, transparent 8px),\r\n linear-gradient(180deg, #94df5c, #4fae45);\r\n border-radius: 50% 50% 0 0;\r\n opacity: 0.86;\r\n }\r\n\r\n .mh-soft-glow {\r\n position: absolute;\r\n left: 50%;\r\n top: 45%;\r\n width: 350px;\r\n height: 350px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255, 201, 40, 0.45), transparent 64%);\r\n transform: translate(-50%, -50%);\r\n animation: mhGlowPulse 3.8s ease-in-out infinite;\r\n }\r\n\r\n @keyframes mhGlowPulse {\r\n 0%, 100% {\r\n transform: translate(-50%, -50%) scale(0.95);\r\n opacity: 0.6;\r\n }\r\n\r\n 50% {\r\n transform: translate(-50%, -50%) scale(1.08);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .mh-maven-wrap {\r\n position: absolute;\r\n z-index: 5;\r\n left: 50%;\r\n bottom: 34px;\r\n width: min(74%, 500px);\r\n transform: translateX(-50%);\r\n filter: drop-shadow(0 28px 28px rgba(65, 22, 117, 0.25));\r\n z-index: 9;\r\n }\r\n\r\n .mh-maven-img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n transform-origin: center bottom;\r\n animation: mhMavenFloat 3.6s ease-in-out infinite;\r\n }\r\n\r\n @keyframes mhMavenFloat {\r\n 0%, 100% {\r\n transform: translateY(0) rotate(-1.5deg);\r\n }\r\n\r\n 50% {\r\n transform: translateY(-14px) rotate(1.5deg);\r\n }\r\n }\r\n\r\n .mh-mini-card {\r\n position: absolute;\r\n z-index: 7;\r\n width: 205px;\r\n padding: 15px 16px 16px;\r\n border-radius: 20px;\r\n background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 248, 214, 0.97));\r\n border: 4px solid #ffc928;\r\n box-shadow: 0 20px 44px rgba(65, 22, 117, 0.18);\r\n transition: transform 0.28s ease, box-shadow 0.28s ease;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .mh-mini-card:hover {\r\n transform: translateY(-10px) rotate(0deg) scale(1.03) !important;\r\n box-shadow: 0 28px 58px rgba(65, 22, 117, 0.24);\r\n }\r\n\r\n .mh-mini-card h3 {\r\n margin: 0 0 5px;\r\n color: #6b1dba;\r\n font-size: 19px;\r\n line-height: 1;\r\n font-weight: 900;\r\n }\r\n\r\n .mh-mini-card p {\r\n margin: 0;\r\n color: #5b3a80;\r\n font-size: 13px;\r\n line-height: 1.32;\r\n font-weight: 700;\r\n }\r\n\r\n .mh-card-1 {\r\n left: 5%;\r\n bottom: 13%;\r\n transform: rotate(-3deg);\r\n }\r\n\r\n .mh-card-2 {\r\n right: 4%;\r\n bottom: 14%;\r\n transform: rotate(3deg);\r\n }\r\n\r\n .mh-card-3 {\r\n left: 8%;\r\n top: 22%;\r\n transform: rotate(2deg);\r\n }\r\n\r\n .mh-card-4 {\r\n right: 7%;\r\n top: 30%;\r\n transform: rotate(-2deg);\r\n }\r\n\r\n .mh-spark {\r\n position: absolute;\r\n z-index: 6;\r\n width: 14px;\r\n height: 14px;\r\n background: #ffc928;\r\n clip-path: polygon(50% 0%, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0% 50%, 37% 36%);\r\n filter: drop-shadow(0 0 10px rgba(255, 201, 40, 0.9));\r\n animation: mhSparkle 2.8s ease-in-out infinite;\r\n }\r\n\r\n .mh-spark-1 {\r\n left: 28%;\r\n top: 18%;\r\n }\r\n\r\n .mh-spark-2 {\r\n right: 25%;\r\n top: 15%;\r\n animation-delay: -0.8s;\r\n }\r\n\r\n .mh-spark-3 {\r\n left: 22%;\r\n bottom: 36%;\r\n animation-delay: -1.6s;\r\n }\r\n\r\n .mh-spark-4 {\r\n right: 20%;\r\n bottom: 32%;\r\n animation-delay: -2.2s;\r\n }\r\n\r\n @keyframes mhSparkle {\r\n 0%, 100% {\r\n transform: scale(0.65) rotate(0deg);\r\n opacity: 0.45;\r\n }\r\n\r\n 50% {\r\n transform: scale(1.25) rotate(30deg);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .mh-bg-orb {\r\n position: absolute;\r\n z-index: 1;\r\n border-radius: 50%;\r\n pointer-events: none;\r\n opacity: 0.5;\r\n filter: blur(1px);\r\n animation: mhOrbFloat 8s ease-in-out infinite;\r\n }\r\n\r\n .mh-orb-1 {\r\n width: 145px;\r\n height: 145px;\r\n left: 6%;\r\n top: 13%;\r\n background: rgba(255, 201, 40, 0.35);\r\n }\r\n\r\n .mh-orb-2 {\r\n width: 100px;\r\n height: 100px;\r\n right: 10%;\r\n top: 12%;\r\n background: rgba(255, 255, 255, 0.65);\r\n animation-delay: -2s;\r\n }\r\n\r\n .mh-orb-3 {\r\n width: 190px;\r\n height: 190px;\r\n right: 3%;\r\n bottom: 8%;\r\n background: rgba(107, 29, 186, 0.13);\r\n animation-delay: -4s;\r\n }\r\n\r\n @keyframes mhOrbFloat {\r\n 0%, 100% {\r\n transform: translateY(0);\r\n }\r\n\r\n 50% {\r\n transform: translateY(-24px);\r\n }\r\n }\r\n\r\n [data-mh-reveal] {\r\n opacity: 0;\r\n transform: translateY(34px);\r\n transition:\r\n opacity 0.8s ease,\r\n transform 0.8s cubic-bezier(.2, .8, .2, 1);\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal] {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal]:nth-child(1) {\r\n transition-delay: 0.05s;\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal]:nth-child(2) {\r\n transition-delay: 0.12s;\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal]:nth-child(3) {\r\n transition-delay: 0.2s;\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal]:nth-child(4) {\r\n transition-delay: 0.28s;\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal]:nth-child(5) {\r\n transition-delay: 0.36s;\r\n }\r\n\r\n .maven-heart-section.mh-in-view [data-mh-reveal]:nth-child(6) {\r\n transition-delay: 0.44s;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .maven-heart-section {\r\n padding: 70px 22px 80px;\r\n }\r\n\r\n .mh-container {\r\n grid-template-columns: 1fr;\r\n gap: 38px;\r\n }\r\n\r\n .mh-left {\r\n text-align: center;\r\n }\r\n\r\n .mh-lead,\r\n .mh-text,\r\n .mh-progress-wrap {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .mh-right {\r\n min-height: 540px;\r\n }\r\n\r\n .mh-visual-card {\r\n min-height: 540px;\r\n }\r\n\r\n .mh-maven-wrap {\r\n width: min(68%, 420px);\r\n bottom: 28px;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .maven-heart-section {\r\n padding: 60px 18px 70px;\r\n }\r\n\r\n .mh-title {\r\n font-size: clamp(38px, 11vw, 58px);\r\n }\r\n\r\n .mh-lead {\r\n font-size: 17px;\r\n }\r\n\r\n .mh-text {\r\n font-size: 15px;\r\n }\r\n\r\n .mh-right {\r\n min-height: 620px;\r\n }\r\n\r\n .mh-visual-card {\r\n min-height: 620px;\r\n border-radius: 28px;\r\n border-width: 6px;\r\n }\r\n\r\n .mh-maven-wrap {\r\n width: min(82%, 350px);\r\n bottom: 120px;\r\n }\r\n\r\n .mh-mini-card {\r\n width: calc(50% - 18px);\r\n padding: 13px;\r\n }\r\n\r\n .mh-mini-card h3 {\r\n font-size: 16px;\r\n }\r\n\r\n .mh-mini-card p {\r\n font-size: 12px;\r\n }\r\n\r\n .mh-card-1 {\r\n left: 12px;\r\n bottom: 18px;\r\n transform: rotate(-2deg);\r\n }\r\n\r\n .mh-card-2 {\r\n right: 12px;\r\n bottom: 18px;\r\n transform: rotate(2deg);\r\n }\r\n\r\n .mh-card-3 {\r\n left: 12px;\r\n top: 18px;\r\n transform: rotate(2deg);\r\n }\r\n\r\n .mh-card-4 {\r\n right: 12px;\r\n top: 18px;\r\n transform: rotate(-2deg);\r\n }\r\n\r\n .mh-soft-glow {\r\n width: 280px;\r\n height: 280px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .maven-heart-section {\r\n padding: 54px 16px 64px;\r\n }\r\n\r\n .mh-title {\r\n font-size: clamp(34px, 12vw, 50px);\r\n }\r\n\r\n .mh-kicker {\r\n font-size: 11px;\r\n padding: 9px 16px;\r\n }\r\n\r\n .mh-button {\r\n min-height: 50px;\r\n padding: 0 22px;\r\n font-size: 14px;\r\n }\r\n\r\n .mh-right {\r\n min-height: 680px;\r\n }\r\n\r\n .mh-visual-card {\r\n min-height: 680px;\r\n }\r\n\r\n .mh-maven-wrap {\r\n width: min(92%, 330px);\r\n bottom: 150px;\r\n }\r\n\r\n .mh-mini-card {\r\n width: calc(50% - 14px);\r\n border-width: 3px;\r\n }\r\n\r\n .mh-mini-card p {\r\n font-size: 11.5px;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .mh-maven-img,\r\n .mh-soft-glow,\r\n .mh-spark,\r\n .mh-bg-orb {\r\n animation: none !important;\r\n }\r\n\r\n [data-mh-reveal] {\r\n transition: none;\r\n opacity: 1;\r\n transform: none;\r\n }\r\n\r\n .mh-visual-card {\r\n transition: none;\r\n }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n document.addEventListener(\"DOMContentLoaded\", function () {\r\n const section = document.getElementById(\"mavenHeartSection\");\r\n const progressFill = document.getElementById(\"mhProgressFill\");\r\n const visualArea = document.getElementById(\"mhVisualArea\");\r\n const visualCard = visualArea ? visualArea.querySelector(\".mh-visual-card\") : null;\r\n\r\n if (!section) return;\r\n\r\n const observer = new IntersectionObserver(\r\n function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n section.classList.add(\"mh-in-view\");\r\n }\r\n });\r\n },\r\n { threshold: 0.25 }\r\n );\r\n\r\n observer.observe(section);\r\n\r\n function clamp(value, min, max) {\r\n return Math.min(Math.max(value, min), max);\r\n }\r\n\r\n function updateProgress() {\r\n if (!progressFill) return;\r\n\r\n const rect = section.getBoundingClientRect();\r\n const total = rect.height + window.innerHeight;\r\n const current = window.innerHeight - rect.top;\r\n const progress = clamp(current \/ total, 0, 1);\r\n\r\n progressFill.style.width = Math.round(progress * 100) + \"%\";\r\n }\r\n\r\n window.addEventListener(\"scroll\", updateProgress, { passive: true });\r\n window.addEventListener(\"resize\", updateProgress);\r\n updateProgress();\r\n\r\n if (visualArea && visualCard) {\r\n visualArea.addEventListener(\"mousemove\", function (event) {\r\n const rect = visualArea.getBoundingClientRect();\r\n const x = (event.clientX - rect.left) \/ rect.width - 0.5;\r\n const y = (event.clientY - rect.top) \/ rect.height - 0.5;\r\n\r\n visualCard.style.transform =\r\n \"perspective(1100px) rotateY(\" +\r\n x * 4 +\r\n \"deg) rotateX(\" +\r\n y * -4 +\r\n \"deg)\";\r\n });\r\n\r\n visualArea.addEventListener(\"mouseleave\", function () {\r\n visualCard.style.transform =\r\n \"perspective(1100px) rotateY(0deg) rotateX(0deg)\";\r\n });\r\n }\r\n });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7df4dc1 e-con-full e-flex e-con e-parent\" data-id=\"7df4dc1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cf0670a elementor-widget elementor-widget-html\" data-id=\"cf0670a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"maven-adventures-section\" id=\"mavenAdventures\">\r\n <div class=\"ma-container\">\r\n <div class=\"ma-header\">\r\n <span class=\"ma-kicker\">Explore Maven\u2019s World<\/span>\r\n\r\n <h2>Pick Maven\u2019s Brave Adventure<\/h2>\r\n\r\n <p>\r\n Every adventure teaches Maven something new about courage, friendship,\r\n and believing in herself.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"ma-carousel-shell\">\r\n\r\n <div class=\"ma-3d-stage\">\r\n <div class=\"ma-stage-shadow\"><\/div>\r\n\r\n <article\r\n class=\"ma-card\"\r\n style=\"--card-img: url('https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-bike-monica.png');\"\r\n data-title=\"Bike Ride Adventure\"\r\n data-subtitle=\"Trying again can turn fear into freedom.\"\r\n data-text=\"Maven learns that falling once does not mean giving up. With patience, courage, and a little encouragement, she discovers the joy of moving forward on her own.\"\r\n data-lesson=\"Lesson: Keep trying, one tiny step at a time.\"\r\n data-bg=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-bike-monica.png\"\r\n >\r\n <div class=\"ma-card-media\"><\/div>\r\n <div class=\"ma-card-shine\"><\/div>\r\n\r\n <div class=\"ma-card-content\">\r\n <span class=\"ma-card-label\">Adventure 01<\/span>\r\n <h3>Bike Ride Adventure<\/h3>\r\n <p>Maven learns that trying again can turn fear into freedom.<\/p>\r\n <button class=\"ma-card-btn\" type=\"button\">View Adventure<\/button>\r\n <\/div>\r\n <\/article>\r\n\r\n <article\r\n class=\"ma-card\"\r\n style=\"--card-img: url('https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-dance.png');\"\r\n data-title=\"The School Dance\"\r\n data-subtitle=\"Friendship helps fear fade away.\"\r\n data-text=\"Maven feels nervous about the dance floor, but with a trusted friend by her side, she finds a way to feel safe, included, and joyful.\"\r\n data-lesson=\"Lesson: You do not have to face big moments alone.\"\r\n data-bg=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-dance.png\"\r\n >\r\n <div class=\"ma-card-media\"><\/div>\r\n <div class=\"ma-card-shine\"><\/div>\r\n\r\n <div class=\"ma-card-content\">\r\n <span class=\"ma-card-label\">Adventure 02<\/span>\r\n <h3>The School Dance<\/h3>\r\n <p>Maven discovers that friendship can help fear fade away.<\/p>\r\n <button class=\"ma-card-btn\" type=\"button\">View Adventure<\/button>\r\n <\/div>\r\n <\/article>\r\n\r\n <article\r\n class=\"ma-card\"\r\n style=\"--card-img: url('https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-swim.png');\"\r\n data-title=\"Swimming Lesson\"\r\n data-subtitle=\"Maven learns she can do hard things.\"\r\n data-text=\"The water feels big and scary at first, but Maven takes the plunge with help from a kind friend and learns that courage can grow in the middle of fear.\"\r\n data-lesson=\"Lesson: Brave does not mean never being scared.\"\r\n data-bg=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-swim.png\"\r\n >\r\n <div class=\"ma-card-media\"><\/div>\r\n <div class=\"ma-card-shine\"><\/div>\r\n\r\n <div class=\"ma-card-content\">\r\n <span class=\"ma-card-label\">Adventure 03<\/span>\r\n <h3>Swimming Lesson<\/h3>\r\n <p>Maven faces the water and learns she can do hard things.<\/p>\r\n <button class=\"ma-card-btn\" type=\"button\">View Adventure<\/button>\r\n <\/div>\r\n <\/article>\r\n\r\n <article\r\n class=\"ma-card\"\r\n style=\"--card-img: url('https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-dojo.png');\"\r\n data-title=\"Golden Cheddar Dojo\"\r\n data-subtitle=\"Strength comes from focus and heart.\"\r\n data-text=\"At the dojo, Maven learns that strength is not only about size. With focus, effort, and courage, she begins to feel stronger in her own way.\"\r\n data-lesson=\"Lesson: Small does not mean weak.\"\r\n data-bg=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/adventure-dojo.png\"\r\n >\r\n <div class=\"ma-card-media\"><\/div>\r\n <div class=\"ma-card-shine\"><\/div>\r\n\r\n <div class=\"ma-card-content\">\r\n <span class=\"ma-card-label\">Adventure 04<\/span>\r\n <h3>Golden Cheddar Dojo<\/h3>\r\n <p>Maven learns that strength comes from focus and heart.<\/p>\r\n <button class=\"ma-card-btn\" type=\"button\">View Adventure<\/button>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"ma-dots\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"ma-modal\" aria-hidden=\"true\">\r\n <div class=\"ma-modal-backdrop\"><\/div>\r\n\r\n <div class=\"ma-modal-panel\">\r\n <button class=\"ma-modal-close\" type=\"button\">\u00d7<\/button>\r\n\r\n <div class=\"ma-modal-image\"><\/div>\r\n\r\n <div class=\"ma-modal-copy\">\r\n <span class=\"ma-modal-kicker\">Maven\u2019s Adventure<\/span>\r\n <h3 class=\"ma-modal-title\">Bike Ride Adventure<\/h3>\r\n <h4 class=\"ma-modal-subtitle\">Trying again can turn fear into freedom.<\/h4>\r\n <p class=\"ma-modal-text\"><\/p>\r\n <div class=\"ma-modal-lesson\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800;900&family=Luckiest+Guy&display=swap\");\r\n\r\n .maven-adventures-section {\r\n position: relative;\r\n padding: 84px 0 94px;\r\n background: #fff8d6;\r\n font-family: \"Fredoka\", Arial, sans-serif;\r\n overflow: hidden;\r\n }\r\n\r\n .ma-container {\r\n position: relative;\r\n width: 100%;\r\n max-width: 1420px;\r\n margin: 0 auto;\r\n padding: 0 6%;\r\n }\r\n\r\n .ma-header {\r\n text-align: center;\r\n max-width: 880px;\r\n margin: 0 auto 30px;\r\n }\r\n\r\n .ma-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 16px;\r\n padding: 10px 22px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 13px;\r\n font-weight: 900;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .ma-header h2 {\r\n margin: 0 0 18px;\r\n font-family: \"Luckiest Guy\", \"Fredoka\", Arial, sans-serif;\r\n font-size: clamp(42px, 5.4vw, 82px);\r\n line-height: 0.95;\r\n color: #ffc928;\r\n letter-spacing: 1px;\r\n text-shadow:\r\n 4px 4px 0 #6b1dba,\r\n 8px 8px 0 rgba(107, 29, 186, 0.22);\r\n }\r\n\r\n .ma-header p {\r\n margin: 0 auto;\r\n max-width: 740px;\r\n font-size: clamp(17px, 1.45vw, 21px);\r\n line-height: 1.55;\r\n color: #55218f;\r\n font-weight: 800;\r\n }\r\n\r\n .ma-carousel-shell {\r\n position: relative;\r\n width: 100%;\r\n min-height: 560px;\r\n perspective: 1500px;\r\n overflow: visible;\r\n }\r\n\r\n .ma-3d-stage {\r\n position: relative;\r\n width: 100%;\r\n height: 540px;\r\n overflow: visible;\r\n transform-style: preserve-3d;\r\n user-select: none;\r\n touch-action: pan-y;\r\n }\r\n\r\n .ma-stage-shadow {\r\n position: absolute;\r\n left: 50%;\r\n bottom: 28px;\r\n width: min(760px, 80vw);\r\n height: 86px;\r\n border-radius: 50%;\r\n transform: translateX(-50%) rotateX(65deg);\r\n filter: blur(2px);\r\n pointer-events: none;\r\n }\r\n\r\n .ma-card {\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n width: clamp(350px, 30vw, 580px);\r\n height: 510px;\r\n border-radius: 34px;\r\n overflow: hidden;\r\n background: #6b1dba;\r\n border: 6px solid rgba(255, 255, 255, 0.96);\r\n box-shadow:\r\n 0 24px 55px rgba(65, 22, 117, 0.22),\r\n 0 8px 0 rgba(107, 29, 186, 0.16);\r\n cursor: pointer;\r\n isolation: isolate;\r\n transform: translate(-50%, -50%) scale(0.65);\r\n opacity: 0;\r\n pointer-events: none;\r\n transition:\r\n transform 0.72s cubic-bezier(.18, .9, .22, 1),\r\n opacity 0.45s ease,\r\n filter 0.45s ease,\r\n box-shadow 0.35s ease,\r\n border-color 0.35s ease;\r\n will-change: transform, opacity, filter;\r\n }\r\n\r\n .ma-card.is-active {\r\n border-color: #ffc928;\r\n box-shadow:\r\n 0 38px 80px rgba(65, 22, 117, 0.32),\r\n 0 11px 0 rgba(107, 29, 186, 0.24);\r\n }\r\n\r\n .ma-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n z-index: 3;\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n rgba(20, 4, 48, 0.02) 0%,\r\n rgba(20, 4, 48, 0.15) 40%,\r\n rgba(20, 4, 48, 0.86) 100%\r\n );\r\n pointer-events: none;\r\n }\r\n\r\n .ma-card::after {\r\n content: \"\";\r\n position: absolute;\r\n left: -20%;\r\n right: -20%;\r\n bottom: -18%;\r\n z-index: 4;\r\n height: 38%;\r\n border-radius: 50% 50% 0 0;\r\n transform: translateY(12px);\r\n transition: transform 0.45s ease;\r\n pointer-events: none;\r\n }\r\n\r\n .ma-card.is-active:hover::after {\r\n transform: translateY(0);\r\n }\r\n\r\n .ma-card-media {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 1;\r\n background:\r\n linear-gradient(135deg, rgba(85, 199, 247, 0.45), rgba(255, 248, 214, 0.16)),\r\n var(--card-img);\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.04);\r\n transition: transform 0.7s ease, filter 0.7s ease;\r\n }\r\n\r\n .ma-card.is-active:hover .ma-card-media {\r\n transform: scale(1.12);\r\n filter: saturate(1.12) brightness(1.04);\r\n }\r\n\r\n .ma-card-shine {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 2;\r\n background: linear-gradient(\r\n 115deg,\r\n transparent 0%,\r\n transparent 36%,\r\n rgba(255, 255, 255, 0.35) 48%,\r\n transparent 62%,\r\n transparent 100%\r\n );\r\n transform: translateX(-125%);\r\n transition: transform 0.85s ease;\r\n pointer-events: none;\r\n }\r\n\r\n .ma-card.is-active:hover .ma-card-shine {\r\n transform: translateX(125%);\r\n }\r\n\r\n .ma-card-content {\r\n position: absolute;\r\n left: 24px;\r\n right: 24px;\r\n bottom: 22px;\r\n z-index: 6;\r\n color: #ffffff;\r\n transform: translateY(30px);\r\n transition: transform 0.35s ease;\r\n }\r\n\r\n .ma-card.is-active .ma-card-content {\r\n transform: translateY(0);\r\n }\r\n\r\n .ma-card-label {\r\n display: inline-flex;\r\n margin-bottom: 12px;\r\n padding: 8px 14px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 12px;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n box-shadow: 0 5px 0 #6b1dba;\r\n }\r\n\r\n .ma-card h3 {\r\n margin: 0 0 10px;\r\n font-size: 31px;\r\n line-height: 0.98;\r\n color: #ffc928;\r\n font-weight: 900;\r\n text-shadow:\r\n 2px 2px 0 #6b1dba,\r\n 4px 4px 0 rgba(107, 29, 186, 0.28);\r\n }\r\n\r\n .ma-card p {\r\n margin: 0 0 17px;\r\n max-width: 310px;\r\n font-size: 15.5px;\r\n line-height: 1.35;\r\n font-weight: 800;\r\n color: #fff8d6;\r\n text-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);\r\n }\r\n\r\n .ma-card-btn {\r\n border: 0;\r\n cursor: pointer;\r\n min-height: 42px;\r\n padding: 0 18px;\r\n border-radius: 999px;\r\n background: #ffffff !important;\r\n color: #6b1dba !important;\r\n font-family: inherit;\r\n font-size: 14px;\r\n font-weight: 900;\r\n box-shadow: 0 5px 0 #FCC928;\r\n opacity: 0;\r\n transform: translateY(12px);\r\n transition:\r\n opacity 0.3s ease,\r\n transform 0.3s ease,\r\n box-shadow 0.25s ease;\r\n }\r\n\r\n .ma-card.is-active .ma-card-btn {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .ma-card-btn:hover {\r\n box-shadow: 0 8px 0 #FCC928;\r\n transform: translateY(-3px);\r\n }\r\n\r\n .ma-nav {\r\n position: absolute;\r\n top: 50%;\r\n z-index: 80;\r\n width: 58px;\r\n height: 58px;\r\n border: 4px solid #ffffff;\r\n border-radius: 50%;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n cursor: pointer;\r\n font-size: 44px;\r\n line-height: 0;\r\n font-weight: 900;\r\n box-shadow: 0 7px 0 #6b1dba, 0 18px 28px rgba(65, 22, 117, 0.2);\r\n transform: translateY(-50%);\r\n transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n }\r\n\r\n .ma-nav:hover {\r\n transform: translateY(-50%) scale(1.07);\r\n box-shadow: 0 10px 0 #6b1dba, 0 24px 35px rgba(65, 22, 117, 0.25);\r\n }\r\n\r\n .ma-prev {\r\n left: 6px;\r\n }\r\n\r\n .ma-next {\r\n right: 6px;\r\n }\r\n\r\n .ma-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-top: -4px;\r\n }\r\n\r\n .ma-dot {\r\n width: 13px;\r\n height: 13px;\r\n border: 0;\r\n border-radius: 50%;\r\n background: rgba(107, 29, 186, 0.26) !important;\r\n cursor: pointer;\r\n transition: width 0.25s ease, background 0.25s ease;\r\n }\r\n\r\n .ma-dot.active {\r\n width: 13px;\r\n height: 13px;\r\n border: 0;\r\n border-radius: 50%;\r\n background: #ffc928 !important;\r\n box-shadow: 0 4px 0 #6b1dba;\r\n }\r\n\r\n .ma-modal {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 99999;\r\n display: grid;\r\n place-items: center;\r\n padding: 24px;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.25s ease;\r\n }\r\n\r\n .ma-modal.show {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .ma-modal-backdrop {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(33, 8, 74, 0.62);\r\n backdrop-filter: blur(8px);\r\n }\r\n\r\n .ma-modal-panel {\r\n position: relative;\r\n z-index: 2;\r\n width: min(980px, 100%);\r\n min-height: 560px;\r\n display: grid;\r\n grid-template-columns: 1fr 0.85fr;\r\n overflow: hidden;\r\n border-radius: 36px;\r\n background: #fff8d6;\r\n border: 7px solid #ffffff;\r\n box-shadow: 0 45px 110px rgba(20, 4, 48, 0.42);\r\n transform: translateY(28px) scale(0.94);\r\n transition: transform 0.32s cubic-bezier(.18, 1.35, .45, 1);\r\n }\r\n\r\n .ma-modal.show .ma-modal-panel {\r\n transform: translateY(0) scale(1);\r\n }\r\n\r\n .ma-modal-image {\r\n min-height: 560px;\r\n background:\r\n linear-gradient(180deg, rgba(85, 199, 247, 0.12), rgba(33, 8, 74, 0.12)),\r\n var(--modal-img);\r\n background-size: cover;\r\n background-position: center;\r\n }\r\n\r\n .ma-modal-copy {\r\n padding: 54px 44px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n background: #fff8d6;\r\n }\r\n\r\n .ma-modal-kicker {\r\n display: inline-flex;\r\n width: fit-content;\r\n margin-bottom: 18px;\r\n padding: 9px 16px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 12px;\r\n font-weight: 900;\r\n text-transform: uppercase;\r\n letter-spacing: 0.6px;\r\n box-shadow: 0 5px 0 #6b1dba;\r\n }\r\n\r\n .ma-modal-copy h3 {\r\n margin: 0 0 10px;\r\n font-size: clamp(34px, 4vw, 58px);\r\n line-height: 0.95;\r\n color: #ffc928;\r\n font-weight: 900;\r\n text-shadow:\r\n 3px 3px 0 #6b1dba,\r\n 5px 5px 0 rgba(107, 29, 186, 0.25);\r\n }\r\n\r\n .ma-modal-copy h4 {\r\n margin: 0 0 20px;\r\n font-size: 22px;\r\n line-height: 1.25;\r\n color: #6b1dba;\r\n font-weight: 900;\r\n }\r\n\r\n .ma-modal-copy p {\r\n margin: 0 0 22px;\r\n font-size: 17px;\r\n line-height: 1.6;\r\n color: #5b3a80;\r\n font-weight: 700;\r\n }\r\n\r\n .ma-modal-lesson {\r\n padding: 16px 18px;\r\n border-radius: 20px;\r\n background: #ffffff;\r\n color: #6b1dba;\r\n font-size: 16px;\r\n line-height: 1.35;\r\n font-weight: 900;\r\n border: 3px solid #ffc928;\r\n }\r\n\r\n .ma-modal-close {\r\n position: absolute;\r\n top: 18px;\r\n right: 18px;\r\n z-index: 5;\r\n width: 42px;\r\n height: 42px;\r\n border: 0;\r\n border-radius: 50%;\r\n background: #e7332f;\r\n color: #ffffff;\r\n cursor: pointer;\r\n font-size: 28px;\r\n line-height: 1;\r\n font-weight: 900;\r\n box-shadow: 0 5px 0 rgba(107, 29, 186, 0.45);\r\n }\r\n\r\n @media (max-width: 1180px) {\r\n .ma-carousel-shell {\r\n min-height: 530px;\r\n }\r\n\r\n .ma-3d-stage {\r\n height: 515px;\r\n }\r\n\r\n .ma-card {\r\n width: clamp(285px, 33vw, 340px);\r\n height: 455px;\r\n }\r\n }\r\n\r\n @media (max-width: 820px) {\r\n .maven-adventures-section {\r\n padding: 68px 0 78px;\r\n }\r\n\r\n .ma-container {\r\n padding: 0 18px;\r\n }\r\n\r\n .ma-header {\r\n margin-bottom: 24px;\r\n }\r\n\r\n .ma-carousel-shell {\r\n min-height: 500px;\r\n }\r\n\r\n .ma-3d-stage {\r\n height: 485px;\r\n }\r\n\r\n .ma-card {\r\n width: min(315px, 78vw);\r\n height: 430px;\r\n border-radius: 28px;\r\n }\r\n\r\n .ma-card h3 {\r\n font-size: 27px;\r\n }\r\n\r\n .ma-card p {\r\n font-size: 14.5px;\r\n }\r\n\r\n .ma-nav {\r\n width: 48px;\r\n height: 48px;\r\n font-size: 36px;\r\n }\r\n\r\n .ma-prev {\r\n left: -4px;\r\n }\r\n\r\n .ma-next {\r\n right: -4px;\r\n }\r\n\r\n .ma-stage-shadow {\r\n width: 74vw;\r\n height: 70px;\r\n bottom: 34px;\r\n }\r\n\r\n .ma-modal-panel {\r\n grid-template-columns: 1fr;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n }\r\n\r\n .ma-modal-image {\r\n min-height: 310px;\r\n }\r\n\r\n .ma-modal-copy {\r\n padding: 34px 26px 30px;\r\n }\r\n }\r\n\r\n @media (max-width: 520px) {\r\n .maven-adventures-section {\r\n padding: 60px 0 70px;\r\n }\r\n\r\n .ma-kicker {\r\n font-size: 11px;\r\n padding: 9px 16px;\r\n }\r\n\r\n .ma-header h2 {\r\n font-size: clamp(38px, 12vw, 56px);\r\n }\r\n\r\n .ma-header p {\r\n font-size: 16px;\r\n }\r\n\r\n .ma-carousel-shell {\r\n min-height: 470px;\r\n }\r\n\r\n .ma-3d-stage {\r\n height: 455px;\r\n }\r\n\r\n .ma-card {\r\n width: 80vw;\r\n height: 400px;\r\n border-width: 5px;\r\n }\r\n\r\n .ma-card-content {\r\n left: 18px;\r\n right: 18px;\r\n bottom: 18px;\r\n }\r\n\r\n .ma-card h3 {\r\n font-size: 24px;\r\n }\r\n\r\n .ma-card p {\r\n font-size: 13.5px;\r\n }\r\n\r\n .ma-nav {\r\n width: 42px;\r\n height: 42px;\r\n font-size: 32px;\r\n }\r\n\r\n .ma-prev {\r\n left: -10px;\r\n }\r\n\r\n .ma-next {\r\n right: -10px;\r\n }\r\n\r\n .ma-modal {\r\n padding: 14px;\r\n }\r\n\r\n .ma-modal-panel {\r\n border-radius: 26px;\r\n border-width: 5px;\r\n }\r\n\r\n .ma-modal-copy h4 {\r\n font-size: 18px;\r\n }\r\n\r\n .ma-modal-copy p {\r\n font-size: 15px;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .ma-card,\r\n .ma-card-media,\r\n .ma-card-shine,\r\n .ma-card-content,\r\n .ma-modal,\r\n .ma-modal-panel {\r\n transition: none !important;\r\n animation: none !important;\r\n }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n (function () {\r\n function initMavenAdventureCarousels() {\r\n const sections = document.querySelectorAll(\".maven-adventures-section:not([data-ma-ready='true'])\");\r\n\r\n sections.forEach(function (section) {\r\n section.setAttribute(\"data-ma-ready\", \"true\");\r\n\r\n const stage = section.querySelector(\".ma-3d-stage\");\r\n const cards = Array.from(section.querySelectorAll(\".ma-card\"));\r\n const prevBtn = section.querySelector(\".ma-prev\");\r\n const nextBtn = section.querySelector(\".ma-next\");\r\n const dotsWrap = section.querySelector(\".ma-dots\");\r\n\r\n const modal = section.querySelector(\".ma-modal\");\r\n const modalBackdrop = section.querySelector(\".ma-modal-backdrop\");\r\n const modalClose = section.querySelector(\".ma-modal-close\");\r\n const modalImage = section.querySelector(\".ma-modal-image\");\r\n const modalTitle = section.querySelector(\".ma-modal-title\");\r\n const modalSubtitle = section.querySelector(\".ma-modal-subtitle\");\r\n const modalText = section.querySelector(\".ma-modal-text\");\r\n const modalLesson = section.querySelector(\".ma-modal-lesson\");\r\n\r\n if (!stage || !cards.length) return;\r\n\r\n let activeIndex = 0;\r\n let isDragging = false;\r\n let pointerStartX = 0;\r\n let autoplayTimer = null;\r\n const autoplayDelay = 4500;\r\n\r\n function mod(number, length) {\r\n return ((number % length) + length) % length;\r\n }\r\n\r\n function getCircularDiff(index, active, total) {\r\n let diff = index - active;\r\n\r\n if (diff > total \/ 2) {\r\n diff -= total;\r\n }\r\n\r\n if (diff < -total \/ 2) {\r\n diff += total;\r\n }\r\n\r\n return diff;\r\n }\r\n\r\n function getSettings() {\r\n const width = window.innerWidth;\r\n\r\n if (width <= 520) {\r\n return {\r\n xStep: 128,\r\n zStep: 130,\r\n rotateStep: 16,\r\n scaleStep: 0.15,\r\n yStep: 12,\r\n visibleLimit: 1\r\n };\r\n }\r\n\r\n if (width <= 820) {\r\n return {\r\n xStep: 178,\r\n zStep: 145,\r\n rotateStep: 18,\r\n scaleStep: 0.13,\r\n yStep: 14,\r\n visibleLimit: 1\r\n };\r\n }\r\n\r\n return {\r\n xStep: 300,\r\n zStep: 180,\r\n rotateStep: 24,\r\n scaleStep: 0.11,\r\n yStep: 16,\r\n visibleLimit: 2\r\n };\r\n }\r\n\r\n function renderCarousel() {\r\n const total = cards.length;\r\n const settings = getSettings();\r\n\r\n cards.forEach(function (card, index) {\r\n const diff = getCircularDiff(index, activeIndex, total);\r\n const abs = Math.abs(diff);\r\n const isActive = diff === 0;\r\n\r\n let x = diff * settings.xStep;\r\n let z = -abs * settings.zStep;\r\n let y = isActive ? -8 : abs * settings.yStep;\r\n let rotateY = diff * -settings.rotateStep;\r\n let scale = Math.max(0.68, 1 - abs * settings.scaleStep);\r\n let opacity = abs > settings.visibleLimit ? 0 : Math.max(0.38, 1 - abs * 0.24);\r\n let blur = abs > 1 ? 1.2 : 0;\r\n let pointerEvents = abs > settings.visibleLimit ? \"none\" : \"auto\";\r\n\r\n card.classList.toggle(\"is-active\", isActive);\r\n\r\n card.style.transform =\r\n \"translate(-50%, -50%) \" +\r\n \"translateX(\" + x + \"px) \" +\r\n \"translateY(\" + y + \"px) \" +\r\n \"translateZ(\" + z + \"px) \" +\r\n \"rotateY(\" + rotateY + \"deg) \" +\r\n \"scale(\" + scale + \")\";\r\n\r\n card.style.opacity = opacity;\r\n card.style.filter = \"blur(\" + blur + \"px)\";\r\n card.style.zIndex = String(100 - abs);\r\n card.style.pointerEvents = pointerEvents;\r\n });\r\n\r\n updateDots();\r\n }\r\n\r\n function goTo(index) {\r\n activeIndex = mod(index, cards.length);\r\n renderCarousel();\r\n restartAutoplay();\r\n }\r\n\r\n function nextSlide() {\r\n goTo(activeIndex + 1);\r\n }\r\n\r\n function prevSlide() {\r\n goTo(activeIndex - 1);\r\n }\r\n\r\n function createDots() {\r\n if (!dotsWrap) return;\r\n\r\n dotsWrap.innerHTML = \"\";\r\n\r\n cards.forEach(function (_, index) {\r\n const dot = document.createElement(\"button\");\r\n dot.className = \"ma-dot\";\r\n dot.type = \"button\";\r\n dot.setAttribute(\"aria-label\", \"Go to adventure \" + (index + 1));\r\n\r\n dot.addEventListener(\"click\", function () {\r\n goTo(index);\r\n });\r\n\r\n dotsWrap.appendChild(dot);\r\n });\r\n\r\n updateDots();\r\n }\r\n\r\n function updateDots() {\r\n if (!dotsWrap) return;\r\n\r\n const dots = dotsWrap.querySelectorAll(\".ma-dot\");\r\n\r\n dots.forEach(function (dot, index) {\r\n dot.classList.toggle(\"active\", index === activeIndex);\r\n });\r\n }\r\n\r\n function openModal(card) {\r\n if (!modal) return;\r\n\r\n modalTitle.textContent = card.dataset.title || \"\";\r\n modalSubtitle.textContent = card.dataset.subtitle || \"\";\r\n modalText.textContent = card.dataset.text || \"\";\r\n modalLesson.textContent = card.dataset.lesson || \"\";\r\n modalImage.style.setProperty(\"--modal-img\", \"url('\" + (card.dataset.bg || \"\") + \"')\");\r\n\r\n modal.classList.add(\"show\");\r\n modal.setAttribute(\"aria-hidden\", \"false\");\r\n document.body.style.overflow = \"hidden\";\r\n stopAutoplay();\r\n }\r\n\r\n function closeModal() {\r\n if (!modal) return;\r\n\r\n modal.classList.remove(\"show\");\r\n modal.setAttribute(\"aria-hidden\", \"true\");\r\n document.body.style.overflow = \"\";\r\n restartAutoplay();\r\n }\r\n\r\n function startAutoplay() {\r\n stopAutoplay();\r\n\r\n autoplayTimer = setInterval(function () {\r\n nextSlide();\r\n }, autoplayDelay);\r\n }\r\n\r\n function stopAutoplay() {\r\n if (autoplayTimer) {\r\n clearInterval(autoplayTimer);\r\n autoplayTimer = null;\r\n }\r\n }\r\n\r\n function restartAutoplay() {\r\n stopAutoplay();\r\n startAutoplay();\r\n }\r\n\r\n cards.forEach(function (card, index) {\r\n card.addEventListener(\"click\", function () {\r\n if (isDragging) return;\r\n\r\n if (!card.classList.contains(\"is-active\")) {\r\n goTo(index);\r\n return;\r\n }\r\n\r\n openModal(card);\r\n });\r\n\r\n const btn = card.querySelector(\".ma-card-btn\");\r\n\r\n if (btn) {\r\n btn.addEventListener(\"click\", function (event) {\r\n event.stopPropagation();\r\n\r\n if (!card.classList.contains(\"is-active\")) {\r\n goTo(index);\r\n return;\r\n }\r\n\r\n openModal(card);\r\n });\r\n }\r\n });\r\n\r\n if (prevBtn) {\r\n prevBtn.addEventListener(\"click\", function (event) {\r\n event.preventDefault();\r\n prevSlide();\r\n });\r\n }\r\n\r\n if (nextBtn) {\r\n nextBtn.addEventListener(\"click\", function (event) {\r\n event.preventDefault();\r\n nextSlide();\r\n });\r\n }\r\n\r\n stage.addEventListener(\"pointerdown\", function (event) {\r\n isDragging = false;\r\n pointerStartX = event.clientX;\r\n stopAutoplay();\r\n\r\n try {\r\n stage.setPointerCapture(event.pointerId);\r\n } catch (error) {}\r\n });\r\n\r\n stage.addEventListener(\"pointermove\", function (event) {\r\n const delta = event.clientX - pointerStartX;\r\n\r\n if (Math.abs(delta) > 8) {\r\n isDragging = true;\r\n }\r\n });\r\n\r\n stage.addEventListener(\"pointerup\", function (event) {\r\n const delta = event.clientX - pointerStartX;\r\n\r\n if (Math.abs(delta) > 45) {\r\n if (delta < 0) {\r\n nextSlide();\r\n } else {\r\n prevSlide();\r\n }\r\n }\r\n\r\n setTimeout(function () {\r\n isDragging = false;\r\n }, 90);\r\n\r\n restartAutoplay();\r\n });\r\n\r\n stage.addEventListener(\"pointercancel\", restartAutoplay);\r\n\r\n section.addEventListener(\"mouseenter\", stopAutoplay);\r\n section.addEventListener(\"mouseleave\", startAutoplay);\r\n section.addEventListener(\"focusin\", stopAutoplay);\r\n section.addEventListener(\"focusout\", startAutoplay);\r\n\r\n if (modalClose) {\r\n modalClose.addEventListener(\"click\", closeModal);\r\n }\r\n\r\n if (modalBackdrop) {\r\n modalBackdrop.addEventListener(\"click\", closeModal);\r\n }\r\n\r\n document.addEventListener(\"keydown\", function (event) {\r\n if (modal && modal.classList.contains(\"show\") && event.key === \"Escape\") {\r\n closeModal();\r\n return;\r\n }\r\n\r\n if (document.activeElement && section.contains(document.activeElement)) {\r\n if (event.key === \"ArrowRight\") nextSlide();\r\n if (event.key === \"ArrowLeft\") prevSlide();\r\n }\r\n });\r\n\r\n window.addEventListener(\"resize\", renderCarousel);\r\n\r\n createDots();\r\n renderCarousel();\r\n startAutoplay();\r\n });\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", initMavenAdventureCarousels);\r\n } else {\r\n initMavenAdventureCarousels();\r\n }\r\n\r\n window.addEventListener(\"load\", initMavenAdventureCarousels);\r\n\r\n setTimeout(initMavenAdventureCarousels, 300);\r\n setTimeout(initMavenAdventureCarousels, 1000);\r\n\r\n if (window.elementorFrontend && window.elementorFrontend.hooks) {\r\n window.elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function () {\r\n initMavenAdventureCarousels();\r\n });\r\n }\r\n })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f36cd84 e-con-full e-flex e-con e-parent\" data-id=\"f36cd84\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d5910e elementor-widget elementor-widget-html\" data-id=\"4d5910e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"maven-book-section\" id=\"mavenBookReveal\">\r\n <div class=\"mb-container\">\r\n <div class=\"mb-book-area\" id=\"mbBookArea\">\r\n <div class=\"mb-book-scene\">\r\n <div class=\"mb-book\" style=\"--book-cover: url('https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/monica-book-mokcup.png');\">\r\n <div class=\"mb-book-front\">\r\n <div class=\"mb-cover-shine\"><\/div>\r\n <\/div>\r\n <div class=\"mb-book-spine\"><\/div>\r\n <div class=\"mb-book-pages\"><\/div>\r\n <div class=\"mb-book-back\"><\/div>\r\n <\/div>\r\n\r\n <span class=\"mb-spark mb-spark-1\"><\/span>\r\n <span class=\"mb-spark mb-spark-2\"><\/span>\r\n <span class=\"mb-spark mb-spark-3\"><\/span>\r\n <span class=\"mb-spark mb-spark-4\"><\/span>\r\n <\/div>\r\n\r\n <div class=\"mb-shadow\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-copy\">\r\n <span class=\"mb-kicker\">The Book Reveal<\/span>\r\n\r\n <h2>\r\n Meet the Story<br \/>\r\n Behind the Courage\r\n <\/h2>\r\n\r\n <p class=\"mb-lead\">\r\n Maven may be tiny, but her story carries a big message for little hearts.\r\n <\/p>\r\n\r\n <p class=\"mb-text\">\r\n <em>Maven: Small Mouse. Big Courage.<\/em> is a heartwarming children\u2019s book\r\n about confidence, friendship, bravery, and learning to believe in yourself.\r\n Through Maven\u2019s playful adventures, young readers discover that courage does\r\n not always have to be loud \u2014 sometimes it begins with one tiny step.\r\n <\/p>\r\n\r\n <div class=\"mb-features\">\r\n <div class=\"mb-feature\">\r\n <strong>Perfect For<\/strong>\r\n <span>Young readers, bedtime stories, and classroom reading.<\/span>\r\n <\/div>\r\n\r\n <div class=\"mb-feature\">\r\n <strong>Main Message<\/strong>\r\n <span>Even the tiniest mouse can do brave things.<\/span>\r\n <\/div>\r\n\r\n <div class=\"mb-feature\">\r\n <strong>Theme<\/strong>\r\n <span>Courage, confidence, friendship, and self-belief.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-buttons\">\r\n <a href=\"#\" class=\"mb-btn mb-btn-primary\">Buy the Book<\/a>\r\n <a href=\"#\" class=\"mb-btn mb-btn-secondary\">Preview the Story<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800;900&family=Luckiest+Guy&display=swap\");\r\n\r\n .maven-book-section {\r\n position: relative;\r\n overflow: hidden;\r\n padding: 95px 6% 105px;\r\n background: #fffdf1;\r\n font-family: \"Fredoka\", Arial, sans-serif;\r\n }\r\n\r\n .maven-book-section::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: auto -10% -28% -10%;\r\n height: 48%;\r\n background: radial-gradient(ellipse at center, rgba(255, 201, 40, 0.18), transparent 65%);\r\n pointer-events: none;\r\n }\r\n\r\n .mb-container {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1340px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 0.95fr 1.05fr;\r\n align-items: center;\r\n gap: 70px;\r\n }\r\n\r\n .mb-book-area {\r\n position: relative;\r\n min-height: 620px;\r\n display: grid;\r\n place-items: center;\r\n perspective: 1600px;\r\n }\r\n\r\n .mb-book-scene {\r\n position: relative;\r\n width: min(420px, 76vw);\r\n height: 570px;\r\n transform-style: preserve-3d;\r\n }\r\n\r\n .mb-book {\r\n position: absolute;\r\n inset: 0;\r\n transform-style: preserve-3d;\r\n transform:\r\n rotateY(-34deg)\r\n rotateX(7deg)\r\n translateY(30px)\r\n scale(0.88);\r\n opacity: 0;\r\n transition:\r\n transform 1.1s cubic-bezier(.18, 1.05, .28, 1),\r\n opacity 0.8s ease;\r\n filter: drop-shadow(0 38px 36px rgba(65, 22, 117, 0.26));\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-book {\r\n opacity: 1;\r\n transform:\r\n rotateY(-13deg)\r\n rotateX(4deg)\r\n translateY(0)\r\n scale(1);\r\n }\r\n\r\n .mb-book-front,\r\n .mb-book-back,\r\n .mb-book-pages,\r\n .mb-book-spine {\r\n position: absolute;\r\n border-radius: 20px;\r\n transform-style: preserve-3d;\r\n }\r\n\r\n .mb-book-front {\r\n inset: 0;\r\n z-index: 5;\r\n background-image: var(--book-cover);\r\n background-size: cover;\r\n background-position: center;\r\n border: 7px solid #ffffff;\r\n box-shadow:\r\n inset 0 0 0 2px rgba(255, 201, 40, 0.28),\r\n 0 26px 55px rgba(65, 22, 117, 0.28);\r\n transform: translateZ(28px);\r\n overflow: hidden;\r\n }\r\n\r\n .mb-cover-shine {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 115deg,\r\n transparent 0%,\r\n transparent 36%,\r\n rgba(255, 255, 255, 0.46) 48%,\r\n transparent 62%,\r\n transparent 100%\r\n );\r\n transform: translateX(-130%);\r\n animation: mbCoverShine 4.4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes mbCoverShine {\r\n 0%, 52% {\r\n transform: translateX(-130%);\r\n }\r\n\r\n 78%, 100% {\r\n transform: translateX(130%);\r\n }\r\n }\r\n\r\n .mb-book-spine {\r\n left: -42px;\r\n top: 16px;\r\n width: 62px;\r\n height: calc(100% - 32px);\r\n background:\r\n linear-gradient(90deg, #4d158f, #6b1dba 48%, #8b36d6);\r\n border-radius: 18px 5px 5px 18px;\r\n transform: rotateY(90deg) translateZ(-3px);\r\n box-shadow: inset -10px 0 20px rgba(0, 0, 0, 0.18);\r\n }\r\n\r\n .mb-book-pages {\r\n right: -30px;\r\n top: 20px;\r\n width: 62px;\r\n height: calc(100% - 40px);\r\n background:\r\n repeating-linear-gradient(\r\n 90deg,\r\n #fffef4 0 5px,\r\n #eadfbf 6px 7px\r\n );\r\n transform: rotateY(88deg) translateZ(9px);\r\n border-radius: 4px 18px 18px 4px;\r\n box-shadow: inset 10px 0 22px rgba(107, 29, 186, 0.1);\r\n }\r\n\r\n .mb-book-back {\r\n inset: 0;\r\n background: #ffffff00;\r\n transform: translateZ(-30px);\r\n box-shadow: 0 22px 45px rgba(65, 22, 117, 0.22);\r\n }\r\n\r\n .mb-shadow {\r\n position: absolute;\r\n left: 50%;\r\n bottom: 35px;\r\n width: min(460px, 78vw);\r\n height: 82px;\r\n border-radius: 50%;\r\n transform: translateX(-50%);\r\n background: radial-gradient(ellipse at center, rgba(65, 22, 117, 0.24), transparent 70%);\r\n filter: blur(3px);\r\n opacity: 0;\r\n transition: opacity 0.9s ease;\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-shadow {\r\n opacity: 1;\r\n }\r\n\r\n .mb-book-area:hover .mb-book {\r\n transform:\r\n rotateY(-5deg)\r\n rotateX(3deg)\r\n translateY(-8px)\r\n scale(1.025);\r\n }\r\n\r\n .mb-spark {\r\n position: absolute;\r\n width: 17px;\r\n height: 17px;\r\n background: #ffc928;\r\n clip-path: polygon(50% 0%, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0% 50%, 37% 36%);\r\n filter: drop-shadow(0 0 12px rgba(255, 201, 40, 0.95));\r\n opacity: 0;\r\n animation: mbSparkle 2.8s ease-in-out infinite;\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-spark {\r\n opacity: 1;\r\n }\r\n\r\n .mb-spark-1 {\r\n left: 3%;\r\n top: 16%;\r\n }\r\n\r\n .mb-spark-2 {\r\n right: 8%;\r\n top: 10%;\r\n animation-delay: -0.7s;\r\n }\r\n\r\n .mb-spark-3 {\r\n left: 10%;\r\n bottom: 24%;\r\n animation-delay: -1.4s;\r\n }\r\n\r\n .mb-spark-4 {\r\n right: 3%;\r\n bottom: 30%;\r\n animation-delay: -2.1s;\r\n }\r\n\r\n @keyframes mbSparkle {\r\n 0%, 100% {\r\n transform: scale(0.65) rotate(0deg);\r\n opacity: 0.35;\r\n }\r\n\r\n 50% {\r\n transform: scale(1.28) rotate(35deg);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .mb-copy {\r\n position: relative;\r\n z-index: 3;\r\n }\r\n\r\n .mb-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 18px;\r\n padding: 10px 22px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 13px;\r\n font-weight: 900;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mb-copy h2 {\r\n margin: 0 0 20px;\r\n font-family: \"Luckiest Guy\", \"Fredoka\", Arial, sans-serif;\r\n font-size: clamp(44px, 5.4vw, 84px);\r\n line-height: 0.94;\r\n color: #ffc928;\r\n letter-spacing: 1px;\r\n text-shadow:\r\n 4px 4px 0 #6b1dba,\r\n 8px 8px 0 rgba(107, 29, 186, 0.2);\r\n }\r\n\r\n .mb-lead {\r\n max-width: 690px;\r\n margin: 0 0 16px;\r\n color: #4b207f;\r\n font-size: clamp(19px, 1.75vw, 25px);\r\n line-height: 1.45;\r\n font-weight: 900;\r\n }\r\n\r\n .mb-text {\r\n max-width: 690px;\r\n margin: 0 0 26px;\r\n color: #5b3a80;\r\n font-size: clamp(16px, 1.22vw, 19px);\r\n line-height: 1.7;\r\n font-weight: 650;\r\n }\r\n\r\n .mb-features {\r\n display: grid;\r\n gap: 14px;\r\n margin: 0 0 30px;\r\n max-width: 720px;\r\n }\r\n\r\n .mb-feature {\r\n padding: 17px 20px;\r\n border-radius: 22px;\r\n background: #ffffff;\r\n border: 3px solid rgba(255, 201, 40, 0.85);\r\n box-shadow: 0 14px 30px rgba(65, 22, 117, 0.1);\r\n transform: translateY(22px);\r\n opacity: 0;\r\n transition:\r\n opacity 0.65s ease,\r\n transform 0.65s cubic-bezier(.18, 1.05, .28, 1),\r\n box-shadow 0.25s ease;\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-feature {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-feature:nth-child(1) {\r\n transition-delay: 0.16s;\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-feature:nth-child(2) {\r\n transition-delay: 0.28s;\r\n }\r\n\r\n .maven-book-section.mb-in-view .mb-feature:nth-child(3) {\r\n transition-delay: 0.4s;\r\n }\r\n\r\n .mb-feature:hover {\r\n box-shadow: 0 20px 38px rgba(65, 22, 117, 0.16);\r\n transform: translateY(-5px);\r\n }\r\n\r\n .mb-feature strong {\r\n display: block;\r\n margin-bottom: 5px;\r\n color: #6b1dba;\r\n font-size: 17px;\r\n font-weight: 900;\r\n }\r\n\r\n .mb-feature span {\r\n display: block;\r\n color: #5b3a80;\r\n font-size: 15.5px;\r\n line-height: 1.4;\r\n font-weight: 700;\r\n }\r\n\r\n .mb-buttons {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 16px;\r\n }\r\n\r\n .mb-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 54px;\r\n padding: 0 28px;\r\n border-radius: 999px;\r\n text-decoration: none !important;\r\n font-size: 15px;\r\n font-weight: 900;\r\n transition:\r\n transform 0.25s ease,\r\n box-shadow 0.25s ease;\r\n }\r\n\r\n .mb-btn-primary {\r\n background: #6b1dba;\r\n color: #ffffff !important;\r\n box-shadow: 0 7px 0 #ffc928;\r\n }\r\n\r\n .mb-btn-secondary {\r\n background: #ffc928 !important;\r\n color: #6b1dba;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mb-btn:hover {\r\n transform: translateY(-4px);\r\n }\r\n\r\n .mb-btn-primary:hover {\r\n box-shadow: 0 11px 0 #ffc928;\r\n }\r\n\r\n .mb-btn-secondary:hover {\r\n box-shadow: 0 11px 0 #6b1dba;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .maven-book-section {\r\n padding: 78px 22px 90px;\r\n }\r\n\r\n .mb-container {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n\r\n .mb-copy {\r\n text-align: center;\r\n }\r\n\r\n .mb-lead,\r\n .mb-text,\r\n .mb-features {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .mb-buttons {\r\n justify-content: center;\r\n }\r\n\r\n .mb-book-area {\r\n min-height: 560px;\r\n order: 2;\r\n }\r\n\r\n .mb-copy {\r\n order: 1;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .maven-book-section {\r\n padding: 66px 18px 78px;\r\n }\r\n\r\n .mb-copy h2 {\r\n font-size: clamp(38px, 12vw, 60px);\r\n }\r\n\r\n .mb-book-area {\r\n min-height: 500px;\r\n }\r\n\r\n .mb-book-scene {\r\n width: min(320px, 74vw);\r\n height: 440px;\r\n }\r\n\r\n .mb-book-spine {\r\n left: -32px;\r\n width: 48px;\r\n }\r\n\r\n .mb-book-pages {\r\n right: -24px;\r\n width: 48px;\r\n }\r\n\r\n .mb-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .mb-btn {\r\n width: min(280px, 100%);\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .maven-book-section {\r\n padding: 58px 16px 68px;\r\n }\r\n\r\n .mb-book-area {\r\n min-height: 440px;\r\n }\r\n\r\n .mb-book-scene {\r\n width: min(285px, 76vw);\r\n height: 392px;\r\n }\r\n\r\n .mb-feature {\r\n padding: 15px 16px;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .mb-book,\r\n .mb-cover-shine,\r\n .mb-spark,\r\n .mb-feature {\r\n animation: none !important;\r\n transition: none !important;\r\n opacity: 1;\r\n transform: none;\r\n }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n (function () {\r\n function initMavenBookReveal() {\r\n const sections = document.querySelectorAll(\".maven-book-section:not([data-mb-ready='true'])\");\r\n\r\n sections.forEach(function (section) {\r\n section.setAttribute(\"data-mb-ready\", \"true\");\r\n\r\n const bookArea = section.querySelector(\".mb-book-area\");\r\n const book = section.querySelector(\".mb-book\");\r\n\r\n const observer = new IntersectionObserver(\r\n function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n section.classList.add(\"mb-in-view\");\r\n }\r\n });\r\n },\r\n { threshold: 0.28 }\r\n );\r\n\r\n observer.observe(section);\r\n\r\n if (bookArea && book) {\r\n bookArea.addEventListener(\"mousemove\", function (event) {\r\n const rect = bookArea.getBoundingClientRect();\r\n const x = (event.clientX - rect.left) \/ rect.width - 0.5;\r\n const y = (event.clientY - rect.top) \/ rect.height - 0.5;\r\n\r\n book.style.transform =\r\n \"rotateY(\" + (-8 + x * 14) + \"deg) \" +\r\n \"rotateX(\" + (3 + y * -8) + \"deg) \" +\r\n \"translateY(-8px) scale(1.025)\";\r\n });\r\n\r\n bookArea.addEventListener(\"mouseleave\", function () {\r\n if (section.classList.contains(\"mb-in-view\")) {\r\n book.style.transform =\r\n \"rotateY(-13deg) rotateX(4deg) translateY(0) scale(1)\";\r\n }\r\n });\r\n }\r\n });\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", initMavenBookReveal);\r\n } else {\r\n initMavenBookReveal();\r\n }\r\n\r\n window.addEventListener(\"load\", initMavenBookReveal);\r\n setTimeout(initMavenBookReveal, 300);\r\n setTimeout(initMavenBookReveal, 1000);\r\n\r\n if (window.elementorFrontend && window.elementorFrontend.hooks) {\r\n window.elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function () {\r\n initMavenBookReveal();\r\n });\r\n }\r\n })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d2a46b9 e-con-full e-flex e-con e-parent\" data-id=\"d2a46b9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66eb3f9 elementor-widget elementor-widget-html\" data-id=\"66eb3f9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"maven-courage-wheel-section\" id=\"mavenCourageWheel\">\r\n <div class=\"mcw-container\">\r\n <div class=\"mcw-header\">\r\n <span class=\"mcw-kicker\">Play & Learn With Maven<\/span>\r\n <h2>Maven\u2019s Courage Wheel<\/h2>\r\n <p>\r\n Spin the wheel and discover a brave little lesson from Maven\u2019s world.\r\n Every turn reminds children that courage can begin with one tiny step.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"mcw-layout\">\r\n <div class=\"mcw-wheel-area\">\r\n <div class=\"mcw-pointer\">\r\n <span><\/span>\r\n <\/div>\r\n\r\n <div class=\"mcw-wheel-wrap\">\r\n <div class=\"mcw-wheel\" id=\"mcwWheel\">\r\n <div class=\"mcw-segment-label mcw-label-1\">\r\n <strong>Try Again<\/strong>\r\n <\/div>\r\n\r\n <div class=\"mcw-segment-label mcw-label-2\">\r\n <strong>Ask for Help<\/strong>\r\n <\/div>\r\n\r\n <div class=\"mcw-segment-label mcw-label-3\">\r\n <strong>Be Brave<\/strong>\r\n <\/div>\r\n\r\n <div class=\"mcw-segment-label mcw-label-4\">\r\n <strong>Speak Up<\/strong>\r\n <\/div>\r\n\r\n <div class=\"mcw-segment-label mcw-label-5\">\r\n <strong>Keep Going<\/strong>\r\n <\/div>\r\n\r\n <div class=\"mcw-segment-label mcw-label-6\">\r\n <strong>Shine Bright<\/strong>\r\n <\/div>\r\n\r\n <div class=\"mcw-inner-ring\"><\/div>\r\n\r\n <div class=\"mcw-maven-center\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/Maven-1.png\"\r\n alt=\"Maven the Mouse\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button class=\"mcw-spin-btn\" id=\"mcwSpinBtn\" type=\"button\">\r\n Spin the Wheel\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"mcw-result-panel\" id=\"mcwResultPanel\">\r\n <span class=\"mcw-result-kicker\">Today\u2019s Brave Lesson<\/span>\r\n\r\n <h3 id=\"mcwResultTitle\">Ready to Spin?<\/h3>\r\n\r\n <p id=\"mcwResultText\">\r\n Click the button and let Maven\u2019s Courage Wheel choose a special lesson\r\n about confidence, friendship, and bravery.\r\n <\/p>\r\n\r\n <div class=\"mcw-story-note\" id=\"mcwStoryNote\">\r\n Maven\u2019s world is full of tiny steps that lead to big courage.\r\n <\/div>\r\n\r\n <div class=\"mcw-mini-lessons\">\r\n <div>\r\n <strong>For Kids<\/strong>\r\n <span>A fun little game with a meaningful message.<\/span>\r\n <\/div>\r\n\r\n <div>\r\n <strong>For Parents<\/strong>\r\n <span>A gentle way to talk about courage and confidence.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <span class=\"mcw-spark mcw-spark-1\"><\/span>\r\n <span class=\"mcw-spark mcw-spark-2\"><\/span>\r\n <span class=\"mcw-spark mcw-spark-3\"><\/span>\r\n <span class=\"mcw-spark mcw-spark-4\"><\/span>\r\n<\/section>\r\n\r\n<style>\r\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800;900&family=Luckiest+Guy&display=swap\");\r\n\r\n .maven-courage-wheel-section {\r\n position: relative;\r\n overflow: hidden;\r\n padding: 90px 6% 105px;\r\n background: #fff8d6;\r\n font-family: \"Fredoka\", Arial, sans-serif;\r\n }\r\n\r\n .mcw-container {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n }\r\n\r\n .mcw-header {\r\n max-width: 880px;\r\n margin: 0 auto 52px;\r\n text-align: center;\r\n }\r\n\r\n .mcw-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 16px;\r\n padding: 10px 22px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 13px;\r\n font-weight: 900;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mcw-header h2 {\r\n margin: 0 0 18px;\r\n font-family: \"Luckiest Guy\", \"Fredoka\", Arial, sans-serif;\r\n font-size: clamp(42px, 5.5vw, 86px);\r\n line-height: 0.95;\r\n color: #ffc928;\r\n letter-spacing: 1px;\r\n text-shadow:\r\n 4px 4px 0 #6b1dba,\r\n 8px 8px 0 rgba(107, 29, 186, 0.22);\r\n }\r\n\r\n .mcw-header p {\r\n margin: 0 auto;\r\n max-width: 760px;\r\n color: #55218f;\r\n font-size: clamp(17px, 1.45vw, 21px);\r\n line-height: 1.6;\r\n font-weight: 800;\r\n }\r\n\r\n .mcw-layout {\r\n display: grid;\r\n grid-template-columns: 1fr 0.9fr;\r\n gap: 70px;\r\n align-items: center;\r\n }\r\n\r\n .mcw-wheel-area {\r\n position: relative;\r\n min-height: 650px;\r\n display: grid;\r\n place-items: center;\r\n }\r\n\r\n .mcw-pointer {\r\n position: absolute;\r\n z-index: 12;\r\n top: 35px;\r\n left: 50%;\r\n width: 68px;\r\n height: 82px;\r\n transform: translateX(-50%);\r\n filter: drop-shadow(0 10px 12px rgba(65, 22, 117, 0.24));\r\n }\r\n\r\n .mcw-pointer span {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n background: #e7332f;\r\n clip-path: polygon(50% 100%, 0 0, 100% 0);\r\n border-radius: 18px 18px 12px 12px;\r\n }\r\n\r\n .mcw-wheel-wrap {\r\n position: relative;\r\n width: min(560px, 82vw);\r\n aspect-ratio: 1 \/ 1;\r\n border-radius: 50%;\r\n perspective: 1400px;\r\n filter: drop-shadow(0 34px 38px rgba(65, 22, 117, 0.24));\r\n }\r\n\r\n .mcw-wheel-wrap::after {\r\n content: \"\";\r\n position: absolute;\r\n left: 50%;\r\n bottom: -48px;\r\n width: 78%;\r\n height: 80px;\r\n border-radius: 50%;\r\n transform: translateX(-50%);\r\n background: radial-gradient(ellipse at center, rgba(65, 22, 117, 0.22), transparent 70%);\r\n filter: blur(3px);\r\n z-index: -1;\r\n }\r\n\r\n .mcw-wheel {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n transform: rotate(0deg);\r\n transition: transform 4.2s cubic-bezier(.12, .72, .14, 1);\r\n transform-style: preserve-3d;\r\n background:\r\n conic-gradient(\r\n from -90deg,\r\n #ffc928 0deg 60deg,\r\n #ff78b7 60deg 120deg,\r\n #6b1dba 120deg 180deg,\r\n #55c7f7 180deg 240deg,\r\n #4fae45 240deg 300deg,\r\n #f28b22 300deg 360deg\r\n );\r\n border: 12px solid #ffffff;\r\n box-shadow:\r\n inset 0 0 0 8px rgba(107, 29, 186, 0.18),\r\n inset 0 0 45px rgba(255, 255, 255, 0.32),\r\n 0 12px 0 rgba(107, 29, 186, 0.25);\r\n }\r\n\r\n .mcw-wheel::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 32px;\r\n border-radius: 50%;\r\n border: 4px dashed rgba(255, 255, 255, 0.72);\r\n animation: mcwDashSpin 18s linear infinite;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes mcwDashSpin {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n }\r\n\r\n .mcw-inner-ring {\r\n position: absolute;\r\n inset: 31%;\r\n z-index: 4;\r\n border-radius: 50%;\r\n background:\r\n radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.95), rgba(255, 248, 214, 0.96));\r\n border: 8px solid #ffffff;\r\n box-shadow:\r\n 0 0 0 6px rgba(255, 201, 40, 0.65),\r\n 0 18px 34px rgba(65, 22, 117, 0.2);\r\n }\r\n\r\n .mcw-maven-center {\r\n position: absolute;\r\n z-index: 7;\r\n left: 50%;\r\n top: 52%;\r\n width: 36%;\r\n transform: translate(-50%, -50%);\r\n filter: drop-shadow(0 18px 20px rgba(65, 22, 117, 0.22));\r\n }\r\n\r\n .mcw-maven-center img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n animation: mcwMavenFloat 2.8s ease-in-out infinite;\r\n }\r\n\r\n @keyframes mcwMavenFloat {\r\n 0%, 100% {\r\n transform: translateY(0) rotate(-1deg);\r\n }\r\n\r\n 50% {\r\n transform: translateY(-9px) rotate(1deg);\r\n }\r\n }\r\n\r\n .mcw-segment-label {\r\n position: absolute;\r\n z-index: 5;\r\n left: 50%;\r\n top: 50%;\r\n width: 140px;\r\n min-height: 54px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 9px 13px;\r\n border-radius: 999px;\r\n background: rgba(255, 255, 255, 0.92);\r\n border: 3px solid rgba(255, 255, 255, 0.75);\r\n color: #6b1dba;\r\n text-align: center;\r\n box-shadow: 0 10px 22px rgba(65, 22, 117, 0.15);\r\n transform-origin: center;\r\n pointer-events: none;\r\n }\r\n\r\n .mcw-segment-label strong {\r\n display: block;\r\n font-size: 15px;\r\n line-height: 1.05;\r\n font-weight: 900;\r\n }\r\n\r\n .mcw-label-1 {\r\n transform: translate(-50%, -50%) rotate(30deg) translateY(-206px) rotate(-30deg);\r\n }\r\n\r\n .mcw-label-2 {\r\n transform: translate(-50%, -50%) rotate(90deg) translateY(-206px) rotate(-90deg);\r\n }\r\n\r\n .mcw-label-3 {\r\n transform: translate(-50%, -50%) rotate(150deg) translateY(-206px) rotate(-150deg);\r\n }\r\n\r\n .mcw-label-4 {\r\n transform: translate(-50%, -50%) rotate(210deg) translateY(-206px) rotate(-210deg);\r\n }\r\n\r\n .mcw-label-5 {\r\n transform: translate(-50%, -50%) rotate(270deg) translateY(-206px) rotate(-270deg);\r\n }\r\n\r\n .mcw-label-6 {\r\n transform: translate(-50%, -50%) rotate(330deg) translateY(-206px) rotate(-330deg);\r\n }\r\n\r\n .mcw-spin-btn {\r\n position: absolute;\r\n z-index: 20;\r\n bottom: -40px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n min-height: 58px;\r\n padding: 0 34px;\r\n border: 0;\r\n border-radius: 999px;\r\n background: #6b1dba !important;\r\n color: #ffffff !important;\r\n cursor: pointer;\r\n font-family: inherit;\r\n font-size: 17px;\r\n font-weight: 900;\r\n box-shadow: 0 8px 0 #ffc928;\r\n transition:\r\n transform 0.25s ease,\r\n box-shadow 0.25s ease,\r\n opacity 0.25s ease;\r\n }\r\n\r\n .mcw-spin-btn:hover {\r\n transform: translateX(-50%) translateY(-4px);\r\n box-shadow: 0 12px 0 #ffc928;\r\n }\r\n\r\n .mcw-spin-btn:disabled {\r\n opacity: 0.65;\r\n cursor: not-allowed;\r\n }\r\n\r\n .mcw-result-panel {\r\n position: relative;\r\n padding: 42px;\r\n border-radius: 36px;\r\n background: #ffffff;\r\n border: 6px solid #ffc928;\r\n box-shadow:\r\n 0 28px 64px rgba(65, 22, 117, 0.15),\r\n inset 0 0 0 2px rgba(255, 255, 255, 0.72);\r\n overflow: hidden;\r\n }\r\n\r\n .mcw-result-panel::before {\r\n content: \"\";\r\n position: absolute;\r\n right: -80px;\r\n top: -80px;\r\n width: 220px;\r\n height: 220px;\r\n border-radius: 50%;\r\n background: rgba(255, 201, 40, 0.22);\r\n }\r\n\r\n .mcw-result-kicker {\r\n position: relative;\r\n z-index: 2;\r\n display: inline-flex;\r\n margin-bottom: 18px;\r\n padding: 9px 17px;\r\n border-radius: 999px;\r\n background: #fff8d6;\r\n color: #6b1dba;\r\n font-size: 12px;\r\n font-weight: 900;\r\n letter-spacing: 0.7px;\r\n text-transform: uppercase;\r\n box-shadow: 0 5px 0 rgba(107, 29, 186, 0.18);\r\n }\r\n\r\n .mcw-result-panel h3 {\r\n position: relative;\r\n z-index: 2;\r\n margin: 0 0 14px;\r\n font-size: clamp(34px, 4vw, 58px);\r\n line-height: 0.96;\r\n color: #ffc928;\r\n font-weight: 900;\r\n text-shadow:\r\n 3px 3px 0 #6b1dba,\r\n 5px 5px 0 rgba(107, 29, 186, 0.22);\r\n }\r\n\r\n .mcw-result-panel p {\r\n position: relative;\r\n z-index: 2;\r\n margin: 0 0 24px;\r\n color: #5b3a80;\r\n font-size: clamp(17px, 1.4vw, 20px);\r\n line-height: 1.65;\r\n font-weight: 700;\r\n }\r\n\r\n .mcw-story-note {\r\n position: relative;\r\n z-index: 2;\r\n margin-bottom: 26px;\r\n padding: 18px 20px;\r\n border-radius: 22px;\r\n background: #fff8d6;\r\n color: #6b1dba;\r\n border: 3px solid rgba(255, 201, 40, 0.88);\r\n font-size: 16px;\r\n line-height: 1.45;\r\n font-weight: 900;\r\n }\r\n\r\n .mcw-mini-lessons {\r\n position: relative;\r\n z-index: 2;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 14px;\r\n }\r\n\r\n .mcw-mini-lessons div {\r\n padding: 16px;\r\n border-radius: 20px;\r\n background: #ffffff;\r\n border: 3px solid rgba(107, 29, 186, 0.12);\r\n box-shadow: 0 12px 26px rgba(65, 22, 117, 0.08);\r\n }\r\n\r\n .mcw-mini-lessons strong {\r\n display: block;\r\n margin-bottom: 5px;\r\n color: #6b1dba;\r\n font-size: 15px;\r\n font-weight: 900;\r\n }\r\n\r\n .mcw-mini-lessons span {\r\n display: block;\r\n color: #5b3a80;\r\n font-size: 14px;\r\n line-height: 1.35;\r\n font-weight: 700;\r\n }\r\n\r\n .mcw-result-panel.mcw-pop {\r\n animation: mcwPanelPop 0.55s cubic-bezier(.18, 1.45, .45, 1);\r\n }\r\n\r\n @keyframes mcwPanelPop {\r\n 0% {\r\n transform: scale(0.94);\r\n }\r\n\r\n 55% {\r\n transform: scale(1.035);\r\n }\r\n\r\n 100% {\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n .mcw-spark {\r\n position: absolute;\r\n width: 16px;\r\n height: 16px;\r\n background: #ffc928;\r\n clip-path: polygon(50% 0%, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0% 50%, 37% 36%);\r\n filter: drop-shadow(0 0 12px rgba(255, 201, 40, 0.9));\r\n animation: mcwSparkle 3s ease-in-out infinite;\r\n pointer-events: none;\r\n }\r\n\r\n .mcw-spark-1 {\r\n left: 8%;\r\n top: 24%;\r\n }\r\n\r\n .mcw-spark-2 {\r\n right: 10%;\r\n top: 18%;\r\n animation-delay: -0.8s;\r\n }\r\n\r\n .mcw-spark-3 {\r\n left: 12%;\r\n bottom: 18%;\r\n animation-delay: -1.6s;\r\n }\r\n\r\n .mcw-spark-4 {\r\n right: 16%;\r\n bottom: 22%;\r\n animation-delay: -2.4s;\r\n }\r\n\r\n @keyframes mcwSparkle {\r\n 0%, 100% {\r\n transform: scale(0.7) rotate(0deg);\r\n opacity: 0.45;\r\n }\r\n\r\n 50% {\r\n transform: scale(1.25) rotate(35deg);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .maven-courage-wheel-section {\r\n padding: 78px 22px 92px;\r\n }\r\n\r\n .mcw-layout {\r\n grid-template-columns: 1fr;\r\n gap: 50px;\r\n }\r\n\r\n .mcw-wheel-area {\r\n min-height: 620px;\r\n }\r\n\r\n .mcw-result-panel {\r\n max-width: 760px;\r\n margin: 0 auto;\r\n text-align: center;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .maven-courage-wheel-section {\r\n padding: 66px 18px 80px;\r\n }\r\n\r\n .mcw-header {\r\n margin-bottom: 38px;\r\n }\r\n\r\n .mcw-header h2 {\r\n font-size: clamp(38px, 12vw, 60px);\r\n }\r\n\r\n .mcw-wheel-area {\r\n min-height: 560px;\r\n }\r\n\r\n .mcw-wheel-wrap {\r\n width: min(470px, 88vw);\r\n }\r\n\r\n .mcw-segment-label {\r\n width: 112px;\r\n min-height: 46px;\r\n padding: 7px 10px;\r\n }\r\n\r\n .mcw-segment-label strong {\r\n font-size: 12.5px;\r\n }\r\n\r\n .mcw-label-1 {\r\n transform: translate(-50%, -50%) rotate(30deg) translateY(-174px) rotate(-30deg);\r\n }\r\n\r\n .mcw-label-2 {\r\n transform: translate(-50%, -50%) rotate(90deg) translateY(-174px) rotate(-90deg);\r\n }\r\n\r\n .mcw-label-3 {\r\n transform: translate(-50%, -50%) rotate(150deg) translateY(-174px) rotate(-150deg);\r\n }\r\n\r\n .mcw-label-4 {\r\n transform: translate(-50%, -50%) rotate(210deg) translateY(-174px) rotate(-210deg);\r\n }\r\n\r\n .mcw-label-5 {\r\n transform: translate(-50%, -50%) rotate(270deg) translateY(-174px) rotate(-270deg);\r\n }\r\n\r\n .mcw-label-6 {\r\n transform: translate(-50%, -50%) rotate(330deg) translateY(-174px) rotate(-330deg);\r\n }\r\n\r\n .mcw-spin-btn {\r\n min-height: 52px;\r\n padding: 0 26px;\r\n font-size: 15px;\r\n }\r\n\r\n .mcw-result-panel {\r\n padding: 30px 22px;\r\n border-radius: 28px;\r\n }\r\n\r\n .mcw-mini-lessons {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .maven-courage-wheel-section {\r\n padding: 58px 16px 70px;\r\n }\r\n\r\n .mcw-wheel-area {\r\n min-height: 500px;\r\n }\r\n\r\n .mcw-pointer {\r\n width: 50px;\r\n height: 62px;\r\n top: 32px;\r\n }\r\n\r\n .mcw-segment-label {\r\n width: 92px;\r\n min-height: 40px;\r\n border-width: 2px;\r\n }\r\n\r\n .mcw-segment-label strong {\r\n font-size: 10.5px;\r\n }\r\n\r\n .mcw-label-1 {\r\n transform: translate(-50%, -50%) rotate(30deg) translateY(-142px) rotate(-30deg);\r\n }\r\n\r\n .mcw-label-2 {\r\n transform: translate(-50%, -50%) rotate(90deg) translateY(-142px) rotate(-90deg);\r\n }\r\n\r\n .mcw-label-3 {\r\n transform: translate(-50%, -50%) rotate(150deg) translateY(-142px) rotate(-150deg);\r\n }\r\n\r\n .mcw-label-4 {\r\n transform: translate(-50%, -50%) rotate(210deg) translateY(-142px) rotate(-210deg);\r\n }\r\n\r\n .mcw-label-5 {\r\n transform: translate(-50%, -50%) rotate(270deg) translateY(-142px) rotate(-270deg);\r\n }\r\n\r\n .mcw-label-6 {\r\n transform: translate(-50%, -50%) rotate(330deg) translateY(-142px) rotate(-330deg);\r\n }\r\n\r\n .mcw-inner-ring {\r\n inset: 32%;\r\n border-width: 5px;\r\n }\r\n\r\n .mcw-maven-center {\r\n width: 39%;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .mcw-wheel,\r\n .mcw-wheel::before,\r\n .mcw-maven-center img,\r\n .mcw-spark,\r\n .mcw-result-panel {\r\n animation: none !important;\r\n transition: none !important;\r\n }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n (function () {\r\n function initMavenCourageWheel() {\r\n const sections = document.querySelectorAll(\".maven-courage-wheel-section:not([data-mcw-ready='true'])\");\r\n\r\n sections.forEach(function (section) {\r\n section.setAttribute(\"data-mcw-ready\", \"true\");\r\n\r\n const wheel = section.querySelector(\"#mcwWheel\");\r\n const spinBtn = section.querySelector(\"#mcwSpinBtn\");\r\n const resultPanel = section.querySelector(\"#mcwResultPanel\");\r\n const resultTitle = section.querySelector(\"#mcwResultTitle\");\r\n const resultText = section.querySelector(\"#mcwResultText\");\r\n const storyNote = section.querySelector(\"#mcwStoryNote\");\r\n\r\n if (!wheel || !spinBtn || !resultPanel || !resultTitle || !resultText || !storyNote) return;\r\n\r\n const lessons = [\r\n {\r\n title: \"Try Again\",\r\n text: \"Maven learns that one wobble, one fall, or one nervous moment does not mean the adventure is over.\",\r\n note: \"Story Moment: On her bike ride, Maven discovers that practice can turn fear into freedom.\"\r\n },\r\n {\r\n title: \"Ask for Help\",\r\n text: \"Maven discovers that asking for help is not weakness. It can be one of the bravest things a child can do.\",\r\n note: \"Story Moment: When something feels too big, Maven learns that friends and family can walk beside her.\"\r\n },\r\n {\r\n title: \"Be Brave\",\r\n text: \"Maven learns that bravery does not mean never feeling scared. It means trying even when her heart feels nervous.\",\r\n note: \"Story Moment: Whether at school, in the meadow, or near the water, Maven takes one tiny brave step.\"\r\n },\r\n {\r\n title: \"Speak Up\",\r\n text: \"Maven learns that her voice matters. Even a tiny mouse can stand tall and say what she feels.\",\r\n note: \"Story Moment: Maven finds courage when she remembers that being small does not make her less important.\"\r\n },\r\n {\r\n title: \"Keep Going\",\r\n text: \"Maven learns that falling does not mean stopping. It means trying one more time.\",\r\n note: \"Story Moment: With patience and encouragement, Maven keeps moving forward until she feels proud.\"\r\n },\r\n {\r\n title: \"Shine Bright\",\r\n text: \"Maven discovers that she does not need to be the biggest or loudest to shine in her own special way.\",\r\n note: \"Story Moment: During her adventures, Maven learns that tiny can still be mighty.\"\r\n }\r\n ];\r\n\r\n let currentRotation = 0;\r\n let spinning = false;\r\n\r\n function normalizeAngle(angle) {\r\n return ((angle % 360) + 360) % 360;\r\n }\r\n\r\n function spinWheel() {\r\n if (spinning) return;\r\n\r\n spinning = true;\r\n spinBtn.disabled = true;\r\n spinBtn.textContent = \"Spinning...\";\r\n\r\n const selectedIndex = Math.floor(Math.random() * lessons.length);\r\n const segmentSize = 360 \/ lessons.length;\r\n const segmentCenter = selectedIndex * segmentSize + segmentSize \/ 2;\r\n\r\n const currentMod = normalizeAngle(currentRotation);\r\n const targetMod = normalizeAngle(360 - segmentCenter);\r\n const delta = normalizeAngle(targetMod - currentMod);\r\n const extraSpins = 360 * 6;\r\n\r\n currentRotation += extraSpins + delta;\r\n\r\n wheel.style.transform = \"rotate(\" + currentRotation + \"deg)\";\r\n\r\n window.setTimeout(function () {\r\n const lesson = lessons[selectedIndex];\r\n\r\n resultTitle.textContent = lesson.title;\r\n resultText.textContent = lesson.text;\r\n storyNote.textContent = lesson.note;\r\n\r\n resultPanel.classList.remove(\"mcw-pop\");\r\n void resultPanel.offsetWidth;\r\n resultPanel.classList.add(\"mcw-pop\");\r\n\r\n spinBtn.disabled = false;\r\n spinBtn.textContent = \"Spin Again\";\r\n spinning = false;\r\n }, 4300);\r\n }\r\n\r\n spinBtn.addEventListener(\"click\", spinWheel);\r\n });\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", initMavenCourageWheel);\r\n } else {\r\n initMavenCourageWheel();\r\n }\r\n\r\n window.addEventListener(\"load\", initMavenCourageWheel);\r\n setTimeout(initMavenCourageWheel, 300);\r\n setTimeout(initMavenCourageWheel, 1000);\r\n\r\n if (window.elementorFrontend && window.elementorFrontend.hooks) {\r\n window.elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function () {\r\n initMavenCourageWheel();\r\n });\r\n }\r\n })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ce02cd9 e-con-full e-flex e-con e-parent\" data-id=\"ce02cd9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-76e0de7 elementor-widget elementor-widget-html\" data-id=\"76e0de7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"maven-author-section\" id=\"mavenAuthorSection\">\r\n <div class=\"mas-container\">\r\n \r\n <div class=\"mas-visual\" id=\"masVisualArea\">\r\n <div class=\"mas-photo-card\">\r\n <div class=\"mas-photo-frame\">\r\n <img decoding=\"async\" src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/placeholder_author.png\" alt=\"Monica M. Savioz\" class=\"mas-author-img\" \/>\r\n <\/div>\r\n\r\n <div class=\"mas-book-badge\">\r\n <img decoding=\"async\" src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/monica-book-mokcup.png\" alt=\"Maven Small Mouse Big Courage Book Cover\" \/>\r\n <\/div>\r\n\r\n <span class=\"mas-spark mas-spark-1\"><\/span>\r\n <span class=\"mas-spark mas-spark-2\"><\/span>\r\n <span class=\"mas-spark mas-spark-3\"><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mas-copy\">\r\n <span class=\"mas-kicker\" data-mas-reveal>About the Author<\/span>\r\n\r\n <h2 data-mas-reveal>\r\n Meet Monica<br \/>\r\n M. Savioz\r\n <\/h2>\r\n\r\n <p class=\"mas-lead\" data-mas-reveal>\r\n The heart behind <em>Maven: Small Mouse. Big Courage.<\/em>\r\n <\/p>\r\n\r\n <p class=\"mas-text\" data-mas-reveal>\r\n Monica M. Savioz brings Maven\u2019s world to life with warmth, imagination,\r\n and a meaningful message for children and families. Through Maven\u2019s\r\n adventures, she shares a gentle reminder that courage is not about being\r\n the biggest or the loudest \u2014 it is about believing in yourself, trying\r\n again, and finding your own special way to shine.\r\n <\/p>\r\n\r\n <div class=\"mas-quote\" data-mas-reveal>\r\n <span>\u201c<\/span>\r\n <p>\r\n Every child deserves to know they are brave, important, and wonderfully\r\n made \u2014 exactly as they are.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"mas-author-cards\" data-mas-reveal>\r\n <div class=\"mas-mini-card\">\r\n <strong>Her Message<\/strong>\r\n <p>Even the tiniest mouse can do brave things.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mas-mini-card\">\r\n <strong>For Families<\/strong>\r\n <p>A story filled with love, courage, and encouragement.<\/p>\r\n <\/div>\r\n\r\n <div class=\"mas-mini-card\">\r\n <strong>For Young Readers<\/strong>\r\n <p>A gentle reminder to believe, try, and shine.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mas-buttons\" data-mas-reveal>\r\n <a href=\"#mavenBookReveal\" class=\"mas-btn mas-btn-primary\">Discover the Book<\/a>\r\n <a href=\"#contact\" class=\"mas-btn mas-btn-secondary\">Contact the Author<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800;900&family=Luckiest+Guy&display=swap\");\r\n\r\n .maven-author-section {\r\n position: relative;\r\n overflow: hidden;\r\n padding: 95px 6% 105px;\r\n background: #fffdf1;\r\n font-family: \"Fredoka\", Arial, sans-serif;\r\n }\r\n\r\n .mas-container {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1340px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 0.95fr 1.05fr;\r\n gap: 70px;\r\n align-items: center;\r\n }\r\n\r\n .mas-visual {\r\n position: relative;\r\n min-height: 610px;\r\n display: grid;\r\n place-items: center;\r\n perspective: 1200px;\r\n }\r\n\r\n .mas-photo-card {\r\n position: relative;\r\n width: min(530px, 80vw);\r\n min-height: 600px;\r\n border-radius: 42px;\r\n background: #fff8d6;\r\n border: 7px solid #ffffff;\r\n box-shadow:\r\n 0 34px 80px rgba(65, 22, 117, 0.18),\r\n 0 10px 0 rgba(107, 29, 186, 0.14);\r\n transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);\r\n transition: transform 0.25s ease;\r\n }\r\n\r\n .mas-photo-card::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: 18px;\r\n border-radius: 32px;\r\n border: 3px dashed rgba(107, 29, 186, 0.18);\r\n pointer-events: none;\r\n }\r\n\r\n .mas-photo-frame {\r\n position: absolute;\r\n left: 50%;\r\n top: 40px;\r\n width: 78%;\r\n aspect-ratio: 1 \/ 1.08;\r\n transform: translateX(-50%);\r\n border-radius: 34px;\r\n overflow: hidden;\r\n background: #ffffff;\r\n border: 6px solid #ffc928;\r\n box-shadow: 0 22px 48px rgba(65, 22, 117, 0.18);\r\n }\r\n\r\n .mas-author-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n }\r\n\r\n .mas-book-badge {\r\n position: absolute;\r\n right: -34px;\r\n bottom: 38px;\r\n width: 168px;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n border: 5px solid #ffffff;\r\n box-shadow:\r\n 0 22px 44px rgba(65, 22, 117, 0.28),\r\n 0 7px 0 #6b1dba;\r\n transform: rotate(5deg);\r\n animation: masBookFloat 3.4s ease-in-out infinite;\r\n }\r\n\r\n .mas-book-badge img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n @keyframes masBookFloat {\r\n 0%, 100% {\r\n transform: translateY(0) rotate(5deg);\r\n }\r\n\r\n 50% {\r\n transform: translateY(-10px) rotate(2deg);\r\n }\r\n }\r\n\r\n .mas-spark {\r\n position: absolute;\r\n width: 16px;\r\n height: 16px;\r\n background: #ffc928;\r\n clip-path: polygon(50% 0%, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0% 50%, 37% 36%);\r\n filter: drop-shadow(0 0 12px rgba(255, 201, 40, 0.9));\r\n animation: masSparkle 2.8s ease-in-out infinite;\r\n }\r\n\r\n .mas-spark-1 {\r\n left: 42px;\r\n top: 70px;\r\n }\r\n\r\n .mas-spark-2 {\r\n right: 48px;\r\n top: 105px;\r\n animation-delay: -0.9s;\r\n }\r\n\r\n .mas-spark-3 {\r\n left: 70px;\r\n bottom: 80px;\r\n animation-delay: -1.8s;\r\n }\r\n\r\n @keyframes masSparkle {\r\n 0%, 100% {\r\n transform: scale(0.65) rotate(0deg);\r\n opacity: 0.45;\r\n }\r\n\r\n 50% {\r\n transform: scale(1.25) rotate(35deg);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .mas-copy {\r\n position: relative;\r\n z-index: 3;\r\n }\r\n\r\n .mas-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 18px;\r\n padding: 10px 22px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 13px;\r\n font-weight: 900;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mas-copy h2 {\r\n margin: 0 0 18px;\r\n font-family: \"Luckiest Guy\", \"Fredoka\", Arial, sans-serif;\r\n font-size: clamp(44px, 5.4vw, 84px);\r\n line-height: 0.94;\r\n color: #ffc928;\r\n letter-spacing: 1px;\r\n text-shadow:\r\n 4px 4px 0 #6b1dba,\r\n 8px 8px 0 rgba(107, 29, 186, 0.2);\r\n }\r\n\r\n .mas-lead {\r\n max-width: 690px;\r\n margin: 0 0 14px;\r\n color: #4b207f;\r\n font-size: clamp(19px, 1.7vw, 25px);\r\n line-height: 1.45;\r\n font-weight: 900;\r\n }\r\n\r\n .mas-text {\r\n max-width: 720px;\r\n margin: 0 0 24px;\r\n color: #5b3a80;\r\n font-size: clamp(16px, 1.2vw, 19px);\r\n line-height: 1.7;\r\n font-weight: 650;\r\n }\r\n\r\n .mas-quote {\r\n position: relative;\r\n max-width: 720px;\r\n margin: 0 0 26px;\r\n padding: 24px 26px 24px 72px;\r\n border-radius: 28px;\r\n background: #ffffff;\r\n border: 4px solid rgba(255, 201, 40, 0.86);\r\n box-shadow: 0 18px 36px rgba(65, 22, 117, 0.1);\r\n }\r\n\r\n .mas-quote span {\r\n position: absolute;\r\n left: 22px;\r\n top: 7px;\r\n color: #ffc928;\r\n font-family: Georgia, serif;\r\n font-size: 76px;\r\n line-height: 1;\r\n text-shadow: 2px 2px 0 #6b1dba;\r\n }\r\n\r\n .mas-quote p {\r\n margin: 0;\r\n color: #6b1dba;\r\n font-size: 18px;\r\n line-height: 1.48;\r\n font-weight: 900;\r\n }\r\n\r\n .mas-author-cards {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 14px;\r\n margin: 0 0 30px;\r\n }\r\n\r\n .mas-mini-card {\r\n padding: 17px 16px;\r\n border-radius: 22px;\r\n background: #ffffff;\r\n border: 3px solid rgba(107, 29, 186, 0.12);\r\n box-shadow: 0 14px 28px rgba(65, 22, 117, 0.08);\r\n transition:\r\n transform 0.25s ease,\r\n box-shadow 0.25s ease,\r\n border-color 0.25s ease;\r\n }\r\n\r\n .mas-mini-card:hover {\r\n transform: translateY(-7px);\r\n border-color: #ffc928;\r\n box-shadow: 0 20px 38px rgba(65, 22, 117, 0.13);\r\n }\r\n\r\n .mas-mini-card strong {\r\n display: block;\r\n margin-bottom: 6px;\r\n color: #6b1dba;\r\n font-size: 16px;\r\n font-weight: 900;\r\n }\r\n\r\n .mas-mini-card p {\r\n margin: 0;\r\n color: #5b3a80;\r\n font-size: 14px;\r\n line-height: 1.35;\r\n font-weight: 700;\r\n }\r\n\r\n .mas-buttons {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 16px;\r\n }\r\n\r\n .mas-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 54px;\r\n padding: 0 28px;\r\n border-radius: 999px;\r\n text-decoration: none !important;\r\n font-size: 15px;\r\n font-weight: 900;\r\n transition:\r\n transform 0.25s ease,\r\n box-shadow 0.25s ease;\r\n }\r\n\r\n .mas-btn-primary {\r\n background: #6b1dba;\r\n color: #ffffff !important;\r\n box-shadow: 0 7px 0 #ffc928;\r\n }\r\n\r\n .mas-btn-secondary {\r\n background: #ffc928;\r\n color: #6b1dba !important;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mas-btn:hover {\r\n transform: translateY(-4px);\r\n }\r\n\r\n .mas-btn-primary:hover {\r\n box-shadow: 0 11px 0 #ffc928;\r\n }\r\n\r\n .mas-btn-secondary:hover {\r\n box-shadow: 0 11px 0 #6b1dba;\r\n }\r\n\r\n [data-mas-reveal] {\r\n opacity: 0;\r\n transform: translateY(28px);\r\n transition:\r\n opacity 0.72s ease,\r\n transform 0.72s cubic-bezier(.18, 1, .28, 1);\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal] {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(1) {\r\n transition-delay: 0.05s;\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(2) {\r\n transition-delay: 0.14s;\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(3) {\r\n transition-delay: 0.22s;\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(4) {\r\n transition-delay: 0.3s;\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(5) {\r\n transition-delay: 0.38s;\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(6) {\r\n transition-delay: 0.46s;\r\n }\r\n\r\n .maven-author-section.mas-in-view [data-mas-reveal]:nth-child(7) {\r\n transition-delay: 0.54s;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .maven-author-section {\r\n padding: 78px 22px 92px;\r\n }\r\n\r\n .mas-container {\r\n grid-template-columns: 1fr;\r\n gap: 48px;\r\n }\r\n\r\n .mas-copy {\r\n text-align: center;\r\n }\r\n\r\n .mas-lead,\r\n .mas-text,\r\n .mas-quote {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .mas-author-cards {\r\n max-width: 760px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .mas-buttons {\r\n justify-content: center;\r\n }\r\n\r\n .mas-visual {\r\n order: 2;\r\n min-height: 570px;\r\n }\r\n\r\n .mas-copy {\r\n order: 1;\r\n }\r\n }\r\n\r\n @media (max-width: 760px) {\r\n .maven-author-section {\r\n padding: 66px 18px 80px;\r\n }\r\n\r\n .mas-copy h2 {\r\n font-size: clamp(38px, 12vw, 60px);\r\n }\r\n\r\n .mas-visual {\r\n min-height: 530px;\r\n }\r\n\r\n .mas-photo-card {\r\n width: min(370px, 88vw);\r\n min-height: 505px;\r\n border-radius: 34px;\r\n }\r\n\r\n .mas-photo-frame {\r\n top: 34px;\r\n width: 78%;\r\n border-radius: 28px;\r\n }\r\n\r\n .mas-book-badge {\r\n width: 132px;\r\n right: -8px;\r\n bottom: 36px;\r\n }\r\n\r\n .mas-author-cards {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .mas-quote {\r\n padding: 22px 22px 22px 60px;\r\n text-align: left;\r\n }\r\n\r\n .mas-quote span {\r\n left: 18px;\r\n top: 8px;\r\n font-size: 64px;\r\n }\r\n\r\n .mas-quote p {\r\n font-size: 16px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .maven-author-section {\r\n padding: 58px 16px 70px;\r\n }\r\n\r\n .mas-kicker {\r\n font-size: 11px;\r\n padding: 9px 16px;\r\n }\r\n\r\n .mas-visual {\r\n min-height: 485px;\r\n }\r\n\r\n .mas-photo-card {\r\n min-height: 460px;\r\n }\r\n\r\n .mas-book-badge {\r\n width: 112px;\r\n bottom: 28px;\r\n }\r\n\r\n .mas-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .mas-btn {\r\n width: min(280px, 100%);\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .mas-book-badge,\r\n .mas-spark,\r\n [data-mas-reveal] {\r\n animation: none !important;\r\n transition: none !important;\r\n opacity: 1;\r\n transform: none;\r\n }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n (function () {\r\n function initMavenAuthorSection() {\r\n const sections = document.querySelectorAll(\".maven-author-section:not([data-mas-ready='true'])\");\r\n\r\n sections.forEach(function (section) {\r\n section.setAttribute(\"data-mas-ready\", \"true\");\r\n\r\n const visualArea = section.querySelector(\"#masVisualArea\");\r\n const photoCard = section.querySelector(\".mas-photo-card\");\r\n\r\n const observer = new IntersectionObserver(\r\n function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n section.classList.add(\"mas-in-view\");\r\n }\r\n });\r\n },\r\n { threshold: 0.25 }\r\n );\r\n\r\n observer.observe(section);\r\n\r\n if (visualArea && photoCard) {\r\n visualArea.addEventListener(\"mousemove\", function (event) {\r\n const rect = visualArea.getBoundingClientRect();\r\n const x = (event.clientX - rect.left) \/ rect.width - 0.5;\r\n const y = (event.clientY - rect.top) \/ rect.height - 0.5;\r\n\r\n photoCard.style.transform =\r\n \"perspective(1000px) rotateY(\" +\r\n (-4 + x * 8) +\r\n \"deg) rotateX(\" +\r\n (2 + y * -8) +\r\n \"deg)\";\r\n });\r\n\r\n visualArea.addEventListener(\"mouseleave\", function () {\r\n photoCard.style.transform =\r\n \"perspective(1000px) rotateY(-4deg) rotateX(2deg)\";\r\n });\r\n }\r\n });\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", initMavenAuthorSection);\r\n } else {\r\n initMavenAuthorSection();\r\n }\r\n\r\n window.addEventListener(\"load\", initMavenAuthorSection);\r\n setTimeout(initMavenAuthorSection, 300);\r\n setTimeout(initMavenAuthorSection, 1000);\r\n\r\n if (window.elementorFrontend && window.elementorFrontend.hooks) {\r\n window.elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function () {\r\n initMavenAuthorSection();\r\n });\r\n }\r\n })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-531bdb0 e-con-full e-flex e-con e-parent\" data-id=\"531bdb0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3b8094d elementor-widget elementor-widget-html\" data-id=\"3b8094d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"maven-final-cta\" id=\"mavenFinalCTA\">\r\n <div class=\"mfc-container\">\r\n \r\n <div class=\"mfc-copy\">\r\n <span class=\"mfc-kicker\" data-mfc-reveal>Bring Maven Home<\/span>\r\n\r\n <h2 data-mfc-reveal>\r\n A Little Story<br \/>\r\n With Big Courage\r\n <\/h2>\r\n\r\n <p class=\"mfc-lead\" data-mfc-reveal>\r\n Join Maven on a heartwarming journey that reminds every child they are brave,\r\n special, and capable of shining in their own way.\r\n <\/p>\r\n\r\n <div class=\"mfc-points\" data-mfc-reveal>\r\n <div class=\"mfc-point\">\r\n <span>\u2726<\/span>\r\n <p>Perfect for bedtime reading<\/p>\r\n <\/div>\r\n\r\n <div class=\"mfc-point\">\r\n <span>\u2726<\/span>\r\n <p>Encourages confidence and self-belief<\/p>\r\n <\/div>\r\n\r\n <div class=\"mfc-point\">\r\n <span>\u2726<\/span>\r\n <p>A gentle story for little hearts<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mfc-buttons\" data-mfc-reveal>\r\n <a href=\"#\" class=\"mfc-btn mfc-btn-primary\">Buy the Book<\/a>\r\n <a href=\"#\" class=\"mfc-btn mfc-btn-secondary\">Preview the Story<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mfc-visual\" id=\"mfcVisualArea\">\r\n <div class=\"mfc-book-wrap\">\r\n <div class=\"mfc-book-glow\"><\/div>\r\n\r\n <div class=\"mfc-book-card\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/olive-squid-860846.hostingersite.com\/wp-content\/uploads\/2026\/07\/monica-book-mokcup.png\"\r\n alt=\"Maven Small Mouse Big Courage Book Cover\"\r\n class=\"mfc-book-img\"\r\n \/>\r\n <\/div>\r\n\r\n <div class=\"mfc-message-bubble\">\r\n <strong>Even the tiniest mouse<\/strong>\r\n <span>can do brave things.<\/span>\r\n <\/div>\r\n\r\n <span class=\"mfc-spark mfc-spark-1\"><\/span>\r\n <span class=\"mfc-spark mfc-spark-2\"><\/span>\r\n <span class=\"mfc-spark mfc-spark-3\"><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\r\n\r\n<style>\r\n @import url(\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka:wght@400;500;600;700;800;900&family=Luckiest+Guy&display=swap\");\r\n\r\n .maven-final-cta {\r\n position: relative;\r\n overflow: hidden;\r\n padding: 95px 6% 105px;\r\n background: #fff8d6;\r\n font-family: \"Fredoka\", Arial, sans-serif;\r\n }\r\n\r\n .mfc-container {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1.05fr 0.95fr;\r\n gap: 70px;\r\n align-items: center;\r\n }\r\n\r\n .mfc-copy {\r\n position: relative;\r\n z-index: 4;\r\n }\r\n\r\n .mfc-kicker {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 18px;\r\n padding: 10px 22px;\r\n border-radius: 999px;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 13px;\r\n font-weight: 900;\r\n letter-spacing: 0.8px;\r\n text-transform: uppercase;\r\n box-shadow: 0 7px 0 #6b1dba;\r\n }\r\n\r\n .mfc-copy h2 {\r\n margin: 0 0 20px;\r\n font-family: \"Luckiest Guy\", \"Fredoka\", Arial, sans-serif;\r\n font-size: clamp(46px, 5.7vw, 92px);\r\n line-height: 0.92;\r\n color: #ffc928;\r\n letter-spacing: 1px;\r\n text-shadow:\r\n 4px 4px 0 #6b1dba,\r\n 8px 8px 0 rgba(107, 29, 186, 0.22);\r\n }\r\n\r\n .mfc-lead {\r\n max-width: 700px;\r\n margin: 0 0 28px;\r\n color: #4b207f;\r\n font-size: clamp(18px, 1.55vw, 24px);\r\n line-height: 1.55;\r\n font-weight: 800;\r\n }\r\n\r\n .mfc-points {\r\n display: grid;\r\n gap: 13px;\r\n max-width: 620px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n .mfc-point {\r\n display: flex;\r\n align-items: center;\r\n gap: 13px;\r\n padding: 15px 18px;\r\n border-radius: 999px;\r\n background: #ffffff;\r\n border: 3px solid rgba(255, 201, 40, 0.85);\r\n box-shadow: 0 12px 26px rgba(65, 22, 117, 0.08);\r\n transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n }\r\n\r\n .mfc-point:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 18px 34px rgba(65, 22, 117, 0.13);\r\n }\r\n\r\n .mfc-point span {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 34px;\r\n height: 34px;\r\n flex: 0 0 34px;\r\n border-radius: 50%;\r\n background: #ffc928;\r\n color: #6b1dba;\r\n font-size: 17px;\r\n font-weight: 900;\r\n box-shadow: 0 4px 0 #6b1dba;\r\n }\r\n\r\n .mfc-point p {\r\n margin: 0;\r\n color: #5b3a80;\r\n font-size: 16px;\r\n line-height: 1.35;\r\n font-weight: 800;\r\n }\r\n\r\n .mfc-buttons {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 16px;\r\n }\r\n\r\n .mfc-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n min-height: 56px;\r\n padding: 0 32px;\r\n border-radius: 999px;\r\n text-decoration: none !important;\r\n font-size: 16px;\r\n font-weight: 900;\r\n transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n }\r\n\r\n .mfc-btn-primary {\r\n background: #6b1dba !important;\r\n color: #ffffff !important;\r\n box-shadow: 0 8px 0 #ffc928;\r\n }\r\n\r\n .mfc-btn-secondary {\r\n background: #ffc928;\r\n color: #6b1dba;\r\n box-shadow: 0 8px 0 #6b1dba;\r\n }\r\n\r\n .mfc-btn:hover {\r\n transform: translateY(-5px);\r\n }\r\n\r\n .mfc-btn-primary:hover {\r\n box-shadow: 0 12px 0 #ffc928;\r\n }\r\n\r\n .mfc-btn-secondary:hover {\r\n box-shadow: 0 12px 0 #6b1dba;\r\n }\r\n\r\n .mfc-visual {\r\n position: relative;\r\n min-height: 620px;\r\n display: grid;\r\n place-items: center;\r\n perspective: 1300px;\r\n }\r\n\r\n .mfc-book-wrap {\r\n position: relative;\r\n width: min(430px, 78vw);\r\n min-height: 580px;\r\n display: grid;\r\n place-items: center;\r\n }\r\n\r\n .mfc-book-glow {\r\n position: absolute;\r\n width: 430px;\r\n height: 430px;\r\n max-width: 90vw;\r\n max-height: 90vw;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255, 201, 40, 0.36), transparent 66%);\r\n animation: mfcGlowPulse 3.6s ease-in-out infinite;\r\n }\r\n\r\n @keyframes mfcGlowPulse {\r\n 0%, 100% {\r\n transform: scale(0.95);\r\n opacity: 0.7;\r\n }\r\n\r\n 50% {\r\n transform: scale(1.08);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .mfc-book-card {\r\n position: relative;\r\n z-index: 4;\r\n width: min(435px, 70vw);\r\n border-radius: 24px;\r\n overflow: hidden;\r\n border: 7px solid #ffffff;\r\n background: #ffffff;\r\n box-shadow:\r\n 0 38px 80px rgba(65, 22, 117, 0.28),\r\n 0 10px 0 rgba(107, 29, 186, 0.22);\r\n transform:\r\n perspective(1000px)\r\n rotateY(-12deg)\r\n rotateX(4deg)\r\n translateY(20px)\r\n scale(0.92);\r\n opacity: 0;\r\n transition:\r\n opacity 0.8s ease,\r\n transform 1s cubic-bezier(.18, 1.05, .28, 1);\r\n }\r\n\r\n .maven-final-cta.mfc-in-view .mfc-book-card {\r\n opacity: 1;\r\n transform:\r\n perspective(1000px)\r\n rotateY(-8deg)\r\n rotateX(3deg)\r\n translateY(0)\r\n scale(1);\r\n }\r\n\r\n .mfc-book-card::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 115deg,\r\n transparent 0%,\r\n transparent 36%,\r\n rgba(255, 255, 255, 0.42) 48%,\r\n transparent 62%,\r\n transparent 100%\r\n );\r\n transform: translateX(-130%);\r\n animation: mfcCoverShine 4.2s ease-in-out infinite;\r\n pointer-events: none;\r\n }\r\n\r\n @keyframes mfcCoverShine {\r\n 0%, 55% {\r\n transform: translateX(-130%);\r\n }\r\n\r\n 80%, 100% {\r\n transform: translateX(130%);\r\n }\r\n }\r\n\r\n .mfc-book-img {\r\n display: block;\r\n width: 100%;\r\n height: auto;\r\n }\r\n\r\n .mfc-message-bubble {\r\n position: absolute;\r\n z-index: 6;\r\n right: -18px;\r\n bottom: 72px;\r\n width: 245px;\r\n padding: 18px 20px;\r\n border-radius: 26px;\r\n background: #ffffff;\r\n border: 4px solid #ffc928;\r\n box-shadow:\r\n 0 22px 44px rgba(65, 22, 117, 0.18),\r\n 0 6px 0 #6b1dba;\r\n transform: rotate(4deg) translateY(24px);\r\n opacity: 0;\r\n transition:\r\n opacity 0.75s ease 0.28s,\r\n transform 0.75s cubic-bezier(.18, 1.25, .28, 1) 0.28s;\r\n }\r\n\r\n .maven-final-cta.mfc-in-view .mfc-message-bubble {\r\n opacity: 1;\r\n transform: rotate(4deg) translateY(0);\r\n }\r\n\r\n .mfc-message-bubble strong {\r\n display: block;\r\n margin-bottom: 4px;\r\n color: #6b1dba;\r\n font-size: 19px;\r\n line-height: 1.1;\r\n font-weight: 900;\r\n }\r\n\r\n .mfc-message-bubble span {\r\n display: block;\r\n color: #5b3a80;\r\n font-size: 15px;\r\n line-height: 1.3;\r\n font-weight: 800;\r\n }\r\n\r\n .mfc-spark {\r\n position: absolute;\r\n z-index: 8;\r\n width: 16px;\r\n height: 16px;\r\n background: #ffc928;\r\n clip-path: polygon(50% 0%, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0% 50%, 37% 36%);\r\n filter: drop-shadow(0 0 12px rgba(255, 201, 40, 0.9));\r\n animation: mfcSparkle 2.7s ease-in-out infinite;\r\n }\r\n\r\n .mfc-spark-1 {\r\n left: 38px;\r\n top: 88px;\r\n }\r\n\r\n .mfc-spark-2 {\r\n right: 44px;\r\n top: 118px;\r\n animation-delay: -0.9s;\r\n }\r\n\r\n .mfc-spark-3 {\r\n left: 78px;\r\n bottom: 100px;\r\n animation-delay: -1.8s;\r\n }\r\n\r\n @keyframes mfcSparkle {\r\n 0%, 100% {\r\n transform: scale(0.65) rotate(0deg);\r\n opacity: 0.45;\r\n }\r\n\r\n 50% {\r\n transform: scale(1.25) rotate(35deg);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n [data-mfc-reveal] {\r\n opacity: 0;\r\n transform: translateY(28px);\r\n transition:\r\n opacity 0.72s ease,\r\n transform 0.72s cubic-bezier(.18, 1, .28, 1);\r\n }\r\n\r\n .maven-final-cta.mfc-in-view [data-mfc-reveal] {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .maven-final-cta.mfc-in-view [data-mfc-reveal]:nth-child(1) {\r\n transition-delay: 0.05s;\r\n }\r\n\r\n .maven-final-cta.mfc-in-view [data-mfc-reveal]:nth-child(2) {\r\n transition-delay: 0.14s;\r\n }\r\n\r\n .maven-final-cta.mfc-in-view [data-mfc-reveal]:nth-child(3) {\r\n transition-delay: 0.22s;\r\n }\r\n\r\n .maven-final-cta.mfc-in-view [data-mfc-reveal]:nth-child(4) {\r\n transition-delay: 0.3s;\r\n }\r\n\r\n .maven-final-cta.mfc-in-view [data-mfc-reveal]:nth-child(5) {\r\n transition-delay: 0.38s;\r\n }\r\n\r\n @media (max-width: 1100px) {\r\n .maven-final-cta {\r\n padding: 78px 22px 92px;\r\n }\r\n\r\n .mfc-container {\r\n grid-template-columns: 1fr;\r\n gap: 48px;\r\n }\r\n\r\n .mfc-copy {\r\n text-align: center;\r\n }\r\n\r\n .mfc-lead,\r\n .mfc-points {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .mfc-buttons {\r\n justify-content: center;\r\n }\r\n\r\n .mfc-visual {\r\n min-height: 560px;\r\n }\r\n }\r\n\r\n @media (max-width: 720px) {\r\n .maven-final-cta {\r\n padding: 66px 18px 80px;\r\n }\r\n\r\n .mfc-copy h2 {\r\n font-size: clamp(38px, 12vw, 60px);\r\n }\r\n\r\n .mfc-lead {\r\n font-size: 17px;\r\n }\r\n\r\n .mfc-point {\r\n border-radius: 22px;\r\n align-items: flex-start;\r\n }\r\n\r\n .mfc-visual {\r\n min-height: 520px;\r\n }\r\n\r\n .mfc-book-wrap {\r\n min-height: 500px;\r\n }\r\n\r\n .mfc-book-card {\r\n width: min(290px, 70vw);\r\n }\r\n\r\n .mfc-message-bubble {\r\n right: 50%;\r\n bottom: 28px;\r\n width: min(260px, 82vw);\r\n transform: translateX(50%) rotate(2deg) translateY(24px);\r\n text-align: center;\r\n }\r\n\r\n .maven-final-cta.mfc-in-view .mfc-message-bubble {\r\n transform: translateX(50%) rotate(2deg) translateY(0);\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .maven-final-cta {\r\n padding: 58px 16px 70px;\r\n }\r\n\r\n .mfc-kicker {\r\n font-size: 11px;\r\n padding: 9px 16px;\r\n }\r\n\r\n .mfc-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .mfc-btn {\r\n width: min(280px, 100%);\r\n }\r\n\r\n .mfc-visual {\r\n min-height: 480px;\r\n }\r\n\r\n .mfc-book-wrap {\r\n min-height: 460px;\r\n }\r\n\r\n .mfc-book-card {\r\n width: min(260px, 72vw);\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .mfc-book-card,\r\n .mfc-book-card::after,\r\n .mfc-book-glow,\r\n .mfc-spark,\r\n .mfc-message-bubble,\r\n [data-mfc-reveal] {\r\n animation: none !important;\r\n transition: none !important;\r\n opacity: 1;\r\n transform: none !important;\r\n }\r\n }\r\n<\/style>\r\n\r\n<script>\r\n (function () {\r\n function initMavenFinalCTA() {\r\n const sections = document.querySelectorAll(\".maven-final-cta:not([data-mfc-ready='true'])\");\r\n\r\n sections.forEach(function (section) {\r\n section.setAttribute(\"data-mfc-ready\", \"true\");\r\n\r\n const visualArea = section.querySelector(\"#mfcVisualArea\");\r\n const bookCard = section.querySelector(\".mfc-book-card\");\r\n\r\n const observer = new IntersectionObserver(\r\n function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n section.classList.add(\"mfc-in-view\");\r\n }\r\n });\r\n },\r\n { threshold: 0.28 }\r\n );\r\n\r\n observer.observe(section);\r\n\r\n if (visualArea && bookCard) {\r\n visualArea.addEventListener(\"mousemove\", function (event) {\r\n const rect = visualArea.getBoundingClientRect();\r\n const x = (event.clientX - rect.left) \/ rect.width - 0.5;\r\n const y = (event.clientY - rect.top) \/ rect.height - 0.5;\r\n\r\n bookCard.style.transform =\r\n \"perspective(1000px) rotateY(\" +\r\n (-8 + x * 12) +\r\n \"deg) rotateX(\" +\r\n (3 + y * -8) +\r\n \"deg) translateY(-8px) scale(1.025)\";\r\n });\r\n\r\n visualArea.addEventListener(\"mouseleave\", function () {\r\n if (section.classList.contains(\"mfc-in-view\")) {\r\n bookCard.style.transform =\r\n \"perspective(1000px) rotateY(-8deg) rotateX(3deg) translateY(0) scale(1)\";\r\n }\r\n });\r\n }\r\n });\r\n }\r\n\r\n if (document.readyState === \"loading\") {\r\n document.addEventListener(\"DOMContentLoaded\", initMavenFinalCTA);\r\n } else {\r\n initMavenFinalCTA();\r\n }\r\n\r\n window.addEventListener(\"load\", initMavenFinalCTA);\r\n setTimeout(initMavenFinalCTA, 300);\r\n setTimeout(initMavenFinalCTA, 1000);\r\n\r\n if (window.elementorFrontend && window.elementorFrontend.hooks) {\r\n window.elementorFrontend.hooks.addAction(\"frontend\/element_ready\/html.default\", function () {\r\n initMavenFinalCTA();\r\n });\r\n }\r\n })();\r\n<\/script>\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>Maven Hero Section A Magical Children\u2019s Book Maven Small Mouse. Big Courage. Join Maven as she rides through a peaceful […]<\/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-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":82,"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":118,"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/118"}],"wp:attachment":[{"href":"https:\/\/maventhemouse.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}