<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Eddyplay | Independent Game Studio</title>
    <meta
      name="description"
      content="Eddyplay is an independent game studio building fast, playful games for eddyplay.com and game-specific subdomains."
    >
    <meta property="og:title" content="Eddyplay | Independent Game Studio">
    <meta
      property="og:description"
      content="Small games, sharp ideas, and a home for every Eddyplay release."
    >
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://eddyplay.com/">
    <meta name="theme-color" content="#101820">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header class="site-header" aria-label="Primary navigation">
      <a class="brand" href="#top" aria-label="Eddyplay home">
        <span class="brand-mark" aria-hidden="true">E</span>
        <span>Eddyplay</span>
      </a>
      <nav class="site-nav" aria-label="Main">
        <a href="#games">Games</a>
        <a href="#routes">Routes</a>
        <a href="#studio">Studio</a>
        <a href="mailto:hello@eddyplay.com">Contact</a>
      </nav>
    </header>

    <main id="top">
      <section class="hero" aria-labelledby="hero-title">
        <canvas class="hero-canvas" data-playfield aria-hidden="true"></canvas>
        <div class="hero-overlay" aria-hidden="true"></div>
        <div class="hero-content">
          <p class="kicker">Independent game studio</p>
          <h1 id="hero-title">Eddyplay</h1>
          <p class="hero-copy">
            Fast-moving web games with bright mechanics, clean launches, and a single home for every world we build.
          </p>
          <div class="hero-actions" aria-label="Primary actions">
            <a class="button button-primary" href="#games">View games</a>
            <a class="button button-secondary" href="mailto:hello@eddyplay.com">Work with us</a>
          </div>
        </div>
        <div class="hero-status" aria-label="Studio status">
          <span>Live-ready web releases</span>
          <span>Subdomain and path hosting</span>
        </div>
      </section>

      <section class="section intro" aria-labelledby="intro-title">
        <div class="section-label">What we make</div>
        <div class="section-copy">
          <h2 id="intro-title">Small games with strong loops.</h2>
          <p>
            Eddyplay creates compact browser-first games that can launch quickly, travel cleanly, and keep a distinct
            identity under the same studio roof.
          </p>
        </div>
      </section>

      <section class="section games-section" id="games" aria-labelledby="games-title">
        <div class="section-heading">
          <div>
            <div class="section-label">Games</div>
            <h2 id="games-title">Launch slate</h2>
          </div>
          <p>Each slot is ready to become a live game destination as releases are announced.</p>
        </div>

        <div class="game-grid">
          <article class="game-card game-card-f">
            <div class="game-art" aria-hidden="true">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="game-card-body">
              <p class="game-state">Demo available</p>
              <h3>Mayor</h3>
              <p>A browser city builder inspired by SimCity 2000 with deterministic growth and map-first planning.</p>
              <a href="/mayor/" aria-label="Play Mayor demo">Play demo →</a>
            </div>
          </article>

          <article class="game-card game-card-g">
            <div class="game-art" aria-hidden="true">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="game-card-body">
              <p class="game-state">Prototype available</p>
              <h3>Airline</h3>
              <p>A browser route-planning game about building a profitable flight network.</p>
              <a href="/airline/" aria-label="Play Airline prototype">Play prototype -></a>
            </div>
          </article>

          <article class="game-card game-card-c">
            <div class="game-art" aria-hidden="true">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="game-card-body">
              <p class="game-state">Prototype available</p>
              <h3>Rideshare</h3>
              <p>A turn-based ride-sharing tycoon with a 3D city view — out-price and out-build an AI incumbent.</p>
              <a href="/rideshare/" aria-label="Play Rideshare prototype">Play prototype -></a>
            </div>
          </article>

          <article class="game-card game-card-d">
            <div class="game-art" aria-hidden="true">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="game-card-body">
              <p class="game-state">Prototype available</p>
              <h3>Moon Cart</h3>
              <p>A toy-like physics game tuned for short sessions and replayable runs.</p>
              <a href="/moon-cart/" aria-label="Play Moon Cart prototype">Play prototype -></a>
            </div>
          </article>

          <article class="game-card game-card-e">
            <div class="game-art" aria-hidden="true">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="game-card-body">
              <p class="game-state">Prototype available</p>
              <h3>Signal Run</h3>
              <p>A route-building puzzle about momentum, risk, and timing.</p>
              <a href="/signal-run/" aria-label="Play Signal Run prototype">Play prototype -></a>
            </div>
          </article>

          <article class="game-card game-card-a">
            <div class="game-art" aria-hidden="true">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="game-card-body">
              <p class="game-state">Prototype available</p>
              <h3>Stacks</h3>
              <p>A one-button tower stacker — drop the sliding block and keep the overlap.</p>
              <a href="/stacks/" aria-label="Play Stacks prototype">Play prototype -></a>
            </div>
          </article>

          <article class="game-card game-card-b">
            <div class="game-art" aria-hidden="true">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="game-card-body">
              <p class="game-state">Prototype available</p>
              <h3>Seesaw</h3>
              <p>A balance toy — tilt the beam, keep the ball rolling, catch the rings.</p>
              <a href="/seesaw/" aria-label="Play Seesaw prototype">Play prototype -></a>
            </div>
          </article>
        </div>
      </section>

      <section class="section routes-section" id="routes" aria-labelledby="routes-title">
        <div>
          <div class="section-label">Hosting</div>
          <h2 id="routes-title">Every game gets two clear doors.</h2>
        </div>
        <div class="route-list" aria-label="Supported launch routes">
          <div class="route-row">
            <span class="route-icon" aria-hidden="true">1</span>
            <div>
              <h3>Subdomain</h3>
              <p><code>game-name.eddyplay.com</code></p>
            </div>
          </div>
          <div class="route-row">
            <span class="route-icon" aria-hidden="true">2</span>
            <div>
              <h3>Path</h3>
              <p><code>eddyplay.com/game-name</code></p>
            </div>
          </div>
        </div>
      </section>

      <section class="section studio-section" id="studio" aria-labelledby="studio-title">
        <div class="studio-panel">
          <div class="section-label">Studio</div>
          <h2 id="studio-title">Built for web-native play.</h2>
          <p>
            The site is structured as the studio front door first, with room for individual games to grow into dedicated
            homes as they ship.
          </p>
        </div>
        <div class="studio-metrics" aria-label="Studio principles">
          <div>
            <strong>Fast</strong>
            <span>Load quickly and respect the browser.</span>
          </div>
          <div>
            <strong>Clear</strong>
            <span>Give each release a memorable URL.</span>
          </div>
          <div>
            <strong>Playable</strong>
            <span>Put the game before the announcement.</span>
          </div>
        </div>
      </section>
    </main>

    <footer class="site-footer">
      <span>Eddyplay</span>
      <a href="mailto:hello@eddyplay.com">hello@eddyplay.com</a>
    </footer>

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