FREQ — Music & Podcast Platform

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: 'FREQ — Music Platform',
  category: 'pages',
  tech: ['gsap', 'scroll-trigger', 'lenis', 'canvas-2d', 'space-mono'],
});

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

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

// ── Canvas Waveform Background ────────────────────────────────────────────────
const canvas = document.getElementById('waveform-canvas');
const ctx = canvas.getContext('2d');
let w, h;
let scrollY = 0;

function resizeCanvas() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

lenis.on('scroll', (e) => { scrollY = e.scroll; });

function drawWaveform(time) {
  ctx.clearRect(0, 0, w, h);

  const numWaves = 4;
  const waveConfigs = [
    { color: 'rgba(255,45,120,', freq: 0.003, amp: 60, speed: 0.4, y: h * 0.3 },
    { color: 'rgba(155,77,255,', freq: 0.004, amp: 40, speed: 0.6, y: h * 0.5 },
    { color: 'rgba(0,229,255,',  freq: 0.0025, amp: 50, speed: 0.3, y: h * 0.7 },
    { color: 'rgba(168,255,62,', freq: 0.005, amp: 25, speed: 0.8, y: h * 0.85 },
  ];

  const scrollOffset = scrollY * 0.3;

  waveConfigs.forEach((cfg, idx) => {
    ctx.beginPath();
    const opacity = 0.08 - idx * 0.015;

    for (let x = 0; x <= w; x += 2) {
      const y = cfg.y
        + Math.sin((x + scrollOffset) * cfg.freq + time * cfg.speed) * cfg.amp
        + Math.sin((x * 0.7 + scrollOffset * 0.8) * cfg.freq * 1.6 + time * cfg.speed * 1.3) * (cfg.amp * 0.4);
      if (x === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
    }

    ctx.strokeStyle = `${cfg.color}${opacity})`;
    ctx.lineWidth = 1.5;
    ctx.stroke();
  });

  // Subtle horizontal grid lines
  ctx.strokeStyle = 'rgba(30, 30, 56, 0.6)';
  ctx.lineWidth = 1;
  for (let y = 0; y < h; y += 60) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(w, y);
    ctx.stroke();
  }

  // Vertical grid lines
  for (let x = 0; x < w; x += 80) {
    ctx.beginPath();
    ctx.moveTo(x, 0);
    ctx.lineTo(x, h);
    ctx.stroke();
  }
}

// ── Main animation loop ───────────────────────────────────────────────────────
if (!reduced) {
  let startTime = null;
  function tick(ts) {
    if (!startTime) startTime = ts;
    const elapsed = (ts - startTime) / 1000;
    drawWaveform(elapsed);
    requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
}

// ── Hero entrance ─────────────────────────────────────────────────────────────
if (!reduced) {
  gsap.set(['.hero-tag', '.hero-h1 .h1-line', '.hero-sub', '.hero-actions', '.eq-bars'], {
    opacity: 0, y: 30,
  });
  gsap.set('.now-playing', { opacity: 0, x: 30 });

  gsap.timeline({ delay: 0.4, defaults: { ease: 'expo.out' } })
    .to('.hero-tag',           { opacity: 1, y: 0, duration: 0.7 })
    .to('.h1-line:nth-child(1)', { opacity: 1, y: 0, duration: 0.8 }, '-=0.3')
    .to('.h1-line:nth-child(2)', { opacity: 1, y: 0, duration: 0.8 }, '-=0.5')
    .to('.hero-sub',           { opacity: 1, y: 0, duration: 0.7 }, '-=0.4')
    .to('.hero-actions',       { opacity: 1, y: 0, duration: 0.6 }, '-=0.3')
    .to('.eq-bars',            { opacity: 1, y: 0, duration: 0.5 }, '-=0.2')
    .to('.now-playing',        { opacity: 1, x: 0, duration: 0.8, ease: 'back.out(1.2)' }, '-=0.6');
}

// ── Now Playing progress animation ───────────────────────────────────────────
gsap.to('.np-progress', {
  width: '75%',
  duration: 30,
  ease: 'none',
  repeat: -1,
  yoyo: true,
});

// ── Shows section reveal ──────────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.shows-header > *', { opacity: 0, y: 20 });
  gsap.to('.shows-header > *', {
    opacity: 1,
    y: 0,
    duration: 0.8,
    stagger: 0.1,
    ease: 'expo.out',
    scrollTrigger: {
      trigger: '.shows-header',
      start: 'top 80%',
      toggleActions: 'play none none reverse',
    },
  });

  document.querySelectorAll('.show-card').forEach((card, i) => {
    gsap.set(card, { opacity: 0 });
    gsap.to(card, {
      opacity: 1,
      duration: 0.6,
      delay: i * 0.08,
      ease: 'power2.out',
      scrollTrigger: {
        trigger: '.shows-grid',
        start: 'top 75%',
        toggleActions: 'play none none reverse',
      },
    });
  });
}

