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

  Look: podcast / interview, upper-left column with intro→phrase→emph
  beats, big center-stage CROWN crossing the subject for the payoff.

  Locked:
    - 5 typography slots: intro / phrase / emph / dream / crown
    - mix-blend-mode: screen, color #fff5df, deep text-shadow
    - Single-caption-swap layout (caps absolute-positioned in left-plane)
    - GSAP soft/present per-word reveal

  Open via plan.json:
    - left-plane geometry + perspective
    - crown_plane top
    - --font-scale
    - GROUPS array + slot per group
    - whether crown is enabled (crown_group)
-->
<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: 2400px;
        perspective-origin: 25% 50%;
        pointer-events: none;
        z-index: 2;
      }

      /* LAYOUT */
      .left-plane {
        position: absolute;
        top: {{PLANE_TOP}}px;
        left: {{PLANE_LEFT}}px;
        width: {{PLANE_WIDTH}}px;
        height: {{PLANE_HEIGHT}}px;
        transform-style: preserve-3d;
        transform: rotateY({{ROTATE_Y}}deg);
        transform-origin: left center;
        padding: 24px 36px;
      }
      .left-plane .cap {
        position: absolute;
        top: 24px;
        right: 36px;
        max-width: calc({{PLANE_WIDTH}}px - 72px);
      }
      .crown-plane {
        position: absolute;
        top: {{CROWN_TOP}}px;
        left: {{CROWN_LEFT}}px;
        right: {{CROWN_RIGHT}}px;
        text-align: {{CROWN_ALIGN}};
        pointer-events: none;
      }
      .crown-plane .cap-crown {
        font-size: calc(140px * var(--font-scale) * {{CROWN_SCALE}});
      }

      /* STYLE (locked) */
      .cap {
        display: block;
        position: relative;
        line-height: 1.02;
        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(52px * var(--font-scale));
                    font-weight: 500; font-style: italic;
                    letter-spacing: -0.005em; }
      .cap-phrase { font-size: calc(60px * var(--font-scale));
                    font-weight: 600;
                    letter-spacing: -0.015em; }
      .cap-emph   { font-size: calc(70px * var(--font-scale));
                    font-weight: 800;
                    letter-spacing: -0.025em; }
      .cap-dream  { font-size: calc(64px * var(--font-scale));
                    font-weight: 700; font-style: italic;
                    letter-spacing: -0.015em; }
      .cap-crown  { font-size: calc(140px * 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="left-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>
