{"id":40,"date":"2026-02-17T06:17:57","date_gmt":"2026-02-17T06:17:57","guid":{"rendered":"https:\/\/agame-afoot.com\/?page_id=40"},"modified":"2026-02-21T22:06:45","modified_gmt":"2026-02-21T22:06:45","slug":"home","status":"publish","type":"page","link":"https:\/\/agame-afoot.com\/","title":{"rendered":"Home"},"content":{"rendered":"\n<div id=\"agf-loading\" style=\"position:fixed;inset:0;background:#021E2B;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 0.8s ease,visibility 0.8s ease;\">\n  <div style=\"width:100px;height:100px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#DE515E,#A10B1A);box-shadow:0 0 40px rgba(222,81,94,0.3);display:flex;align-items:center;justify-content:center;animation:agfSP 1.5s ease-in-out infinite;\">\n    <span style=\"font-family:'DM Serif Display',serif;color:#FFF9E3;font-size:13px;font-weight:700;text-align:center;line-height:1.2;\">A<br>G\u00b7F<\/span>\n  <\/div>\n  <div id=\"agf-loading-text\" style=\"font-family:'Special Elite',monospace;color:#E6C654;margin-top:25px;font-size:13px;letter-spacing:3px;\">DECRYPTING&#8230;<\/div>\n<\/div>\n<style>@keyframes agfSP{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}<\/style>\n<script>\n(function(){\n  var el = document.getElementById('agf-loading-text');\n  var s = document.getElementById('agf-loading');\n  setTimeout(function(){ el.textContent = 'VERIFYING CLEARANCE...'; }, 600);\n  setTimeout(function(){ el.textContent = 'ACCESSING DOSSIER...'; }, 1200);\n  setTimeout(function(){ el.textContent = 'MISSION READY.'; }, 1800);\n  setTimeout(function(){ s.style.opacity='0'; s.style.visibility='hidden'; s.style.pointerEvents='none'; }, 2400);\n})();\n<\/script>\n\n\n\n<style>\n\/* ===== A GAME AFOOT - LANDING PAGE ===== *\/\n\/* Paste this page content into a Blocksy page using Code Editor view *\/\n\/* Set the page to \"Default (No Sidebar)\" or a blank\/canvas template in Blocksy *\/\n\n:root {\n  --p0: #387890;\n  --p1: #023447;\n  --p2: #0B4F69;\n  --p3: #A2C5D2;\n  --p4: #D6E8EF;\n  --s1-0: #E6C654;\n  --s1-1: #715800;\n  --s1-2: #A7850C;\n  --s1-3: #FFF2C3;\n  --s1-4: #FFF9E3;\n  --s2-0: #DE515E;\n  --s2-1: #6D000A;\n  --s2-2: #A10B1A;\n  --s2-3: #FBC0C5;\n  --s2-4: #FEE1E4;\n  --bg-dark: #021E2B;\n  --bg-dark-mid: #032A3A;\n  --bg-parchment: var(--s1-4);\n  --bg-parchment-mid: var(--s1-3);\n  --ink: var(--p1);\n  --ink-light: #1a4a5e;\n  --gold: var(--s1-0);\n  --gold-dim: var(--s1-2);\n  --gold-bright: #f0d460;\n  --red: var(--s2-0);\n  --red-dark: var(--s2-2);\n  --manila: #d2b48c;\n  --font-typewriter: 'Special Elite', monospace;\n  --font-display: 'DM Serif Display', serif;\n  --font-body: 'Lora', serif;\n  --font-mono: 'Share Tech Mono', monospace;\n}\n\n\/* Override Blocksy defaults for this page *\/\nbody.agf-page,\nbody.agf-page .site-main,\nbody.agf-page .entry-content {\n  max-width: 100% !important;\n  padding: 0 !important;\n  margin: 0 !important;\n  width: 100% !important;\n}\nbody.agf-page .content-area { max-width: 100% !important; }\nbody.agf-page header[data-id=\"type-1\"],\nbody.agf-page .site-footer,\nbody.agf-page footer,\nbody.agf-page .ct-footer { display: none !important; }\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Special+Elite&family=DM+Serif+Display:ital@0;1&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Share+Tech+Mono&display=swap');\n\n.agf-wrap {\n  font-family: var(--font-body);\n  color: var(--ink);\n  background: var(--bg-dark);\n  line-height: 1.7;\n  font-size: 18px;\n  overflow-x: hidden;\n  position: relative;\n}\n.agf-wrap *, .agf-wrap *::before, .agf-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n\/* Noise *\/\n.agf-wrap::before {\n  content: '';\n  position: fixed; inset: 0;\n  background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'\/%3E%3C\/svg%3E\");\n  pointer-events: none; z-index: 9999;\n}\n\n\/* ===== TOAST ===== *\/\n#agf-toast {\n  position: fixed; bottom: 30px; left: 50%;\n  transform: translateX(-50%) translateY(100px);\n  background: var(--bg-dark); color: var(--gold);\n  font-family: var(--font-typewriter); font-size: 14px;\n  padding: 15px 30px; border: 1px solid var(--gold-dim);\n  border-radius: 4px; z-index: 9998;\n  transition: transform 0.4s ease; pointer-events: none;\n  text-align: center; white-space: nowrap;\n}\n#agf-toast.show { transform: translateX(-50%) translateY(0); }\n\n\/* ===== SECRET COUNTER ===== *\/\n#agf-counter {\n  position: fixed; bottom: 20px; right: 20px;\n  font-family: var(--font-typewriter); font-size: 11px;\n  color: var(--gold-dim); z-index: 9997;\n  opacity: 0; transition: opacity 0.5s ease; cursor: pointer;\n}\n#agf-counter.visible { opacity: 0.35; }\n#agf-counter:hover { opacity: 0.7; color: var(--gold); }\n\n\/* ===== KONAMI OVERLAY ===== *\/\n#agf-konami {\n  position: fixed; inset: 0; background: rgba(2,30,43,0.97);\n  z-index: 10001; display: none;\n  align-items: center; justify-content: center; flex-direction: column;\n}\n#agf-konami.active { display: flex; animation: agfFadeIn 0.5s ease; }\n#agf-konami .kc { text-align: center; max-width: 550px; padding: 40px; }\n#agf-konami h2 { font-family: var(--font-display); color: var(--gold); font-size: 32px; margin-bottom: 20px; }\n#agf-konami p { font-family: var(--font-typewriter); color: var(--p4); font-size: 15px; line-height: 1.8; margin-bottom: 12px; }\n#agf-konami .close-k {\n  font-family: var(--font-typewriter); color: var(--gold); background: none;\n  border: 1px solid var(--gold-dim); padding: 10px 25px; cursor: pointer;\n  margin-top: 20px; font-size: 13px; transition: all 0.3s ease;\n}\n#agf-konami .close-k:hover { background: var(--gold); color: var(--bg-dark); }\n\n\/* ===== CIPHER MODAL ===== *\/\n#agf-cipher {\n  position: fixed; inset: 0; background: rgba(2,30,43,0.92);\n  z-index: 10001; display: none; align-items: center; justify-content: center;\n}\n#agf-cipher.active { display: flex; }\n.cipher-box {\n  background: var(--s1-4); max-width: 520px; width: 90%;\n  padding: 40px; position: relative; border: 2px solid var(--manila);\n  box-shadow: 0 20px 60px rgba(0,0,0,0.5);\n}\n.cipher-box::before {\n  content: 'CLASSIFIED'; position: absolute; top: 10px; right: 15px;\n  font-family: var(--font-typewriter); font-size: 10px; color: var(--red-dark);\n  letter-spacing: 2px; opacity: 0.5;\n}\n.cipher-box h3 { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin-bottom: 12px; }\n.cipher-encoded {\n  font-family: var(--font-mono); font-size: 20px; letter-spacing: 4px;\n  color: var(--red-dark); background: var(--bg-parchment-mid); padding: 15px;\n  text-align: center; margin: 15px 0; border: 1px dashed var(--manila);\n}\n.cipher-box p { font-family: var(--font-body); font-size: 15px; color: var(--ink-light); margin-bottom: 12px; }\n.cipher-box input {\n  width: 100%; padding: 12px 15px; font-family: var(--font-typewriter);\n  font-size: 16px; background: #fff; border: 2px solid var(--manila);\n  color: var(--ink); outline: none; transition: border-color 0.3s ease;\n}\n.cipher-box input:focus { border-color: var(--p0); }\n.cipher-result { font-family: var(--font-typewriter); font-size: 14px; margin-top: 12px; min-height: 20px; text-align: center; }\n.close-cipher {\n  position: absolute; top: 10px; left: 15px; background: none; border: none;\n  font-size: 22px; color: var(--ink-light); cursor: pointer; font-family: var(--font-typewriter);\n}\n\n\/* ===== COMPASS ===== *\/\n#agf-compass {\n  position: fixed; bottom: 20px; left: 20px;\n  width: 70px; height: 70px; z-index: 998;\n  cursor: grab; user-select: none;\n  opacity: 0; transition: opacity 0.6s ease;\n}\n#agf-compass.visible { opacity: 1; }\n#agf-compass.dragging { cursor: grabbing; }\n.compass-ring {\n  width: 100%; height: 100%; border-radius: 50%;\n  background: radial-gradient(circle at 45% 40%, var(--p2), var(--p1));\n  border: 2px solid var(--gold-dim);\n  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 3px rgba(255,255,255,0.1);\n  position: relative; overflow: hidden;\n  display: flex; align-items: center; justify-content: center;\n}\n.compass-needle {\n  width: 4px; height: 50px; position: absolute;\n  transform-origin: center center; transition: transform 0.1s linear;\n}\n.compass-needle::before {\n  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);\n  width: 0; height: 0;\n  border-left: 5px solid transparent; border-right: 5px solid transparent;\n  border-bottom: 22px solid var(--red);\n}\n.compass-needle::after {\n  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);\n  width: 0; height: 0;\n  border-left: 4px solid transparent; border-right: 4px solid transparent;\n  border-top: 22px solid var(--p3);\n}\n.compass-center {\n  width: 8px; height: 8px; border-radius: 50%;\n  background: var(--gold); position: absolute; z-index: 2;\n  box-shadow: 0 0 6px rgba(230,198,84,0.5);\n}\n.compass-letters {\n  position: absolute; inset: 0;\n  font-family: var(--font-display); font-size: 8px;\n  color: var(--gold-dim); font-weight: 700;\n}\n.compass-letters span { position: absolute; }\n.compass-letters .cn { top: 4px; left: 50%; transform: translateX(-50%); }\n.compass-letters .cs { bottom: 4px; left: 50%; transform: translateX(-50%); }\n.compass-letters .ce { right: 5px; top: 50%; transform: translateY(-50%); }\n.compass-letters .cw { left: 5px; top: 50%; transform: translateY(-50%); }\n.compass-degree {\n  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);\n  font-family: var(--font-mono); font-size: 10px; color: var(--gold-dim); white-space: nowrap;\n}\n\n\/* ===== NAV ===== *\/\n.agf-nav {\n  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;\n  padding: 15px 40px;\n  display: flex; align-items: center; justify-content: space-between;\n  background: rgba(2,30,43,0.9); backdrop-filter: blur(10px);\n  border-bottom: 1px solid rgba(230,198,84,0.1);\n  transition: all 0.4s ease;\n}\n.agf-nav.scrolled { padding: 10px 40px; background: rgba(2,30,43,0.97); }\n.agf-nav .logo {\n  font-family: var(--font-display); font-size: 22px; color: var(--gold);\n  font-weight: 900; letter-spacing: 1px; text-decoration: none;\n}\n.agf-nav .logo span { color: var(--p4); font-weight: 400; }\n.agf-nav .nav-links { display: flex; gap: 28px; list-style: none; }\n.agf-nav .nav-links a {\n  font-family: var(--font-typewriter); font-size: 12px;\n  color: var(--p3); text-decoration: none; letter-spacing: 1.5px;\n  text-transform: uppercase; transition: color 0.3s ease; position: relative;\n}\n.agf-nav .nav-links a::after {\n  content: ''; position: absolute; bottom: -4px; left: 0;\n  width: 0; height: 1px; background: var(--gold); transition: width 0.3s ease;\n}\n.agf-nav .nav-links a:hover { color: var(--gold); }\n.agf-nav .nav-links a:hover::after { width: 100%; }\n.nav-cta {\n  background: var(--red-dark) !important; color: var(--s1-4) !important;\n  padding: 8px 20px !important; border-radius: 2px;\n}\n.nav-cta:hover { background: var(--red) !important; }\n.nav-cta::after { display: none !important; }\n.hamburger {\n  display: none; flex-direction: column; gap: 5px;\n  cursor: pointer; background: none; border: none; padding: 5px;\n}\n.hamburger span { width: 25px; height: 2px; background: var(--gold); transition: all 0.3s ease; }\n\n\/* ===== PARTICLES ===== *\/\n.agf-particles {\n  position: absolute; inset: 0; overflow: hidden; pointer-events: none;\n}\n.agf-particle {\n  position: absolute; border-radius: 50%; opacity: 0;\n  background: var(--s2-0);\n  animation: agfFloat linear infinite;\n}\n@keyframes agfFloat {\n  0% { opacity:0; transform:translateY(0) rotate(0deg); }\n  8% { opacity:0.5; }\n  92% { opacity:0.5; }\n  100% { opacity:0; transform:translateY(-120vh) rotate(720deg); }\n}\n\n\/* ===== HERO ===== *\/\n.agf-hero {\n  min-height: 100vh; display: flex; align-items: center; justify-content: center;\n  position: relative; overflow: hidden;\n  background:\n    radial-gradient(ellipse at 20% 50%, rgba(222,81,94,0.06) 0%, transparent 50%),\n    radial-gradient(ellipse at 80% 50%, rgba(230,198,84,0.04) 0%, transparent 50%),\n    linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-mid) 50%, var(--bg-dark) 100%);\n}\n.compass-bg {\n  position: absolute; width: 550px; height: 550px; opacity: 0.035;\n  top: 50%; left: 50%; transform: translate(-50%,-50%);\n  animation: agfCompassSpin 120s linear infinite;\n}\n@keyframes agfCompassSpin { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }\n.hero-content { text-align: center; z-index: 2; padding: 0 20px; max-width: 850px; }\n.hero-classified {\n  display: inline-block; font-family: var(--font-typewriter);\n  font-size: 11px; letter-spacing: 4px; color: var(--red);\n  border: 1px solid var(--red-dark); padding: 5px 20px;\n  margin-bottom: 30px; text-transform: uppercase;\n  opacity: 0; animation: agfTypeIn 0.8s ease 1.5s forwards;\n}\n.hero-title {\n  font-family: var(--font-display);\n  font-size: clamp(50px, 8vw, 100px);\n  color: var(--p4); font-weight: 900; line-height: 1.05;\n  margin-bottom: 10px; opacity: 0; animation: agfRevealUp 1s ease 1.8s forwards;\n}\n.hero-title .gold { color: var(--gold); }\n.hero-subtitle {\n  font-family: var(--font-display); font-style: italic;\n  font-size: clamp(18px, 3vw, 26px); color: var(--p3);\n  margin-bottom: 40px; opacity: 0; animation: agfRevealUp 1s ease 2.1s forwards;\n}\n.hero-tagline {\n  font-family: var(--font-typewriter); font-size: 13px;\n  color: var(--gold-dim); letter-spacing: 3px; text-transform: uppercase;\n  margin-bottom: 45px; opacity: 0; animation: agfRevealUp 1s ease 2.4s forwards;\n}\n.hero-cta-group {\n  display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;\n  opacity: 0; animation: agfRevealUp 1s ease 2.7s forwards;\n}\n.btn-primary {\n  font-family: var(--font-typewriter); font-size: 13px; letter-spacing: 2px;\n  text-transform: uppercase; padding: 16px 40px;\n  background: var(--red-dark); color: var(--s1-4);\n  border: none; cursor: pointer; text-decoration: none;\n  transition: all 0.3s ease; position: relative; overflow: hidden;\n}\n.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(161,11,26,0.4); background: var(--red); }\n.btn-secondary {\n  font-family: var(--font-typewriter); font-size: 13px; letter-spacing: 2px;\n  text-transform: uppercase; padding: 16px 40px;\n  background: transparent; color: var(--gold); border: 1px solid var(--gold-dim);\n  cursor: pointer; text-decoration: none; transition: all 0.3s ease;\n}\n.btn-secondary:hover { background: var(--gold); color: var(--bg-dark); transform: translateY(-2px); }\n.scroll-indicator {\n  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);\n  display: flex; flex-direction: column; align-items: center; gap: 10px;\n  opacity: 0; animation: agfRevealUp 1s ease 3.2s forwards;\n}\n.scroll-indicator span {\n  font-family: var(--font-typewriter); font-size: 10px;\n  color: var(--gold-dim); letter-spacing: 3px; text-transform: uppercase;\n}\n.scroll-line {\n  width: 1px; height: 35px;\n  background: linear-gradient(to bottom, var(--gold-dim), transparent);\n  animation: agfScrollPulse 2s ease infinite;\n}\n@keyframes agfScrollPulse { 0%,100%{opacity:0.3;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(1.2)} }\n\n\/* ===== SECTIONS ===== *\/\n.agf-section { position: relative; }\n.agf-parchment {\n  background: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'\/%3E%3C\/svg%3E\"),\n    linear-gradient(180deg, var(--s1-4) 0%, var(--s1-3) 50%, var(--s1-4) 100%);\n}\n.agf-dark {\n  position: relative; overflow: hidden;\n  background: radial-gradient(ellipse at 50% 0%, rgba(56,120,144,0.04) 0%, transparent 60%), var(--bg-dark);\n}\n.section-header { text-align: center; margin-bottom: 50px; }\n.section-label {\n  font-family: var(--font-typewriter); font-size: 11px; letter-spacing: 4px;\n  text-transform: uppercase; display: block; margin-bottom: 12px;\n}\n.agf-parchment .section-label { color: var(--red-dark); }\n.agf-dark .section-label { color: var(--gold-dim); }\n.section-title {\n  font-family: var(--font-display);\n  font-size: clamp(30px, 5vw, 48px); font-weight: 900; line-height: 1.15;\n}\n.agf-parchment .section-title { color: var(--ink); }\n.agf-dark .section-title { color: var(--p4); }\n.section-divider { width: 60px; height: 2px; background: var(--gold); margin: 18px auto 0; }\n\n\/* ===== INTRO ===== *\/\n.agf-intro { padding: 110px 40px; }\n.intro-grid {\n  max-width: 1050px; margin: 0 auto;\n  display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center;\n}\n.intro-text h3 {\n  font-family: var(--font-display); font-size: 26px;\n  color: var(--ink); margin-bottom: 18px; font-weight: 700;\n}\n.intro-text p { font-size: 18px; color: var(--ink-light); margin-bottom: 18px; line-height: 1.8; }\n.intro-text .hl { color: var(--red-dark); font-weight: 600; }\n.envelope-visual { display: flex; align-items: center; justify-content: center; }\n.envelope {\n  width: 320px; height: 210px;\n  background: linear-gradient(135deg, var(--manila), #c4a574);\n  border-radius: 4px; position: relative;\n  box-shadow: 0 15px 40px rgba(0,0,0,0.15);\n  transition: transform 0.4s ease; user-select: none;\n}\n.envelope:hover { transform: rotate(-2deg) scale(1.02); }\n.envelope::before {\n  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%;\n  background:\n    linear-gradient(135deg, transparent 48%, #b89a68 48%, #b89a68 52%, transparent 52%),\n    linear-gradient(225deg, transparent 48%, #b89a68 48%, #b89a68 52%, transparent 52%);\n  opacity: 0.5;\n}\n.envelope-stamp {\n  position: absolute; top: 15px; right: 15px;\n  font-family: var(--font-typewriter); font-size: 8px; color: var(--red-dark);\n  border: 1px solid var(--red-dark); padding: 3px 8px; transform: rotate(-5deg); letter-spacing: 1px;\n}\n.wax-seal-envelope {\n  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);\n  width: 55px; height: 55px; border-radius: 50%;\n  background: radial-gradient(circle at 40% 35%, var(--red), var(--red-dark));\n  box-shadow: 0 4px 15px rgba(161,11,26,0.4);\n  display: flex; align-items: center; justify-content: center;\n  font-family: var(--font-display); color: var(--s1-4);\n  font-size: 18px; font-weight: 900; cursor: pointer; transition: transform 0.3s ease;\n}\n.wax-seal-envelope:hover { transform: translateX(-50%) scale(1.1) rotate(5deg); }\n\n\/* ===== HOW IT WORKS ===== *\/\n.agf-steps { padding: 110px 40px; }\n.steps-container { max-width: 850px; margin: 0 auto; position: relative; }\n.steps-container::before {\n  content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 2px;\n  background: repeating-linear-gradient(to bottom, var(--gold-dim) 0px, var(--gold-dim) 8px, transparent 8px, transparent 16px);\n}\n.step {\n  display: flex; gap: 35px; margin-bottom: 50px; position: relative;\n  opacity: 1; transform: translateX(0); transition: all 0.6s ease;\n}\n.step.visible { opacity: 1; transform: translateX(0); }\n.step-number {\n  width: 56px; height: 56px; min-width: 56px;\n  background: var(--bg-dark); border: 2px solid var(--p0);\n  border-radius: 50%; display: flex; align-items: center; justify-content: center;\n  font-family: var(--font-display); font-size: 20px; font-weight: 900; color: var(--gold); z-index: 2;\n}\n.step-content h3 {\n  font-family: var(--font-display); font-size: 22px;\n  color: var(--p4); margin-bottom: 8px; font-weight: 700;\n}\n.step-content p { font-size: 16px; color: var(--p3); opacity: 0.8; line-height: 1.7; }\n\n\/* ===== CASE FILE TRIGGER ===== *\/\n.agf-story { padding: 100px 40px; }\n.casefile-trigger {\n  max-width: 700px; margin: 0 auto;\n  background: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'\/%3E%3C\/svg%3E\"), #fff;\n  border: 1px solid var(--manila); padding: 45px;\n  position: relative; cursor: pointer;\n  box-shadow: 0 8px 30px rgba(0,0,0,0.06); transition: all 0.4s ease;\n}\n.casefile-trigger:hover { transform: translateY(-4px); box-shadow: 0 16px 50px rgba(0,0,0,0.12); border-color: var(--p0); }\n.casefile-trigger::before {\n  content: 'CLICK TO OPEN'; position: absolute; top: 50%; left: 50%;\n  transform: translate(-50%,-50%);\n  font-family: var(--font-typewriter); font-size: 13px;\n  color: var(--p0); letter-spacing: 3px; opacity: 0;\n  transition: opacity 0.3s ease; z-index: 3;\n}\n.casefile-trigger:hover::before { opacity: 0.6; }\n.casefile-trigger::after {\n  content: ''; position: absolute; inset: 0;\n  background: rgba(255,255,255,0); transition: background 0.3s ease;\n}\n.casefile-trigger:hover::after { background: rgba(255,255,255,0.5); }\n.ct-header {\n  display: flex; justify-content: space-between; align-items: flex-start;\n  padding-bottom: 15px; border-bottom: 2px solid var(--ink); margin-bottom: 20px;\n}\n.ct-header h3 {\n  font-family: var(--font-typewriter); font-size: 12px;\n  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);\n}\n.ct-header .ct-num {\n  font-family: var(--font-display); font-size: 32px;\n  font-weight: 900; color: var(--ink); margin-top: 2px;\n}\n.ct-stamp {\n  font-family: var(--font-typewriter); font-size: 10px;\n  color: var(--red-dark); border: 2px solid var(--red-dark);\n  padding: 4px 12px; transform: rotate(3deg); letter-spacing: 2px;\n}\n.ct-preview p { font-family: var(--font-body); font-size: 17px; color: var(--ink-light); line-height: 1.7; }\n.ct-preview .ct-footer {\n  font-family: var(--font-typewriter); font-size: 12px;\n  color: var(--gold-dim); margin-top: 15px; letter-spacing: 1px;\n}\n\n\/* ===== OCCASIONS ===== *\/\n.agf-occasions { padding: 90px 40px; }\n.occasions-row {\n  max-width: 1000px; margin: 0 auto;\n  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;\n}\n.occasion-chip {\n  display: inline-flex; align-items: center; gap: 8px;\n  padding: 12px 24px; border: 1px solid rgba(230,198,84,0.15);\n  font-family: var(--font-typewriter); font-size: 13px;\n  color: var(--p3); letter-spacing: 1px; transition: all 0.3s ease; cursor: default;\n}\n.occasion-chip:hover {\n  border-color: var(--gold-dim); color: var(--gold);\n  background: rgba(230,198,84,0.04); transform: translateY(-2px);\n}\n.occasion-chip .oc-icon { font-size: 18px; }\n\n\/* ===== THEMES ===== *\/\n.agf-themes { padding: 0 40px 90px; }\n.themes-scroll {\n  max-width: 1050px; margin: 0 auto;\n  display: flex; gap: 15px; overflow-x: auto;\n  padding-bottom: 15px; scroll-snap-type: x mandatory;\n}\n.themes-scroll::-webkit-scrollbar { height: 3px; }\n.themes-scroll::-webkit-scrollbar-track { background: rgba(56,120,144,0.1); }\n.themes-scroll::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; }\n.theme-chip {\n  flex: 0 0 auto; scroll-snap-align: start;\n  padding: 16px 28px; border: 1px solid rgba(230,198,84,0.15);\n  font-family: var(--font-typewriter); font-size: 13px;\n  color: var(--p3); white-space: nowrap; cursor: default; transition: all 0.3s ease;\n}\n.theme-chip:hover { border-color: var(--gold); color: var(--gold); background: rgba(230,198,84,0.05); }\n.theme-chip .te { margin-right: 8px; font-size: 16px; }\n\n\/* ===== PRICING ===== *\/\n.agf-pricing { padding: 110px 40px; }\n.pricing-intro {\n  max-width: 650px; margin: 0 auto 50px; text-align: center;\n}\n.pricing-intro p {\n  font-size: 18px; color: var(--ink-light); line-height: 1.8;\n}\n.pricing-intro .pricing-starts {\n  font-family: var(--font-display); font-size: 22px;\n  color: var(--ink); font-weight: 700; margin-top: 15px;\n}\n.pricing-intro .pricing-starts span {\n  color: var(--p2); font-size: 28px;\n}\n.pricing-grid {\n  max-width: 1050px; margin: 0 auto;\n  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px;\n}\n.pricing-card {\n  background: #fff; border: 1px solid var(--manila);\n  padding: 45px 30px; text-align: center; position: relative;\n  transition: all 0.4s ease; box-shadow: 0 5px 20px rgba(0,0,0,0.05);\n}\n.pricing-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }\n.pricing-card.featured { border: 2px solid var(--p0); transform: scale(1.03); }\n.pricing-card.featured:hover { transform: scale(1.03) translateY(-5px); }\n.pricing-badge {\n  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);\n  background: var(--p2); color: var(--s1-4);\n  font-family: var(--font-typewriter); font-size: 10px;\n  letter-spacing: 2px; text-transform: uppercase; padding: 5px 18px;\n}\n.plan-name {\n  font-family: var(--font-typewriter); font-size: 11px;\n  letter-spacing: 3px; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 8px;\n}\n.plan-title {\n  font-family: var(--font-display); font-size: 26px;\n  font-weight: 900; color: var(--ink); margin-bottom: 4px;\n}\n.plan-duration { font-family: var(--font-typewriter); font-size: 13px; color: var(--ink-light); margin-bottom: 18px; }\n.plan-desc {\n  font-size: 15px; color: var(--ink-light); line-height: 1.7;\n  margin-bottom: 20px; padding-bottom: 20px;\n  border-bottom: 1px solid rgba(210,180,140,0.3);\n}\n.plan-includes-label {\n  font-family: var(--font-typewriter); font-size: 10px;\n  letter-spacing: 2px; text-transform: uppercase;\n  color: var(--gold-dim); margin-bottom: 10px; text-align: left;\n}\n.plan-features { text-align: left; margin-bottom: 25px; }\n.plan-features div {\n  font-size: 15px; color: var(--ink-light); padding: 7px 0;\n  border-bottom: 1px solid rgba(210,180,140,0.3);\n  display: flex; align-items: center; gap: 10px;\n}\n.plan-features div::before { content: '\u2726'; color: var(--gold); font-size: 11px; }\n.plan-btn {\n  display: inline-block; font-family: var(--font-typewriter); font-size: 12px;\n  letter-spacing: 2px; text-transform: uppercase; padding: 13px 30px;\n  border: 2px solid var(--ink); color: var(--ink); background: transparent;\n  cursor: pointer; text-decoration: none; transition: all 0.3s ease;\n}\n.plan-btn:hover { background: var(--ink); color: var(--s1-4); }\n.pricing-card.featured .plan-btn { background: var(--p2); color: var(--s1-4); border-color: var(--p2); }\n.pricing-card.featured .plan-btn:hover { background: var(--p0); border-color: var(--p0); }\n.pricing-footer {\n  max-width: 650px; margin: 40px auto 0; text-align: center;\n}\n.pricing-footer p {\n  font-family: var(--font-typewriter); font-size: 14px;\n  color: var(--ink-light); line-height: 1.7;\n}\n.pricing-footer a {\n  color: var(--p2); text-decoration: none; font-weight: 600;\n  transition: color 0.3s ease;\n}\n.pricing-footer a:hover { color: var(--p0); }\n\n\/* ===== TESTIMONIALS ===== *\/\n.agf-proof { padding: 110px 40px; }\n.dossier {\n  max-width: 680px; margin: 0 auto;\n  background: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'\/%3E%3C\/svg%3E\"), #fff;\n  border: 1px solid var(--manila); padding: 45px;\n  position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.08);\n}\n.dossier::before {\n  content: 'FILE COPY'; position: absolute; top: 50%; left: 50%;\n  transform: translate(-50%,-50%) rotate(-28deg);\n  font-family: var(--font-typewriter); font-size: 60px;\n  color: rgba(161,11,26,0.03); letter-spacing: 10px; white-space: nowrap; pointer-events: none;\n}\n.dossier-header {\n  display: flex; justify-content: space-between; align-items: start;\n  margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid var(--ink);\n}\n.dossier-header h3 {\n  font-family: var(--font-typewriter); font-size: 13px;\n  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);\n}\n.dossier-stamp {\n  font-family: var(--font-typewriter); font-size: 10px;\n  color: var(--red-dark); border: 2px solid var(--red-dark);\n  padding: 4px 12px; transform: rotate(3deg); letter-spacing: 2px;\n}\n.testimonial { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px dashed var(--manila); }\n.testimonial:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }\n.testimonial p {\n  font-family: var(--font-body); font-size: 17px;\n  font-style: italic; color: var(--ink-light); line-height: 1.8; margin-bottom: 10px;\n}\n.testimonial .attribution {\n  font-family: var(--font-typewriter); font-size: 12px; color: var(--gold-dim); letter-spacing: 1px;\n}\n.redacted {\n  background: var(--ink); color: var(--ink); padding: 0 5px;\n  border-radius: 2px; cursor: pointer; transition: all 0.3s ease; user-select: none;\n}\n.redacted.revealed { background: rgba(56,120,144,0.12); color: var(--ink); }\n\n\/* ===== CONTACT ===== *\/\n.agf-contact { padding: 110px 40px; text-align: center; }\n.contact-inner { max-width: 650px; margin: 0 auto; }\n.contact-reveal {\n  display: inline-block; cursor: pointer;\n  margin: 10px 0; padding: 14px 36px;\n  border: 1px solid var(--gold-dim);\n  border-radius: 3px; transition: all 0.3s ease;\n  font-family: var(--font-typewriter); font-size: 14px;\n  color: var(--gold); letter-spacing: 1px;\n  background: rgba(230,198,84,0.04);\n}\n.contact-reveal:hover {\n  border-color: var(--gold); background: rgba(230,198,84,0.08);\n  transform: translateY(-2px);\n}\n.contact-reveal.open {\n  cursor: default; border-color: var(--gold);\n  background: rgba(230,198,84,0.06);\n  font-family: var(--font-display); font-size: clamp(22px, 4vw, 36px);\n  font-weight: 900; padding: 18px 40px;\n  letter-spacing: 0;\n}\n.contact-reveal.open:hover { transform: none; }\n.contact-reveal.open a { color: var(--gold); text-decoration: none; transition: color 0.3s ease; }\n.contact-reveal.open a:hover { color: var(--gold-bright); }\n#agf-email.open { font-size: clamp(14px, 2.5vw, 20px); font-family: var(--font-typewriter); }\n.reveal-label { pointer-events: none; }\n.contact-note { font-family: var(--font-typewriter); font-size: 12px; color: var(--gold-dim); margin-top: 25px; letter-spacing: 1px; }\n\n\/* ===== FOOTER ===== *\/\n.agf-footer {\n  padding: 35px 40px; text-align: center;\n  border-top: 1px solid rgba(230,198,84,0.08); background: var(--bg-dark);\n}\n.agf-footer p { font-family: var(--font-typewriter); font-size: 11px; color: var(--gold-dim); letter-spacing: 2px; }\n.agf-footer .hidden-footer {\n  opacity: 0; font-size: 10px; color: var(--gold-dim);\n  margin-top: 8px; transition: opacity 2s ease; cursor: default;\n}\n.agf-footer:hover .hidden-footer { opacity: 0.4; }\n\n.morse-hint {\n  position: fixed; bottom: 0; left: 0; right: 0;\n  height: 3px; background: transparent; cursor: pointer; z-index: 900;\n}\n.morse-hint:hover { background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); }\n\n\/* ===== ANIMATIONS ===== *\/\n@keyframes agfTypeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }\n@keyframes agfRevealUp { from{opacity:0;transform:translateY(25px)} to{opacity:1;transform:translateY(0)} }\n@keyframes agfFadeIn { from{opacity:0} to{opacity:1} }\n@keyframes agfCFIn { from{opacity:0} to{opacity:1} }\n@keyframes agfCFCard { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }\n\n\/* ===== RESPONSIVE ===== *\/\n@media (max-width: 768px) {\n  .agf-nav { padding: 12px 20px; }\n  .agf-nav .nav-links {\n    display: none; position: absolute; top: 100%; left: 0; right: 0;\n    background: rgba(2,30,43,0.97); flex-direction: column;\n    padding: 20px; gap: 15px; border-bottom: 1px solid rgba(230,198,84,0.1);\n  }\n  .agf-nav .nav-links.open { display: flex; }\n  .hamburger { display: flex; }\n  .agf-section { padding: 80px 20px !important; }\n  .agf-hero { min-height: 90vh; }\n  .intro-grid { grid-template-columns: 1fr; gap: 40px; }\n  .envelope-visual { order: -1; }\n  .steps-container::before { left: 18px; }\n  .step { gap: 20px; }\n  .step-number { width: 40px; height: 40px; min-width: 40px; font-size: 16px; }\n  .pricing-grid { grid-template-columns: 1fr; max-width: 380px; }\n  .pricing-card.featured { transform: none; }\n  .pricing-card.featured:hover { transform: translateY(-5px); }\n  .dossier { padding: 25px 18px; }\n  .casefile { padding: 30px 20px; }\n  .cf-meta { grid-template-columns: 1fr; }\n  #agf-compass { bottom: 15px; left: 15px; width: 60px; height: 60px; }\n}\n<\/style>\n\n\n\n<!-- FIXED UI (outside wrapper to avoid overflow clipping) -->\n<div id=\"agf-toast\"><\/div>\n<div id=\"agf-counter\" title=\"Click for a hint...\">SECRETS: <span id=\"agf-count\">0<\/span>\/7<\/div>\n<div class=\"morse-hint\" id=\"agf-morse\" title=\"... --- ... ?\"><\/div>\n\n<!-- KONAMI -->\n<div id=\"agf-konami\">\n  <div class=\"kc\">\n    <h2>\u269c Agent, You Found It \u269c<\/h2>\n    <p>The ancient code has been entered. You&#8217;ve proven yourself worthy of the inner circle.<\/p>\n    <p>Mention &#8220;KONAMI AGENT&#8221; when you call to book and receive a mystery bonus added to your adventure.<\/p>\n    <p style=\"color:var(--gold-dim);font-size:12px;margin-top:18px;\">\u2191 \u2191 \u2193 \u2193 \u2190 \u2192 \u2190 \u2192 B A<\/p>\n    <button class=\"close-k\" onclick=\"document.getElementById('agf-konami').classList.remove('active')\">RETURN TO MISSION<\/button>\n  <\/div>\n<\/div>\n\n<!-- CIPHER -->\n<div id=\"agf-cipher\">\n  <div class=\"cipher-box\">\n    <button class=\"close-cipher\" onclick=\"document.getElementById('agf-cipher').classList.remove('active')\">\u2715<\/button>\n    <h3>Intercepted Transmission<\/h3>\n    <p>A coded message was found inside the wax seal. Each letter has been shifted by 3 positions. Can you decode it?<\/p>\n    <div class=\"cipher-encoded\">WKHJDPHLVDIRRW<\/div>\n    <p style=\"font-size:13px;color:var(--gold-dim);\">Hint: A\u2192D, B\u2192E, C\u2192F &#8230; (Caesar cipher, shift 3)<\/p>\n    <input type=\"text\" id=\"agf-cipher-input\" placeholder=\"Type the decoded message...\" autocomplete=\"off\">\n    <div class=\"cipher-result\" id=\"agf-cipher-result\"><\/div>\n  <\/div>\n<\/div>\n\n\n\n\n<div class=\"agf-wrap\">\n\n<!-- COMPASS -->\n<div id=\"agf-compass\">\n  <div class=\"compass-ring\">\n    <div class=\"compass-letters\">\n      <span class=\"cn\">N<\/span><span class=\"cs\">S<\/span>\n      <span class=\"ce\">E<\/span><span class=\"cw\">W<\/span>\n    <\/div>\n    <div class=\"compass-needle\" id=\"agf-needle\"><\/div>\n    <div class=\"compass-center\"><\/div>\n  <\/div>\n  <div class=\"compass-degree\" id=\"agf-deg\">0\u00b0<\/div>\n<\/div>\n\n<!-- NAV -->\n<nav class=\"agf-nav\" id=\"agf-navbar\">\n  <a href=\"#agf-hero\" class=\"logo\">A Game <span>Afoot<\/span><\/a>\n  <ul class=\"nav-links\" id=\"agf-nav-links\">\n    <li><a href=\"#agf-intro\">The Mission<\/a><\/li>\n    <li><a href=\"#agf-how\">How It Works<\/a><\/li>\n    <li><a href=\"#agf-story\">Case File<\/a><\/li>\n    <li><a href=\"#agf-pricing\">Packages<\/a><\/li>\n    <li><a href=\"#agf-contact\" class=\"nav-cta\">Begin<\/a><\/li>\n  <\/ul>\n  <button class=\"hamburger\" id=\"agf-hamburger\" aria-label=\"Menu\">\n    <span><\/span><span><\/span><span><\/span>\n  <\/button>\n<\/nav>\n\n<!-- HERO -->\n<section id=\"agf-hero\" class=\"agf-section agf-hero agf-dark\">\n  <div class=\"agf-particles\" data-particles=\"35\"><\/div>\n  <svg class=\"compass-bg\" viewBox=\"0 0 200 200\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <circle cx=\"100\" cy=\"100\" r=\"90\" stroke=\"#A2C5D2\" stroke-width=\"0.5\"\/>\n    <circle cx=\"100\" cy=\"100\" r=\"70\" stroke=\"#A2C5D2\" stroke-width=\"0.3\"\/>\n    <line x1=\"100\" y1=\"5\" x2=\"100\" y2=\"195\" stroke=\"#A2C5D2\" stroke-width=\"0.3\"\/>\n    <line x1=\"5\" y1=\"100\" x2=\"195\" y2=\"100\" stroke=\"#A2C5D2\" stroke-width=\"0.3\"\/>\n    <line x1=\"30\" y1=\"30\" x2=\"170\" y2=\"170\" stroke=\"#A2C5D2\" stroke-width=\"0.2\"\/>\n    <line x1=\"170\" y1=\"30\" x2=\"30\" y2=\"170\" stroke=\"#A2C5D2\" stroke-width=\"0.2\"\/>\n    <polygon points=\"100,8 104,25 96,25\" fill=\"#A2C5D2\"\/>\n    <text x=\"100\" y=\"4\" text-anchor=\"middle\" fill=\"#A2C5D2\" font-size=\"8\" font-family=\"serif\">N<\/text>\n    <text x=\"100\" y=\"199\" text-anchor=\"middle\" fill=\"#A2C5D2\" font-size=\"8\" font-family=\"serif\">S<\/text>\n    <text x=\"198\" y=\"103\" text-anchor=\"end\" fill=\"#A2C5D2\" font-size=\"8\" font-family=\"serif\">E<\/text>\n    <text x=\"5\" y=\"103\" text-anchor=\"start\" fill=\"#A2C5D2\" font-size=\"8\" font-family=\"serif\">W<\/text>\n  <\/svg>\n  <div class=\"hero-content\">\n    <div class=\"hero-classified\">MISSION BRIEFING \u2014 FOR YOUR EYES ONLY<\/div>\n    <h1 class=\"hero-title\">A Game <span class=\"gold\">Afoot<\/span><\/h1>\n    <p class=\"hero-subtitle\">Your city. Your story. Your adventure.<\/p>\n    <p class=\"hero-tagline\">Custom real-life puzzle adventures crafted just for you<\/p>\n    <div class=\"hero-cta-group\">\n      <a href=\"#agf-contact\" class=\"btn-primary\">Accept the Mission<\/a>\n      <a href=\"#agf-how\" class=\"btn-secondary\">Read the Dossier<\/a>\n    <\/div>\n  <\/div>\n  <div class=\"scroll-indicator\"><span>Scroll<\/span><div class=\"scroll-line\"><\/div><\/div>\n<\/section>\n\n<!-- INTRO -->\n<section id=\"agf-intro\" class=\"agf-section agf-intro agf-parchment\">\n  <div class=\"intro-grid\">\n    <div class=\"intro-text\">\n      <div class=\"section-header\" style=\"text-align:left;margin-bottom:25px;\">\n        <span class=\"section-label\">The Mission<\/span>\n        <h2 class=\"section-title\" style=\"font-size:clamp(26px,4vw,40px);\">We Turn Your World Into an Adventure<\/h2>\n      <\/div>\n      <p>Imagine receiving a <span class=\"hl\">wax-sealed letter<\/span> at your door from a mysterious stranger. Inside: a riddle leading to your favorite coffee shop. There, the barista slips you another envelope. A cipher. A map. Suddenly, the city you thought you knew becomes a living, breathing puzzle, <em>designed entirely around you.<\/em><\/p>\n      <p>We craft <span class=\"hl\">fully custom, real-life adventures<\/span> for proposals, team-building, birthday surprises, and more. Every clue is personal. Every location matters. Every moment is unforgettable.<\/p>\n    <\/div>\n    <div class=\"envelope-visual\">\n      <div class=\"envelope\">\n        <div class=\"envelope-stamp\">CONFIDENTIAL<\/div>\n        <div class=\"wax-seal-envelope\" id=\"agf-seal\" title=\"Click me...\">A<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- HOW IT WORKS -->\n<section id=\"agf-how\" class=\"agf-section agf-steps agf-dark\">\n  <div class=\"agf-particles\" data-particles=\"20\"><\/div>\n  <div class=\"section-header\">\n    <span class=\"section-label\">Field Operations<\/span>\n    <h2 class=\"section-title\">How It Works<\/h2>\n    <div class=\"section-divider\"><\/div>\n  <\/div>\n  <div class=\"steps-container\">\n    <div class=\"step\" data-anim><div class=\"step-number\">I<\/div><div class=\"step-content\"><h3>The Call<\/h3><p>Tell us who this is for, what they love, their favorite places, the occasion. All of it. We&#8217;re part storyteller, part event planner, part puzzle-maker.<\/p><\/div><\/div>\n    <div class=\"step\" data-anim><div class=\"step-number\">II<\/div><div class=\"step-content\"><h3>The Design<\/h3><p>We scout locations, write clues woven with personal details, coordinate with venues, and when the story calls for it, hire actors to bring the narrative to life.<\/p><\/div><\/div>\n    <div class=\"step\" data-anim><div class=\"step-number\">III<\/div><div class=\"step-content\"><h3>The Day<\/h3><p>A sealed envelope arrives. The first clue is solved. From that moment, the game is afoot. We operate behind the scenes, ensuring every piece falls into place.<\/p><\/div><\/div>\n    <div class=\"step\" data-anim><div class=\"step-number\">IV<\/div><div class=\"step-content\"><h3>The Finale<\/h3><p>Every journey has a destination. A hidden picnic, a rooftop proposal, a surprise party. The final clue leads to a moment crafted to be yours.<\/p><\/div><\/div>\n  <\/div>\n<\/section>\n\n<!-- CASE FILE TRIGGER -->\n<section id=\"agf-story\" class=\"agf-section agf-story agf-parchment\">\n  <div class=\"section-header\">\n    <span class=\"section-label\">See It In Action<\/span>\n    <h2 class=\"section-title\">An Example Adventure<\/h2>\n    <div class=\"section-divider\"><\/div>\n  <\/div>\n  <div class=\"casefile-trigger\" id=\"agf-cf-trigger\">\n    <div class=\"ct-header\">\n      <div><h3>Case File<\/h3><div class=\"ct-num\">#0042<\/div><\/div>\n      <span class=\"ct-stamp\">COMPLETED<\/span>\n    <\/div>\n    <div class=\"ct-preview\">\n      <p>A Cold War espionage adventure through downtown Denver. UV-ink messages, a &#8220;retired KGB agent,&#8221; a locked box at a brewery, and a rooftop surprise waiting at the end. Five hours. Six locations. One birthday he&#8217;ll never forget.<\/p>\n      <div class=\"ct-footer\">\u25b6 CLICK TO OPEN FULL CASE FILE<\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- OCCASIONS -->\n<section id=\"agf-occasions\" class=\"agf-section agf-occasions agf-dark\">\n  <div class=\"agf-particles\" data-particles=\"15\"><\/div>\n  <div class=\"section-header\">\n    <span class=\"section-label\">Persons of Interest<\/span>\n    <h2 class=\"section-title\">Adventures for Every Occasion<\/h2>\n    <div class=\"section-divider\"><\/div>\n  <\/div>\n  <div class=\"occasions-row\">\n    <div class=\"occasion-chip\"><span class=\"oc-icon\">\ud83d\udc8d<\/span>Proposals<\/div>\n    <div class=\"occasion-chip\"><span class=\"oc-icon\">\ud83c\udf82<\/span>Birthdays<\/div>\n    <div class=\"occasion-chip\"><span class=\"oc-icon\">\ud83e\udd1d<\/span>Team Building<\/div>\n    <div class=\"occasion-chip\"><span class=\"oc-icon\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67\u200d\ud83d\udc66<\/span>Family Reunions<\/div>\n    <div class=\"occasion-chip\"><span class=\"oc-icon\">\ud83c\udf93<\/span>Graduations<\/div>\n    <div class=\"occasion-chip\"><span class=\"oc-icon\">\ud83c\udfc6<\/span>Bachelor\/ette Parties<\/div>\n    <div class=\"occasion-chip\"><span class=\"oc-icon\">\ud83e\udde9<\/span>Escape Room Fans<\/div>\n    <div class=\"occasion-chip\"><span class=\"oc-icon\">\ud83c\udf89<\/span>Just Because<\/div>\n  <\/div>\n<\/section>\n\n<!-- THEMES -->\n<section class=\"agf-section agf-themes agf-dark\">\n  <div class=\"section-header\">\n    <span class=\"section-label\">Choose Your Genre<\/span>\n    <h2 class=\"section-title\" style=\"font-size:clamp(22px,3.5vw,34px);\">Available Themes<\/h2>\n    <div class=\"section-divider\"><\/div>\n  <\/div>\n  <div class=\"themes-scroll\">\n    <div class=\"theme-chip\"><span class=\"te\">\ud83d\udd75\ufe0f<\/span>Espionage<\/div>\n    <div class=\"theme-chip\"><span class=\"te\">\ud83d\uddfa\ufe0f<\/span>Treasure Hunt<\/div>\n    <div class=\"theme-chip\"><span class=\"te\">\ud83e\uddd9<\/span>Fantasy Quest<\/div>\n    <div class=\"theme-chip\"><span class=\"te\">\u23f1\ufe0f<\/span>Amazing Race<\/div>\n    <div class=\"theme-chip\"><span class=\"te\">\ud83d\udd70\ufe0f<\/span>Time Traveler<\/div>\n    <div class=\"theme-chip\"><span class=\"te\">\ud83c\udfad<\/span>Taskmaster<\/div>\n    <div class=\"theme-chip\"><span class=\"te\">\ud83d\udd2e<\/span>Mystery &amp; Noir<\/div>\n    <div class=\"theme-chip\"><span class=\"te\">\u2694\ufe0f<\/span>Medieval Quest<\/div>\n    <div class=\"theme-chip\"><span class=\"te\">\ud83c\udfac<\/span>Custom Theme<\/div>\n  <\/div>\n<\/section>\n\n<!-- PRICING -->\n<section id=\"agf-pricing\" class=\"agf-section agf-pricing agf-parchment\">\n  <div class=\"section-header\">\n    <span class=\"section-label\">Packages<\/span>\n    <h2 class=\"section-title\">Built Around You<\/h2>\n    <div class=\"section-divider\"><\/div>\n  <\/div>\n  <div class=\"pricing-intro\">\n    <p>No two adventures are the same, and neither is the pricing. Every experience is designed around your group, your story, and the level of detail you&#8217;re looking for. These packages are a starting point. When we talk, we&#8217;ll shape things together until it fits perfectly.<\/p>\n    <div class=\"pricing-starts\">Adventures starting at <span>$XXX<\/span><\/div>\n  <\/div>\n  <div class=\"pricing-grid\">\n    <div class=\"pricing-card\" data-anim>\n      <div class=\"plan-name\">Starting Point<\/div>\n      <div class=\"plan-title\">The Short Game<\/div>\n      <div class=\"plan-duration\">2\u20133 Hours<\/div>\n      <div class=\"plan-desc\">A great intro for friend groups, family get-togethers, or anyone who wants a taste of the adventure without a full-day commitment. Compact, fun, and still totally custom.<\/div>\n      <div class=\"plan-includes-label\">Typically includes<\/div>\n      <div class=\"plan-features\">\n        <div>3\u20135 custom clue locations<\/div>\n        <div>A storyline built around your group<\/div>\n        <div>Handcrafted envelopes and props<\/div>\n        <div>Memorable photo-worthy moments<\/div>\n      <\/div>\n      <a href=\"#agf-contact\" class=\"plan-btn\">Let&#8217;s Talk<\/a>\n    <\/div>\n    <div class=\"pricing-card featured\" data-anim>\n      <div class=\"pricing-badge\">MOST POPULAR<\/div>\n      <div class=\"plan-name\">Go Big<\/div>\n      <div class=\"plan-title\">The Full Experience<\/div>\n      <div class=\"plan-duration\">5\u20136 Hours<\/div>\n      <div class=\"plan-desc\">This is the one people can&#8217;t stop talking about. Perfect for proposals, milestone birthdays, or any occasion that deserves something unforgettable. More locations, deeper story, bigger surprises.<\/div>\n      <div class=\"plan-includes-label\">Typically includes<\/div>\n      <div class=\"plan-features\">\n        <div>6\u201310 custom clue locations<\/div>\n        <div>A deeply personal narrative<\/div>\n        <div>Live actors and costumed characters<\/div>\n        <div>Venue coordination and custom props<\/div>\n        <div>A dedicated game master behind the scenes<\/div>\n      <\/div>\n      <a href=\"#agf-contact\" class=\"plan-btn\">Let&#8217;s Talk<\/a>\n    <\/div>\n    <div class=\"pricing-card\" data-anim>\n      <div class=\"plan-name\">All In<\/div>\n      <div class=\"plan-title\">The Epic<\/div>\n      <div class=\"plan-duration\">Full Day+<\/div>\n      <div class=\"plan-desc\">For the people who want the whole thing. A full-day, multi-chapter adventure with all the bells and whistles. This is the kind of experience people remember for years.<\/div>\n      <div class=\"plan-includes-label\">Typically includes<\/div>\n      <div class=\"plan-features\">\n        <div>10+ custom locations<\/div>\n        <div>A multi-chapter story arc<\/div>\n        <div>Multiple actors and set pieces<\/div>\n        <div>Custom props, hand-drawn maps, and artifacts<\/div>\n        <div>Videographer available<\/div>\n      <\/div>\n      <a href=\"#agf-contact\" class=\"plan-btn\">Let&#8217;s Talk<\/a>\n    <\/div>\n  <\/div>\n  <div class=\"pricing-footer\">\n    <p>Not sure which fits? Don&#8217;t worry about it. <a href=\"#agf-contact\">Give us a call<\/a> and we&#8217;ll figure it out together. We can add, adjust, or remix anything to match your vision and budget.<\/p>\n  <\/div>\n<\/section>\n\n<!-- TESTIMONIALS -->\n<section class=\"agf-section agf-proof agf-dark\">\n  <div class=\"agf-particles\" data-particles=\"12\"><\/div>\n  <div class=\"section-header\">\n    <span class=\"section-label\">Field Reports<\/span>\n    <h2 class=\"section-title\">From the Dossier<\/h2>\n    <div class=\"section-divider\"><\/div>\n  <\/div>\n  <div class=\"dossier\">\n    <div class=\"dossier-header\">\n      <h3>After Action Reports<\/h3>\n      <span class=\"dossier-stamp\">VERIFIED<\/span>\n    <\/div>\n    <div class=\"testimonial\">\n      <p>&#8220;I&#8217;ve done escape rooms, scavenger hunts&#8230; nothing comes close. This was <span class=\"redacted\" data-text=\"absolutely incredible\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/span> and felt like living inside a movie. My fianc\u00e9e still talks about the wizard in the park.&#8221;<\/p>\n      <div class=\"attribution\">\u2014 AGENT J.M., Proposal Mission, Denver CO<\/div>\n    <\/div>\n    <div class=\"testimonial\">\n      <p>&#8220;Our team was skeptical. By the second clue, everyone was <span class=\"redacted\" data-text=\"completely hooked\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/span>. Best team event we&#8217;ve ever done. The CEO solved the final cipher and won&#8217;t shut up about it.&#8221;<\/p>\n      <div class=\"attribution\">\u2014 AGENT R.K., Corporate Op, Boulder CO<\/div>\n    <\/div>\n    <div class=\"testimonial\">\n      <p>&#8220;My kids thought I was just taking them to the park. Three hours later they&#8217;d decoded a treasure map, interrogated a &#8216;spy,&#8217; and found a chest full of <span class=\"redacted\" data-text=\"birthday presents\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/span>. Parent of the year.&#8221;<\/p>\n      <div class=\"attribution\">\u2014 AGENT S.T., Family Mission, Denver CO<\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- CONTACT -->\n<section id=\"agf-contact\" class=\"agf-section agf-contact agf-dark\" style=\"border-top:1px solid rgba(230,198,84,0.06);\">\n  <div class=\"agf-particles\" data-particles=\"10\"><\/div>\n  <div class=\"contact-inner\">\n    <div class=\"section-header\">\n      <span class=\"section-label\">Begin Your Mission<\/span>\n      <h2 class=\"section-title\">Ready to Play?<\/h2>\n      <div class=\"section-divider\"><\/div>\n    <\/div>\n    <p style=\"color:var(--p3);opacity:0.8;font-size:18px;margin-bottom:8px;max-width:500px;margin-left:auto;margin-right:auto;\">Every adventure starts with a single call. Tell us your story and we&#8217;ll turn it into something extraordinary.<\/p>\n    <div id=\"agf-phone\" class=\"contact-reveal\" onclick=\"this.classList.add('open');this.innerHTML=atob('PGEgaHJlZj0idGVsOjcyMDY3NTc5MTEiIHN0eWxlPSJjb2xvcjppbmhlcml0O3RleHQtZGVjb3JhdGlvbjpub25lIj43MjAtNjc1LTc5MTE8L2E+')\">\n      <span class=\"reveal-label\">\u260e Tap to reveal phone number<\/span>\n    <\/div>\n    <div id=\"agf-email\" class=\"contact-reveal\" onclick=\"this.classList.add('open');this.innerHTML=atob('PGEgaHJlZj0ibWFpbHRvOmJyYW5kb25AYWdhbWUtYWZvb3QuY29tIiBzdHlsZT0iY29sb3I6aW5oZXJpdDt0ZXh0LWRlY29yYXRpb246bm9uZSI+YnJhbmRvbkBhZ2FtZS1hZm9vdC5jb208L2E+')\">\n      <span class=\"reveal-label\">\u2709 Tap to reveal email<\/span>\n    <\/div>\n    <p class=\"contact-note\">Serving Denver, Boulder, and the Front Range. Custom locations available anywhere.<\/p>\n  <\/div>\n<\/section>\n\n<!-- FOOTER -->\n<div class=\"agf-footer\">\n  <p>&copy; 2025 A Game Afoot. All rights reserved.<\/p>\n  <p class=\"hidden-footer\">You&#8217;ve reached the bottom. But have you found all 7 secrets?<\/p>\n<\/div>\n\n<\/div><!-- end .agf-wrap -->\n\n\n\n<div id=\"agf-cf-overlay\" style=\"display:none;position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:rgba(2,30,43,0.93);z-index:999999;overflow-y:auto;padding:60px 20px;backdrop-filter:blur(4px)\">\n  <div style=\"background:#FFF9E3;max-width:750px;width:100%;padding:50px 45px;position:relative;box-shadow:0 25px 80px rgba(0,0,0,0.5);border:1px solid #d2b48c;font-family:Lora,serif;color:#023447;margin:0 auto;border-radius:2px\">\n    <button id=\"agf-cf-close2\" style=\"position:absolute;top:15px;right:20px;background:none;border:none;font-family:Special Elite,monospace;font-size:20px;color:#1a4a5e;cursor:pointer;z-index:2\">\u2715 CLOSE<\/button>\n    <div style=\"display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:20px;border-bottom:2px solid #023447;margin-bottom:25px\">\n      <div>\n        <div style=\"font-family:Special Elite,monospace;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:#023447\">Case File<\/div>\n        <div style=\"font-family:DM Serif Display,serif;font-size:28px;color:#023447;margin-top:2px\">#0042<\/div>\n      <\/div>\n      <span style=\"font-family:Special Elite,monospace;font-size:10px;color:#A10B1A;border:2px solid #A10B1A;padding:4px 12px;letter-spacing:2px;display:inline-block\">COMPLETED<\/span>\n    <\/div>\n    <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:10px 30px;margin-bottom:30px;padding-bottom:20px;border-bottom:1px dashed #d2b48c;font-family:Special Elite,monospace;font-size:13px;color:#1a4a5e\">\n      <div><b style=\"color:#023447\">CLIENT:<\/b> Agent M.R.<\/div>\n      <div><b style=\"color:#023447\">OCCASION:<\/b> 40th Birthday Surprise<\/div>\n      <div><b style=\"color:#023447\">SUBJECT:<\/b> &#8220;Danny&#8221; \/ History buff, craft beer lover, amateur detective<\/div>\n      <div><b style=\"color:#023447\">DURATION:<\/b> 5 hours<\/div>\n      <div><b style=\"color:#023447\">LOCATION:<\/b> Downtown Denver<\/div>\n      <div><b style=\"color:#023447\">THEME:<\/b> Cold War Espionage<\/div>\n    <\/div>\n    <div style=\"margin-bottom:25px\">\n      <h3 style=\"font-family:Special Elite,monospace;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#A10B1A;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid #d2b48c\">Mission Timeline<\/h3>\n      <div style=\"display:flex;gap:15px;margin-bottom:20px;padding-left:15px;border-left:3px solid #A2C5D2\">\n        <div style=\"font-family:Share Tech Mono,monospace;font-size:12px;color:#387890;min-width:70px\">10:00 AM<\/div>\n        <div>\n          <h4 style=\"font-family:DM Serif Display,serif;font-size:18px;color:#023447;margin-bottom:4px\">The Dead Drop<\/h4>\n          <p style=\"font-size:16px;color:#1a4a5e;line-height:1.6;margin:0\">A manila envelope appeared under the windshield wiper of Danny&#8217;s car. Inside: a faded classified briefing assigning him the codename FALCON. The first directive? Report to a specific downtown cafe and order &#8220;the usual&#8221; from a contact named RED.<\/p>\n        <\/div>\n      <\/div>\n      <div style=\"display:flex;gap:15px;margin-bottom:20px;padding-left:15px;border-left:3px solid #A2C5D2\">\n        <div style=\"font-family:Share Tech Mono,monospace;font-size:12px;color:#387890;min-width:70px\">10:45 AM<\/div>\n        <div>\n          <h4 style=\"font-family:DM Serif Display,serif;font-size:18px;color:#023447;margin-bottom:4px\">Contact: RED<\/h4>\n          <p style=\"font-size:16px;color:#1a4a5e;line-height:1.6;margin:0\">The barista (briefed that morning) slid a second envelope across the counter when Danny said the code phrase. Inside: a UV-light pen and a seemingly blank postcard of the Colorado State Capitol. Under the UV light, coordinates appeared on the back.<\/p>\n        <\/div>\n      <\/div>\n      <div style=\"display:flex;gap:15px;margin-bottom:20px;padding-left:15px;border-left:3px solid #A2C5D2\">\n        <div style=\"font-family:Share Tech Mono,monospace;font-size:12px;color:#387890;min-width:70px\">12:00 PM<\/div>\n        <div>\n          <h4 style=\"font-family:DM Serif Display,serif;font-size:18px;color:#023447;margin-bottom:4px\">The History Lesson<\/h4>\n          <p style=\"font-size:16px;color:#1a4a5e;line-height:1.6;margin:0\">The coordinates led to a historic walking bridge. There, a &#8220;retired KGB agent&#8221; (hired actor in a trench coat) intercepted Danny and his friends, delivering a dramatic monologue about a missing microfilm. He handed them a cipher wheel and a photograph of a local brewery with a clue encoded on the back.<\/p>\n        <\/div>\n      <\/div>\n      <div style=\"display:flex;gap:15px;margin-bottom:20px;padding-left:15px;border-left:3px solid #A2C5D2\">\n        <div style=\"font-family:Share Tech Mono,monospace;font-size:12px;color:#387890;min-width:70px\">1:30 PM<\/div>\n        <div>\n          <h4 style=\"font-family:DM Serif Display,serif;font-size:18px;color:#023447;margin-bottom:4px\">The Safe House<\/h4>\n          <p style=\"font-size:16px;color:#1a4a5e;line-height:1.6;margin:0\">The brewery had reserved a back table under the name &#8220;FALCON.&#8221; A locked box was waiting. Using clues gathered throughout the day, they cracked the combination: Danny&#8217;s birth year, reversed. Inside? A hand-drawn map leading to the final location.<\/p>\n        <\/div>\n      <\/div>\n      <div style=\"display:flex;gap:15px;margin-bottom:20px;padding-left:15px;border-left:3px solid #A2C5D2\">\n        <div style=\"font-family:Share Tech Mono,monospace;font-size:12px;color:#387890;min-width:70px\">3:00 PM<\/div>\n        <div>\n          <h4 style=\"font-family:DM Serif Display,serif;font-size:18px;color:#023447;margin-bottom:4px\">Operation: Birthday<\/h4>\n          <p style=\"font-size:16px;color:#1a4a5e;line-height:1.6;margin:0\">The map led to a rooftop bar where 30 of Danny&#8217;s closest friends and family were waiting. A banner read: &#8220;MISSION ACCOMPLISHED, AGENT FALCON.&#8221; The locked box had a false bottom, and inside was a vintage spy novel Danny had been searching for, inscribed by his wife.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div style=\"background:#FFF2C3;padding:20px;border:1px solid #d2b48c\">\n      <p style=\"font-family:Special Elite,monospace;font-size:15px;color:#023447;line-height:1.7;margin:0\">OUTCOME: Mission success. Subject described the experience as &#8220;the greatest birthday of my life.&#8221; Agent M.R. reports subject has since purchased a trench coat and insists on being called Falcon at family gatherings.<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n<script>\n(function(){\n  var overlay = document.getElementById('agf-cf-overlay');\n  var trigger = document.getElementById('agf-cf-trigger');\n  var closeBtn = document.getElementById('agf-cf-close2');\n  function openCF() {\n    overlay.style.display = 'block';\n    document.body.style.overflow = 'hidden';\n  }\n  function closeCF() {\n    overlay.style.display = 'none';\n    document.body.style.overflow = '';\n  }\n  if (trigger) trigger.addEventListener('click', openCF);\n  if (closeBtn) closeBtn.addEventListener('click', closeCF);\n  if (overlay) overlay.addEventListener('click', function(e) {\n    if (e.target === overlay) closeCF();\n  });\n})();\n<\/script>\n\n\n\n<script>\n(function(){\n  \/\/ Add body class for Blocksy overrides\n  document.body.classList.add('agf-page');\n\n  \/\/ SECRETS\n  var secretsFound = {};\n  var secretCount = 0;\n  function foundSecret(id, message) {\n    if (secretsFound[id]) return;\n    secretsFound[id] = true;\n    secretCount++;\n    var countEl = document.getElementById('agf-count');\n    var counterEl = document.getElementById('agf-counter');\n    var toast = document.getElementById('agf-toast');\n    if (countEl) countEl.textContent = secretCount;\n    if (counterEl) counterEl.classList.add('visible');\n    if (toast) {\n      toast.textContent = '\\uD83D\\uDD0D Secret ' + secretCount + '\/7: ' + message;\n      toast.classList.add('show');\n      setTimeout(function(){ toast.classList.remove('show'); }, 3000);\n    }\n    if (secretCount === 7 && toast) {\n      setTimeout(function(){\n        toast.textContent = '\\u269C ALL SECRETS FOUND \\u2014 You are a true agent. Mention \"MASTER AGENT\" when booking! \\u269C';\n        toast.classList.add('show');\n        setTimeout(function(){ toast.classList.remove('show'); }, 5000);\n      }, 3500);\n    }\n  }\n  window.agfFoundSecret = foundSecret;\n\n  \/\/ PARTICLES\n  document.querySelectorAll('.agf-particles').forEach(function(container){\n    var count = parseInt(container.getAttribute('data-particles')) || 20;\n    for (var i = 0; i < count; i++) {\n      var p = document.createElement('div');\n      p.className = 'agf-particle';\n      var size = 2 + Math.random() * 2;\n      p.style.width = size + 'px';\n      p.style.height = size + 'px';\n      p.style.left = Math.random() * 100 + '%';\n      p.style.bottom = '-10px';\n      p.style.animationDuration = (10 + Math.random() * 15) + 's';\n      p.style.animationDelay = (Math.random() * 12) + 's';\n      container.appendChild(p);\n    }\n  });\n\n  \/\/ NAV\n  var navbar = document.getElementById('agf-navbar');\n  if (navbar) {\n    window.addEventListener('scroll', function(){ navbar.classList.toggle('scrolled', window.scrollY > 50); });\n  }\n  var hamburger = document.getElementById('agf-hamburger');\n  var navLinks = document.getElementById('agf-nav-links');\n  if (hamburger && navLinks) {\n    hamburger.addEventListener('click', function(){ navLinks.classList.toggle('open'); });\n  }\n  document.querySelectorAll('.agf-nav .nav-links a').forEach(function(a){\n    a.addEventListener('click', function(){ if (navLinks) navLinks.classList.remove('open'); });\n  });\n\n  \/\/ SMOOTH SCROLL\n  document.querySelectorAll('.agf-wrap a[href^=\"#\"]').forEach(function(anchor){\n    anchor.addEventListener('click', function(e){\n      e.preventDefault();\n      var target = document.querySelector(this.getAttribute('href'));\n      if (target) window.scrollTo({ top: target.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });\n    });\n  });\n\n  \/\/ SCROLL ANIMATIONS\n  try {\n    var observer = new IntersectionObserver(function(entries){\n      entries.forEach(function(entry){ if (entry.isIntersecting) entry.target.classList.add('visible'); });\n    }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });\n    document.querySelectorAll('[data-anim]').forEach(function(el){ observer.observe(el); });\n  } catch(e){}\n\n})();\n<\/script>\n\n\n\n<script>\n\/\/ SECRETS - each in its own try\/catch so one failure doesn't kill the rest\n\n\/\/ SECRET 1: Konami\ntry {\n  var kSeq = [];\n  var kCode = [38,38,40,40,37,39,37,39,66,65];\n  document.addEventListener('keydown', function(e){\n    kSeq.push(e.keyCode); kSeq = kSeq.slice(-10);\n    if (kSeq.join(',') === kCode.join(',')) {\n      var k = document.getElementById('agf-konami');\n      if (k) k.classList.add('active');\n      if (window.agfFoundSecret) window.agfFoundSecret('konami','The Konami Code \\u2014 Classic agent move.');\n    }\n  });\n} catch(e){}\n\n\/\/ SECRET 2: Wax seal + Cipher\ntry {\n  var seal = document.getElementById('agf-seal');\n  if (seal) {\n    seal.addEventListener('click', function(){\n      var cipher = document.getElementById('agf-cipher');\n      if (cipher) cipher.classList.add('active');\n      if (window.agfFoundSecret) window.agfFoundSecret('seal','You cracked the wax seal!');\n    });\n  }\n  var cipherInput = document.getElementById('agf-cipher-input');\n  if (cipherInput) {\n    cipherInput.addEventListener('input', function(e){\n      var val = e.target.value.toUpperCase().replace(\/\\s\/g,'');\n      var res = document.getElementById('agf-cipher-result');\n      if (!res) return;\n      if (val === 'THEGAMEISAFOOT') {\n        res.textContent = '\\u2726 DECODED: \"THE GAME IS AFOOT\" \\u2014 Well done, agent.';\n        res.style.color = '#2d7d46';\n        if (window.agfFoundSecret) window.agfFoundSecret('cipher','Caesar cipher decoded!');\n      } else if (val.length > 0) {\n        res.textContent = 'Keep trying...'; res.style.color = '#A10B1A';\n      } else res.textContent = '';\n    });\n  }\n} catch(e){}\n\n\/\/ SECRET 4: Compass at 42\ntry {\n  var compass = document.getElementById('agf-compass');\n  var needle = document.getElementById('agf-needle');\n  var degEl = document.getElementById('agf-deg');\n  if (compass && needle && degEl) {\n    var cAngle = 0, cDragging = false, cStartAngle = 0, cStartMouse = 0;\n    var cTimer = null, cFound = false;\n    function getAngle(e, el) {\n      var r = el.getBoundingClientRect();\n      var cx = r.left + r.width\/2, cy = r.top + r.height\/2;\n      var t = e.touches ? e.touches[0] : e;\n      return Math.atan2(t.clientY - cy, t.clientX - cx) * (180\/Math.PI) + 90;\n    }\n    function checkC42() {\n      if (cFound) return;\n      var r = Math.round(cAngle);\n      if (r >= 40 && r <= 44) { cFound = true; if (window.agfFoundSecret) window.agfFoundSecret('compass','\\uD83D\\uDD37 42\\u00B0 \\u2014 The answer to everything.'); }\n    }\n    compass.addEventListener('mousedown', function(e){\n      cDragging = true; compass.classList.add('dragging');\n      cStartMouse = getAngle(e, compass); cStartAngle = cAngle; e.preventDefault();\n    });\n    compass.addEventListener('touchstart', function(e){\n      cDragging = true; compass.classList.add('dragging');\n      cStartMouse = getAngle(e, compass); cStartAngle = cAngle; e.preventDefault();\n    }, {passive:false});\n    document.addEventListener('mousemove', function(e){\n      if (!cDragging) return;\n      var cur = getAngle(e, compass);\n      cAngle = (cStartAngle + cur - cStartMouse) % 360;\n      if (cAngle < 0) cAngle += 360;\n      needle.style.transform = 'rotate(' + cAngle + 'deg)';\n      degEl.textContent = Math.round(cAngle) + '\\u00B0';\n      clearTimeout(cTimer); cTimer = setTimeout(checkC42, 1500);\n    });\n    document.addEventListener('touchmove', function(e){\n      if (!cDragging) return;\n      var cur = getAngle(e, compass);\n      cAngle = (cStartAngle + cur - cStartMouse) % 360;\n      if (cAngle < 0) cAngle += 360;\n      needle.style.transform = 'rotate(' + cAngle + 'deg)';\n      degEl.textContent = Math.round(cAngle) + '\\u00B0';\n      clearTimeout(cTimer); cTimer = setTimeout(checkC42, 1500);\n    });\n    document.addEventListener('mouseup', function(){ if (cDragging) { cDragging = false; compass.classList.remove('dragging'); clearTimeout(cTimer); cTimer = setTimeout(checkC42, 1500); } });\n    document.addEventListener('touchend', function(){ if (cDragging) { cDragging = false; compass.classList.remove('dragging'); clearTimeout(cTimer); cTimer = setTimeout(checkC42, 1500); } });\n    var compassShown = false;\n    window.addEventListener('scroll', function(){\n      if (!compassShown &#038;&#038; window.scrollY > 300) { compassShown = true; compass.classList.add('visible'); }\n    });\n  }\n} catch(e){}\n\n\/\/ SECRET 5: Triple-click title\ntry {\n  var heroTitle = document.querySelector('.hero-title');\n  if (heroTitle) {\n    var tC = 0, tT;\n    heroTitle.addEventListener('click', function(){\n      tC++; clearTimeout(tT);\n      tT = setTimeout(function(){ tC = 0; }, 500);\n      if (tC === 3) { if (window.agfFoundSecret) window.agfFoundSecret('title','Triple-click agent detected!'); tC = 0; }\n    });\n  }\n} catch(e){}\n\n\/\/ SECRET 6: Morse strip\ntry {\n  var morse = document.getElementById('agf-morse');\n  if (morse) {\n    var mC = 0;\n    morse.addEventListener('click', function(){\n      mC++;\n      if (mC >= 3) { if (window.agfFoundSecret) window.agfFoundSecret('morse','You found the hidden signal!'); mC = 0; }\n    });\n  }\n} catch(e){}\n\n\/\/ SECRET 7: Counter click\ntry {\n  var counter = document.getElementById('agf-counter');\n  if (counter) {\n    counter.addEventListener('click', function(){\n      if (window.agfFoundSecret) window.agfFoundSecret('counter','The counter itself was a clue!');\n    });\n  }\n} catch(e){}\n<\/script>\n\n\n\n<script>\ndocument.addEventListener('click', function(e){\n  var t = e.target;\n  if (t && t.tagName === 'SPAN' && t.className === 'redacted') {\n    t.style.background = 'rgba(56,120,144,0.12)';\n    t.style.color = '#023447';\n    t.className = 'redacted revealed';\n    t.textContent = t.getAttribute('data-text');\n  }\n}, true);\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>AG\u00b7F DECRYPTING&#8230; SECRETS: 0\/7 \u269c Agent, You Found It \u269c The ancient code has been entered. You&#8217;ve proven yourself worthy of the inner circle. Mention &#8220;KONAMI AGENT&#8221; when you call to book and receive a mystery bonus added to your adventure. \u2191 \u2191 \u2193 \u2193 \u2190 \u2192 \u2190 \u2192 B A RETURN TO MISSION \u2715 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-40","page","type-page","status-publish","hentry"],"blocksy_meta":{"content_style_source":"inherit","disable_share_box":"no","disable_header":"no","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6},"page_structure_type":"type-4"},"_links":{"self":[{"href":"https:\/\/agame-afoot.com\/index.php?rest_route=\/wp\/v2\/pages\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agame-afoot.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agame-afoot.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agame-afoot.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agame-afoot.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=40"}],"version-history":[{"count":5,"href":"https:\/\/agame-afoot.com\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions"}],"predecessor-version":[{"id":73,"href":"https:\/\/agame-afoot.com\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions\/73"}],"wp:attachment":[{"href":"https:\/\/agame-afoot.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}