<div data-controller="midwest-page-transition" data-midwest-page-transition-style-value="scale" data-midwest-page-transition-duration-value="var(--duration-slow)" data-midwest-page-transition-easing-value="var(--ease-emphasized)" aria-hidden="true" class="midwest-page-transition"></div>
<div class="p-6 space-y-4 max-w-lg overflow-hidden">
  <div id="pt-scale-a">
    <div class="space-y-2">
      <p class="text-xs font-semibold uppercase tracking-wide text-theme-7 mb-2">Articles</p>
      <article data-controller="midwest-card" class="midwest-card">
        <div class="wrap">
          <section>
            <p class="text-sm font-medium">The View Transitions API</p>
            <p class="text-xs text-theme-7">3 min read · Web Platform</p>
          </section>
        </div>
      </article>
    
      <div class="opacity-40">
        <article data-controller="midwest-card" class="midwest-card">
          <div class="wrap">
            <section>
              <p class="text-sm font-medium">CSS Scroll-Driven Animations</p>
              <p class="text-xs text-theme-7">5 min read · CSS</p>
            </section>
          </div>
        </article>
    </div>
      <div class="opacity-40">
        <article data-controller="midwest-card" class="midwest-card">
          <div class="wrap">
            <section>
              <p class="text-sm font-medium">Popover API</p>
              <p class="text-xs text-theme-7">4 min read · HTML</p>
            </section>
          </div>
        </article>
    </div>
    </div>
  </div>
  <div id="pt-scale-b" style="display:none">
    <article data-controller="midwest-card" class="midwest-card">
      <div class="wrap">
        <header>      
          <div class="flex items-center gap-2">
            <span class="midwest-badge size-default theme-primary">
              <span class="value">Web Platform</span>
            </span>
            <span class="midwest-badge size-default theme-primary">
              <span class="value">3 min read</span>
            </span>
          </div>
        </header>
        <section>
          <p class="font-semibold text-lg mb-2">The View Transitions API</p>
          <p class="text-sm text-theme-7">Smooth, animated page transitions without a JavaScript framework — the list shrank into the background as this detail view scaled into focus.</p>
        </section>
      </div>
    </article>
  </div>
  <div class="flex items-center gap-3">
    <button type="button" id="pt-scale-btn" class="midwest-button variant-default size-default theme-primary" name="button">
      <span class="midwest-button-content">Open article →</span>
      <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
        <div class="midwest-loading-icon-inner">
          <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
          <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
            <circle cx="15" cy="15" r="15">
              <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
            <circle cx="60" cy="15" r="9" fill-opacity="0.3">
              <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
            <circle cx="105" cy="15" r="15">
              <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
          </svg>
        </div>
      </div>
    </button>
    <span id="pt-scale-no-support" class="text-sm text-theme-7" style="display:none">
      View Transitions API not supported in this browser
    </span>
  </div>
  <pre class="text-xs bg-gray-100 rounded p-3"><%= midwest_page_transition(style: :scale) %></pre>
</div>
<script>
  (function () {
    var a = document.getElementById('pt-scale-a');
    var b = document.getElementById('pt-scale-b');
    var btn = document.getElementById('pt-scale-btn');
    var noSupport = document.getElementById('pt-scale-no-support');
    var fwd = 'Open article →';
    var back = '← Back to list';
    if (!document.startViewTransition) {
      btn.style.display = 'none';
      noSupport.style.display = '';
      return;
    }
    var showingA = true;
    btn.addEventListener('click', function () {
      document.startViewTransition(function () {
        a.style.display = showingA ? 'none' : '';
        b.style.display = showingA ? '' : 'none';
        showingA = !showingA;
        btn.querySelector('.midwest-button-content').textContent = showingA ? fwd : back;
      });
    });
  }());
</script>