{% extends "base.html.jinja" %}

{%- block title %}Pulse Animations — move.gl{%- endblock %}

{%- block header %}
<p class="eyebrow">Animations</p>
<h1>Pulse Animations</h1>
{%- endblock %}

{%- block content %}

<section>
    <h2>Pulse</h2>
    <p>Scale-based pulsing effects for attention and emphasis.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_pulse"></div>
            <p>pulse</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_pulse_slow"></div>
            <p>pulse-slow</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_pulse_fast"></div>
            <p>pulse-fast</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_pulse_color"></div>
            <p>pulse-color</p>
        </div>
    </div>
</section>

<section>
    <h2>Heartbeat</h2>
    <p>Organic heartbeat-like pulsing animations.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_heartbeat"></div>
            <p>heartbeat</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_heartbeat_slow"></div>
            <p>heartbeat-slow</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_heartbeat_fast"></div>
            <p>heartbeat-fast</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_heartbeat_color"></div>
            <p>heartbeat-color</p>
        </div>
    </div>
</section>

<section>
    <h2>Usage</h2>

    <div class="code-block"><span class="comment">// SCSS Mixin</span>
        .element {
        @include animate_pulse;
        }

        .element-heartbeat {
        @include animate_heartbeat;
        }

        <span class="comment">// Utility classes</span>
        &lt;div class="animate_pulse"&gt;...&lt;/div&gt;
        &lt;div class="animate_heartbeat"&gt;...&lt;/div&gt;
    </div>
</section>

{%- endblock %}