<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <meta name="theme-color" content="#17130f">
  <title>Moja Polana Smaków</title>
  <meta name="description" content="Moja Polana Smaków — już wkrótce.">

  <style>
    * { box-sizing: border-box; }

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: #17130f;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    .page {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      background:
        linear-gradient(rgba(17, 13, 9, .20), rgba(17, 13, 9, .20)),
        url('background.png') center center / cover no-repeat;
      isolation: isolate;
    }

    .page::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: rgba(18, 13, 9, .16);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }

    .video-wrap {
      position: relative;
      width: min(100vw, calc(100vh * 16 / 9));
      height: min(100vh, calc(100vw * 9 / 16));
      max-width: 100vw;
      max-height: 100vh;
      display: grid;
      place-items: center;
      background: #000;
      box-shadow: 0 20px 60px rgba(0,0,0,.28);
    }

    video {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #000;
    }

    .sound {
      position: fixed;
      right: max(18px, env(safe-area-inset-right));
      bottom: max(18px, env(safe-area-inset-bottom));
      width: 48px;
      height: 48px;
      border: 1px solid rgba(255,255,255,.30);
      border-radius: 50%;
      background: rgba(0,0,0,.38);
      color: #fff;
      display: grid;
      place-items: center;
      cursor: pointer;
      z-index: 10;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: transform .18s ease, background .18s ease;
    }

    .sound:hover {
      transform: scale(1.05);
      background: rgba(0,0,0,.52);
    }

    .sound svg {
      width: 22px;
      height: 22px;
      fill: currentColor;
    }

    @media (max-width: 700px) {
      .video-wrap {
        width: 100vw;
        height: 100vh;
      }

      video {
        object-fit: contain;
      }

      .sound {
        width: 44px;
        height: 44px;
      }
    }
  </style>
</head>
<body>
  <main class="page">
    <div class="video-wrap">
      <video id="promo" autoplay muted loop playsinline preload="auto">
        <source src="promo.mp4" type="video/mp4">
      </video>
    </div>

    <button class="sound" id="soundBtn" type="button" aria-label="Włącz dźwięk" title="Włącz dźwięk">
      <svg id="soundIcon" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M4 9v6h4l5 4V5L8 9H4zm11.5 3c0-1.77-1-3.29-2.5-4.03v8.05A4.486 4.486 0 0 0 15.5 12zm0-8.5v2.06A7.001 7.001 0 0 1 19 12a7.001 7.001 0 0 1-3.5 6.44v2.06A9.001 9.001 0 0 0 21 12a9.001 9.001 0 0 0-5.5-8.5z"/>
      </svg>
    </button>
  </main>

  <script>
    const video = document.getElementById('promo');
    const button = document.getElementById('soundBtn');

    const iconOn = `
      <path d="M4 9v6h4l5 4V5L8 9H4zm11.5 3c0-1.77-1-3.29-2.5-4.03v8.05A4.486 4.486 0 0 0 15.5 12zm0-8.5v2.06A7.001 7.001 0 0 1 19 12a7.001 7.001 0 0 1-3.5 6.44v2.06A9.001 9.001 0 0 0 21 12a9.001 9.001 0 0 0-5.5-8.5z"/>`;

    const iconOff = `
      <path d="M16.5 12c0-1.77-1-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.897 8.897 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H4v6h4l5 4v-5.73l4.25 4.25A6.93 6.93 0 0 1 14 18.71v2.06a8.98 8.98 0 0 0 4.72-1.78L19.73 20 21 18.73 4.27 3zM13 5l-2.09 1.67L13 8.76V5z"/>`;

    function syncButton() {
      const muted = video.muted;
      button.setAttribute('aria-label', muted ? 'Włącz dźwięk' : 'Wyłącz dźwięk');
      button.setAttribute('title', muted ? 'Włącz dźwięk' : 'Wyłącz dźwięk');
      document.getElementById('soundIcon').innerHTML = muted ? iconOff : iconOn;
    }

    button.addEventListener('click', () => {
      video.muted = !video.muted;
      if (!video.paused) {
        syncButton();
        return;
      }
      video.play().catch(() => {});
      syncButton();
    });

    video.play().catch(() => {});
    syncButton();
  </script>
</body>
</html>