<!doctype html>
<!--
  TEMPLATE: memory-wall
  STYLE LOCKED. LAYOUT OPEN.

  Locked (do not edit — overriding breaks visual consistency):
    - cap-1/2/3/4 typography (weights, italic, letter-spacing, padding-right)
    - mix-blend-mode: screen
    - color, text-shadow, filter
    - GSAP motion: container fade-in via tl.set, per-word opacity+y reveal,
      group fade-out 0.45s before g.out

  Open (agent fills via plan.json):
    - {{PLANE_TOP}} {{PLANE_RIGHT}} {{PLANE_WIDTH}} {{PLANE_HEIGHT}}
    - {{ROTATE_Y}} {{ROTATE_X}}  (perspective angle on the wall)
    - --font-scale CSS var (multiplies all cap-N sizes — agent tunes for frame)
    - GROUPS array (transcript groups, slot assignment 1/2/3/4, in/out/words)

  Style typography is keyed to "slots", semantic positions in the arc:
    cap-1: opener (italic, soft entry)
    cap-2: continuation (smaller italic, hanging indent — ragged poem feel)
    cap-3: pivot (upright, no italic, syntactic turn)
    cap-4: climax (UPPERCASE 900, the payoff line)
-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width={{WIDTH}}, height={{HEIGHT}}" />
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <style>
      :root { --font-scale: {{FONT_SCALE}}; }

      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body {
        margin: 0;
        width: {{WIDTH}}px; height: {{HEIGHT}}px;
        overflow: hidden;
        background: #000;
        font-family: "Inter", system-ui, sans-serif;
      }

      #a-roll {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
      }

      #stage {
        position: absolute;
        top: 0; left: 0;
        width: {{WIDTH}}px; height: {{HEIGHT}}px;
        perspective: 1400px;
        perspective-origin: 30% 40%;
        pointer-events: none;
        z-index: 2;
      }

      /* LAYOUT (agent-tunable via plan.json) */
      .wall-plane {
        position: absolute;
        top: {{PLANE_TOP}}px;
        right: {{PLANE_RIGHT}}px;
        width: {{PLANE_WIDTH}}px;
        height: {{PLANE_HEIGHT}}px;
        transform-style: preserve-3d;
        transform: rotateY({{ROTATE_Y}}deg) rotateX({{ROTATE_X}}deg);
        transform-origin: right center;
        padding: 24px 32px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        text-align: right;
        gap: 14px;
      }

      /* STYLE (locked) */
      .cap {
        display: block;
        position: relative;
        line-height: 1.05;
        opacity: 0;
        mix-blend-mode: {{BLEND_MODE}};
        color: {{CAP_COLOR}};
        text-shadow: {{TEXT_SHADOW}};
        filter: {{TEXT_FILTER}};
        will-change: transform, opacity;
      }
      .cap .w { display: inline-block; opacity: 0; will-change: opacity, transform; }

      .cap-1 { font-size: calc(78px * var(--font-scale));
               font-weight: 600; font-style: italic;
               letter-spacing: -0.01em; }
      .cap-2 { font-size: calc(66px * var(--font-scale));
               font-weight: 500; font-style: italic;
               letter-spacing: -0.005em;
               padding-right: calc(44px * var(--font-scale)); }
      .cap-3 { font-size: calc(72px * var(--font-scale));
               font-weight: 700;
               letter-spacing: -0.015em; }
      .cap-4 { font-size: calc(90px * var(--font-scale));
               font-weight: 900;
               letter-spacing: -0.03em;
               text-transform: uppercase;
               line-height: 1.0; }
    </style>
  </head>
  <body>
    <div
      id="root"
      data-composition-id="main"
      data-start="0"
      data-duration="{{DURATION}}"
      data-width="{{WIDTH}}"
      data-height="{{HEIGHT}}"
    >
      <video
        id="a-roll"
        src="source.mp4"
        muted
        playsinline
        data-duration="{{DURATION}}"
        data-track-index="0"
        style="z-index: 1"
      ></video>

      <div id="stage">
        <div class="wall-plane">{{GROUPS_HTML}}</div>
      </div>

      <audio
        id="a-roll-audio"
        src="source.mp4"
        data-start="0"
        data-duration="{{DURATION}}"
        data-track-index="3"
        data-volume="1"
      ></audio>
    </div>

    <script>
      window.__timelines = window.__timelines || {};
      const tl = gsap.timeline({ paused: true });
      const DUR = {{DURATION}};
      const GROUPS = {{GROUPS_JSON}};

      GROUPS.forEach(function (g) {
        var sel = "#" + g.id;
        var isSoft = g.tone === "soft";
        tl.set(sel, { opacity: 1, y: 0 }, Math.max(0, g.in - 0.01));

        g.words.forEach(function (w, i) {
          var wsel = sel + " .w[data-i='" + i + "']";
          if (isSoft) {
            tl.fromTo(wsel,
              { opacity: 0, y: 8 },
              { opacity: 1, y: 0, duration: 0.45, ease: "power2.out", overwrite: "auto" },
              w.start);
          } else {
            tl.fromTo(wsel,
              { opacity: 0, y: 6, scale: 1.04 },
              { opacity: 1, y: 0, scale: 1.0, duration: 0.22,
                ease: "power3.out", overwrite: "auto", transformOrigin: "100% 50%" },
              w.start);
          }
        });

        if (g.out < DUR) {
          tl.to(sel, { opacity: 0, duration: 0.5, ease: "power2.in", overwrite: "auto" },
                g.out - 0.5);
        }
        tl.set(sel, { opacity: 0, visibility: "hidden" }, g.out);
      });

      tl.seek(0);
      window.__timelines["main"] = tl;
    </script>
  </body>
</html>
