<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Capability Deck</title>
  <style>
    :root {
      --bg-color: #0f0f11;
      --card-bg: #18181b;
      --accent-color: #e4e4e7;
      --text-main: #f4f4f5;
      --text-muted: #a1a1aa;
      --border-color: #27272a;
      --transition-speed: 0.4s;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-main);
      height: 100vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Header Controls */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem 2rem;
      border-bottom: 1px solid var(--border-color);
      z-index: 10;
    }

    .brand {
      font-size: 0.9rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--text-muted);
    }

    .slide-counter {
      font-size: 0.85rem;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
    }

    /* Deck Viewport */
    .deck-container {
      flex: 1;
      position: relative;
      width: 100%;
      height: 100%;
    }

    .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 4rem 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease, visibility var(--transition-speed);
    }

    .slide.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .slide-content {
      max-width: 900px;
      width: 100%;
    }

    .slide-tag {
      display: inline-block;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-muted);
      margin-bottom: 1rem;
      border: 1px solid var(--border-color);
      padding: 0.25rem 0.75rem;
      border-radius: 999px;
    }

    h1, h2 {
      font-size: 2.5rem;
      font-weight: 500;
      line-height: 1.2;
      margin-bottom: 1.5rem;
      letter-spacing: -0.02em;
    }

    p {
      font-size: 1.125rem;
      color: var(--text-muted);
      line-height: 1.6;
      max-width: 680px;
    }

    /* Grid Layout for Capabilities */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      margin-top: 2rem;
    }

    .card {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      padding: 1.75rem;
      border-radius: 8px;
    }

    .card h3 {
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
      color: var(--text-main);
    }

    .card p {
      font-size: 0.9rem;
    }

    /* Controls Bar */
    footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem 2rem;
      border-top: 1px solid var(--border-color);
      z-index: 10;
    }

    .nav-buttons {
      display: flex;
      gap: 0.5rem;
    }

    button {
      background: var(--card-bg);
      color: var(--text-main);
      border: 1px solid var(--border-color);
      padding: 0.6rem 1.2rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.85rem;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    button:hover {
      background: var(--border-color);
    }

    button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    @media (max-width: 640px) {
      h1, h2 { font-size: 1.8rem; }
      .slide { padding: 2rem 1.5rem; }
    }
  </style>
</head>
<body>

  <header>
    <div class="brand">Studio Capabilities</div>
    <div class="slide-counter" id="counter">01 / 03</div>
  </header>

  <main class="deck-container">
    <!-- Slide 1 -->
    <section class="slide active">
      <div class="slide-content">
        <span class="slide-tag">Overview</span>
        <h1>Visual Storytelling & Commercial Direction</h1>
        <p>Crafting elevated visual narratives through strategic cinematography, focused creative direction, and seamless digital execution.</p>
      </div>
    </section>

    <!-- Slide 2 -->
    <section class="slide">
      <div class="slide-content">
        <span class="slide-tag">Capabilities</span>
        <h2>Core Creative Services</h2>
        <div class="grid">
          <div class="card">
            <h3>Visual Concepts</h3>
            <p>Comprehensive creative treatments, narrative development, and pitch presentations.</p>
          </div>
          <div class="card">
            <h3>Production & Motion</h3>
            <p>Direction, cinematography, real estate walkthroughs, and high-impact digital content.</p>
          </div>
          <div class="card">
            <h3>Post-Production</h3>
            <p>Color grading, precise editorial cuts, audio design, and custom preset development.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Slide 3 -->
    <section class="slide">
      <div class="slide-content">
        <span class="slide-tag">Contact</span>
        <h2>Let's Collaborate</h2>
        <p>Available for commercial projects, brand campaigns, and creative consultations.</p>
      </div>
    </section>
  </main>

  <footer>
    <div class="hint">Use Arrow Keys or Buttons to Navigate</div>
    <div class="nav-buttons">
      <button id="prevBtn" onclick="changeSlide(-1)" disabled>Previous</button>
      <button id="nextBtn" onclick="changeSlide(1)">Next</button>
    </div>
  </footer>

  <script>
    let currentSlide = 0;
    const slides = document.querySelectorAll('.slide');
    const counter = document.getElementById('counter');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function updateDeck() {
      slides.forEach((slide, index) => {
        slide.classList.toggle('active', index === currentSlide);
      });

      // Update counter
      const currentFormatted = String(currentSlide + 1).padStart(2, '0');
      const totalFormatted = String(slides.length).padStart(2, '0');
      counter.textContent = `${currentFormatted} / ${totalFormatted}`;

      // Update button state
      prevBtn.disabled = currentSlide === 0;
      nextBtn.disabled = currentSlide === slides.length - 1;
    }

    function changeSlide(direction) {
      const target = currentSlide + direction;
      if (target >= 0 && target < slides.length) {
        currentSlide = target;
        updateDeck();
      }
    }

    // Keyboard navigation
    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowRight' || e.key === 'Space') {
        changeSlide(1);
      } else if (e.key === 'ArrowLeft') {
        changeSlide(-1);
      }
    });
  </script>
</body>
</html>