// ── Charts — bar reveal on scroll ────────────────────────────────────────────
document.querySelectorAll('.ci-bar').forEach((bar, i) => {
  if (!reduced) {
    gsap.to(bar, {
      scaleX: 1,
      duration: 1,
      ease: 'expo.out',
      delay: i * 0.1,
      scrollTrigger: {
        trigger: '.chart-list',
        start: 'top 75%',
        toggleActions: 'play none none reverse',
      },
    });
  } else {
    bar.style.transform = 'scaleX(1)';
  }
});

if (!reduced) {
  document.querySelectorAll('.chart-item').forEach((item, i) => {
    gsap.set(item, { opacity: 0, x: -20 });
    gsap.to(item, {
      opacity: 1,
      x: 0,
      duration: 0.6,
      ease: 'expo.out',
      delay: i * 0.08,
      scrollTrigger: {
        trigger: '.chart-list',
        start: 'top 80%',
        toggleActions: 'play none none reverse',
      },
    });
  });

  // Hover glitch on chart items
  document.querySelectorAll('.chart-item').forEach((item) => {
    item.addEventListener('mouseenter', () => {
      if (reduced) return;
      gsap.to(item, { x: 4, duration: 0.05, yoyo: true, repeat: 2, ease: 'power1.inOut' });
    });
  });
}

// ── Platform stats counters ───────────────────────────────────────────────────
document.querySelectorAll('.ps-num').forEach((el) => {
  const target = parseFloat(el.dataset.target);
  const suffix = el.dataset.suffix || '';
  const isDecimal = !Number.isInteger(target);

  if (!reduced) {
    ScrollTrigger.create({
      trigger: '.platform-stats',
      start: 'top 80%',
      end: 'top 30%',
      onUpdate: (self) => {
        const val = target * self.progress;
        el.textContent = (isDecimal ? val.toFixed(1) : Math.round(val)) + suffix;
      },
    });
  } else {
    el.textContent = target + suffix;
  }
});

// ── Terminal typing effect ────────────────────────────────────────────────────
if (!reduced) {
  const terminal = document.querySelector('.terminal-body');
  const lines = terminal.querySelectorAll('p');

  lines.forEach((line, i) => {
    gsap.set(line, { opacity: 0 });
    gsap.to(line, {
      opacity: 1,
      duration: 0.01,
      delay: i * 0.25,
      scrollTrigger: {
        trigger: '.studio-terminal',
        start: 'top 75%',
        toggleActions: 'play none none reverse',
      },
    });
  });
}

// ── Studio section reveal ─────────────────────────────────────────────────────
if (!reduced) {
  gsap.set('.studio-left > *', { opacity: 0, y: 20 });
  gsap.to('.studio-left > *', {
    opacity: 1,
    y: 0,
    duration: 0.8,
    stagger: 0.1,
    ease: 'expo.out',
    scrollTrigger: {
      trigger: '.studio-section',
      start: 'top 75%',
      toggleActions: 'play none none reverse',
    },
  });

  gsap.set('.studio-terminal', { opacity: 0, y: 25 });
  gsap.to('.studio-terminal', {
    opacity: 1,
    y: 0,
    duration: 0.9,
    ease: 'expo.out',
    delay: 0.2,
    scrollTrigger: {
      trigger: '.studio-section',
      start: 'top 75%',
      toggleActions: 'play none none reverse',
    },
  });
}

