Esports Tournament — NEXUS

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function prefersReducedMotion() {
  return window.MotionPreference.prefersReducedMotion();
}

function initDemoShell() {
  // No-op shim in imported standalone snippets.
}

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import Lenis from 'lenis';

gsap.registerPlugin(ScrollTrigger);
initDemoShell({ title: 'NEXUS Esports Tournament', category: 'pages', tech: ['gsap', 'scroll-trigger', 'lenis', 'canvas-2d', 'rajdhani'] });

const reduced = prefersReducedMotion();
if (reduced) document.documentElement.classList.add('reduced-motion');

const lenis = new Lenis({ lerp: 0.1, smoothWheel: true });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((t) => lenis.raf(t * 1000));
gsap.ticker.lagSmoothing(0);

// Hero canvas — particle field
const heroCanvas = document.getElementById('hero-canvas');
const hCtx = heroCanvas.getContext('2d');
let hW, hH;
function resizeHero() { hW = heroCanvas.width = window.innerWidth; hH = heroCanvas.height = window.innerHeight; }
resizeHero();
window.addEventListener('resize', resizeHero);

const particles = Array.from({ length: 80 }, () => ({
  x: Math.random(), y: Math.random(),
  vx: (Math.random() - 0.5) * 0.0003, vy: (Math.random() - 0.5) * 0.0003,
  size: Math.random() * 1.5 + 0.5,
  alpha: Math.random() * 0.4 + 0.1,
  lime: Math.random() > 0.7,
}));

if (!reduced) {
  function drawHero() {
    hCtx.clearRect(0, 0, hW, hH);
    particles.forEach((p) => {
      p.x = (p.x + p.vx + 1) % 1;
      p.y = (p.y + p.vy + 1) % 1;
      hCtx.beginPath();
      hCtx.arc(p.x * hW, p.y * hH, p.size, 0, Math.PI * 2);
      hCtx.fillStyle = p.lime ? `rgba(163,255,18,${p.alpha})` : `rgba(232,238,240,${p.alpha * 0.4})`;
      hCtx.fill();
    });
    // Grid lines
    hCtx.strokeStyle = 'rgba(30,36,40,0.8)';
    hCtx.lineWidth = 1;
    for (let x = 0; x < hW; x += 60) { hCtx.beginPath(); hCtx.moveTo(x,0); hCtx.lineTo(x,hH); hCtx.stroke(); }
    for (let y = 0; y < hH; y += 60) { hCtx.beginPath(); hCtx.moveTo(0,y); hCtx.lineTo(hW,y); hCtx.stroke(); }
    requestAnimationFrame(drawHero);
  }
  requestAnimationFrame(drawHero);
}

// Prize counter
const prizeEl = document.getElementById('prize-count');
if (!reduced) {
  ScrollTrigger.create({
    trigger: '.hero', start: 'top top', end: 'bottom center',
    onUpdate: (self) => {
      const val = Math.round(2100000 * self.progress);
      prizeEl.textContent = '$' + val.toLocaleString();
    },
  });
} else {
  prizeEl.textContent = '$2,100,000';
}

// Hero stats counters
document.querySelectorAll('.hsr-num').forEach((el) => {
  const target = parseInt(el.dataset.target);
  if (!reduced) {
    ScrollTrigger.create({
      trigger: '.hero-stats-row', start: 'top 80%', end: 'top 30%',
      onUpdate: (self) => {
        const val = Math.round(target * self.progress);
        el.textContent = target >= 1000000 ? (val / 1000000).toFixed(1) + 'M' : val.toLocaleString();
      },
    });
  } else {
    el.textContent = target >= 1000000 ? (target/1000000).toFixed(1)+'M' : target.toLocaleString();
  }
});

// Hero entrance
if (!reduced) {
  gsap.set(['.hero-badge', '.hero-h1', '.hero-prize', '.hero-ctas', '.hero-stats-row'], { opacity: 0, y: 30 });
  gsap.timeline({ delay: 0.3, defaults: { ease: 'expo.out' } })
    .to('.hero-badge', { opacity: 1, y: 0, duration: 0.6 })
    .to('.hero-h1', { opacity: 1, y: 0, duration: 1 }, '-=0.3')
    .to('.hero-prize', { opacity: 1, y: 0, duration: 0.7 }, '-=0.5')
    .to('.hero-ctas', { opacity: 1, y: 0, duration: 0.6 }, '-=0.4')
    .to('.hero-stats-row', { opacity: 1, y: 0, duration: 0.6 }, '-=0.3');
}

// Bracket reveal
if (!reduced) {
  document.querySelectorAll('.bt-match').forEach((m, i) => {
    gsap.set(m, { opacity: 0, x: -15 });
    gsap.to(m, { opacity: 1, x: 0, duration: 0.5, ease: 'expo.out', delay: i * 0.08,
      scrollTrigger: { trigger: '.bracket-teams', start: 'top 75%', toggleActions: 'play none none reverse' } });
  });
}

