{"id":280,"date":"2026-08-25T19:07:38","date_gmt":"2026-08-25T19:07:38","guid":{"rendered":"https:\/\/demowebdesign.live\/christiana\/?page_id=280"},"modified":"2026-08-26T15:15:35","modified_gmt":"2026-08-26T15:15:35","slug":"join-the-adventure","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/christiana\/join-the-adventure\/","title":{"rendered":"Join The Adventure"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"280\" class=\"elementor elementor-280\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c56597c e-con-full e-flex e-con e-parent\" data-id=\"c56597c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-da23eb1 elementor-widget elementor-widget-html\" data-id=\"da23eb1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t <meta name=\"description\" content=\"Join Christiana Jones Marzett for live book readings, storybook adventures, and play the interactive 'Find The Secrets' Nico treasure hunt game!\">\r\n\r\n  <!-- Google Fonts -->\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Caveat:wght@500;600;700&family=Cinzel:wght@600;700;800;900&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,400&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n  <style>\r\n    \/* ==========================================================================\r\n       DESIGN SYSTEM & GLOBAL VARIABLES (Luxury Storybook Theme)\r\n       ========================================================================== *\/\r\n    :root {\r\n      --bg-cream: #FAF6F0;\r\n      --bg-paper: #F5EEE6;\r\n      --bg-paper-light: #FDFBF7;\r\n      --bg-dark: #14110F;\r\n      --bg-dark-card: #1E1A17;\r\n      \r\n      --terracotta: #D9531E;\r\n      --terracotta-dark: #B54013;\r\n      --terracotta-light: #F8EBE4;\r\n      --terracotta-glow: rgba(217, 83, 30, 0.25);\r\n      \r\n      --gold: #D4AF37;\r\n      --gold-light: #F9F2D8;\r\n      --gold-glow: rgba(212, 175, 55, 0.35);\r\n      \r\n      --text-dark: #1A1614;\r\n      --text-body: #4A443F;\r\n      --text-muted: #7A7067;\r\n      --text-light: #F4ECE1;\r\n      \r\n      --border-light: #E8DFD5;\r\n      --border-accent: #D8C9B7;\r\n      \r\n      --font-heading: 'Cinzel', serif;\r\n      --font-serif: 'Playfair Display', serif;\r\n      --font-body: 'Plus Jakarta Sans', sans-serif;\r\n      --font-handwriting: 'Caveat', cursive;\r\n      \r\n      --shadow-sm: 0 4px 14px rgba(20, 17, 15, 0.05);\r\n      --shadow-md: 0 12px 32px rgba(20, 17, 15, 0.09);\r\n      --shadow-lg: 0 22px 50px rgba(20, 17, 15, 0.15);\r\n      --shadow-terracotta: 0 14px 35px rgba(217, 83, 30, 0.3);\r\n      \r\n      --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);\r\n    }\r\n\r\n    \/* CSS Reset *\/\r\n    *, *::before, *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    html {\r\n      scroll-behavior: smooth;\r\n      font-size: 16px;\r\n    }\r\n\r\n    body {\r\n      background-color: var(--bg-cream);\r\n      color: var(--text-body);\r\n      font-family: var(--font-body);\r\n      line-height: 1.7;\r\n      overflow-x: hidden;\r\n      -webkit-font-smoothing: antialiased;\r\n    }\r\n\r\n    img {\r\n      max-width: 100%;\r\n      height: auto;\r\n      display: block;\r\n    }\r\n\r\n    a {\r\n      text-decoration: none;\r\n      color: inherit;\r\n    }\r\n\r\n    ::selection {\r\n      background-color: var(--terracotta);\r\n      color: #FFFFFF;\r\n    }\r\n\r\n    .container {\r\n      max-width: 1240px;\r\n      margin: 0 auto;\r\n      padding: 0 24px;\r\n      position: relative;\r\n      z-index: 4;\r\n    }\r\n\r\n    .section-eyebrow {\r\n      font-family: var(--font-body);\r\n      font-size: 0.8rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.25em;\r\n      text-transform: uppercase;\r\n      color: var(--terracotta);\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n      margin-bottom: 14px;\r\n    }\r\n\r\n    .section-eyebrow::before {\r\n      content: '\u2726';\r\n      color: var(--gold);\r\n      font-size: 0.9rem;\r\n    }\r\n\r\n    .section-title {\r\n      font-family: var(--font-heading);\r\n      font-size: clamp(2.3rem, 4.5vw, 3.8rem);\r\n      font-weight: 700;\r\n      color: var(--text-dark);\r\n      line-height: 1.18;\r\n      margin-bottom: 22px;\r\n      letter-spacing: -0.01em;\r\n    }\r\n\r\n    .btn-primary {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n      background: var(--terracotta);\r\n      color: #FFFFFF;\r\n      padding: 16px 36px;\r\n      border-radius: 50px;\r\n      font-weight: 700;\r\n      font-size: 0.9rem;\r\n      letter-spacing: 0.08em;\r\n      text-transform: uppercase;\r\n      box-shadow: var(--shadow-terracotta);\r\n      transition: all 0.4s var(--transition-smooth);\r\n      border: 2px solid transparent;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .btn-primary:hover {\r\n      background: var(--terracotta-dark);\r\n      transform: translateY(-4px) scale(1.02);\r\n      box-shadow: 0 18px 40px rgba(217, 83, 30, 0.38);\r\n    }\r\n\r\n    .btn-secondary {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n      background: #FFFFFF;\r\n      color: var(--text-dark);\r\n      padding: 14px 30px;\r\n      border-radius: 50px;\r\n      font-weight: 700;\r\n      font-size: 0.85rem;\r\n      letter-spacing: 0.08em;\r\n      text-transform: uppercase;\r\n      border: 2px solid var(--border-accent);\r\n      transition: all 0.3s ease;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .btn-secondary:hover {\r\n      border-color: var(--terracotta);\r\n      color: var(--terracotta);\r\n      transform: translateY(-2px);\r\n    }\r\n\r\n    \/* Keyframes *\/\r\n    @keyframes floatSoft {\r\n      0%, 100% { transform: translateY(0px) rotate(0deg); }\r\n      50% { transform: translateY(-12px) rotate(3deg); }\r\n    }\r\n\r\n    @keyframes rotateCompass {\r\n      0% { transform: rotate(0deg); }\r\n      100% { transform: rotate(360deg); }\r\n    }\r\n\r\n    @keyframes pulseGlow {\r\n      0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.8)); }\r\n      50% { transform: scale(1.2); filter: drop-shadow(0 0 20px rgba(217, 83, 30, 1)); }\r\n    }\r\n\r\n    \/* Alternating Paw Animation Keyframes *\/\r\n    @keyframes pawStepLeft {\r\n      0% { opacity: 0; transform: translate(-20px, 10px) scale(0.8); }\r\n      50% { opacity: 0.85; transform: translate(0, 0) scale(1.05); }\r\n      100% { opacity: 0.2; transform: translate(15px, -10px) scale(0.9); }\r\n    }\r\n\r\n    @keyframes pawStepRight {\r\n      0% { opacity: 0; transform: translate(20px, 10px) scale(0.8); }\r\n      50% { opacity: 0.85; transform: translate(0, 0) scale(1.05); }\r\n      100% { opacity: 0.2; transform: translate(-15px, -10px) scale(0.9); }\r\n    }\r\n\r\n    \/* Alternating Paw Trails Containers *\/\r\n    .paw-trail-left {\r\n      position: absolute;\r\n      left: 25px;\r\n      top: 10%;\r\n      bottom: 10%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: space-around;\r\n      pointer-events: none;\r\n      z-index: 3;\r\n    }\r\n\r\n    .paw-trail-right {\r\n      position: absolute;\r\n      right: 25px;\r\n      top: 10%;\r\n      bottom: 10%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: space-around;\r\n      pointer-events: none;\r\n      z-index: 3;\r\n    }\r\n\r\n    .paw-icon {\r\n      width: 34px;\r\n      height: 34px;\r\n      fill: var(--terracotta);\r\n      opacity: 0.45;\r\n      filter: drop-shadow(0 2px 5px rgba(217, 83, 30, 0.25));\r\n    }\r\n\r\n    .paw-trail-left .paw-icon {\r\n      animation: pawStepLeft 4.5s ease-in-out infinite alternate;\r\n    }\r\n\r\n    .paw-trail-right .paw-icon {\r\n      animation: pawStepRight 4.5s ease-in-out infinite alternate;\r\n      fill: var(--gold);\r\n    }\r\n\r\n    .paw-trail-left .paw-icon:nth-child(1) { animation-delay: 0s; transform: rotate(-15deg); }\r\n    .paw-trail-left .paw-icon:nth-child(2) { animation-delay: 0.9s; transform: rotate(10deg) translateX(15px); }\r\n    .paw-trail-left .paw-icon:nth-child(3) { animation-delay: 1.8s; transform: rotate(-20deg); }\r\n    .paw-trail-left .paw-icon:nth-child(4) { animation-delay: 2.7s; transform: rotate(15deg) translateX(20px); }\r\n\r\n    .paw-trail-right .paw-icon:nth-child(1) { animation-delay: 0.4s; transform: rotate(20deg); }\r\n    .paw-trail-right .paw-icon:nth-child(2) { animation-delay: 1.2s; transform: rotate(-10deg) translateX(-15px); }\r\n    .paw-trail-right .paw-icon:nth-child(3) { animation-delay: 2.0s; transform: rotate(25deg); }\r\n    .paw-trail-right .paw-icon:nth-child(4) { animation-delay: 2.8s; transform: rotate(-15deg) translateX(-20px); }\r\n\r\n    .reveal-on-scroll {\r\n      opacity: 0;\r\n      transform: translateY(35px);\r\n      transition: opacity 0.85s var(--transition-smooth), transform 0.85s var(--transition-smooth);\r\n    }\r\n\r\n    .reveal-on-scroll.visible {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 01 \u2014 HERO (Join The Adventure)\r\n       ========================================================================== *\/\r\n    .events-hero-section {\r\n      min-height: 90vh;\r\n      position: relative;\r\n      padding: 100px 0 120px 0;\r\n      display: flex;\r\n      align-items: center;\r\n      background: radial-gradient(circle at 15% 25%, rgba(249, 242, 216, 0.65) 0%, rgba(250, 246, 240, 1) 75%);\r\n      border-bottom: 1px solid var(--border-light);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .events-hero-grid {\r\n      display: grid;\r\n      grid-template-columns: 1.1fr 0.9fr;\r\n      gap: 60px;\r\n      align-items: center;\r\n    }\r\n\r\n    .events-hero-title {\r\n      font-family: var(--font-heading);\r\n      font-size: clamp(3.5rem, 6vw, 5.5rem);\r\n      font-weight: 900;\r\n      color: var(--text-dark);\r\n      line-height: 1.05;\r\n      letter-spacing: -0.02em;\r\n      margin-bottom: 22px;\r\n    }\r\n\r\n    .events-hero-subtext {\r\n      font-family: var(--font-serif);\r\n      font-size: 1.45rem;\r\n      color: var(--text-body);\r\n      line-height: 1.6;\r\n      margin-bottom: 30px;\r\n      border-left: 4px solid var(--gold);\r\n      padding-left: 20px;\r\n      font-style: italic;\r\n    }\r\n\r\n    \/* Hero Background Floating Elements Stage *\/\r\n    .adventure-passport-stage {\r\n      position: relative;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    .passport-ticket-card {\r\n      position: relative;\r\n      width: 100%;\r\n      max-width: 430px;\r\n      background: #FFFDF8;\r\n      border: 2px dashed var(--terracotta);\r\n      border-radius: 24px;\r\n      padding: 40px 35px 55px 35px;\r\n      box-shadow: var(--shadow-lg);\r\n      transform: rotate(-2deg);\r\n      transition: transform 0.5s ease;\r\n      z-index: 5;\r\n    }\r\n\r\n    .passport-ticket-card:hover {\r\n      transform: rotate(0deg) scale(1.02);\r\n    }\r\n\r\n    .passport-stamp-badge {\r\n      position: absolute;\r\n      top: -22px;\r\n      right: -18px;\r\n      width: 95px;\r\n      height: 95px;\r\n      border: 3px double var(--gold);\r\n      border-radius: 50%;\r\n      background: #FFFFFF;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      text-align: center;\r\n      font-family: var(--font-heading);\r\n      font-size: 0.68rem;\r\n      font-weight: 800;\r\n      color: var(--terracotta);\r\n      transform: rotate(15deg);\r\n      box-shadow: var(--shadow-md);\r\n    }\r\n\r\n    \/* Hero Animated Floating Items *\/\r\n    .hero-floating-item {\r\n      position: absolute;\r\n      z-index: 6;\r\n      filter: drop-shadow(0 8px 16px rgba(0,0,0,0.12));\r\n      pointer-events: none;\r\n    }\r\n\r\n    .hero-floating-compass {\r\n      top: -45px;\r\n      right: -30px;\r\n      width: 75px;\r\n      height: 75px;\r\n      animation: rotateCompass 38s linear infinite;\r\n    }\r\n\r\n    .hero-floating-airplane {\r\n      bottom: -35px;\r\n      left: -45px;\r\n      width: 65px;\r\n      animation: floatSoft 7s ease-in-out infinite;\r\n    }\r\n\r\n    .hero-floating-star-1 {\r\n      top: 15%;\r\n      left: -20px;\r\n      font-size: 1.8rem;\r\n      color: var(--gold);\r\n      animation: floatSoft 5s ease-in-out infinite 1s;\r\n    }\r\n\r\n    .hero-floating-star-2 {\r\n      bottom: 20%;\r\n      right: -35px;\r\n      font-size: 1.5rem;\r\n      color: var(--terracotta);\r\n      animation: floatSoft 6s ease-in-out infinite 2s;\r\n    }\r\n\r\n    .hero-floating-ticket-scrap {\r\n      top: 50%;\r\n      right: -55px;\r\n      background: #FFFDF8;\r\n      border: 1px dashed var(--border-accent);\r\n      padding: 8px 16px;\r\n      border-radius: 8px;\r\n      font-family: var(--font-handwriting);\r\n      font-size: 1.3rem;\r\n      color: var(--terracotta);\r\n      transform: rotate(12deg);\r\n      animation: floatSoft 6.5s ease-in-out infinite 0.5s;\r\n      box-shadow: var(--shadow-sm);\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 02 \u2014 UPCOMING ADVENTURES (Storybook Ticket Cards)\r\n       ========================================================================== *\/\r\n    .section-upcoming-events {\r\n      padding: 120px 0;\r\n      background: var(--bg-paper-light);\r\n      position: relative;\r\n      border-bottom: 1px solid var(--border-light);\r\n    }\r\n\r\n    .events-header {\r\n      text-align: center;\r\n      max-width: 800px;\r\n      margin: 0 auto 60px auto;\r\n    }\r\n\r\n    .events-ticket-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(2, 1fr);\r\n      gap: 35px;\r\n    }\r\n\r\n    .storybook-ticket-card {\r\n      background: #FFFFFF;\r\n      border: 1px solid var(--border-accent);\r\n      border-radius: 24px;\r\n      overflow: hidden;\r\n      box-shadow: var(--shadow-md);\r\n      display: flex;\r\n      flex-direction: column;\r\n      position: relative;\r\n      transition: all 0.4s var(--transition-smooth);\r\n    }\r\n\r\n    .storybook-ticket-card:hover {\r\n      transform: translateY(-10px);\r\n      border-color: var(--terracotta);\r\n      box-shadow: 0 22px 50px var(--terracotta-glow);\r\n    }\r\n\r\n    .ticket-top-banner {\r\n      position: relative;\r\n      height: 220px;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .ticket-top-banner img {\r\n      width: 100%;\r\n      height: 100%;\r\n      object-fit: cover;\r\n      transition: transform 0.6s ease;\r\n    }\r\n\r\n    .storybook-ticket-card:hover .ticket-top-banner img {\r\n      transform: scale(1.06);\r\n    }\r\n\r\n    .ticket-date-badge {\r\n      position: absolute;\r\n      top: 18px;\r\n      left: 18px;\r\n      background: var(--terracotta);\r\n      color: #FFFFFF;\r\n      padding: 8px 18px;\r\n      border-radius: 30px;\r\n      font-family: var(--font-heading);\r\n      font-size: 0.85rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.1em;\r\n      box-shadow: var(--shadow-terracotta);\r\n    }\r\n\r\n    .ticket-body-content {\r\n      padding: 30px;\r\n      position: relative;\r\n    }\r\n\r\n    .ticket-perforation-line {\r\n      border-top: 2px dashed var(--border-accent);\r\n      margin: 15px 0 20px 0;\r\n      position: relative;\r\n      transition: border-color 0.3s ease;\r\n    }\r\n\r\n    .storybook-ticket-card:hover .ticket-perforation-line {\r\n      border-color: var(--terracotta);\r\n    }\r\n\r\n    .ticket-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.6rem;\r\n      font-weight: 800;\r\n      color: var(--text-dark);\r\n      margin-bottom: 12px;\r\n      line-height: 1.25;\r\n    }\r\n\r\n    .ticket-info-item {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 10px;\r\n      font-size: 0.95rem;\r\n      color: var(--text-body);\r\n      margin-bottom: 8px;\r\n      font-weight: 600;\r\n    }\r\n\r\n   \r\n\r\n    \/* ==========================================================================\r\n       SECTION 04 \u2014 PAST ADVENTURES (\"ADVENTURES WE'VE SHARED\")\r\n       ========================================================================== *\/\r\n    .section-past-adventures {\r\n      padding: 120px 0;\r\n      background: var(--bg-cream);\r\n      position: relative;\r\n    }\r\n\r\n    .timeline-trail-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 30px;\r\n      margin-top: 50px;\r\n    }\r\n\r\n    .past-event-card {\r\n      background: #FFFFFF;\r\n      border: 1px solid var(--border-accent);\r\n      border-radius: 20px;\r\n      overflow: hidden;\r\n      box-shadow: var(--shadow-md);\r\n      transition: transform 0.4s ease;\r\n    }\r\n\r\n    .past-event-card:hover {\r\n      transform: translateY(-8px);\r\n    }\r\n\r\n    .past-event-img {\r\n      width: 100%;\r\n      height: 220px;\r\n      object-fit: cover;\r\n    }\r\n\r\n    .past-event-body {\r\n      padding: 24px;\r\n    }\r\n\r\n    \/* ==========================================================================\r\n       SECTION 05 \u2014 FINAL CTA (\"WHERE WILL THE ADVENTURE TAKE US NEXT?\")\r\n       ========================================================================== *\/\r\n    .section-final-cta {\r\n      padding: 120px 0;\r\n      background: var(--bg-paper-light);\r\n      text-align: center;\r\n      border-top: 1px solid var(--border-light);\r\n      position: relative;\r\n      color: white !important;\r\n    }\r\n\r\n    \/* Responsive Queries *\/\r\n    @media (max-width: 1024px) {\r\n      .events-hero-grid, .events-ticket-grid, .timeline-trail-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 40px;\r\n      }\r\n\r\n      .game-scene-canvas {\r\n        height: 380px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n      .events-hero-title {\r\n        font-size: 3rem;\r\n      }\r\n\r\n      .game-teaser-panel {\r\n        padding: 35px 20px;\r\n      }\r\n\r\n      .paw-trail-left, .paw-trail-right {\r\n        display: none;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <main>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 01 \u2014 HERO (Join The Adventure)\r\n         ========================================================================== -->\r\n    <section id=\"events-hero\" class=\"events-hero-section\">\r\n      \r\n      <!-- Alternating Paw Trail (Right Side) -->\r\n      <div class=\"paw-trail-right\">\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n      <\/div>\r\n\r\n      <div class=\"container\">\r\n        <div class=\"events-hero-grid\">\r\n          \r\n          <!-- Left Content -->\r\n          <div class=\"reveal-on-scroll visible\">\r\n            <div class=\"section-eyebrow\">LIVE EVENTS & READINGS<\/div>\r\n            <h1 class=\"events-hero-title\">\r\n              JOIN THE<br>\r\n              <span style=\"color: var(--terracotta); font-family: var(--font-serif); font-style: italic;\">ADVENTURE<\/span>\r\n            <\/h1>\r\n\r\n            <div class=\"events-hero-subtext\">\r\n              Meet Christiana, discover new stories, and follow the adventure wherever it leads.\r\n            <\/div>\r\n\r\n            <div>\r\n              <a href=\"#upcoming-events\" class=\"btn-primary\">\r\n                SEE UPCOMING ADVENTURES \u2193\r\n              <\/a>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Right Visual Stage with Animated Floating Elements -->\r\n          <div class=\"adventure-passport-stage reveal-on-scroll visible\" style=\"transition-delay: 0.2s;\">\r\n            \r\n            <!-- Animated Compass -->\r\n            <div class=\"hero-floating-item hero-floating-compass\">\r\n              <svg viewBox=\"0 0 100 100\" fill=\"none\">\r\n                <circle cx=\"50\" cy=\"50\" r=\"44\" stroke=\"#D4AF37\" stroke-width=\"4\"\/>\r\n                <path d=\"M50 12 L50 88 M12 50 L88 50\" stroke=\"#D4AF37\" stroke-width=\"2\" stroke-dasharray=\"3 3\"\/>\r\n                <polygon points=\"50,18 58,50 50,44 42,50\" fill=\"#D9531E\"\/>\r\n                <polygon points=\"50,82 58,50 50,56 42,50\" fill=\"#1C1917\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <!-- Animated Paper Airplane -->\r\n            <div class=\"hero-floating-item hero-floating-airplane\">\r\n              <svg viewBox=\"0 0 60 60\" fill=\"none\">\r\n                <path d=\"M10 30 L50 10 L30 50 L25 35 Z\" fill=\"#D9531E\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n\r\n            <!-- Floating Stars -->\r\n            <div class=\"hero-floating-item hero-floating-star-1\">\u2726<\/div>\r\n            <div class=\"hero-floating-item hero-floating-star-2\">\u2726<\/div>\r\n\r\n            <!-- Ticket Scrap -->\r\n            <div class=\"hero-floating-item hero-floating-ticket-scrap\">\r\n              Admit One \ud83d\udc3e\r\n            <\/div>\r\n\r\n            <!-- Passport Ticket Card -->\r\n            <div class=\"passport-ticket-card\">\r\n              <div class=\"passport-stamp-badge\">\r\n                ADVENTURE<br>PASSPORT\r\n              <\/div>\r\n\r\n              <div style=\"font-family: var(--font-heading); font-size: 1.4rem; color: var(--text-dark); margin-bottom: 8px;\">\r\n                CHRISTIANA JONES MARZETT\r\n              <\/div>\r\n              <div style=\"font-size: 0.85rem; color: var(--terracotta); font-weight: 800; letter-spacing: 0.15em; margin-bottom: 20px;\">\r\n                AUTHOR & STORYTELLER\r\n              <\/div>\r\n\r\n              <p style=\"font-size: 0.95rem; color: var(--text-body); line-height: 1.6; border-top: 1px solid var(--border-accent); padding-top: 16px;\">\r\n                \u2726 Story Readings \u00b7 Book Signing \u00b7 School Visits \u2726\r\n              <\/p>\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 02 \u2014 UPCOMING ADVENTURES (Storybook Ticket Cards)\r\n         ========================================================================== -->\r\n    <section id=\"upcoming-events\" class=\"section-upcoming-events\">\r\n      \r\n      <!-- Alternating Paw Trail (Left Side) -->\r\n      <div class=\"paw-trail-left\">\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n      <\/div>\r\n\r\n      <div class=\"container\">\r\n        \r\n        <div class=\"events-header reveal-on-scroll\">\r\n          <div class=\"section-eyebrow\">MARK YOUR CALENDAR<\/div>\r\n          <h2 class=\"section-title\">UPCOMING ADVENTURES<\/h2>\r\n          <p style=\"font-size: 1.15rem; color: var(--text-body);\">\r\n            Join Christiana live for interactive book readings and story workshops!\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"events-ticket-grid\">\r\n          \r\n          <!-- TICKET 01 -->\r\n          <div class=\"storybook-ticket-card reveal-on-scroll\">\r\n            <div class=\"ticket-top-banner\">\r\n              <div class=\"ticket-date-badge\">SEP 14, 2026<\/div>\r\n              <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1512820790803-83ca734da794?auto=format&fit=crop&w=800&q=80\" alt=\"Book Reading Event\">\r\n            <\/div>\r\n\r\n            <div class=\"ticket-body-content\">\r\n              <div class=\"ticket-title\">BOOK READING: THAT ONE PUPPY<\/div>\r\n              \r\n              <div class=\"ticket-info-item\">\r\n                <span>\ud83d\udccd<\/span> City Children's Library & Story Room\r\n              <\/div>\r\n              <div class=\"ticket-info-item\">\r\n                <span>\ud83d\udd50<\/span> 11:00 AM \u2013 1:00 PM EST\r\n              <\/div>\r\n\r\n              <div class=\"ticket-perforation-line\"><\/div>\r\n\r\n              <p style=\"font-size: 0.95rem; color: var(--text-body); margin-bottom: 20px;\">\r\n                Experience Nico's journey live! Includes interactive storytelling, hot dog doggie crafts, and book signings.\r\n              <\/p>\r\n\r\n              <div>\r\n                <!--<a href=\"#find-secrets\" class=\"btn-secondary\">DISCOVER EVENT \u2192<\/a>-->\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- TICKET 02 -->\r\n          <div class=\"storybook-ticket-card reveal-on-scroll\" style=\"transition-delay: 0.15s;\">\r\n            <div class=\"ticket-top-banner\">\r\n              <div class=\"ticket-date-badge\">OCT 02, 2026<\/div>\r\n              <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1457369804613-52c61a468e7d?auto=format&fit=crop&w=800&q=80\" alt=\"Author Workshop\">\r\n            <\/div>\r\n\r\n            <div class=\"ticket-body-content\">\r\n              <div class=\"ticket-title\">STORY EXPLORER WORKSHOP<\/div>\r\n              \r\n              <div class=\"ticket-info-item\">\r\n                <span>\ud83d\udccd<\/span> Community Arts Center\r\n              <\/div>\r\n              <div class=\"ticket-info-item\">\r\n                <span>\ud83d\udd50<\/span> 2:30 PM \u2013 4:30 PM EST\r\n              <\/div>\r\n\r\n              <div class=\"ticket-perforation-line\"><\/div>\r\n\r\n              <p style=\"font-size: 0.95rem; color: var(--text-body); margin-bottom: 20px;\">\r\n                Learn how stories are born! A creative writing and costume drawing adventure for kids and young storytellers.\r\n              <\/p>\r\n\r\n              <div>\r\n                <!--<a href=\"#find-secrets\" class=\"btn-secondary\">DISCOVER EVENT \u2192<\/a>-->\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 04 \u2014 PAST ADVENTURES (\"ADVENTURES WE'VE SHARED\")\r\n         ========================================================================== -->\r\n    <section id=\"past-adventures\" class=\"section-past-adventures\">\r\n      \r\n      <!-- Alternating Paw Trail (Left Side) -->\r\n      <div class=\"paw-trail-left\">\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n      <\/div>\r\n\r\n      <div class=\"container\">\r\n        \r\n        <div class=\"events-header reveal-on-scroll\">\r\n          <div class=\"section-eyebrow\">MEMORY GALLERY<\/div>\r\n          <h2 class=\"section-title\">ADVENTURES WE'VE SHARED<\/h2>\r\n        <\/div>\r\n\r\n        <div class=\"timeline-trail-grid\">\r\n          \r\n          <div class=\"past-event-card reveal-on-scroll\">\r\n            <img decoding=\"async\" class=\"past-event-img\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/school.jpg\" alt=\"Past School Reading\">\r\n            <div class=\"past-event-body\">\r\n              <div style=\"font-size: 0.75rem; font-weight: 800; color: var(--terracotta); letter-spacing: 0.15em;\">MAY 2026<\/div>\r\n              <h4 style=\"font-family: var(--font-heading); font-size: 1.25rem; color: var(--text-dark); margin: 6px 0;\">Elementary School Visit<\/h4>\r\n              <p style=\"font-size: 0.9rem; color: var(--text-body);\">Reading session with 120 young storytellers!<\/p>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"past-event-card reveal-on-scroll\" style=\"transition-delay: 0.15s;\">\r\n            <img decoding=\"async\" class=\"past-event-img\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/book-children.jpg\" alt=\"Book Fair\">\r\n            <div class=\"past-event-body\">\r\n              <div style=\"font-size: 0.75rem; font-weight: 800; color: var(--terracotta); letter-spacing: 0.15em;\">JUN 2026<\/div>\r\n              <h4 style=\"font-family: var(--font-heading); font-size: 1.25rem; color: var(--text-dark); margin: 6px 0;\">Children's Book Festival<\/h4>\r\n              <p style=\"font-size: 0.9rem; color: var(--text-body);\">Live illustrator Q&A and doggie costume contest.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"past-event-card reveal-on-scroll\" style=\"transition-delay: 0.3s;\">\r\n            <img decoding=\"async\" class=\"past-event-img\" src=\"https:\/\/demowebdesign.live\/christiana\/wp-content\/uploads\/2026\/08\/summer.jpg\" alt=\"Library Story Hour\">\r\n            <div class=\"past-event-body\">\r\n              <div style=\"font-size: 0.75rem; font-weight: 800; color: var(--terracotta); letter-spacing: 0.15em;\">JUL 2026<\/div>\r\n              <h4 style=\"font-family: var(--font-heading); font-size: 1.25rem; color: var(--text-dark); margin: 6px 0;\">Summer Story Hour<\/h4>\r\n              <p style=\"font-size: 0.9rem; color: var(--text-body);\">Under the shade of the community garden trees.<\/p>\r\n            <\/div>\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- ==========================================================================\r\n         SECTION 05 \u2014 FINAL CTA (\"WHERE WILL THE ADVENTURE TAKE US NEXT?\")\r\n         ========================================================================== -->\r\n    <section id=\"final-cta\" class=\"section-final-cta\">\r\n      \r\n      <!-- Alternating Paw Trail (Right Side) -->\r\n      <div class=\"paw-trail-right\">\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n        <svg class=\"paw-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>\r\n      <\/div>\r\n\r\n      <div class=\"container reveal-on-scroll\">\r\n        <div class=\"section-eyebrow\">CONTINUE THE JOURNEY<\/div>\r\n        <h2 class=\"section-title\">WHERE WILL THE ADVENTURE TAKE US NEXT?<\/h2>\r\n        <p style=\"font-size: 1.2rem; color: var(--text-body); margin-bottom: 35px; max-width: 600px; margin-left: auto; margin-right: auto;\">\r\n          The next story is always waiting around the corner.\r\n        <\/p>\r\n\r\n        <div style=\"display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;\">\r\n          <a href=\"https:\/\/demowebdesign.live\/christiana\/open-the-book\/\" class=\"btn-primary\">EXPLORE THE BOOK \u2192<\/a>\r\n          <a href=\"https:\/\/demowebdesign.live\/christiana\/meet-the-storyteller\/\" class=\"btn-secondary\">MEET CHRISTIANA \u2192<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n  <\/main>\r\n\r\n  <script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n      \/\/ Scroll Reveal Observer\r\n      const observerOptions = {\r\n        root: null,\r\n        rootMargin: '0px',\r\n        threshold: 0.15\r\n      };\r\n\r\n      const revealObserver = new IntersectionObserver((entries, observer) => {\r\n        entries.forEach(entry => {\r\n          if (entry.isIntersecting) {\r\n            entry.target.classList.add('visible');\r\n          }\r\n        });\r\n      }, observerOptions);\r\n\r\n      document.querySelectorAll('.reveal-on-scroll').forEach(el => {\r\n        revealObserver.observe(el);\r\n      });\r\n\r\n      \/\/ ==========================================================================\r\n      \/\/ GAME ENGINE LOGIC (\"FIND THE SECRETS\")\r\n      \/\/ ==========================================================================\r\n      const btnStartGame = document.getElementById('btn-start-game');\r\n      const gameTeaser = document.getElementById('game-teaser');\r\n      const gameStage = document.getElementById('game-stage');\r\n      const gameScene = document.getElementById('game-scene');\r\n      const targetsContainer = document.getElementById('targets-container');\r\n      const gameCounter = document.getElementById('game-counter');\r\n      const gameLevelTitle = document.getElementById('game-level-title');\r\n      const gameToast = document.getElementById('game-toast');\r\n      const gameCompletion = document.getElementById('game-completion');\r\n      const btnRestartGame = document.getElementById('btn-restart-game');\r\n\r\n      let currentLevelIndex = 0;\r\n      let foundInCurrentLevel = 0;\r\n\r\n      \/\/ 3 Levels Data\r\n      const levels = [\r\n        {\r\n          title: \"LEVEL 1: THE CITY \ud83c\udfd9\ufe0f\",\r\n          bg: \"https:\/\/images.unsplash.com\/photo-1477959858617-67f30ac72604?auto=format&fit=crop&w=1200&q=80\",\r\n          targets: [\r\n            { id: 1, name: \"Paw Print \ud83d\udc3e\", top: \"25%\", left: \"18%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#D9531E\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5zm-5-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm10 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\/><\/svg>' },\r\n            { id: 2, name: \"Star \ud83c\udf1f\", top: \"15%\", left: \"75%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#D4AF37\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>' },\r\n            { id: 3, name: \"Key \ud83d\udd11\", top: \"65%\", left: \"42%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#D4AF37\"><path d=\"M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\"\/><\/svg>' },\r\n            { id: 4, name: \"Dog Bone \ud83e\uddb4\", top: \"80%\", left: \"85%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#F4ECE1\"><path d=\"M19 10c-1.1 0-2 .9-2 2 0 .18.03.35.07.51L6.93 12.51C6.89 12.35 6.86 12.18 6.86 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2c.18 0 .35-.03.51-.07l10.14.07c.04.16.07.33.07.51 0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2z\"\/><\/svg>' },\r\n            { id: 5, name: \"Hot Dog \ud83c\udf2d\", top: \"45%\", left: \"60%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#D9531E\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z\"\/><\/svg>' }\r\n          ]\r\n        },\r\n        {\r\n          title: \"LEVEL 2: THE ZOO \ud83e\udd81\",\r\n          bg: \"https:\/\/images.unsplash.com\/photo-1537151608828-ea2b11777ee8?auto=format&fit=crop&w=1200&q=80\",\r\n          targets: [\r\n            { id: 1, name: \"Lion Tail \ud83e\udd81\", top: \"70%\", left: \"22%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#D4AF37\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>' },\r\n            { id: 2, name: \"Paw Print \ud83d\udc3e\", top: \"35%\", left: \"80%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#D9531E\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5z\"\/><\/svg>' },\r\n            { id: 3, name: \"Star \ud83c\udf1f\", top: \"20%\", left: \"30%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#D4AF37\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>' },\r\n            { id: 4, name: \"Treat \ud83e\uddb4\", top: \"82%\", left: \"55%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#FFFFFF\"><path d=\"M19 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"\/><\/svg>' },\r\n            { id: 5, name: \"Crown \ud83d\udc51\", top: \"15%\", left: \"65%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#D4AF37\"><path d=\"M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5z\"\/><\/svg>' }\r\n          ]\r\n        },\r\n        {\r\n          title: \"LEVEL 3: THROUGH THE GLASS \ud83e\ude9f\",\r\n          bg: \"https:\/\/images.unsplash.com\/photo-1583511655857-d19b40a7a54e?auto=format&fit=crop&w=1200&q=80\",\r\n          targets: [\r\n            { id: 1, name: \"Heart \u2764\ufe0f\", top: \"28%\", left: \"48%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#D9531E\"><path d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\"\/><\/svg>' },\r\n            { id: 2, name: \"Paw Print \ud83d\udc3e\", top: \"75%\", left: \"15%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#D9531E\"><path d=\"M12 14c-2.5 0-4.5 1.5-4.5 3.5 0 2.5 2 4.5 4.5 4.5s4.5-2 4.5-4.5c0-2-2-3.5-4.5-3.5z\"\/><\/svg>' },\r\n            { id: 3, name: \"Star \ud83c\udf1f\", top: \"18%\", left: \"82%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#D4AF37\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>' },\r\n            { id: 4, name: \"Teddy \ud83e\uddf8\", top: \"60%\", left: \"70%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#D4AF37\"><circle cx=\"12\" cy=\"12\" r=\"8\"\/><\/svg>' },\r\n            { id: 5, name: \"Window Reflection \ud83e\ude9f\", top: \"40%\", left: \"30%\", svg: '<svg viewBox=\"0 0 24 24\" fill=\"#FFFFFF\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 16H5v-6h7v6zm0-8H5V5h7v6zm7 8h-6v-6h6v6zm0-8h-6V5h6v6z\"\/><\/svg>' }\r\n          ]\r\n        }\r\n      ];\r\n\r\n      btnStartGame.addEventListener('click', () => {\r\n        gameTeaser.style.display = 'none';\r\n        gameStage.style.display = 'block';\r\n        loadLevel(0);\r\n      });\r\n\r\n      function loadLevel(index) {\r\n        currentLevelIndex = index;\r\n        foundInCurrentLevel = 0;\r\n\r\n        const lvl = levels[index];\r\n        gameLevelTitle.textContent = lvl.title;\r\n        gameScene.style.backgroundImage = `url('${lvl.bg}')`;\r\n        gameCounter.textContent = `SECRETS FOUND: 0 \/ ${lvl.targets.length}`;\r\n        targetsContainer.innerHTML = '';\r\n        gameCompletion.style.display = 'none';\r\n        gameScene.style.display = 'block';\r\n\r\n        lvl.targets.forEach(t => {\r\n          const targetEl = document.createElement('div');\r\n          targetEl.className = 'secret-target-item';\r\n          targetEl.style.top = t.top;\r\n          targetEl.style.left = t.left;\r\n          targetEl.innerHTML = t.svg;\r\n\r\n          targetEl.addEventListener('click', (e) => {\r\n            e.stopPropagation();\r\n            if (!targetEl.classList.contains('found')) {\r\n              targetEl.classList.add('found');\r\n              foundInCurrentLevel++;\r\n              gameCounter.textContent = `SECRETS FOUND: ${foundInCurrentLevel} \/ ${lvl.targets.length}`;\r\n              \r\n              showToast(`SECRET FOUND! (${t.name}) \u2726`);\r\n\r\n              if (foundInCurrentLevel === lvl.targets.length) {\r\n                setTimeout(() => {\r\n                  if (currentLevelIndex < levels.length - 1) {\r\n                    loadLevel(currentLevelIndex + 1);\r\n                  } else {\r\n                    showCompletionScreen();\r\n                  }\r\n                }, 1200);\r\n              }\r\n            }\r\n          });\r\n\r\n          targetsContainer.appendChild(targetEl);\r\n        });\r\n      }\r\n\r\n      function showToast(msg) {\r\n        gameToast.textContent = msg;\r\n        gameToast.classList.add('show');\r\n        setTimeout(() => {\r\n          gameToast.classList.remove('show');\r\n        }, 1800);\r\n      }\r\n\r\n      function showCompletionScreen() {\r\n        gameScene.style.display = 'none';\r\n        gameCompletion.style.display = 'block';\r\n      }\r\n\r\n      btnRestartGame.addEventListener('click', () => {\r\n        loadLevel(0);\r\n      });\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\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>LIVE EVENTS &#038; READINGS JOIN THE ADVENTURE Meet Christiana, discover new stories, and follow the adventure wherever it leads. SEE [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-280","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/comments?post=280"}],"version-history":[{"count":22,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/280\/revisions"}],"predecessor-version":[{"id":436,"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/pages\/280\/revisions\/436"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/christiana\/wp-json\/wp\/v2\/media?parent=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}