{{ block content }}

<link rel="stylesheet" href="/static/global/empty.css">

<!-- Hidden YouTube player (audio only) -->
<div id="yt-wrapper" style="position:absolute; top:-9999px; left:-9999px;">
  <div id="yt-player"></div>
</div>

<canvas id="blob-canvas" style="position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:9999;"></canvas>

<!-- Fallback next button, barely visible -->
<div style="position:fixed; bottom:30px; left:50%; transform:translateX(-50%); z-index:10000; opacity:0.3;">
  {{ next_button }}
</div>

{{ endblock }}

{{ block scripts }}
<script>
  const canvas = document.getElementById('blob-canvas');
  const ctx    = canvas.getContext('2d');

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

  const BREATH_DURATION = 10000;

  function easeInOut(t) {
    return t < 0.5
      ? 4 * t * t * t
      : 1 - Math.pow(-2 * t + 2, 3) / 2;
  }

  function drawSmoothBlob(cx, cy, baseR, scale, morphPhase) {
    const numPoints = 8;
    const points = [];

    for (let i = 0; i < numPoints; i++) {
      const angle = (i / numPoints) * Math.PI * 2 - Math.PI / 2;
      const wobble = 1
        + Math.sin(i * 1.2 + morphPhase * 0.8) * 0.06
        + Math.sin(i * 2.1 + morphPhase * 0.5) * 0.03;
      const r = baseR * scale * wobble;
      points.push({
        x: cx + Math.cos(angle) * r,
        y: cy + Math.sin(angle) * r,
      });
    }

    ctx.beginPath();
    const len = points.length;
    for (let i = 0; i < len; i++) {
      const p0 = points[(i - 1 + len) % len];
      const p1 = points[i];
      const p2 = points[(i + 1) % len];
      const p3 = points[(i + 2) % len];

      const cp1x = p1.x + (p2.x - p0.x) / 6;
      const cp1y = p1.y + (p2.y - p0.y) / 6;
      const cp2x = p2.x - (p3.x - p1.x) / 6;
      const cp2y = p2.y - (p3.y - p1.y) / 6;

      if (i === 0) ctx.moveTo(p1.x, p1.y);
      ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
    }
    ctx.closePath();

    const r = baseR * scale;
    const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r * 1.8);
    grad.addColorStop(0.0,  'rgba(190, 225, 240, 1.0)');
    grad.addColorStop(0.3,  'rgba(160, 210, 235, 0.85)');
    grad.addColorStop(0.6,  'rgba(130, 195, 225, 0.55)');
    grad.addColorStop(0.85, 'rgba(110, 180, 215, 0.20)');
    grad.addColorStop(1.0,  'rgba(100, 170, 210, 0.0)');
    ctx.fillStyle = grad;
    ctx.fill();
  }

  let start      = null;
  let morphPhase = 0;

  function render(timestamp) {
    if (!start) start = timestamp;
    const elapsed = timestamp - start;
    const t       = (elapsed % BREATH_DURATION) / BREATH_DURATION;
    const breathT = easeInOut(t < 0.5 ? t * 2 : (1 - t) * 2);
    const scale   = 0.75 + breathT * 0.35;
    morphPhase   += 0.004;

    const cx    = canvas.width  / 2;
    const cy    = canvas.height / 2;
    const baseR = Math.min(canvas.width, canvas.height) * 0.18;

    ctx.fillStyle = '#f4f8fb';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    const glow = ctx.createRadialGradient(cx, cy, 0, cx, cy, baseR * 2.5);
    glow.addColorStop(0,   'rgba(170, 215, 235, 0.22)');
    glow.addColorStop(0.6, 'rgba(170, 215, 235, 0.08)');
    glow.addColorStop(1,   'rgba(170, 215, 235, 0.0)');
    ctx.fillStyle = glow;
    ctx.beginPath();
    ctx.arc(cx, cy, baseR * 2.5, 0, Math.PI * 2);
    ctx.fill();

    drawSmoothBlob(cx, cy, baseR, scale, morphPhase);
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);

  // ── YouTube ───────────────────────────────────────────────
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  document.head.appendChild(tag);

  function onYouTubeIframeAPIReady() {
    new YT.Player('yt-player', {
      videoId: '{{ curvid }}',
      playerVars: {
        autoplay: 1,
        controls: 0,
        disablekb: 1,
        modestbranding: 1,
        rel: 0,
        playsinline: 1,
      },
      events: {
        onReady: function(event) {
          event.target.playVideo();
        },
        onStateChange: function(event) {
          if (event.data === YT.PlayerState.ENDED) {
            console.log("Rest ended — submitting form");
            document.querySelector('form').submit();
          }
        }
      }
    });
  }
</script>
{{ endblock }}