// Players reveal
if (!reduced) {
  document.querySelectorAll('.player-card').forEach((card, i) => {
    gsap.set(card, { opacity: 0, y: 20 });
    gsap.to(card, { opacity: 1, y: 0, duration: 0.6, ease: 'expo.out', delay: i * 0.1,
      scrollTrigger: { trigger: '.players-grid', start: 'top 75%', toggleActions: 'play none none reverse' } });
  });
}

// Prize bars
document.querySelectorAll('.pb-fill').forEach((fill, i) => {
  if (!reduced) {
    gsap.to(fill, { scaleX: 1, duration: 1.2, ease: 'expo.out', delay: i * 0.1,
      scrollTrigger: { trigger: '.prize-bars', start: 'top 75%', toggleActions: 'play none none reverse' } });
  } else {
    fill.style.transform = 'scaleX(1)';
  }
});

window.addEventListener('motion-preference', (e) => { gsap.globalTimeline.paused(e.detail.reduced); });

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NEXUS Championship Series — Season 8</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
    <script type="importmap">{"imports":{"gsap":"/vendor/gsap/index.js","gsap/ScrollTrigger":"/vendor/gsap/ScrollTrigger.js","gsap/SplitText":"/vendor/gsap/SplitText.js","gsap/Flip":"/vendor/gsap/Flip.js","gsap/ScrambleTextPlugin":"/vendor/gsap/ScrambleTextPlugin.js","gsap/TextPlugin":"/vendor/gsap/TextPlugin.js","gsap/all":"/vendor/gsap/all.js","gsap/":"/vendor/gsap/","lenis":"/vendor/lenis/dist/lenis.mjs","three":"/vendor/three/build/three.module.js","three/addons/":"/vendor/three/examples/jsm/"}}</script>
  <style>html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}</style>
