{"id":104,"date":"2026-07-28T05:58:57","date_gmt":"2026-07-28T05:58:57","guid":{"rendered":"https:\/\/adfusionquad.us.cc\/?page_id=104"},"modified":"2026-07-28T06:49:12","modified_gmt":"2026-07-28T06:49:12","slug":"jeetxmoto","status":"publish","type":"page","link":"https:\/\/adfusionquad.us.cc\/?page_id=104","title":{"rendered":"Jeetxmoto"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nAdFusionQuad \u2014 Ride Smart. Ride Safe.<\/title>\r\n\r\n<!-- Fonts: Rajdhani (technical display), Manrope (body), JetBrains Mono (telemetry \/ data) -->\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=Rajdhani:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\/* ============================================================\r\n DESIGN TOKENS\r\n Concept: \"Holo-Bay\" \u2014 a night showroom scanning a bike into\r\n a blue wireframe hologram. Black\/blue\/white per brief, but\r\n read through a technical HUD \/ telemetry lens rather than\r\n generic neon-glow decoration.\r\n ============================================================ *\/\r\n:root{\r\n --black: #05070c;\r\n --panel: #0c1220;\r\n --panel-glass: rgba(14, 20, 36, 0.55);\r\n --panel-glass-strong: rgba(10, 15, 28, 0.78);\r\n --blue: #2f6bff;\r\n --blue-bright: #6fc3ff;\r\n --blue-dim: #17305e;\r\n --white: #f4f7fb;\r\n --steel: #8b95a8;\r\n --steel-dim: #545e70;\r\n --line: rgba(111, 195, 255, 0.16);\r\n\r\n --font-display: 'Rajdhani', sans-serif;\r\n --font-body: 'Manrope', sans-serif;\r\n --font-mono: 'JetBrains Mono', monospace;\r\n\r\n --ease: cubic-bezier(.22,.61,.36,1);\r\n}\r\n\r\n*{ margin:0; padding:0; box-sizing:border-box; }\r\n\r\nhtml{ scroll-behavior:smooth; }\r\n\r\nbody{\r\n background:var(--black);\r\n color:var(--white);\r\n font-family:var(--font-body);\r\n overflow-x:hidden;\r\n line-height:1.6;\r\n -webkit-font-smoothing:antialiased;\r\n}\r\n\r\nimg,canvas{ display:block; max-width:100%; }\r\n\r\n::selection{ background:var(--blue); color:var(--white); }\r\n\r\n\/* subtle scrollbar for the tech-HUD feel *\/\r\n::-webkit-scrollbar{ width:8px; }\r\n::-webkit-scrollbar-track{ background:var(--black); }\r\n::-webkit-scrollbar-thumb{ background:var(--blue-dim); border-radius:4px; }\r\n\r\nh1,h2,h3,h4{\r\n font-family:var(--font-display);\r\n font-weight:700;\r\n letter-spacing:.01em;\r\n color:var(--white);\r\n}\r\n\r\np{ color:var(--steel); }\r\n\r\n.eyebrow{\r\n font-family:var(--font-mono);\r\n font-size:.72rem;\r\n letter-spacing:.28em;\r\n text-transform:uppercase;\r\n color:var(--blue-bright);\r\n display:inline-flex;\r\n align-items:center;\r\n gap:.6em;\r\n}\r\n.eyebrow::before{\r\n content:\"\";\r\n width:22px; height:1px;\r\n background:var(--blue-bright);\r\n display:inline-block;\r\n}\r\n\r\n.section{\r\n position:relative;\r\n padding:clamp(72px, 12vw, 160px) clamp(20px, 6vw, 80px);\r\n max-width:1360px;\r\n margin:0 auto;\r\n}\r\n\r\n\/* reusable glass panel *\/\r\n.glass{\r\n background:var(--panel-glass);\r\n border:1px solid var(--line);\r\n backdrop-filter:blur(18px);\r\n -webkit-backdrop-filter:blur(18px);\r\n border-radius:18px;\r\n}\r\n\r\n\/* scroll reveal base *\/\r\n.reveal{\r\n opacity:0;\r\n transform:translateY(36px);\r\n transition:opacity .9s var(--ease), transform .9s var(--ease);\r\n}\r\n.reveal.in-view{ opacity:1; transform:translateY(0); }\r\n.reveal-delay-1.in-view{ transition-delay:.1s; }\r\n.reveal-delay-2.in-view{ transition-delay:.2s; }\r\n.reveal-delay-3.in-view{ transition-delay:.3s; }\r\n.reveal-delay-4.in-view{ transition-delay:.4s; }\r\n.reveal-delay-5.in-view{ transition-delay:.5s; }\r\n\r\n\/* ============================================================\r\n AMBIENT BACKGROUND \u2014 global gradient wash + mouse-follow glow\r\n ============================================================ *\/\r\n.ambient{\r\n position:fixed;\r\n inset:0;\r\n z-index:0;\r\n pointer-events:none;\r\n background:\r\n radial-gradient(600px circle at var(--mx,50%) var(--my,30%), rgba(47,107,255,.14), transparent 60%),\r\n radial-gradient(1200px 800px at 15% -10%, rgba(47,107,255,.10), transparent 60%),\r\n radial-gradient(1000px 700px at 90% 110%, rgba(111,195,255,.08), transparent 60%);\r\n transition:background .3s ease-out;\r\n}\r\n\r\n.grain{\r\n position:fixed; inset:0; z-index:1; pointer-events:none;\r\n opacity:.035; mix-blend-mode:overlay;\r\n background-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'\/><\/filter><rect width='100%25' height='100%25' filter='url(%23n)'\/><\/svg>\");\r\n}\r\n\r\nmain{ position:relative; z-index:2; }\r\n\r\n\/* ============================================================\r\n HERO\r\n ============================================================ *\/\r\n.hero{\r\n position:relative;\r\n min-height:100vh;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n padding:120px 24px 60px;\r\n overflow:hidden;\r\n}\r\n\r\n#hero-canvas{\r\n position:absolute;\r\n inset:0;\r\n z-index:1;\r\n opacity:0;\r\n transition:opacity 1.6s ease 0.3s;\r\n}\r\n#hero-canvas.loaded{ opacity:1; }\r\n\r\n.hero-floor-glow{\r\n position:absolute;\r\n bottom:-10%;\r\n left:50%;\r\n transform:translateX(-50%);\r\n width:min(900px, 90vw);\r\n height:280px;\r\n background:radial-gradient(ellipse at center, rgba(47,107,255,.35), transparent 70%);\r\n filter:blur(10px);\r\n z-index:0;\r\n}\r\n\r\n.hero-content{\r\n position:relative;\r\n z-index:3;\r\n text-align:center;\r\n max-width:820px;\r\n pointer-events:none;\r\n}\r\n.hero-content a, .hero-content button{ pointer-events:auto; }\r\n\r\n.hero-brand{\r\n font-family:var(--font-mono);\r\n font-size:.8rem;\r\n letter-spacing:.4em;\r\n color:var(--blue-bright);\r\n text-transform:uppercase;\r\n margin-bottom:22px;\r\n opacity:0;\r\n animation:fadeUp .9s var(--ease) .2s forwards;\r\n}\r\n\r\n.hero-title{\r\n font-size:clamp(2.6rem, 7vw, 5.4rem);\r\n line-height:1.02;\r\n letter-spacing:.005em;\r\n background:linear-gradient(180deg, #ffffff 0%, #cfe2ff 55%, #6fc3ff 100%);\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color:transparent;\r\n text-shadow:0 0 60px rgba(111,195,255,.25);\r\n opacity:0;\r\n animation:fadeUp .9s var(--ease) .4s forwards;\r\n}\r\n\r\n.hero-sub{\r\n margin:26px auto 40px;\r\n max-width:560px;\r\n font-size:1.05rem;\r\n color:var(--steel);\r\n opacity:0;\r\n animation:fadeUp .9s var(--ease) .6s forwards;\r\n}\r\n\r\n.hero-actions{\r\n display:flex;\r\n gap:18px;\r\n justify-content:center;\r\n flex-wrap:wrap;\r\n opacity:0;\r\n animation:fadeUp .9s var(--ease) .8s forwards;\r\n}\r\n\r\n@keyframes fadeUp{\r\n from{ opacity:0; transform:translateY(22px); }\r\n to{ opacity:1; transform:translateY(0); }\r\n}\r\n\r\n.btn{\r\n position:relative;\r\n font-family:var(--font-display);\r\n font-weight:600;\r\n font-size:.98rem;\r\n letter-spacing:.03em;\r\n padding:15px 34px;\r\n border-radius:999px;\r\n cursor:pointer;\r\n border:1px solid transparent;\r\n overflow:hidden;\r\n transition:transform .35s var(--ease), box-shadow .35s var(--ease);\r\n isolation:isolate;\r\n}\r\n.btn:active{ transform:scale(.96); }\r\n\r\n.btn-primary{\r\n background:linear-gradient(135deg, var(--blue), #1745b3);\r\n color:#fff;\r\n box-shadow:0 8px 30px rgba(47,107,255,.35);\r\n}\r\n.btn-primary:hover{\r\n transform:translateY(-3px);\r\n box-shadow:0 14px 40px rgba(47,107,255,.55), 0 0 0 1px rgba(111,195,255,.4) inset;\r\n}\r\n\r\n.btn-ghost{\r\n background:rgba(255,255,255,.02);\r\n border:1px solid rgba(111,195,255,.35);\r\n color:var(--white);\r\n}\r\n.btn-ghost:hover{\r\n transform:translateY(-3px);\r\n background:rgba(111,195,255,.08);\r\n box-shadow:0 0 30px rgba(111,195,255,.25);\r\n}\r\n\r\n\/* ripple *\/\r\n.ripple{\r\n position:absolute;\r\n border-radius:50%;\r\n background:rgba(255,255,255,.5);\r\n transform:scale(0);\r\n animation:rippleAnim .7s ease-out;\r\n pointer-events:none;\r\n}\r\n@keyframes rippleAnim{\r\n to{ transform:scale(3); opacity:0; }\r\n}\r\n\r\n.scroll-cue{\r\n position:absolute;\r\n bottom:34px; left:50%;\r\n transform:translateX(-50%);\r\n z-index:3;\r\n display:flex; flex-direction:column; align-items:center; gap:8px;\r\n font-family:var(--font-mono);\r\n font-size:.65rem;\r\n letter-spacing:.3em;\r\n color:var(--steel-dim);\r\n text-transform:uppercase;\r\n animation:fadeUp .9s var(--ease) 1.1s forwards;\r\n opacity:0;\r\n}\r\n.scroll-cue .stick{\r\n width:1px; height:32px;\r\n background:linear-gradient(var(--blue-bright), transparent);\r\n animation:scrollLine 1.8s ease-in-out infinite;\r\n}\r\n@keyframes scrollLine{\r\n 0%{ transform:scaleY(0); transform-origin:top; }\r\n 50%{ transform:scaleY(1); transform-origin:top; }\r\n 50.01%{ transform-origin:bottom; }\r\n 100%{ transform:scaleY(0); transform-origin:bottom; }\r\n}\r\n\r\n\/* ============================================================\r\n ABOUT\r\n ============================================================ *\/\r\n.about-grid{\r\n display:grid;\r\n grid-template-columns:.9fr 1.1fr;\r\n gap:clamp(30px, 6vw, 80px);\r\n align-items:start;\r\n}\r\n@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }\r\n\r\n.about-heading{\r\n font-size:clamp(1.9rem, 4vw, 2.8rem);\r\n margin:16px 0 20px;\r\n line-height:1.15;\r\n}\r\n\r\n.about-copy p{ margin-bottom:18px; max-width:60ch; }\r\n.about-copy strong{ color:var(--white); font-weight:600; }\r\n\r\n.about-stats-mini{\r\n margin-top:34px;\r\n display:flex;\r\n gap:34px;\r\n flex-wrap:wrap;\r\n}\r\n.about-stats-mini div{ font-family:var(--font-mono); }\r\n.about-stats-mini .num{ color:var(--blue-bright); font-size:1.4rem; font-weight:600; display:block; }\r\n.about-stats-mini .lbl{ color:var(--steel-dim); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }\r\n\r\n.about-list{\r\n display:flex;\r\n flex-direction:column;\r\n gap:22px;\r\n}\r\n.about-item{\r\n padding:24px 26px;\r\n position:relative;\r\n}\r\n.about-item h4{ font-size:1.15rem; margin-bottom:8px; color:var(--white); }\r\n.about-item p{ margin:0; font-size:.94rem; }\r\n.about-item::before{\r\n content:\"\";\r\n position:absolute; left:0; top:0; bottom:0; width:2px;\r\n background:linear-gradient(var(--blue-bright), transparent);\r\n border-radius:2px 0 0 2px;\r\n}\r\n\r\n\/* ============================================================\r\n HELMET PROTECTION ANIMATION (signature educational scene)\r\n ============================================================ *\/\r\n.demo-section{\r\n padding-top:0;\r\n}\r\n.demo-frame{\r\n position:relative;\r\n padding:56px clamp(16px,4vw,56px) 40px;\r\n overflow:hidden;\r\n}\r\n.demo-frame::after{\r\n content:\"\";\r\n position:absolute; inset:0;\r\n background:\r\n linear-gradient(rgba(111,195,255,.05) 1px, transparent 1px) 0 0\/100% 44px,\r\n linear-gradient(90deg, rgba(111,195,255,.05) 1px, transparent 1px) 0 0\/56px 100%;\r\n opacity:.5;\r\n pointer-events:none;\r\n}\r\n\r\n.demo-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:flex-end;\r\n flex-wrap:wrap;\r\n gap:16px;\r\n margin-bottom:28px;\r\n position:relative; z-index:1;\r\n}\r\n.demo-title{ font-size:clamp(1.6rem,3.4vw,2.2rem); }\r\n\r\n.demo-status{\r\n font-family:var(--font-mono);\r\n font-size:.72rem;\r\n letter-spacing:.14em;\r\n color:var(--blue-bright);\r\n border:1px solid var(--line);\r\n padding:6px 14px;\r\n border-radius:999px;\r\n text-transform:uppercase;\r\n}\r\n\r\n.stage{\r\n position:relative;\r\n height:260px;\r\n border-radius:14px;\r\n background:linear-gradient(180deg, rgba(111,195,255,.05), transparent 40%), var(--black);\r\n border:1px solid var(--line);\r\n overflow:hidden;\r\n margin-bottom:22px;\r\n}\r\n\r\n.ground-line{\r\n position:absolute;\r\n left:0; right:0; bottom:52px;\r\n height:1px;\r\n background:linear-gradient(90deg, transparent, rgba(111,195,255,.5), transparent);\r\n}\r\n.ground-line::after{\r\n content:\"\";\r\n position:absolute; inset:1px 0 -50px 0;\r\n background:linear-gradient(180deg, rgba(111,195,255,.08), transparent);\r\n}\r\n\r\n.rider-rig{\r\n position:absolute;\r\n bottom:52px;\r\n left:8%;\r\n width:120px; height:120px;\r\n transform-origin:bottom center;\r\n animation-fill-mode:forwards;\r\n}\r\n.rider-rig.animate{ animation:ride-cycle 6s var(--ease) infinite; }\r\n\r\n.rider-rig .bike-body{\r\n position:absolute; bottom:0; left:0; width:110px; height:50px;\r\n}\r\n.rider-rig .wheel{\r\n position:absolute; bottom:0; width:34px; height:34px; border-radius:50%;\r\n border:3px solid var(--blue-bright);\r\n box-shadow:0 0 10px rgba(111,195,255,.5);\r\n}\r\n.rider-rig .wheel.front{ right:0; }\r\n.rider-rig .wheel.rear{ left:0; }\r\n.rider-rig .frame{\r\n position:absolute; bottom:26px; left:14px; width:82px; height:5px;\r\n background:var(--blue-bright);\r\n border-radius:3px;\r\n box-shadow:0 0 8px rgba(111,195,255,.6);\r\n transform:rotate(-6deg);\r\n}\r\n.rider-rig .seat-strut{\r\n position:absolute; bottom:30px; left:30px; width:5px; height:24px;\r\n background:var(--blue-dim);\r\n transform:rotate(20deg);\r\n}\r\n.rider-rig .helmet{\r\n position:absolute; bottom:78px; left:44px; width:22px; height:22px;\r\n border-radius:50% 50% 46% 46%;\r\n background:var(--white);\r\n box-shadow:0 0 12px rgba(255,255,255,.5);\r\n transition:box-shadow .4s ease, background .4s ease;\r\n}\r\n.rider-rig .torso{\r\n position:absolute; bottom:52px; left:40px; width:6px; height:30px;\r\n background:var(--steel);\r\n border-radius:3px;\r\n transform:rotate(18deg);\r\n}\r\n\r\n@keyframes ride-cycle{\r\n 0%,10%{ transform:translateX(0) rotate(0deg); }\r\n 34%{ transform:translateX(280%) rotate(0deg); }\r\n \/* loss of control wobble *\/\r\n 40%{ transform:translateX(320%) rotate(-8deg); }\r\n 46%{ transform:translateX(345%) rotate(10deg); }\r\n \/* fall *\/\r\n 54%{ transform:translateX(360%) rotate(78deg) translateY(18px); }\r\n \/* rider safe, resets *\/\r\n 72%,88%{ transform:translateX(360%) rotate(78deg) translateY(18px); }\r\n 100%{ transform:translateX(0) rotate(0deg); }\r\n}\r\n\r\n.impact-flash{\r\n position:absolute;\r\n bottom:66px;\r\n left:56%;\r\n width:70px; height:70px;\r\n transform:translate(-50%,-50%) scale(0);\r\n border-radius:50%;\r\n background:radial-gradient(circle, rgba(111,195,255,.9), transparent 70%);\r\n opacity:0;\r\n}\r\n.rider-rig.animate ~ .impact-flash,\r\n.stage .impact-flash{\r\n animation:flash-cycle 6s ease-in-out infinite;\r\n}\r\n@keyframes flash-cycle{\r\n 0%,49%{ opacity:0; transform:translate(-50%,-50%) scale(0); }\r\n 52%{ opacity:1; transform:translate(-50%,-50%) scale(1.3); }\r\n 60%{ opacity:0; transform:translate(-50%,-50%) scale(1.6); }\r\n 100%{ opacity:0; transform:translate(-50%,-50%) scale(0); }\r\n}\r\n\r\n.stage-label{\r\n position:absolute;\r\n top:18px;\r\n font-family:var(--font-mono);\r\n font-size:.7rem;\r\n letter-spacing:.14em;\r\n text-transform:uppercase;\r\n padding:6px 12px;\r\n border-radius:6px;\r\n background:var(--panel-glass-strong);\r\n border:1px solid var(--line);\r\n color:var(--blue-bright);\r\n opacity:0;\r\n}\r\n.lbl-impact{ left:44%; animation:label-1 6s ease-in-out infinite; }\r\n.lbl-protect{ left:44%; top:46px; color:#fff; animation:label-2 6s ease-in-out infinite; }\r\n.lbl-reduced{ left:44%; top:74px; animation:label-3 6s ease-in-out infinite; }\r\n.lbl-safe{ right:6%; top:18px; animation:label-4 6s ease-in-out infinite; }\r\n\r\n@keyframes label-1{ 0%,48%{opacity:0;} 52%,64%{opacity:1;} 70%,100%{opacity:0;} }\r\n@keyframes label-2{ 0%,52%{opacity:0;} 56%,68%{opacity:1;} 74%,100%{opacity:0;} }\r\n@keyframes label-3{ 0%,56%{opacity:0;} 60%,74%{opacity:1;} 80%,100%{opacity:0;} }\r\n@keyframes label-4{ 0%,74%{opacity:0;} 78%,100%{opacity:1;} }\r\n\r\n.demo-caption{\r\n display:flex;\r\n gap:14px;\r\n flex-wrap:wrap;\r\n font-family:var(--font-mono);\r\n font-size:.78rem;\r\n color:var(--steel);\r\n}\r\n.demo-caption span{\r\n border:1px solid var(--line);\r\n padding:5px 12px;\r\n border-radius:999px;\r\n}\r\n.demo-caption span b{ color:var(--blue-bright); font-weight:600; }\r\n\r\n\/* ============================================================\r\n PRODUCTS\r\n ============================================================ *\/\r\n.section-head{\r\n text-align:center;\r\n max-width:640px;\r\n margin:0 auto 56px;\r\n}\r\n.section-head h2{ font-size:clamp(1.9rem,4vw,2.6rem); margin-top:14px; }\r\n.section-head p{ margin-top:14px; }\r\n\r\n.product-grid{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));\r\n gap:26px;\r\n}\r\n\r\n.product-card{\r\n position:relative;\r\n padding:30px 24px 26px;\r\n text-align:center;\r\n transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);\r\n animation:floatCard 6s ease-in-out infinite;\r\n}\r\n.product-card:nth-child(2){ animation-delay:.4s; }\r\n.product-card:nth-child(3){ animation-delay:.8s; }\r\n.product-card:nth-child(4){ animation-delay:1.2s; }\r\n.product-card:nth-child(5){ animation-delay:1.6s; }\r\n\r\n@keyframes floatCard{\r\n 0%,100%{ transform:translateY(0); }\r\n 50%{ transform:translateY(-9px); }\r\n}\r\n\r\n.product-card:hover{\r\n transform:translateY(-14px);\r\n border-color:rgba(111,195,255,.55);\r\n box-shadow:0 24px 50px rgba(47,107,255,.25), 0 0 0 1px rgba(111,195,255,.25) inset;\r\n}\r\n\r\n.product-visual{\r\n width:100%;\r\n height:150px;\r\n display:flex; align-items:center; justify-content:center;\r\n margin-bottom:20px;\r\n}\r\n.product-visual svg{\r\n width:88px; height:88px;\r\n filter:drop-shadow(0 0 16px rgba(111,195,255,.45));\r\n transition:filter .5s ease, transform .5s ease;\r\n}\r\n.product-card:hover .product-visual svg{\r\n filter:drop-shadow(0 0 26px rgba(111,195,255,.8));\r\n transform:scale(1.08);\r\n}\r\n\r\n.product-card h3{ font-size:1.2rem; margin-bottom:8px; }\r\n.product-card p{ font-size:.88rem; margin-bottom:20px; min-height:44px; }\r\n\r\n.btn-mini{\r\n font-family:var(--font-mono);\r\n font-size:.72rem;\r\n letter-spacing:.1em;\r\n text-transform:uppercase;\r\n color:var(--blue-bright);\r\n background:transparent;\r\n border:1px solid rgba(111,195,255,.35);\r\n padding:9px 18px;\r\n border-radius:999px;\r\n cursor:pointer;\r\n transition:background .35s ease, box-shadow .35s ease, color .35s ease;\r\n}\r\n.btn-mini:hover{\r\n background:rgba(111,195,255,.12);\r\n box-shadow:0 0 20px rgba(111,195,255,.3);\r\n color:#fff;\r\n}\r\n\r\n\/* ============================================================\r\n FEATURES\r\n ============================================================ *\/\r\n.feature-grid{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));\r\n gap:20px;\r\n}\r\n.feature-card{\r\n padding:26px 24px;\r\n display:flex;\r\n gap:16px;\r\n align-items:flex-start;\r\n transition:transform .4s var(--ease), border-color .4s ease;\r\n}\r\n.feature-card:hover{\r\n transform:translateY(-6px);\r\n border-color:rgba(111,195,255,.5);\r\n}\r\n.feature-check{\r\n flex-shrink:0;\r\n width:36px; height:36px;\r\n border-radius:10px;\r\n display:flex; align-items:center; justify-content:center;\r\n background:rgba(47,107,255,.14);\r\n border:1px solid rgba(111,195,255,.35);\r\n color:var(--blue-bright);\r\n font-size:1rem;\r\n}\r\n.feature-card h4{ font-size:1.02rem; margin-bottom:4px; }\r\n.feature-card p{ font-size:.86rem; margin:0; }\r\n\r\n\/* ============================================================\r\n STATISTICS\r\n ============================================================ *\/\r\n.stats-section{\r\n padding-top:0;\r\n}\r\n.stats-panel{\r\n padding:clamp(40px,6vw,64px);\r\n display:grid;\r\n grid-template-columns:repeat(auto-fit, minmax(180px,1fr));\r\n gap:34px;\r\n position:relative;\r\n overflow:hidden;\r\n}\r\n.stats-panel::before{\r\n content:\"\";\r\n position:absolute; inset:0;\r\n background:radial-gradient(600px circle at 20% 0%, rgba(47,107,255,.16), transparent 60%);\r\n pointer-events:none;\r\n}\r\n.stat{\r\n text-align:center;\r\n position:relative;\r\n z-index:1;\r\n}\r\n.stat .value{\r\n font-family:var(--font-mono);\r\n font-size:clamp(2rem,4vw,2.8rem);\r\n font-weight:600;\r\n color:var(--white);\r\n text-shadow:0 0 30px rgba(111,195,255,.35);\r\n}\r\n.stat .value .suffix{ color:var(--blue-bright); }\r\n.stat .label{\r\n margin-top:8px;\r\n font-size:.8rem;\r\n letter-spacing:.1em;\r\n text-transform:uppercase;\r\n color:var(--steel-dim);\r\n}\r\n\r\n\/* ============================================================\r\n RESPONSIVE\r\n ============================================================ *\/\r\n@media (max-width:520px){\r\n .hero{ padding-top:100px; }\r\n .demo-frame{ padding:40px 14px 30px; }\r\n .stage{ height:220px; }\r\n .rider-rig{ left:4%; }\r\n}\r\n\r\n\/* Respect reduced motion *\/\r\n@media (prefers-reduced-motion: reduce){\r\n *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }\r\n}\r\n\r\n\/* Visible keyboard focus *\/\r\na:focus-visible, button:focus-visible{\r\n outline:2px solid var(--blue-bright);\r\n outline-offset:3px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- Ambient background layers -->\r\n<div class=\"ambient\" id=\"ambient\"><\/div>\r\n<div class=\"grain\"><\/div>\r\n\r\n<main>\r\n\r\n <!-- ============================================================\r\n HERO\r\n ============================================================ -->\r\n <section class=\"hero\" id=\"hero\">\r\n <canvas id=\"hero-canvas\"><\/canvas>\r\n <div class=\"hero-floor-glow\"><\/div>\r\n\r\n <div class=\"hero-content\">\r\n <div class=\"hero-brand\">AdFusionQuad<\/div>\r\n <h1 class=\"hero-title\">Ride Smart.<br>Ride Safe.<\/h1>\r\n <p class=\"hero-sub\">\r\n Premium riding gear engineered for riders who refuse to compromise \u2014\r\n helmets, jackets, gloves, boots and accessories built for real-world\r\n protection, everyday comfort, and a look that belongs in the showroom.\r\n <\/p>\r\n <div class=\"hero-actions\">\r\n <button class=\"btn btn-primary\" data-scroll=\"#products\">Explore Products<\/button>\r\n <button class=\"btn btn-ghost\" data-scroll=\"#about\">Learn More<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scroll-cue\"><span>Scroll<\/span><span class=\"stick\"><\/span><\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n ABOUT\r\n ============================================================ -->\r\n <section class=\"section\" id=\"about\">\r\n <div class=\"about-grid\">\r\n <div class=\"reveal\">\r\n <span class=\"eyebrow\">The Brand<\/span>\r\n <h2 class=\"about-heading\">Gear tested by the road,<br>trusted by riders.<\/h2>\r\n <div class=\"about-copy\">\r\n <p><strong>AdFusionQuad<\/strong> designs and builds protective riding equipment for people who treat every ride like it matters \u2014 because it does. We started with a simple observation: most riding gear asks you to choose between safety and style. We refused that trade-off.<\/p>\r\n <p>Motorcycle safety isn't optional gear-shop upsell \u2014 it's the difference between walking away from an incident and a life-altering one. A rated helmet, abrasion-resistant jacket, and reinforced gloves absorb the forces your body was never built to take alone.<\/p>\r\n <p>Premium gear pays for itself the first time you need it: certified impact protection, materials that hold up across seasons, and a fit that disappears into the ride instead of fighting you at every mile.<\/p>\r\n <\/div>\r\n <div class=\"about-stats-mini\">\r\n <div><span class=\"num\">10k+<\/span><span class=\"lbl\">Riders Equipped<\/span><\/div>\r\n <div><span class=\"num\">99%<\/span><span class=\"lbl\">Satisfaction<\/span><\/div>\r\n <div><span class=\"num\">24\/7<\/span><span class=\"lbl\">Support<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"about-list\">\r\n <div class=\"about-item glass reveal reveal-delay-1\">\r\n <h4>Our Mission<\/h4>\r\n <p>Make certified, high-performance protection the default choice for every rider \u2014 not the expensive exception.<\/p>\r\n <\/div>\r\n <div class=\"about-item glass reveal reveal-delay-2\">\r\n <h4>Our Vision<\/h4>\r\n <p>A riding culture where premium safety gear is worn because it looks and feels incredible, not because it's mandatory.<\/p>\r\n <\/div>\r\n <div class=\"about-item glass reveal reveal-delay-3\">\r\n <h4>Why Invest In Quality<\/h4>\r\n <p>Better materials mean better impact absorption, longer product life, and gear that adapts to weather instead of fighting it.<\/p>\r\n <\/div>\r\n <div class=\"about-item glass reveal reveal-delay-4\">\r\n <h4>Built To Perform<\/h4>\r\n <p>Every product is shaped by real ride data \u2014 ventilation, flex zones, and fit calibrated for hours in the saddle.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n HELMET PROTECTION DEMO\r\n ============================================================ -->\r\n <section class=\"section demo-section\" id=\"safety\">\r\n <div class=\"demo-frame glass reveal\">\r\n <div class=\"demo-header\">\r\n <div>\r\n <span class=\"eyebrow\">Safety In Motion<\/span>\r\n <h3 class=\"demo-title\">What a certified helmet actually does<\/h3>\r\n <\/div>\r\n <span class=\"demo-status\" id=\"demo-status\">\u25cf Simulation Running<\/span>\r\n <\/div>\r\n\r\n <div class=\"stage\" id=\"stage\">\r\n <div class=\"ground-line\"><\/div>\r\n\r\n <div class=\"rider-rig\" id=\"riderRig\">\r\n <div class=\"frame\"><\/div>\r\n <div class=\"seat-strut\"><\/div>\r\n <div class=\"wheel rear\"><\/div>\r\n <div class=\"wheel front\"><\/div>\r\n <div class=\"torso\"><\/div>\r\n <div class=\"helmet\" id=\"helmetEl\"><\/div>\r\n <\/div>\r\n <div class=\"impact-flash\"><\/div>\r\n\r\n <span class=\"stage-label lbl-impact\">Impact<\/span>\r\n <span class=\"stage-label lbl-protect\">Helmet Protection<\/span>\r\n <span class=\"stage-label lbl-reduced\">Reduced Head Injury<\/span>\r\n <span class=\"stage-label lbl-safe\">Rider Safe<\/span>\r\n <\/div>\r\n\r\n <div class=\"demo-caption\">\r\n <span>01 <b>Loss of control<\/b> \u2014 front wheel breaks traction<\/span>\r\n <span>02 <b>Impact<\/b> \u2014 energy transfers to the head first<\/span>\r\n <span>03 <b>Absorption<\/b> \u2014 shell + EPS liner disperse force<\/span>\r\n <span>04 <b>Recovery<\/b> \u2014 rider stands, no head injury<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n PRODUCTS\r\n ============================================================ -->\r\n <section class=\"section\" id=\"products\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"eyebrow\">Collections<\/span>\r\n <h2>Gear for every mile<\/h2>\r\n <p>Five categories, one standard: certified protection that doesn't ask you to sacrifice comfort or style.<\/p>\r\n <\/div>\r\n\r\n <div class=\"product-grid\">\r\n\r\n <div class=\"product-card glass reveal reveal-delay-1\">\r\n <div class=\"product-visual\">\r\n <svg viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M50 8C29 8 14 24 14 46c0 14 4 24 4 24h64s4-10 4-24C86 24 71 8 50 8Z\" stroke=\"#6fc3ff\" stroke-width=\"2.5\"\/>\r\n <path d=\"M14 50h72\" stroke=\"#2f6bff\" stroke-width=\"2\"\/>\r\n <rect x=\"30\" y=\"52\" width=\"40\" height=\"14\" rx=\"6\" stroke=\"#6fc3ff\" stroke-width=\"2\"\/>\r\n <circle cx=\"50\" cy=\"30\" r=\"4\" fill=\"#6fc3ff\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3>Helmets<\/h3>\r\n <p>Full-face and modular shells with certified impact liners and anti-fog visors.<\/p>\r\n <button class=\"btn-mini\">View Collection<\/button>\r\n <\/div>\r\n\r\n <div class=\"product-card glass reveal reveal-delay-2\">\r\n <div class=\"product-visual\">\r\n <svg viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M30 14 20 26v18l8 4v34h44V48l8-4V26L70 14H60l-4 6h-12l-4-6Z\" stroke=\"#6fc3ff\" stroke-width=\"2.5\"\/>\r\n <path d=\"M28 48v34M72 48v34\" stroke=\"#2f6bff\" stroke-width=\"2\"\/>\r\n <circle cx=\"50\" cy=\"30\" r=\"3\" fill=\"#6fc3ff\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3>Riding Jackets<\/h3>\r\n <p>Abrasion-resistant textiles with CE armor at shoulders, elbows, and back.<\/p>\r\n <button class=\"btn-mini\">View Collection<\/button>\r\n <\/div>\r\n\r\n <div class=\"product-card glass reveal reveal-delay-3\">\r\n <div class=\"product-visual\">\r\n <svg viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M40 20v22c-6 2-10 8-10 16v20a12 12 0 0 0 12 12h14a12 12 0 0 0 12-12V50c0-8-4-14-10-16V20\" stroke=\"#6fc3ff\" stroke-width=\"2.5\"\/>\r\n <path d=\"M40 20a6 6 0 0 1 12 0v18M52 18a6 6 0 0 1 12 0v20\" stroke=\"#2f6bff\" stroke-width=\"2.5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3>Riding Gloves<\/h3>\r\n <p>Reinforced knuckle protection with touchscreen-ready fingertips.<\/p>\r\n <button class=\"btn-mini\">View Collection<\/button>\r\n <\/div>\r\n\r\n <div class=\"product-card glass reveal reveal-delay-4\">\r\n <div class=\"product-visual\">\r\n <svg viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M22 70V38c0-6 5-11 12-14l10-4 8 8h20c8 0 14 6 14 14v6l6 4v18a6 6 0 0 1-6 6H28a6 6 0 0 1-6-6Z\" stroke=\"#6fc3ff\" stroke-width=\"2.5\"\/>\r\n <path d=\"M22 62h64\" stroke=\"#2f6bff\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3>Riding Shoes<\/h3>\r\n <p>Ankle-supporting boots with reinforced shifter zones and oil-resistant soles.<\/p>\r\n <button class=\"btn-mini\">View Collection<\/button>\r\n <\/div>\r\n\r\n <div class=\"product-card glass reveal reveal-delay-5\">\r\n <div class=\"product-visual\">\r\n <svg viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <circle cx=\"36\" cy=\"46\" r=\"16\" stroke=\"#6fc3ff\" stroke-width=\"2.5\"\/>\r\n <circle cx=\"66\" cy=\"46\" r=\"16\" stroke=\"#6fc3ff\" stroke-width=\"2.5\"\/>\r\n <path d=\"M50 40c2-6 8-10 14-8M22 52c-4 4-6 10-4 16\" stroke=\"#2f6bff\" stroke-width=\"2.5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3>Accessories<\/h3>\r\n <p>Communication mounts, tank bags, rain covers, and protective add-ons.<\/p>\r\n <button class=\"btn-mini\">View Collection<\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n FEATURES\r\n ============================================================ -->\r\n <section class=\"section\" id=\"features\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"eyebrow\">Why Riders Choose Us<\/span>\r\n <h2>Engineered for confidence<\/h2>\r\n <\/div>\r\n\r\n <div class=\"feature-grid\">\r\n <div class=\"feature-card glass reveal reveal-delay-1\">\r\n <div class=\"feature-check\">\u2714<\/div>\r\n <div><h4>Certified Safety<\/h4><p>Every helmet and jacket meets recognized impact-protection standards.<\/p><\/div>\r\n <\/div>\r\n <div class=\"feature-card glass reveal reveal-delay-2\">\r\n <div class=\"feature-check\">\u2714<\/div>\r\n <div><h4>Premium Quality<\/h4><p>Materials chosen for durability across seasons of real riding.<\/p><\/div>\r\n <\/div>\r\n <div class=\"feature-card glass reveal reveal-delay-3\">\r\n <div class=\"feature-check\">\u2714<\/div>\r\n <div><h4>Weather Protection<\/h4><p>Waterproof membranes and ventilation panels for any climate.<\/p><\/div>\r\n <\/div>\r\n <div class=\"feature-card glass reveal reveal-delay-4\">\r\n <div class=\"feature-check\">\u2714<\/div>\r\n <div><h4>Comfortable Fit<\/h4><p>Ergonomic patterning that moves with you, mile after mile.<\/p><\/div>\r\n <\/div>\r\n <div class=\"feature-card glass reveal reveal-delay-5\">\r\n <div class=\"feature-check\">\u2714<\/div>\r\n <div><h4>Fast Shipping<\/h4><p>Most orders leave the warehouse within 24 hours.<\/p><\/div>\r\n <\/div>\r\n <div class=\"feature-card glass reveal\">\r\n <div class=\"feature-check\">\u2714<\/div>\r\n <div><h4>Trusted By Riders<\/h4><p>Thousands of repeat customers across every riding style.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n STATISTICS\r\n ============================================================ -->\r\n <section class=\"section stats-section\" id=\"stats\">\r\n <div class=\"stats-panel glass reveal\">\r\n <div class=\"stat\">\r\n <div class=\"value\"><span class=\"counter\" data-target=\"10000\" data-suffix=\"+\">0<\/span><\/div>\r\n <div class=\"label\">Riders Equipped<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"value\"><span class=\"counter\" data-target=\"5000\" data-suffix=\"+\">0<\/span><\/div>\r\n <div class=\"label\">Products Sold<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"value\"><span class=\"counter\" data-target=\"99\" data-suffix=\"%\">0<\/span><\/div>\r\n <div class=\"label\">Customer Satisfaction<\/div>\r\n <\/div>\r\n <div class=\"stat\">\r\n <div class=\"value\"><span class=\"counter\" data-target=\"24\" data-suffix=\"\/7\">0<\/span><\/div>\r\n <div class=\"label\">Support Availability<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/main>\r\n\r\n<!-- Three.js via CDN \u2014 required to render the interactive 3D scene -->\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n\r\n<script>\r\n\/* ============================================================\r\n 1. SMOOTH SCROLL for hero CTA buttons\r\n ============================================================ *\/\r\ndocument.querySelectorAll('[data-scroll]').forEach(function(btn){\r\n btn.addEventListener('click', function(){\r\n var target = document.querySelector(btn.getAttribute('data-scroll'));\r\n if(target){ target.scrollIntoView({behavior:'smooth'}); }\r\n });\r\n});\r\n\r\n\/* ============================================================\r\n 2. BUTTON RIPPLE EFFECT\r\n ============================================================ *\/\r\ndocument.querySelectorAll('.btn, .btn-mini').forEach(function(btn){\r\n btn.style.position = btn.style.position || 'relative';\r\n btn.addEventListener('click', function(e){\r\n var rect = btn.getBoundingClientRect();\r\n var ripple = document.createElement('span');\r\n var size = Math.max(rect.width, rect.height);\r\n ripple.className = 'ripple';\r\n ripple.style.width = ripple.style.height = size + 'px';\r\n ripple.style.left = (e.clientX - rect.left - size\/2) + 'px';\r\n ripple.style.top = (e.clientY - rect.top - size\/2) + 'px';\r\n btn.appendChild(ripple);\r\n setTimeout(function(){ ripple.remove(); }, 700);\r\n });\r\n});\r\n\r\n\/* ============================================================\r\n 3. MOUSE-FOLLOWING AMBIENT LIGHT\r\n ============================================================ *\/\r\nvar ambient = document.getElementById('ambient');\r\nwindow.addEventListener('mousemove', function(e){\r\n var xPct = (e.clientX \/ window.innerWidth) * 100;\r\n var yPct = (e.clientY \/ window.innerHeight) * 100;\r\n ambient.style.setProperty('--mx', xPct + '%');\r\n ambient.style.setProperty('--my', yPct + '%');\r\n});\r\n\r\n\/* ============================================================\r\n 4. SCROLL REVEAL via IntersectionObserver\r\n ============================================================ *\/\r\nvar revealObserver = new IntersectionObserver(function(entries){\r\n entries.forEach(function(entry){\r\n if(entry.isIntersecting){\r\n entry.target.classList.add('in-view');\r\n revealObserver.unobserve(entry.target);\r\n }\r\n });\r\n}, { threshold: 0.15 });\r\ndocument.querySelectorAll('.reveal').forEach(function(el){ revealObserver.observe(el); });\r\n\r\n\/* ============================================================\r\n 5. HELMET DEMO \u2014 trigger the ride\/crash\/recover loop only\r\n once the stage scrolls into view, so it reads as a deliberate\r\n educational sequence rather than constant background motion.\r\n ============================================================ *\/\r\nvar riderRig = document.getElementById('riderRig');\r\nvar demoStatus = document.getElementById('demo-status');\r\nvar demoObserver = new IntersectionObserver(function(entries){\r\n entries.forEach(function(entry){\r\n if(entry.isIntersecting){\r\n riderRig.classList.add('animate');\r\n } else {\r\n riderRig.classList.remove('animate');\r\n }\r\n });\r\n}, { threshold: 0.4 });\r\ndemoObserver.observe(document.getElementById('stage'));\r\n\r\n\/* Cycle the status readout in sync with the 6s animation loop *\/\r\nvar statusStages = ['\u25cf Riding Normally','\u25cf Loss Of Traction','\u25cf Impact Detected','\u25cf Helmet Absorbing Force','\u25cf Rider Recovering'];\r\nvar statusTimes = [0, 2200, 3400, 3900, 4700];\r\nfunction runStatusLoop(){\r\n var start = performance.now();\r\n function tick(now){\r\n var t = (now - start) % 6000;\r\n for(var i = statusTimes.length - 1; i >= 0; i--){\r\n if(t >= statusTimes[i]){ demoStatus.textContent = statusStages[i]; break; }\r\n }\r\n requestAnimationFrame(tick);\r\n }\r\n requestAnimationFrame(tick);\r\n}\r\nrunStatusLoop();\r\n\r\n\/* ============================================================\r\n 6. ANIMATED STAT COUNTERS\r\n ============================================================ *\/\r\nvar counters = document.querySelectorAll('.counter');\r\nvar counterObserver = new IntersectionObserver(function(entries){\r\n entries.forEach(function(entry){\r\n if(entry.isIntersecting){\r\n animateCounter(entry.target);\r\n counterObserver.unobserve(entry.target);\r\n }\r\n });\r\n}, { threshold: 0.5 });\r\ncounters.forEach(function(c){ counterObserver.observe(c); });\r\n\r\nfunction animateCounter(el){\r\n var target = parseInt(el.getAttribute('data-target'), 10);\r\n var suffix = el.getAttribute('data-suffix') || '';\r\n var duration = 1800;\r\n var start = performance.now();\r\n function step(now){\r\n var progress = Math.min((now - start) \/ duration, 1);\r\n var eased = 1 - Math.pow(1 - progress, 3);\r\n var value = Math.floor(eased * target);\r\n el.textContent = value.toLocaleString() ;\r\n if(progress < 1){\r\n requestAnimationFrame(step);\r\n } else {\r\n el.innerHTML = target.toLocaleString() + '<span class=\"suffix\">' + suffix + '<\/span>';\r\n }\r\n }\r\n requestAnimationFrame(step);\r\n}\r\n\r\n\/* ============================================================\r\n 7. THREE.JS HOLO-BAY \u2014 stylised wireframe motorcycle hologram\r\n Rationale: rather than attempt (and fail at) photoreal geometry\r\n from primitives, the bike is presented as a blue holographic\r\n projection on a scanning pad \u2014 which reads as premium \/\r\n futuristic \/ \"gaming tech\" by design, not by compromise.\r\n ============================================================ *\/\r\n(function(){\r\n var canvas = document.getElementById('hero-canvas');\r\n var heroSection = document.getElementById('hero');\r\n if(!window.THREE || !canvas){ return; }\r\n\r\n var scene = new THREE.Scene();\r\n var camera = new THREE.PerspectiveCamera(42, canvas.clientWidth \/ canvas.clientHeight, 0.1, 100);\r\n camera.position.set(0, 2.1, 8.5);\r\n\r\n var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias:true, alpha:true });\r\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n\r\n function sizeRenderer(){\r\n var w = heroSection.clientWidth, h = heroSection.clientHeight;\r\n renderer.setSize(w, h, false);\r\n camera.aspect = w \/ h;\r\n camera.updateProjectionMatrix();\r\n }\r\n sizeRenderer();\r\n\r\n \/* ---- Lighting: cool key light + blue rim + subtle ambient ---- *\/\r\n scene.add(new THREE.AmbientLight(0x1a2540, 1.2));\r\n var keyLight = new THREE.PointLight(0x6fc3ff, 2.4, 20);\r\n keyLight.position.set(3, 5, 4);\r\n scene.add(keyLight);\r\n var rimLight = new THREE.PointLight(0x2f6bff, 3, 20);\r\n rimLight.position.set(-4, 2, -3);\r\n scene.add(rimLight);\r\n var underLight = new THREE.PointLight(0x2f6bff, 2.2, 10);\r\n underLight.position.set(0, -1.2, 1);\r\n scene.add(underLight);\r\n\r\n var bikeGroup = new THREE.Group();\r\n scene.add(bikeGroup);\r\n\r\n var edgeColor = 0x6fc3ff;\r\n var bodyMat = new THREE.MeshStandardMaterial({\r\n color:0x0d1424, metalness:0.4, roughness:0.35,\r\n emissive:0x123a6e, emissiveIntensity:0.35\r\n });\r\n function addEdges(mesh, color){\r\n var edges = new THREE.EdgesGeometry(mesh.geometry);\r\n var line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: color || edgeColor }));\r\n mesh.add(line);\r\n }\r\n\r\n \/* Wheels *\/\r\n function makeWheel(){\r\n var g = new THREE.Group();\r\n var tireGeo = new THREE.TorusGeometry(0.72, 0.16, 10, 28);\r\n var tire = new THREE.Mesh(tireGeo, bodyMat);\r\n tire.rotation.y = Math.PI\/2;\r\n addEdges(tire);\r\n g.add(tire);\r\n for(var i=0;i<8;i++){\r\n var spokeGeo = new THREE.CylinderGeometry(0.02,0.02,1.3,6);\r\n var spoke = new THREE.Mesh(spokeGeo, new THREE.MeshBasicMaterial({color:edgeColor}));\r\n spoke.rotation.z = Math.PI\/2;\r\n spoke.rotation.x = (Math.PI\/4)*i;\r\n g.add(spoke);\r\n }\r\n return g;\r\n }\r\n var rearWheel = makeWheel(); rearWheel.position.set(-1.55, -0.35, 0);\r\n var frontWheel = makeWheel(); frontWheel.position.set(1.75, -0.25, 0);\r\n bikeGroup.add(rearWheel, frontWheel);\r\n\r\n \/* Main frame beam *\/\r\n var frameGeo = new THREE.BoxGeometry(2.6, 0.14, 0.14);\r\n var frame = new THREE.Mesh(frameGeo, bodyMat);\r\n frame.position.set(0.05, 0.28, 0);\r\n frame.rotation.z = -0.12;\r\n addEdges(frame);\r\n bikeGroup.add(frame);\r\n\r\n \/* Fuel tank \/ body *\/\r\n var tankGeo = new THREE.SphereGeometry(0.5, 12, 10);\r\n tankGeo.scale(1.15, 0.62, 0.62);\r\n var tank = new THREE.Mesh(tankGeo, bodyMat);\r\n tank.position.set(-0.15, 0.62, 0);\r\n addEdges(tank);\r\n bikeGroup.add(tank);\r\n\r\n \/* Seat *\/\r\n var seatGeo = new THREE.BoxGeometry(1.1, 0.16, 0.5);\r\n var seat = new THREE.Mesh(seatGeo, bodyMat);\r\n seat.position.set(-0.9, 0.62, 0);\r\n addEdges(seat);\r\n bikeGroup.add(seat);\r\n\r\n \/* Tail section *\/\r\n var tailGeo = new THREE.ConeGeometry(0.32, 0.9, 8);\r\n var tail = new THREE.Mesh(tailGeo, bodyMat);\r\n tail.rotation.z = Math.PI\/2;\r\n tail.position.set(-1.7, 0.58, 0);\r\n addEdges(tail);\r\n bikeGroup.add(tail);\r\n\r\n \/* Front fairing \/ nose *\/\r\n var noseGeo = new THREE.ConeGeometry(0.34, 1.0, 8);\r\n var nose = new THREE.Mesh(noseGeo, bodyMat);\r\n nose.rotation.z = -Math.PI\/2 + 0.25;\r\n nose.position.set(1.55, 0.5, 0);\r\n addEdges(nose);\r\n bikeGroup.add(nose);\r\n\r\n \/* Fork *\/\r\n var forkGeo = new THREE.CylinderGeometry(0.045, 0.045, 1.35, 8);\r\n var fork = new THREE.Mesh(forkGeo, bodyMat);\r\n fork.rotation.z = 0.35;\r\n fork.position.set(1.65, 0.05, 0);\r\n addEdges(fork);\r\n bikeGroup.add(fork);\r\n\r\n \/* Handlebar *\/\r\n var barGeo = new THREE.CylinderGeometry(0.03,0.03,0.9,8);\r\n var bar = new THREE.Mesh(barGeo, bodyMat);\r\n bar.rotation.x = Math.PI\/2;\r\n bar.position.set(1.35, 0.95, 0);\r\n addEdges(bar);\r\n bikeGroup.add(bar);\r\n\r\n \/* Engine block *\/\r\n var engineGeo = new THREE.BoxGeometry(0.55, 0.5, 0.55);\r\n var engine = new THREE.Mesh(engineGeo, bodyMat);\r\n engine.position.set(0.1, 0.02, 0);\r\n addEdges(engine);\r\n bikeGroup.add(engine);\r\n\r\n \/* Exhaust glow *\/\r\n var exhaustGeo = new THREE.CylinderGeometry(0.09,0.12,1.1,10);\r\n var exhaustMat = new THREE.MeshStandardMaterial({ color:0x0d1424, emissive:0x6fc3ff, emissiveIntensity:0.9, metalness:0.6, roughness:0.2 });\r\n var exhaust = new THREE.Mesh(exhaustGeo, exhaustMat);\r\n exhaust.rotation.z = Math.PI\/2;\r\n exhaust.position.set(-1.1, -0.25, 0.32);\r\n bikeGroup.add(exhaust);\r\n\r\n \/* Headlight point *\/\r\n var headGeo = new THREE.SphereGeometry(0.09, 10, 10);\r\n var headMat = new THREE.MeshBasicMaterial({ color:0xffffff });\r\n var headlight = new THREE.Mesh(headGeo, headMat);\r\n headlight.position.set(1.95, 0.55, 0);\r\n bikeGroup.add(headlight);\r\n var headGlow = new THREE.PointLight(0xbfe4ff, 1.4, 4);\r\n headGlow.position.copy(headlight.position);\r\n bikeGroup.add(headGlow);\r\n\r\n bikeGroup.scale.set(0.95,0.95,0.95);\r\n bikeGroup.position.y = 0.2;\r\n\r\n \/* ---- Holo pad: rotating rings under the bike ---- *\/\r\n var padGroup = new THREE.Group();\r\n var ring1 = new THREE.Mesh(\r\n new THREE.RingGeometry(2.1, 2.16, 64),\r\n new THREE.MeshBasicMaterial({ color:0x2f6bff, side:THREE.DoubleSide, transparent:true, opacity:0.7 })\r\n );\r\n ring1.rotation.x = -Math.PI\/2;\r\n ring1.position.y = -0.85;\r\n padGroup.add(ring1);\r\n\r\n var ring2 = new THREE.Mesh(\r\n new THREE.RingGeometry(2.5, 2.52, 64),\r\n new THREE.MeshBasicMaterial({ color:0x6fc3ff, side:THREE.DoubleSide, transparent:true, opacity:0.4 })\r\n );\r\n ring2.rotation.x = -Math.PI\/2;\r\n ring2.position.y = -0.87;\r\n padGroup.add(ring2);\r\n\r\n var padDisc = new THREE.Mesh(\r\n new THREE.CircleGeometry(2.05, 64),\r\n new THREE.MeshBasicMaterial({ color:0x2f6bff, transparent:true, opacity:0.05 })\r\n );\r\n padDisc.rotation.x = -Math.PI\/2;\r\n padDisc.position.y = -0.86;\r\n padGroup.add(padDisc);\r\n\r\n scene.add(padGroup);\r\n\r\n \/* ---- Floating particles: light dust rising through the beam ---- *\/\r\n var particleCount = 260;\r\n var positions = new Float32Array(particleCount * 3);\r\n var speeds = new Float32Array(particleCount);\r\n for(var p=0; p<particleCount; p++){\r\n var radius = 1 + Math.random()*4.5;\r\n var angle = Math.random()*Math.PI*2;\r\n positions[p*3] = Math.cos(angle) * radius;\r\n positions[p*3+1] = Math.random()*4 - 1.2;\r\n positions[p*3+2] = Math.sin(angle) * radius * 0.6 - 1;\r\n speeds[p] = 0.15 + Math.random()*0.35;\r\n }\r\n var particleGeo = new THREE.BufferGeometry();\r\n particleGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));\r\n var particleMat = new THREE.PointsMaterial({\r\n color:0x8fd0ff, size:0.03, transparent:true, opacity:0.65,\r\n blending:THREE.AdditiveBlending, depthWrite:false\r\n });\r\n var particles = new THREE.Points(particleGeo, particleMat);\r\n scene.add(particles);\r\n\r\n \/* ---- Mouse interaction: subtle tilt toward cursor ---- *\/\r\n var targetRotX = 0, targetRotY = 0;\r\n window.addEventListener('mousemove', function(e){\r\n var nx = (e.clientX \/ window.innerWidth) * 2 - 1;\r\n var ny = (e.clientY \/ window.innerHeight) * 2 - 1;\r\n targetRotY = nx * 0.35;\r\n targetRotX = ny * 0.15;\r\n });\r\n\r\n window.addEventListener('resize', sizeRenderer);\r\n\r\n var clock = new THREE.Clock();\r\n function animate(){\r\n requestAnimationFrame(animate);\r\n var t = clock.getElapsedTime();\r\n\r\n \/* continuous slow showroom rotation + mouse tilt *\/\r\n bikeGroup.rotation.y += 0.0035;\r\n bikeGroup.rotation.y += (targetRotY - 0) * 0.0; \/* base spin kept independent of tilt *\/\r\n bikeGroup.rotation.x += ( (targetRotX*0.4) - bikeGroup.rotation.x ) * 0.04;\r\n bikeGroup.rotation.z += ( (targetRotY*0.12) - bikeGroup.rotation.z ) * 0.04;\r\n bikeGroup.position.y = 0.2 + Math.sin(t*0.9)*0.05;\r\n\r\n padGroup.rotation.y += 0.002;\r\n ring1.material.opacity = 0.5 + Math.sin(t*1.4)*0.2;\r\n\r\n \/* rising particle drift *\/\r\n var pos = particleGeo.attributes.position.array;\r\n for(var i=0;i<particleCount;i++){\r\n pos[i*3+1] += speeds[i]*0.01;\r\n if(pos[i*3+1] > 3.2){ pos[i*3+1] = -1.2; }\r\n }\r\n particleGeo.attributes.position.needsUpdate = true;\r\n particles.rotation.y += 0.0009;\r\n\r\n headGlow.intensity = 1.1 + Math.sin(t*3)*0.3;\r\n\r\n renderer.render(scene, camera);\r\n }\r\n animate();\r\n\r\n \/* Fade the canvas in once geometry is built to avoid a pop-in flash *\/\r\n requestAnimationFrame(function(){ canvas.classList.add('loaded'); });\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>AdFusionQuad \u2014 Ride Smart. Ride Safe. AdFusionQuad Ride Smart.Ride Safe. Premium riding gear engineered for riders who refuse to compromise […]<\/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":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","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-104","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/104","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=104"}],"version-history":[{"count":5,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/104\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=\/wp\/v2\/pages\/104\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/adfusionquad.us.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}