{
  "$mulmocast": {
    "version": "1.1"
  },
  "lang": "en",
  "title": "Data-attribute Animation Test",
  "canvasSize": {
    "width": 1792,
    "height": 1024
  },
  "audioParams": {
    "padding": 0,
    "introPadding": 0,
    "closingPadding": 0,
    "outroPadding": 0
  },
  "imageParams": {
    "images": {
      "bgLandscape": {
        "type": "image",
        "source": { "kind": "path", "path": "images/qa_landscape.jpg" }
      },
      "bgPortrait": {
        "type": "image",
        "source": { "kind": "path", "path": "images/qa_portrait.png" }
      }
    }
  },
  "beats": [
    {
      "id": "coverZoom_with_text",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <div id='photo_outer' style='position:absolute;inset:0;overflow:hidden'>",
          "    <img id='photo_img' src='image:bgLandscape' data-animation='coverZoom' data-zoom-from='1.0' data-zoom-to='1.4' data-container='#photo_outer' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "  </div>",
          "  <div style='position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%)'></div>",
          "  <div id='title' data-animation='animate' data-opacity='0,1' data-translate-y='30,0' data-start='0.3' style='position:absolute;bottom:120px;left:60px;right:60px;color:white;font-size:72px;font-weight:900;text-shadow:0 4px 16px rgba(0,0,0,0.8)'>Breaking News: Major Event</div>",
          "  <div id='subtitle' data-animation='animate' data-opacity='0,1' data-start='0.8' style='position:absolute;bottom:60px;left:60px;color:#F59E0B;font-size:40px;font-weight:bold'>Details emerging now</div>",
          "</div>"
        ],
        "animation": true
      }
    },
    {
      "id": "coverPan_with_counter",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <div id='pan_outer' style='position:absolute;inset:0;overflow:hidden'>",
          "    <img id='pan_img' src='image:bgPortrait' data-animation='coverPan' data-axis='y' data-from='0' data-to='100' data-zoom='1.2' data-container='#pan_outer' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "  </div>",
          "  <div style='position:absolute;inset:0;background:rgba(0,0,0,0.4)'></div>",
          "  <div style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center'>",
          "    <div style='color:#F59E0B;font-size:48px;font-weight:900;margin-bottom:16px'>Impact</div>",
          "    <div style='display:inline-block;background:rgba(239,68,68,0.85);padding:20px 48px;border-radius:16px'>",
          "      <div id='counter' data-animation='counter' data-from='0' data-to='7500' data-end='auto' data-easing='easeOut' style='color:white;font-size:120px;font-weight:900;line-height:1'>0</div>",
          "      <div style='color:rgba(255,255,255,0.9);font-size:44px;font-weight:bold;margin-top:4px'>billion yen</div>",
          "    </div>",
          "  </div>",
          "</div>"
        ],
        "animation": true
      }
    },
    {
      "id": "fade_in_elements",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-gradient-to-b from-gray-900 to-gray-800'>",
          "  <div style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;width:80%'>",
          "    <div id='headline' data-animation='animate' data-opacity='0,1' data-scale='0.8,1' data-start='0' data-end='1' data-easing='easeOut' style='color:white;font-size:80px;font-weight:900;margin-bottom:32px'>Top 3 Trends</div>",
          "    <div id='item0' data-animation='animate' data-opacity='0,1' data-translate-x='-50,0' data-start='0.5' data-end='1.5' style='color:#34D399;font-size:56px;font-weight:bold;margin:16px 0'>1. AI Revolution</div>",
          "    <div id='item1' data-animation='animate' data-opacity='0,1' data-translate-x='-50,0' data-start='1.0' data-end='2.0' style='color:#60A5FA;font-size:56px;font-weight:bold;margin:16px 0'>2. Green Energy</div>",
          "    <div id='item2' data-animation='animate' data-opacity='0,1' data-translate-x='-50,0' data-start='1.5' data-end='2.5' style='color:#FBBF24;font-size:56px;font-weight:bold;margin:16px 0'>3. Space Tech</div>",
          "  </div>",
          "</div>"
        ],
        "animation": true
      }
    },
    {
      "id": "typewriter_effect",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-gray-900'>",
          "  <div style='position:absolute;top:50%;left:60px;right:60px;transform:translateY(-50%)'>",
          "    <div id='tw' data-animation='typewriter' data-text='Breaking: Major acquisition deal worth $7.5 billion announced today.' data-start='0' data-end='3' style='color:white;font-size:64px;font-weight:bold;line-height:1.4'></div>",
          "    <div id='cursor' data-animation='blink' data-interval='0.5' style='display:inline-block;width:4px;height:64px;background:white;vertical-align:bottom;margin-left:4px'></div>",
          "  </div>",
          "</div>"
        ],
        "animation": true
      }
    },
    {
      "id": "mixed_no_script",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <div id='zoom_outer' style='position:absolute;inset:0;overflow:hidden'>",
          "    <img id='zoom_img' src='image:bgLandscape' data-animation='coverZoom' data-zoom-from='1.2' data-zoom-to='1.0' data-easing='easeOut' data-container='#zoom_outer' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "  </div>",
          "  <div style='position:absolute;inset:0;background:linear-gradient(to right, rgba(0,0,0,0.8) 0%, transparent 60%)'></div>",
          "  <div style='position:absolute;top:50%;left:60px;transform:translateY(-50%);max-width:45%'>",
          "    <div id='badge' data-animation='animate' data-opacity='0,1' data-scale='0.5,1' data-start='0' data-end='0.5' data-easing='easeOut' style='display:inline-block;background:#EF4444;color:white;padding:8px 24px;border-radius:8px;font-size:32px;font-weight:bold;margin-bottom:16px'>LIVE</div>",
          "    <div id='mtitle' data-animation='animate' data-opacity='0,1' data-translate-y='20,0' data-start='0.3' data-end='1.0' style='color:white;font-size:64px;font-weight:900;line-height:1.2;margin-bottom:16px'>Market Impact Analysis</div>",
          "    <div id='mdesc' data-animation='animate' data-opacity='0,1' data-start='0.8' data-end='1.5' style='color:rgba(255,255,255,0.8);font-size:36px;line-height:1.4'>Key indicators show significant movement across sectors</div>",
          "  </div>",
          "</div>"
        ],
        "animation": true
      }
    },
    {
      "id": "script_plus_data_attrs",
      "duration": 4,
      "image": {
        "type": "html_tailwind",
        "html": [
          "<div class='h-full w-full overflow-hidden relative bg-black'>",
          "  <div id='bg_outer' style='position:absolute;inset:0;overflow:hidden'>",
          "    <img id='bg_img' src='image:bgLandscape' data-animation='coverZoom' data-zoom-from='1.0' data-zoom-to='1.3' data-container='#bg_outer' style='position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:none;max-height:none' />",
          "  </div>",
          "  <div style='position:absolute;inset:0;background:rgba(0,0,0,0.5)'></div>",
          "  <div id='script_title' style='position:absolute;top:50%;left:60px;right:60px;transform:translateY(-50%);color:white;font-size:72px;font-weight:900;text-align:center;opacity:0'>Script + Data Coexistence</div>",
          "  <div id='data_subtitle' data-animation='animate' data-opacity='0,1' data-translate-y='20,0' data-start='1.0' style='position:absolute;bottom:100px;left:60px;right:60px;text-align:center;color:#F59E0B;font-size:48px;font-weight:bold'>This text uses data-animation</div>",
          "</div>"
        ],
        "script": [
          "const animation = new MulmoAnimation();",
          "animation.animate('#script_title', { opacity: [0, 1], translateY: [30, 0] }, { start: 0, end: 0.8, easing: 'easeOut' });"
        ],
        "animation": true
      }
    }
  ]
}