<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Work — Poke Digital</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="work.css">
</head>
<body>

<div class="grain" aria-hidden="true"></div>
<div class="cursor-dot" id="cursorDot" aria-hidden="true"></div>
<div class="cursor-ring" id="cursorRing" aria-hidden="true"><span id="cursorLabel"></span></div>

<header class="nav" id="nav">
  <div class="nav-inner">
    <a href="index.html" class="nav-logo magnetic" data-cursor=""><img src="assets/brand/logo-full.png" alt="Poke Digital"></a>
    <nav class="nav-links" id="navLinks">
      <a href="about.html" data-cursor="">About</a>
      <a href="work.html" data-cursor="" class="nav-active">Work</a>
      <a href="index.html#contact" data-cursor="">Contact</a>
    </nav>
    <a href="index.html#contact" class="btn btn-primary btn-small magnetic" data-cursor="">Start a Project</a>
    <button class="nav-toggle" id="navToggle" aria-label="Toggle menu"><span></span><span></span><span></span></button>
  </div>
</header>

<main>

  <section class="work-hero">
    <div class="work-hero-inner">
      <p class="eyebrow">Selected work — 2024 / 2026</p>
      <h1 class="work-hero-title">
        <span class="line"><span class="word">Stuff we've</span></span>
        <span class="line"><span class="word">built.</span></span>
      </h1>
    </div>
  </section>

  <section class="work-list">

    <a href="#" class="work-card" data-case="smshd" data-cursor="">
      <div class="work-card-img"><img src="assets/work/smshd-poster.png" alt="SMSHD"></div>
      <div class="work-card-info">
        <span class="work-card-tag">Food & Beverage</span>
        <h2>SMSHD</h2>
        <p>Premium smash burger brand — Joy Rush aesthetic, interactive menu, Google Reviews</p>
      </div>
    </a>


    <a href="#" class="work-card" data-case="lumina" data-cursor="">
      <div class="work-card-img"><img src="assets/work/lumina-poster.jpg" alt="LUMINA Architects"></div>
      <div class="work-card-info">
        <span class="work-card-tag">Architecture</span>
        <h2>LUMINA Architects</h2>
        <p>Cinematic dark luxury studio — horizontal gallery, 4 case study pages</p>
      </div>
    </a>

    <a href="#" class="work-card" data-case="valt" data-cursor="">
      <div class="work-card-img"><img src="assets/work/valt-poster.jpg" alt="VALT Property Studio"></div>
      <div class="work-card-info">
        <span class="work-card-tag">Real Estate</span>
        <h2>VALT Property Studio</h2>
        <p>Full-conversion property site — pricing tables, lead forms, WhatsApp integration</p>
      </div>
    </a>

  </section>

  <section class="work-cta">
    <div class="work-cta-inner">
      <h2>
        <span class="line"><span class="word">Got something</span></span>
        <span class="line"><span class="word">worth building?</span></span>
      </h2>
      <a href="index.html#contact" class="btn btn-primary magnetic" data-cursor="">Start a Project <span class="arrow">→</span></a>
    </div>
  </section>

</main>

<!-- CASE STUDY PANEL -->
<div class="case-panel" id="casePanel">
  <button class="case-close" id="caseClose" data-cursor="">✕ Close</button>
  <div class="case-content" id="caseContent"></div>
</div>

<footer class="footer">
  <div class="footer-inner">
    <img src="assets/brand/logo-full.png" alt="Poke Digital" class="footer-logo">
    <nav class="footer-links"><a href="index.html">Home</a><a href="about.html">About</a><a href="work.html">Work</a><a href="index.html#contact">Contact</a></nav>
    <div class="footer-contact"><a href="mailto:hello@pokedigital.com">hello@pokedigital.com</a></div>
  </div>
  <div class="footer-bottom"><p>&copy; <span id="year"></span> Poke Digital.</p><p>Cape Town, South Africa</p></div>
</footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="work.js"></script>
</body>
</html>
