<!doctype html>
<!--
  TEMPLATE: portrait-header
  STYLE LOCKED. LAYOUT OPEN.

  Look: 9:16 portrait talking-head, captions on a horizontal strip across
  the top above the subject. Optional crown at bottom if waist+ visible.

  Locked: 5 typography slots (intro/phrase/emph/dream/crown), screen blend,
          single-caption swap (caps absolute-positioned in header strip).

  Open via plan.json: header strip top/height, crown enable+top, font_scale.
-->
<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;
        pointer-events: none;
        z-index: 2;
      }

      /* LAYOUT */
      .header-plane {
        position: absolute;
        top: {{HEADER_TOP}}px;
        left: 0; right: 0;
        height: {{HEADER_HEIGHT}}px;
        padding: 24px 40px;
      }
      .header-plane .cap {
        position: absolute;
        top: 24px;
        left: 40px; right: 40px;
        max-width: calc(100% - 80px);
        text-align: center;
      }
      .crown-plane {
        position: absolute;
        top: {{CROWN_TOP}}px;
        left: 0; right: 0;
        text-align: center;
        pointer-events: none;
      }

      /* 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-intro  { font-size: calc(72px * var(--font-scale));
                    font-weight: 500; font-style: italic;
                    letter-spacing: -0.005em; line-height: 1.1; }
      .cap-phrase { font-size: calc(88px * var(--font-scale));
                    font-weight: 600;
                    letter-spacing: -0.015em; line-height: 1.05; }
      .cap-emph   { font-size: calc(104px * var(--font-scale));
                    font-weight: 800;
                    letter-spacing: -0.025em; line-height: 1.0; }
      .cap-dream  { font-size: calc(92px * var(--font-scale));
                    font-weight: 700; font-style: italic;
                    letter-spacing: -0.015em; line-height: 1.05; }
      .cap-crown  { font-size: calc(130px * var(--font-scale));
                    font-weight: 900;
                    letter-spacing: -0.035em; 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="header-plane">{{GROUPS_HTML}}</div>
        <div class="crown-plane">{{CROWN_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}};
      const CROWN  = {{CROWN_JSON}};

      function animateGroup(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.42, 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: "50% 50%" },
              w.start);
          }
        });

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

      GROUPS.forEach(animateGroup);
      if (CROWN) animateGroup(CROWN);

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