</head>
<body>
  <div class="scanline" aria-hidden="true"></div>

  <nav class="nav">
    <div class="nav-brand">
      <div class="nb-icon">⬡</div>
      <span>NEXUS</span>
    </div>
    <ul class="nav-links">
      <li><a href="#bracket">Bracket</a></li>
      <li><a href="#players">Players</a></li>
      <li><a href="#schedule">Schedule</a></li>
      <li><a href="#prize">Prize Pool</a></li>
    </ul>
    <div class="nav-live"><span class="nl-dot"></span>LIVE NOW</div>
  </nav>

  <section class="hero">
    <canvas id="hero-canvas" aria-hidden="true"></canvas>
    <div class="hero-inner">
      <div class="hero-badge">SEASON 8 · GRAND FINALS</div>
      <h1 class="hero-h1">NEXUS<br><span class="h1-lime">CHAMPIONSHIP</span><br>SERIES</h1>
      <div class="hero-prize">
        <span class="hp-label">PRIZE POOL</span>
        <span class="hp-amount" id="prize-count">$0</span>
      </div>
      <div class="hero-ctas">
        <a href="#bracket" class="btn-lime">View Bracket</a>
        <a href="#" class="btn-ghost-e">Watch Live ▶</a>
      </div>
      <div class="hero-stats-row">
        <div class="hsr-item"><span class="hsr-num" data-target="128">0</span><span class="hsr-label">Teams</span></div>
        <div class="hsr-item"><span class="hsr-num" data-target="32">0</span><span class="hsr-label">Countries</span></div>
        <div class="hsr-item"><span class="hsr-num" data-target="48">0</span><span class="hsr-label">Days</span></div>
        <div class="hsr-item"><span class="hsr-num" data-target="2100000">0</span><span class="hsr-label">Peak Viewers</span></div>
      </div>
    </div>
  </section>

  <section class="bracket-section" id="bracket">
    <div class="bracket-header">
      <span class="section-tag">// Tournament Bracket</span>
      <h2>ROAD TO<br><span class="lime-text">VICTORY</span></h2>
    </div>
    <div class="bracket-visual">
      <canvas id="bracket-canvas" aria-label="Tournament bracket visualization"></canvas>
      <div class="bracket-teams" id="bracket-teams">
        <!-- Quarterfinals -->
        <div class="bt-match qf" style="--row:1">
          <div class="bt-team bt-team--win">PHANTOM</div>
          <div class="bt-team">VORTEX</div>
        </div>
        <div class="bt-match qf" style="--row:2">
          <div class="bt-team bt-team--win">APEX</div>
          <div class="bt-team">STORM</div>
        </div>
        <div class="bt-match qf" style="--row:3">
          <div class="bt-team bt-team--win">ZERO</div>
          <div class="bt-team">BLAZE</div>
        </div>
        <div class="bt-match qf" style="--row:4">
          <div class="bt-team">NOVA</div>
          <div class="bt-team bt-team--active">CTRL</div>
        </div>
        <!-- Semifinals -->
        <div class="bt-match sf" style="--row:1">
          <div class="bt-team bt-team--win">PHANTOM</div>
          <div class="bt-team">APEX</div>
        </div>
        <div class="bt-match sf" style="--row:2">
          <div class="bt-team">ZERO</div>
          <div class="bt-team bt-team--active">CTRL</div>
        </div>
        <!-- Finals -->
        <div class="bt-match final">
          <div class="bt-team bt-team--win">PHANTOM</div>
          <div class="bt-team bt-team--active">CTRL</div>
        </div>
      </div>
    </div>
  </section>

  <section class="players-section" id="players">
    <span class="section-tag">// Featured Players</span>
    <h2>TOP <span class="lime-text">COMPETITORS</span></h2>
    <div class="players-grid">
      <div class="player-card player-card--featured">
        <div class="pc-rank">#1</div>
        <div class="pc-avatar pc-avatar--1"></div>
        <div class="pc-info">
          <div class="pc-handle">SPECTER</div>
          <div class="pc-real">Marcus Chen</div>
          <div class="pc-team">PHANTOM</div>
        </div>
        <div class="pc-stats">
          <div class="pcs-item"><span class="pcs-val">94.2%</span><span class="pcs-key">Win Rate</span></div>
          <div class="pcs-item"><span class="pcs-val">3.8</span><span class="pcs-key">K/D Ratio</span></div>
          <div class="pcs-item"><span class="pcs-val">2,840</span><span class="pcs-key">Kills</span></div>
        </div>
      </div>
      <div class="player-card">
        <div class="pc-rank">#2</div>
        <div class="pc-avatar pc-avatar--2"></div>
        <div class="pc-info">
          <div class="pc-handle">GHOST</div>
          <div class="pc-real">Elena Voss</div>
          <div class="pc-team">CTRL</div>
        </div>
        <div class="pc-stats">
          <div class="pcs-item"><span class="pcs-val">91.7%</span><span class="pcs-key">Win Rate</span></div>
          <div class="pcs-item"><span class="pcs-val">3.5</span><span class="pcs-key">K/D Ratio</span></div>
        </div>
      </div>
      <div class="player-card">
        <div class="pc-rank">#3</div>
        <div class="pc-avatar pc-avatar--3"></div>
        <div class="pc-info">
          <div class="pc-handle">BLITZ</div>
          <div class="pc-real">Yuto Nakamura</div>
          <div class="pc-team">ZERO</div>
        </div>
        <div class="pc-stats">
          <div class="pcs-item"><span class="pcs-val">88.4%</span><span class="pcs-key">Win Rate</span></div>
          <div class="pcs-item"><span class="pcs-val">3.2</span><span class="pcs-key">K/D Ratio</span></div>
        </div>
      </div>
      <div class="player-card">
        <div class="pc-rank">#4</div>
        <div class="pc-avatar pc-avatar--4"></div>
        <div class="pc-info">
          <div class="pc-handle">SURGE</div>
          <div class="pc-real">Priya Sharma</div>
          <div class="pc-team">APEX</div>
        </div>
        <div class="pc-stats">
          <div class="pcs-item"><span class="pcs-val">86.1%</span><span class="pcs-key">Win Rate</span></div>
          <div class="pcs-item"><span class="pcs-val">3.0</span><span class="pcs-key">K/D Ratio</span></div>
        </div>
      </div>
    </div>
  </section>

  <section class="prize-section" id="prize">
    <div class="prize-inner">
      <span class="section-tag">// Prize Distribution</span>
      <h2>TOTAL POOL<br><span class="lime-text" id="prize-big">$2,100,000</span></h2>
      <div class="prize-bars">
        <div class="pb-item"><span class="pb-place">1st</span><div class="pb-bar"><div class="pb-fill" style="--w:100%"></div></div><span class="pb-amount">$1,000,000</span></div>
        <div class="pb-item"><span class="pb-place">2nd</span><div class="pb-bar"><div class="pb-fill" style="--w:50%"></div></div><span class="pb-amount">$500,000</span></div>
        <div class="pb-item"><span class="pb-place">3rd</span><div class="pb-bar"><div class="pb-fill" style="--w:28%"></div></div><span class="pb-amount">$300,000</span></div>
        <div class="pb-item"><span class="pb-place">4th</span><div class="pb-bar"><div class="pb-fill" style="--w:14%"></div></div><span class="pb-amount">$150,000</span></div>
        <div class="pb-item"><span class="pb-place">5–8th</span><div class="pb-bar"><div class="pb-fill" style="--w:7%"></div></div><span class="pb-amount">$37,500 ea</span></div>
      </div>
    </div>
  </section>

  <footer class="footer-e">
    <div class="nb-icon" style="color:#a3ff12">⬡</div>
    <span>NEXUS Championship Series · Season 8</span>
    <span>© 2025 NEXUS Esports LLC</span>
  </footer>

  <script type="module" src="script.js"></script>
</body>
</html>