{"product_id":"test-product-for-shopify-v1","title":"Test Product for Shopify v1","description":"\u003cp\u003eThis is a test product. This is where we experiment.\u003cbr\u003e\u003cbr\u003eDO NOT BUY!\u003c\/p\u003e\n\u003c!-- \n  ========================================================================\n  MattyJacks.com Test Product - Mystery Box Snippet (v1)\n  All styles, scripts, animations, and container elements are scoped \n  with the \"mjshopcode1-\" prefix to prevent conflicting with Shopify themes.\n  ========================================================================\n--\u003e\n\u003cdiv id=\"mjshopcode1-container\" class=\"mjshopcode1-wrapper\"\u003e\n  \u003cstyle\u003e\n    \/* Scoped Design System \u0026 CSS Variables *\/\n    .mjshopcode1-wrapper {\n      --mjshopcode1-bg: #0d0914;\n      --mjshopcode1-card-bg: rgba(23, 15, 38, 0.75);\n      --mjshopcode1-purple-glow: #9d4edd;\n      --mjshopcode1-pink-glow: #f72585;\n      --mjshopcode1-cyan-glow: #4cc9f0;\n      --mjshopcode1-gold-accent: #ffb703;\n      --mjshopcode1-text: #e2daf8;\n      --mjshopcode1-text-muted: #a395c4;\n      --mjshopcode1-font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n\n      font-family: var(--mjshopcode1-font-main);\n      background: radial-gradient(circle at 50% 20%, #1f1035 0%, var(--mjshopcode1-bg) 80%);\n      color: var(--mjshopcode1-text);\n      border-radius: 16px;\n      padding: 32px 24px;\n      margin: 20px 0;\n      border: 1px solid rgba(157, 78, 221, 0.3);\n      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(157, 78, 221, 0.15);\n      position: relative;\n      overflow: hidden;\n      box-sizing: border-box;\n    }\n\n    \/* Floating particles background effect *\/\n    .mjshopcode1-ambient-light {\n      position: absolute;\n      top: -50%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      background: radial-gradient(circle at 30% 30%, rgba(247, 37, 133, 0.15), transparent 40%),\n                  radial-gradient(circle at 70% 70%, rgba(76, 201, 240, 0.15), transparent 40%);\n      animation: mjshopcode1-spin 25s linear infinite;\n      pointer-events: none;\n    }\n\n    @keyframes mjshopcode1-spin {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .mjshopcode1-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      background: rgba(157, 78, 221, 0.2);\n      border: 1px solid var(--mjshopcode1-purple-glow);\n      color: #e0aaff;\n      padding: 6px 14px;\n      border-radius: 20px;\n      font-size: 0.75rem;\n      font-weight: 700;\n      letter-spacing: 1.5px;\n      text-transform: uppercase;\n      margin-bottom: 20px;\n      backdrop-filter: blur(5px);\n      box-shadow: 0 0 12px rgba(157, 78, 221, 0.4);\n    }\n\n    .mjshopcode1-badge-dot {\n      width: 8px;\n      height: 8px;\n      background-color: var(--mjshopcode1-pink-glow);\n      border-radius: 50%;\n      box-shadow: 0 0 8px var(--mjshopcode1-pink-glow);\n      animation: mjshopcode1-pulse 1.8s infinite alternate;\n    }\n\n    @keyframes mjshopcode1-pulse {\n      0% { opacity: 0.4; transform: scale(0.8); }\n      100% { opacity: 1; transform: scale(1.2); }\n    }\n\n    .mjshopcode1-title {\n      font-size: 1.85rem;\n      font-weight: 800;\n      line-height: 1.25;\n      margin: 0 0 16px 0;\n      background: linear-gradient(135deg, #ffffff 30%, #e0aaff 70%, var(--mjshopcode1-cyan-glow) 100%);\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      text-shadow: 0 2px 10px rgba(0,0,0,0.5);\n    }\n\n    .mjshopcode1-intro {\n      font-size: 1.05rem;\n      line-height: 1.6;\n      color: var(--mjshopcode1-text);\n      margin-bottom: 24px;\n      font-style: italic;\n    }\n\n    \/* Interactive Mystery Box Visual *\/\n    .mjshopcode1-box-stage {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin: 30px 0;\n      perspective: 1000px;\n    }\n\n    .mjshopcode1-mystery-box {\n      width: 130px;\n      height: 130px;\n      background: linear-gradient(145deg, #2b1055, #591a89);\n      border: 2px solid var(--mjshopcode1-gold-accent);\n      border-radius: 20px;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      position: relative;\n      box-shadow: 0 0 30px rgba(255, 183, 3, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.2);\n      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n      animation: mjshopcode1-float 4s ease-in-out infinite;\n    }\n\n    .mjshopcode1-mystery-box:hover {\n      transform: scale(1.08) rotate(3deg);\n      box-shadow: 0 0 45px rgba(247, 37, 133, 0.6), inset 0 0 25px rgba(255, 255, 255, 0.4);\n    }\n\n    .mjshopcode1-box-icon {\n      font-size: 3.2rem;\n      line-height: 1;\n      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));\n      user-select: none;\n    }\n\n    .mjshopcode1-box-label {\n      font-size: 0.7rem;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      color: var(--mjshopcode1-gold-accent);\n      font-weight: 700;\n      margin-top: 6px;\n    }\n\n    @keyframes mjshopcode1-float {\n      0%, 100% { transform: translateY(0px) rotate(0deg); }\n      50% { transform: translateY(-12px) rotate(-2deg); }\n    }\n\n    \/* Grid of Mystery Secrets *\/\n    .mjshopcode1-features {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n      gap: 16px;\n      margin-top: 24px;\n    }\n\n    .mjshopcode1-feature-card {\n      background: var(--mjshopcode1-card-bg);\n      padding: 16px;\n      border-radius: 12px;\n      border: 1px solid rgba(255, 255, 255, 0.08);\n      transition: all 0.3s ease;\n      backdrop-filter: blur(10px);\n    }\n\n    .mjshopcode1-feature-card:hover {\n      border-color: var(--mjshopcode1-purple-glow);\n      transform: translateY(-3px);\n      background: rgba(35, 22, 58, 0.85);\n    }\n\n    .mjshopcode1-feature-icon {\n      font-size: 1.4rem;\n      margin-bottom: 8px;\n    }\n\n    .mjshopcode1-feature-title {\n      font-size: 0.95rem;\n      font-weight: 700;\n      color: #fff;\n      margin: 0 0 4px 0;\n    }\n\n    .mjshopcode1-feature-desc {\n      font-size: 0.825rem;\n      color: var(--mjshopcode1-text-muted);\n      margin: 0;\n      line-height: 1.4;\n    }\n\n    \/* Dynamic Reveal Log Container *\/\n    .mjshopcode1-reveal-area {\n      margin-top: 24px;\n      background: rgba(0, 0, 0, 0.4);\n      border-radius: 10px;\n      padding: 16px;\n      border: 1px dashed rgba(157, 78, 221, 0.4);\n      text-align: center;\n    }\n\n    .mjshopcode1-reveal-btn {\n      background: linear-gradient(135deg, var(--mjshopcode1-purple-glow), var(--mjshopcode1-pink-glow));\n      color: #ffffff;\n      border: none;\n      padding: 12px 24px;\n      border-radius: 30px;\n      font-size: 0.9rem;\n      font-weight: 700;\n      cursor: pointer;\n      box-shadow: 0 4px 15px rgba(247, 37, 133, 0.4);\n      transition: all 0.3s ease;\n    }\n\n    .mjshopcode1-reveal-btn:hover {\n      transform: scale(1.04);\n      box-shadow: 0 6px 20px rgba(247, 37, 133, 0.6);\n    }\n\n    .mjshopcode1-secret-msg {\n      margin-top: 14px;\n      font-size: 0.9rem;\n      color: var(--mjshopcode1-cyan-glow);\n      min-height: 24px;\n      font-family: monospace;\n      font-weight: 600;\n    }\n\n    .mjshopcode1-footer-warning {\n      margin-top: 24px;\n      font-size: 0.75rem;\n      text-align: center;\n      color: rgba(255, 255, 255, 0.4);\n      letter-spacing: 0.5px;\n    }\n  \u003c\/style\u003e\n\n  \u003c!-- Background Ambient Glow --\u003e\n  \u003cdiv class=\"mjshopcode1-ambient-light\"\u003e\u003c\/div\u003e\n\n  \u003c!-- Badge --\u003e\n  \u003cdiv class=\"mjshopcode1-badge\"\u003e\n    \u003cspan class=\"mjshopcode1-badge-dot\"\u003e\u003c\/span\u003e\n    \u003cspan\u003eExperimental Artifact #001\u003c\/span\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- Main Title --\u003e\n  \u003ch2 class=\"mjshopcode1-title\"\u003eThe Enigma of MattyJacks\u003c\/h2\u003e\n\n  \u003c!-- Intro Description --\u003e\n  \u003cp class=\"mjshopcode1-intro\"\u003e\n    You have stumbled into an unmapped sector of the store. What lies within this test container is not a conventional product, but an evolving experiment of code, curiosity, and dynamic mystery.\n  \u003c\/p\u003e\n\n  \u003c!-- Animated Interactive Box --\u003e\n  \u003cdiv class=\"mjshopcode1-box-stage\"\u003e\n    \u003cdiv class=\"mjshopcode1-mystery-box\" id=\"mjshopcode1-box-trigger\" title=\"Click to probe the anomaly!\"\u003e\n      \u003cspan class=\"mjshopcode1-box-icon\" id=\"mjshopcode1-box-icon\"\u003e❓\u003c\/span\u003e\n      \u003cspan class=\"mjshopcode1-box-label\"\u003eTap To Probe\u003c\/span\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- Spec Grid Features --\u003e\n  \u003cdiv class=\"mjshopcode1-features\"\u003e\n    \u003cdiv class=\"mjshopcode1-feature-card\"\u003e\n      \u003cdiv class=\"mjshopcode1-feature-icon\"\u003e✨\u003c\/div\u003e\n      \u003ch3 class=\"mjshopcode1-feature-title\"\u003eQuantum Contents\u003c\/h3\u003e\n      \u003cp class=\"mjshopcode1-feature-desc\"\u003eState remains uncollapsed until unboxed. Could be legendary, could be absurd.\u003c\/p\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"mjshopcode1-feature-card\"\u003e\n      \u003cdiv class=\"mjshopcode1-feature-icon\"\u003e🔒\u003c\/div\u003e\n      \u003ch3 class=\"mjshopcode1-feature-title\"\u003eEncrypted Aura\u003c\/h3\u003e\n      \u003cp class=\"mjshopcode1-feature-desc\"\u003eWoven with raw CSS animations \u0026amp; JS reactive logic directly in product metadata.\u003c\/p\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"mjshopcode1-feature-card\"\u003e\n      \u003cdiv class=\"mjshopcode1-feature-icon\"\u003e⚡\u003c\/div\u003e\n      \u003ch3 class=\"mjshopcode1-feature-title\"\u003eShopify Native\u003c\/h3\u003e\n      \u003cp class=\"mjshopcode1-feature-desc\"\u003eZero external asset dependencies. Encapsulated namespace to keep your theme safe.\u003c\/p\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003c!-- Interactive Reveal Button Area --\u003e\n  \u003cdiv class=\"mjshopcode1-reveal-area\"\u003e\n    \u003cbutton type=\"button\" class=\"mjshopcode1-reveal-btn\" id=\"mjshopcode1-action-btn\"\u003e\n      🔮 Decrypt Mystery Transmission\n    \u003c\/button\u003e\n    \u003cdiv class=\"mjshopcode1-secret-msg\" id=\"mjshopcode1-output\"\u003e\n      [ Status: Awaiting Signal Probe ]\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003cdiv class=\"mjshopcode1-footer-warning\"\u003e\n    ⚠️ TEST ENVIRONMENT METADATA \/\/ DO NOT ATTEMPT TO COMPREHEND WITHOUT ADVENTURE IN YOUR HEART\n  \u003c\/div\u003e\n\n  \u003c!-- Encapsulated JavaScript Scope --\u003e\n  \u003cscript\u003e\n    (function() {\n      'use strict';\n\n      \/\/ Secret mystery quotes array\n      var mjshopcode1_quotes = [\n        \"\\\"The box whispers in 0s and 1s... it craves a buyer with vision.\\\"\",\n        \"\\\"Anomaly detected: 99.9% chance of pure awe upon unboxing.\\\"\",\n        \"\\\"Is it a glitch? A treasure? Or MattyJacks' secret recipe?\\\"\",\n        \"\\\"Warning: Curiosity level exceeding standard Shopify safety thresholds!\\\"\",\n        \"\\\"You didn't find this test product. This test product found YOU.\\\"\"\n      ];\n\n      var mjshopcode1_boxIcons = [\"❓\", \"🎁\", \"🌌\", \"🔮\", \"💎\", \"⚡\"];\n\n      \/\/ DOM Elements safely selected within scope\n      var boxTrigger = document.getElementById('mjshopcode1-box-trigger');\n      var boxIcon = document.getElementById('mjshopcode1-box-icon');\n      var actionBtn = document.getElementById('mjshopcode1-action-btn');\n      var outputContainer = document.getElementById('mjshopcode1-output');\n\n      if (boxTrigger \u0026\u0026 actionBtn \u0026\u0026 outputContainer) {\n        var mjshopcode1_counter = 0;\n\n        function mjshopcode1_triggerPulse() {\n          mjshopcode1_counter++;\n          var quoteIndex = mjshopcode1_counter % mjshopcode1_quotes.length;\n          var iconIndex = mjshopcode1_counter % mjshopcode1_boxIcons.length;\n\n          \/\/ Animate Icon\n          if (boxIcon) {\n            boxIcon.style.transform = 'scale(0)';\n            boxIcon.style.transition = 'transform 0.2s ease';\n            setTimeout(function() {\n              boxIcon.textContent = mjshopcode1_boxIcons[iconIndex];\n              boxIcon.style.transform = 'scale(1)';\n            }, 200);\n          }\n\n          \/\/ Typewriter style output effect\n          outputContainer.style.opacity = '0';\n          setTimeout(function() {\n            outputContainer.textContent = mjshopcode1_quotes[quoteIndex];\n            outputContainer.style.opacity = '1';\n            outputContainer.style.transition = 'opacity 0.4s ease';\n          }, 150);\n        }\n\n        \/\/ Attach Event Listeners\n        boxTrigger.addEventListener('click', mjshopcode1_triggerPulse);\n        actionBtn.addEventListener('click', mjshopcode1_triggerPulse);\n      }\n    })();\n  \u003c\/script\u003e\n\u003c\/div\u003e","brand":"MattyJacks","offers":[{"title":"Default Title","offer_id":46391875895330,"sku":null,"price":100.0,"currency_code":"USD","in_stock":false}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0881\/8284\/9570\/files\/testproductformattyjacks2026.png?v=1786579955","url":"https:\/\/shop.mattyjacks.com\/products\/test-product-for-shopify-v1","provider":"shop.MattyJacks","version":"1.0","type":"link"}