// ── Marquee pause on hover ────────────────────────────────────────────────────
const marqueeTrack = document.getElementById('marquee-track');
if (marqueeTrack) {
  marqueeTrack.addEventListener('mouseenter', () => {
    marqueeTrack.style.animationPlayState = 'paused';
  });
  marqueeTrack.addEventListener('mouseleave', () => {
    marqueeTrack.style.animationPlayState = 'running';
  });
}

// ── Motion preference toggle ──────────────────────────────────────────────────
window.addEventListener('motion-preference', (e) => {
  if (e.detail.reduced) {
    gsap.globalTimeline.paused(true);
  } else {
    gsap.globalTimeline.paused(false);
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FREQ — Music & Podcast Platform</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Space+Grotesk:wght@300;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>

  <!-- Scan line overlay -->
  <div class="scanlines" aria-hidden="true"></div>

  <!-- Nav -->
  <nav class="nav" id="nav">
    <div class="nav-brand">
      <span class="brand-mark">◈</span>
      <span class="brand-name">FREQ</span>
    </div>
    <ul class="nav-links">
      <li><a href="#shows">Shows</a></li>
      <li><a href="#charts">Charts</a></li>
      <li><a href="#artists">Artists</a></li>
      <li><a href="#contact">Studio</a></li>
    </ul>
    <div class="nav-right">
      <span class="nav-live"><span class="live-dot"></span>LIVE</span>
      <a href="#contact" class="btn-neon">Listen Now</a>
    </div>
  </nav>

  <!-- Hero -->
  <section class="hero" id="hero">
    <!-- Waveform background -->
    <canvas id="waveform-canvas" aria-hidden="true"></canvas>

    <div class="hero-content">
      <div class="hero-tag">
        <span class="tag-prefix">///</span>
        <span>New Episodes Daily</span>
      </div>
      <h1 class="hero-h1">
        <span class="h1-line">THE SOUND</span>
        <span class="h1-line h1-line--neon">OF NOW.</span>
      </h1>
      <p class="hero-sub">Underground beats. Cutting-edge podcasts. Live sessions from artists who refuse to be categorized.</p>
      <div class="hero-actions">
        <a href="#shows" class="btn-neon btn-neon--lg">Browse Shows</a>
        <button class="btn-ghost" id="hero-play-btn">
          <span class="play-icon">▶</span>
          <span>Play Latest</span>
        </button>
      </div>

      <!-- Equalizer bars -->
      <div class="eq-bars" id="eq-bars" aria-hidden="true">
        <span></span><span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span><span></span>
      </div>
    </div>

    <!-- Now playing card -->
    <div class="now-playing" id="now-playing">
      <div class="np-label">NOW PLAYING</div>
      <div class="np-title">Frequencies Vol. 12</div>
      <div class="np-artist">DJ Novacore × CTRL</div>
      <div class="np-bar">
        <div class="np-progress"></div>
      </div>
      <div class="np-time"><span>27:14</span><span>54:00</span></div>
    </div>
  </section>

  <!-- Shows Grid -->
  <section class="shows-section" id="shows">
    <div class="shows-header">
      <span class="section-tag">// Featured Shows</span>
      <h2>ON THE GRID</h2>
    </div>
    <div class="shows-grid">
      <!-- Card 1 — Featured large -->
      <article class="show-card show-card--featured" data-genre="ELECTRONIC">
        <div class="sc-art sc-art--1"></div>
        <div class="sc-info">
          <span class="sc-genre">Electronic</span>
          <h3>FREQUENCIES</h3>
          <p>Deep techno and experimental electronics from the world's leading underground producers.</p>
          <div class="sc-meta">
            <span>124 episodes</span>
            <span class="dot">·</span>
            <span>New every Friday</span>
          </div>
          <div class="sc-stats">
            <span>2.4M<em>listeners</em></span>
            <span>★ 4.9</span>
          </div>
        </div>
      </article>

      <!-- Card 2 -->
      <article class="show-card" data-genre="HIP-HOP">
        <div class="sc-art sc-art--2"></div>
        <div class="sc-info sc-info--sm">
          <span class="sc-genre">Hip-Hop</span>
          <h3>CIPHERS</h3>
          <p>Live freestyle sessions with emerging MCs.</p>
          <div class="sc-meta"><span>88 episodes</span></div>
        </div>
      </article>

      <!-- Card 3 -->
      <article class="show-card" data-genre="AMBIENT">
        <div class="sc-art sc-art--3"></div>
        <div class="sc-info sc-info--sm">
          <span class="sc-genre">Ambient</span>
          <h3>VOID SPACE</h3>
          <p>Drone music and sonic experiments for deep focus.</p>
          <div class="sc-meta"><span>62 episodes</span></div>
        </div>
      </article>

      <!-- Card 4 -->
      <article class="show-card" data-genre="INTERVIEWS">
        <div class="sc-art sc-art--4"></div>
        <div class="sc-info sc-info--sm">
          <span class="sc-genre">Interviews</span>
          <h3>SIGNAL/NOISE</h3>
          <p>Long-form conversations about music, tech, and culture.</p>
          <div class="sc-meta"><span>47 episodes</span></div>
        </div>
      </article>
    </div>
  </section>

  <!-- Charts Section -->
  <section class="charts-section" id="charts">
    <div class="charts-inner">
      <div class="charts-header">
        <span class="section-tag">// Weekly Rankings</span>
        <h2>TRANSMISSION<br><span class="neon-text">CHARTS</span></h2>
      </div>
      <ol class="chart-list">
        <li class="chart-item" data-rank="01">
          <span class="ci-rank">01</span>
          <div class="ci-info">
            <strong>AETHER PROTOCOL</strong>
            <span>Machine Girl</span>
          </div>
          <div class="ci-bar-wrap"><div class="ci-bar" style="--w: 94%"></div></div>
          <span class="ci-plays">1.2M</span>
          <span class="ci-delta up">+3</span>
        </li>
        <li class="chart-item" data-rank="02">
          <span class="ci-rank">02</span>
          <div class="ci-info">
            <strong>GHOST PROTOCOL (feat. ERIS)</strong>
            <span>Burial × Novacore</span>
          </div>
          <div class="ci-bar-wrap"><div class="ci-bar" style="--w: 88%"></div></div>
          <span class="ci-plays">980K</span>
          <span class="ci-delta up">+1</span>
        </li>
        <li class="chart-item" data-rank="03">
          <span class="ci-rank">03</span>
          <div class="ci-info">
            <strong>FRACTAL DECAY</strong>
            <span>CLOAK</span>
          </div>
          <div class="ci-bar-wrap"><div class="ci-bar" style="--w: 81%"></div></div>
          <span class="ci-plays">854K</span>
          <span class="ci-delta new">NEW</span>
        </li>
        <li class="chart-item" data-rank="04">
          <span class="ci-rank">04</span>
          <div class="ci-info">
            <strong>SUBTERRANEAN</strong>
            <span>Vatican Shadow</span>
          </div>
          <div class="ci-bar-wrap"><div class="ci-bar" style="--w: 74%"></div></div>
          <span class="ci-plays">712K</span>
          <span class="ci-delta down">-2</span>
        </li>
        <li class="chart-item" data-rank="05">
          <span class="ci-rank">05</span>
          <div class="ci-info">
            <strong>TRANSMISSION LOST</strong>
            <span>Shapednoise</span>
          </div>
          <div class="ci-bar-wrap"><div class="ci-bar" style="--w: 67%"></div></div>
          <span class="ci-plays">640K</span>
          <span class="ci-delta up">+4</span>
        </li>
      </ol>
    </div>
  </section>

  <!-- Artists Marquee -->
  <section class="artists-section" id="artists">
    <div class="artists-header">
      <span class="section-tag">// Artists</span>
      <h2>FEATURED<br><span class="neon-text">CREATORS</span></h2>
    </div>
    <div class="artists-marquee-wrap">
      <div class="marquee-track" id="marquee-track">
        <div class="artist-chip">Machine Girl</div>
        <div class="artist-chip">Burial</div>
        <div class="artist-chip chip--accent">DJ Novacore</div>
        <div class="artist-chip">CLOAK</div>
        <div class="artist-chip">Vatican Shadow</div>
        <div class="artist-chip chip--accent">Shapednoise</div>
        <div class="artist-chip">CTRL</div>
        <div class="artist-chip">Arca</div>
        <div class="artist-chip chip--accent">Eris Drew</div>
        <div class="artist-chip">Container</div>
        <div class="artist-chip">Actor</div>
        <div class="artist-chip chip--accent">Paula Temple</div>
        <!-- Duplicate for seamless loop -->
        <div class="artist-chip">Machine Girl</div>
        <div class="artist-chip">Burial</div>
        <div class="artist-chip chip--accent">DJ Novacore</div>
        <div class="artist-chip">CLOAK</div>
        <div class="artist-chip">Vatican Shadow</div>
        <div class="artist-chip chip--accent">Shapednoise</div>
        <div class="artist-chip">CTRL</div>
        <div class="artist-chip">Arca</div>
        <div class="artist-chip chip--accent">Eris Drew</div>
        <div class="artist-chip">Container</div>
        <div class="artist-chip">Actor</div>
        <div class="artist-chip chip--accent">Paula Temple</div>
      </div>
    </div>

    <!-- Stats row -->
    <div class="platform-stats">
      <div class="ps-item">
        <span class="ps-num" data-target="4200" data-suffix="+">0</span>
        <span class="ps-label">Artists</span>
      </div>
      <div class="ps-div"></div>
      <div class="ps-item">
        <span class="ps-num" data-target="18000" data-suffix="+">0</span>
        <span class="ps-label">Episodes</span>
      </div>
      <div class="ps-div"></div>
      <div class="ps-item">
        <span class="ps-num" data-target="9.2" data-suffix="M">0</span>
        <span class="ps-label">Monthly Listeners</span>
      </div>
      <div class="ps-div"></div>
      <div class="ps-item">
        <span class="ps-num" data-target="140" data-suffix="">0</span>
        <span class="ps-label">Countries</span>
      </div>
    </div>
  </section>

  <!-- CTA / Studio -->
  <section class="studio-section" id="contact">
    <div class="studio-inner">
      <div class="studio-left">
        <span class="section-tag">// Submit Your Show</span>
        <h2>BROADCAST<br><span class="neon-text">YOUR SIGNAL.</span></h2>
        <p>FREQ is open to independent creators. Apply to join our network and reach millions of listeners worldwide.</p>
        <div class="studio-links">
          <a href="#" class="btn-neon">Apply to Join</a>
          <a href="#" class="btn-outline">View Criteria →</a>
        </div>
      </div>
      <div class="studio-terminal">
        <div class="terminal-bar">
          <span class="tb-dot tb-dot--red"></span>
          <span class="tb-dot tb-dot--yellow"></span>
          <span class="tb-dot tb-dot--green"></span>
          <span class="tb-title">freq_broadcast.sh</span>
        </div>
        <div class="terminal-body">
          <p><span class="t-prompt">$</span> freq connect --studio</p>
          <p class="t-output">Initializing signal uplink...</p>
          <p class="t-output t-success">✓ Uplink established</p>
          <p><span class="t-prompt">$</span> freq status</p>
          <p class="t-output">Network: <span class="t-val">ONLINE</span></p>
          <p class="t-output">Listeners: <span class="t-val">9,241,882</span></p>
          <p class="t-output">Live now: <span class="t-val t-neon">3 shows</span></p>
          <p class="t-cursor">█</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="footer-brand">
      <span class="brand-mark">◈</span>
      <span>FREQ // Music & Podcast Network</span>
    </div>
    <p>© 2025 FREQ. All transmissions reserved.</p>
  </footer>

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