:root{--bg-canvas:#10352e;--bg-surface:rgba(224,242,241,.075);--bg-surface-hover:rgba(255,111,89,.16);--text-primary:#e0f2f1;--text-muted:#b7d0ca;--accent-primary:#ff6f59;--accent-secondary:#f5b79f;--border-subtle:rgba(224,242,241,.2);--ease-kinetic:cubic-bezier(.16,1,.3,1);--shadow-elevation:0 12px 32px -4px rgba(0,0,0,.25);--glow-accent:0 0 24px -4px rgba(255,111,89,.42);--glass-backdrop:blur(16px) saturate(150%);--wrap:1200px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg-canvas);color:var(--text-primary);font:400 16px/1.68 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow-wrap:anywhere;hyphens:auto}
h1,h2,h3,h4{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-weight:800;line-height:1.08;letter-spacing:-.045em;overflow-wrap:anywhere;margin:0 0 .7em}
h1{font-size:clamp(2.7rem,7vw,5.8rem);max-width:900px}
h2{font-size:clamp(1.85rem,4vw,3.1rem)}
h3{font-size:1.28rem;letter-spacing:-.025em}
p{margin:.3em 0 1em}
a{color:var(--text-primary);text-decoration-color:var(--accent-primary);text-decoration-thickness:1px;text-underline-offset:4px;transition:color .25s var(--ease-kinetic),text-decoration-thickness .25s var(--ease-kinetic)}
a:hover{color:var(--accent-secondary);text-decoration-thickness:3px}
button,input,textarea{font:inherit}
button{cursor:pointer}
img{display:block;width:100%;height:auto;object-fit:cover}
.wrap{width:min(calc(100% - 40px),var(--wrap));margin-inline:auto}
header{position:relative;z-index:5;background:transparent;border-bottom:1px solid transparent;transition:background .35s ease,border-color .35s ease}
header.is-scrolled{background:#10352e;border-color:var(--border-subtle)}
.header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:850;letter-spacing:-.03em;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent-primary);color:#241c1a;font-size:.8rem;font-weight:900}
.nav-links{display:flex;align-items:center;gap:clamp(12px,2vw,26px)}
.nav-links a{font-size:.88rem;text-decoration:none;color:var(--text-muted)}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--text-primary)}
.menu-toggle{display:none;border:1px solid var(--border-subtle);background:var(--bg-surface);color:var(--text-primary);width:42px;height:42px;font-size:1.45rem;line-height:1;border-radius:50%}
.hero{position:relative;isolation:isolate;padding:clamp(50px,8vw,106px) 0 42px;background:radial-gradient(ellipse at 82% 12%,rgba(255,111,89,.19),transparent 32%),radial-gradient(ellipse at 18% 90%,rgba(255,111,89,.1),transparent 32%);background-size:200% 200%;animation:gradientShift 12s ease infinite}
.hero:after{position:absolute;content:"";z-index:-1;right:8%;top:10%;width:220px;height:220px;border-radius:50%;background:rgba(255,111,89,.1);filter:blur(52px);animation:drift 8s ease-in-out infinite alternate}
@keyframes gradientShift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes drift{to{transform:translate(-18px,24px) scale(1.12)}}
.eyebrow,.tag{display:inline-flex;align-items:center;gap:8px;color:var(--accent-secondary);font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.hero h1{margin:.22em 0 .26em}
.hero p{max-width:65ch;color:var(--text-muted);font-size:1.08rem}
.page-hero{padding:48px 0 28px}
main{min-height:50vh}
.section{padding:clamp(44px,7vw,88px) 0;position:relative}
.section-glow{background:radial-gradient(ellipse at 85% 45%,rgba(255,111,89,.13),transparent 38%)}
.split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(270px,.8fr);gap:clamp(28px,7vw,92px);align-items:start}
.split-aside{position:relative}
.copy{max-width:70ch;margin-inline:auto}
.copy p,.copy li{color:var(--text-muted)}
.copy h2,.copy h3{color:var(--text-primary)}
.lead{font-size:1.18rem;color:var(--text-primary)!important}
.card,.panel,.metric,.feature{background:var(--bg-surface);border:1px solid var(--border-subtle);backdrop-filter:var(--glass-backdrop);-webkit-backdrop-filter:var(--glass-backdrop);box-shadow:var(--shadow-elevation);transition:transform .35s var(--ease-kinetic),box-shadow .35s var(--ease-kinetic),background .35s}
.card:hover,.panel:hover,.feature:hover{transform:translateY(-5px) scale(1.015);box-shadow:var(--shadow-elevation),var(--glow-accent);background:var(--bg-surface-hover)}
.card{padding:clamp(20px,3vw,32px);height:100%}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.media-card{padding:0;overflow:hidden}
.media-card img{aspect-ratio:4/3}
.media-card .card-body{padding:22px}
.feature{display:grid;grid-template-columns:minmax(220px,.8fr) 1.2fr;align-items:stretch;overflow:hidden}
.feature img{height:100%;min-height:240px;aspect-ratio:4/3}
.feature-copy{padding:clamp(22px,4vw,40px)}
.metric-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:24px 0}
.metric{padding:16px 18px}
.metric strong{display:block;font-size:1.45rem;color:var(--accent-secondary);line-height:1.2}
.metric span{color:var(--text-muted);font-size:.86rem}
.stat-label{font-size:.73rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 19px;border:0;background:var(--accent-primary);color:#241c1a;font-weight:850;text-decoration:none;transition:transform .25s var(--ease-kinetic),box-shadow .25s}
.button:hover{transform:translateY(-3px);box-shadow:var(--glow-accent);color:#241c1a}
.text-action{display:inline-block;margin:8px 18px 8px 0;text-decoration-thickness:1px}
.bench{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.bench-item{padding:19px;border-left:3px solid var(--accent-primary);background:rgba(224,242,241,.055)}
.bench-item strong{display:block;margin-bottom:5px}
.tabs{margin-top:22px}
.tab-list{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--border-subtle)}
.tab-list button{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--text-muted);padding:12px 15px}
.tab-list button[aria-selected=true]{border-color:var(--accent-primary);color:var(--text-primary)}
.tab-panel{padding:22px 0;max-width:70ch}
.tab-panel[hidden]{display:none}
details{border-top:1px solid var(--border-subtle);padding:17px 0}
details:last-child{border-bottom:1px solid var(--border-subtle)}
summary{font-weight:750;cursor:pointer}
summary::marker{color:var(--accent-primary)}
table{width:100%;border-collapse:collapse;min-width:620px}
th,td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--border-subtle)}
th{color:var(--accent-secondary)}
.table-wrap{overflow-x:auto;margin:22px 0}
.callout{border-left:3px solid var(--accent-primary);padding:18px 22px;background:rgba(255,111,89,.09);color:var(--text-muted)}
img{background:linear-gradient(135deg,rgba(255,111,89,.12),rgba(224,242,241,.04))}
figure{margin:0}
figcaption{font-size:.82rem;color:var(--text-muted);padding:9px 0}
form{display:grid;gap:13px}
label{font-size:.9rem;font-weight:700}
input,textarea{width:100%;padding:12px 13px;border:1px solid var(--border-subtle);background:rgba(0,0,0,.15);color:var(--text-primary);border-radius:0}
input:focus,textarea:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent-secondary);outline-offset:3px}
textarea{min-height:110px;resize:vertical}
.preview{white-space:pre-wrap;min-height:130px;max-height:320px;overflow:auto;padding:17px;background:rgba(0,0,0,.18);border:1px solid var(--border-subtle);color:var(--text-muted)}
footer{border-top:1px solid var(--border-subtle);padding:38px 0 28px;background:rgba(0,0,0,.12)}
.footer-grid{display:grid;grid-template-columns:1.15fr 1fr 1.35fr;gap:28px}
.footer-links{display:flex;flex-wrap:wrap;gap:10px 18px}
.footer-links a{font-size:.9rem}
.footer-company{font-size:.88rem;color:var(--text-muted)}
.footer-company strong{color:var(--text-primary)}
.copyright{margin:26px 0 0;padding-top:15px;border-top:1px solid var(--border-subtle);color:var(--text-muted);font-size:.82rem}
.reveal{opacity:0;transform:translateY(20px)}
.reveal.reveal-visible{transform:translateY(0);opacity:1;transition:all .7s var(--ease-kinetic)}
@media(max-width:768px){.header-inner{min-height:66px}.menu-toggle{display:block;order:3;margin-left:auto}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;padding:12px 20px 20px;background:#10352e;border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-elevation);flex-direction:column;align-items:stretch;gap:0}.nav-links.is-open{display:flex}.nav-links a{padding:12px 4px;border-bottom:1px solid var(--border-subtle)}.split{grid-template-columns:1fr}.split-aside{position:static}.footer-grid{grid-template-columns:1fr 1fr}.feature{grid-template-columns:1fr}.feature img{max-height:300px}}
@media(max-width:480px){.wrap{width:min(calc(100% - 28px),var(--wrap))}.brand{font-size:.9rem}.hero{padding-top:38px}.page-hero{padding-top:34px}.footer-grid{grid-template-columns:1fr}.metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.button{width:100%}}
@media(min-width:481px) and (max-width:768px){.wrap{width:min(calc(100% - 36px),var(--wrap))}}
@media(min-width:769px) and (max-width:1024px){.wrap{width:min(calc(100% - 48px),var(--wrap))}}
@media(min-width:1025px){.wrap{width:min(calc(100% - 64px),var(--wrap))}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
/* FILE: script.js */
(()=>{const header=document.querySelector("header"),toggle=document.querySelector(".menu-toggle"),nav=document.querySelector(".nav-links");function updateHeader(){if(header)header.classList.toggle("is-scrolled",window.scrollY>20)}window.addEventListener("scroll",updateHeader,{passive:true});updateHeader();if(toggle&&nav){toggle.addEventListener("click",()=>{const open=nav.classList.toggle("is-open");toggle.setAttribute("aria-expanded",String(open));toggle.setAttribute("aria-label",open?"Close navigation":"Open navigation")});nav.addEventListener("click",e=>{if(e.target.closest("a")){nav.classList.remove("is-open");toggle.setAttribute("aria-expanded","false")}});document.addEventListener("keydown",e=>{if(e.key==="Escape"){nav.classList.remove("is-open");toggle.setAttribute("aria-expanded","false");toggle.focus()}})}const reveal=document.querySelectorAll(".reveal");if("IntersectionObserver"in window){const io=new IntersectionObserver(entries=>entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add("reveal-visible");io.unobserve(entry.target)}}),{threshold:.12});reveal.forEach(el=>io.observe(el))}else reveal.forEach(el=>el.classList.add("reveal-visible"));document.querySelectorAll("[data-tablist]").forEach(list=>{const buttons=[...list.querySelectorAll('[role="tab"]')],panels=[...document.querySelectorAll("[role=tabpanel]")];buttons.forEach(btn=>btn.addEventListener("click",()=>{buttons.forEach(b=>{b.setAttribute("aria-selected",String(b===btn));b.tabIndex=b===btn?0:-1});panels.forEach(p=>p.hidden=p.id!==btn.getAttribute("aria-controls"))}))});const form=document.querySelector("#message-tool");if(form){const fields=["name","email","subject","message"].map(id=>document.getElementById(id)),preview=document.getElementById("message-preview"),compose=()=>`To: hello@crewblocopperprch.com\nFrom: ${fields[0].value||"[Your name]"} <${fields[1].value||"[Your email]"}>\nSubject: ${fields[2].value||"[Subject]"}\n\n${fields[3].value||"[Your message]"}`;const refresh=()=>{preview.textContent=compose()};fields.forEach(f=>f.addEventListener("input",refresh));form.addEventListener("submit",e=>e.preventDefault());document.getElementById("copy-message").addEventListener("click",async()=>{try{await navigator.clipboard.writeText(compose());document.getElementById("message-status").textContent="Message copied to clipboard."}catch{document.getElementById("message-status").textContent="Clipboard access is unavailable. Select and copy the preview."}});document.getElementById("download-message").addEventListener("click",()=>{const blob=new Blob([compose()],{type:"text/plain;charset=utf-8"}),url=URL.createObjectURL(blob),a=document.createElement("a");a.href=url;a.download="crew-blo-copper-prch-message.txt";a.click();URL.revokeObjectURL(url);document.getElementById("message-status").textContent="Text file downloaded."});refresh()}})();
/* FILE: index.html */
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>VR Esports Motion Tracking: A Field Guide | Crew Blo Copper Prch</title>
<meta name="description" content="A practical field guide to VR esports motion tracking, calibration, latency and competitive virtual environments.">
<link rel="canonical" href="https://crewblocopperprch.com/">
<meta property="og:title" content="VR Esports Motion Tracking: A Field Guide | Crew Blo Copper Prch"><meta property="og:description" content="Measure the motion behind every fair match with practical checks for VR esports players and technicians."><meta property="og:url" content="https://crewblocopperprch.com/"><meta property="og:type" content="website">
<link rel="stylesheet" href="styles.css"><script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","name":"Crew Blo Copper Prch","url":"https://crewblocopperprch.com/"},{"@type":"Article","headline":"VR Esports Motion Tracking: A Field Guide","mainEntityOfPage":"https://crewblocopperprch.com/","author":{"@type":"Organization","name":"Crew Blo Copper Prch"}},{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What does positional tracking measure?","acceptedAnswer":{"@type":"Answer","text":"It estimates a tracked object’s position and orientation in the play space over time."}},{"@type":"Question","name":"Why calibrate before a match?","acceptedAnswer":{"@type":"Answer","text":"Calibration aligns tracking coordinates with the arena and player setup, reducing avoidable disagreement."}}]}]}</script>
<script src="script.js" defer></script>
</head>
<body><header><div class="wrap header-inner"><a class="brand" href="./" aria-label="Crew Blo Copper Prch home"><span class="brand-mark" aria-hidden="true">CB</span><span>Crew Blo Copper Prch</span></a><button class="menu-toggle" aria-expanded="false" aria-label="Open navigation" aria-controls="site-nav">⋮</button><nav class="nav-links" id="site-nav" aria-label="Main navigation"><a href="index.html" aria-current="page">Guide</a><a href="tracking.html">Tracking</a><a href="calibration.html">Setup</a><a href="latency.html">Latency</a><a href="arenas.html">Arenas</a><a href="faq.html">FAQ</a><a href="contact.html">Contact</a></nav></div></header>
<main><section class="hero"><div class="wrap"><span class="eyebrow">VR esports · field guide</span><h1>Measure the Motion Behind Every Fair Match</h1></div></section>
<section class="section"><div class="wrap split"><div class="copy"><span class="eyebrow">01 / signal</span><h2>Read the Tracking Signal</h2><p class="lead">A fair contest depends on every player’s movements being represented consistently—not merely convincingly—inside the game.</p><p>Motion tracking estimates where a headset, controller, or body marker is and how it is oriented. Those estimates become competitive input. Occlusion, drift, play-space setup, and system timing can change what an athlete sees or what a game records. Treat tracking quality as a measurable part of match readiness.</p><a class="text-action" href="tracking.html">Explore positional tracking →</a><div class="metric-strip"><div class="metric"><strong>Position</strong><span>Where is the object?</span></div><div class="metric"><strong>Orientation</strong><span>Which way is it facing?</span></div><div class="metric"><strong>Continuity</strong><span>Does the estimate hold?</span></div></div></div><aside class="split-aside card reveal"><figure><img src="headset-tracking-render.jpg" width="900" height="675" alt="Soft-lit 3D render of a VR headset on a plain warm-neutral background"><figcaption>A tracking result is useful only when its reference frame is understood.</figcaption></figure></aside></div></section>
<section class="section section-glow"><div class="wrap split"><div class="copy"><span class="eyebrow">02 / reference</span><h2>Calibrate Before the Countdown</h2><p>Calibration establishes the coordinate system that connects sensors, headset, player, and virtual floor. A clean routine makes the match repeatable: mark the boundary, set the floor, check sensor visibility, then verify a known pose from more than one position.</p><p>Do the same checks for every station and record any change. A tiny setup discrepancy can become a reach advantage, a misplaced boundary, or a confusing reset under pressure.</p><a class="text-action" href="calibration.html">Open the setup sequence →</a></div><aside class="split-aside"><div class="bench"><div class="bench-item"><strong>Reference</strong><span>Floor and origin agree.</span></div><div class="bench-item"><strong>Coverage</strong><span>Movement remains visible.</span></div><div class="bench-item"><strong>Repeatability</strong><span>Known pose returns cleanly.</span></div></div></aside></div></section>
<section class="section"><div class="wrap"><div class="copy"><span class="eyebrow">03 / timing</span><h2>Latency Is Part of the Match</h2><p class="lead">Latency is the delay between movement and the response a player can perceive. Measure the full path rather than blaming one device.</p><p>Sensor sampling, estimation, game processing, rendering, and display scan-out each contribute. Consistent timing matters alongside low timing: a steady response is easier to learn than unpredictable variation.</p><a class="text-action" href="latency.html">Understand timing effects →</a></div><div class="metric-strip"><div class="metric"><strong>Move</strong><span>Player initiates action</span></div><div class="metric"><strong>Estimate</strong><span>System updates pose</span></div><div class="metric"><strong>Present</strong><span>Game displays response</span></div></div></div></section>
<section class="section section-glow"><div class="wrap split"><div class="copy"><span class="eyebrow">04 / play space</span><h2>Inside the Virtual Arena</h2><p>Competitive environments should make boundaries, sightlines, and interactions legible. Map the physical space honestly, keep hazards outside the active zone, and confirm that virtual geometry does not reward a tracking blind spot.</p><a class="text-action" href="arenas.html">Review arena design →</a></div><figure class="card reveal"><img src="vr-arena-layout-render.jpg" width="900" height="675" loading="lazy" alt="Soft-lit 3D render of a miniature VR competition arena with clear boundary markers on a plain background"></figure></div></section>
<section class="section"><div class="wrap"><div class="copy"><span class="eyebrow">05 / repeatable checks</span><h2>Quick Bench Tests</h2><p>Run a short, documented pass before warm-up. These observations do not replace system diagnostics; they help teams spot practical inconsistencies early.</p></div><div class="bench"><div class="bench-item"><strong>Walk the boundary</strong><span>Check floor alignment and guardian edges from each side.</span></div><div class="bench-item"><strong>Hold a still pose</strong><span>Look for visible drift or jumps while the player remains steady.</span></div><div class="bench-item"><strong>Repeat a reach</strong><span>Compare the same controller path across stations.</span></div><div class="bench-item"><strong>Check visibility</strong><span>Turn and crouch through likely occlusion zones.</span></div></div><p style="margin-top:28px"><a class="button" href="calibration.html">Check Your Tracking Setup</a></p></div></section></main>
<footer><div class="wrap"><div class="footer-grid"><div><a class="brand" href="./"><span class="brand-mark" aria-hidden="true">CB</span><span>Crew Blo Copper Prch</span></a><p><a href="https://crewblocopperprch.com/">crewblocopperprch.com</a></p><div class="footer-links"><a href="index.html">Guide</a><a href="tracking.html">Tracking</a><a href="calibration.html">Setup</a><a href="latency.html">Latency</a><a href="arenas.html">Arenas</a><a href="faq.html">FAQ</a><a href="contact.html">Contact</a></div></div><div class="footer-links"><a href="privacy.html">Privacy</a><a href="terms.html">Terms</a><a href="cookies.html">Cookies</a><a href="about.html">About</a></div><div class="footer-company"><strong>Crew Blo Copper Prch Ltd</strong><br>22 Great Marlborough Street<br>London W1F 7HU, United Kingdom<br>Company No. 15839274<br><a href="mailto:hello@crewblocopperprch.com">hello@crewblocopperprch.com</a></div></div><p class="copyright">© 2026 Crew Blo Copper Prch. Independent information for VR esports.</p></div></footer></body></html>