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

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

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

{%- block content %}

<section>
    <h2>Flash & Blink</h2>
    <p>Visibility-based attention animations.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_flash"></div>
            <p>flash</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_flash_fade"></div>
            <p>flash-fade</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_flash_strobe"></div>
            <p>flash-strobe</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_blink"></div>
            <p>blink</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_blink_rapid"></div>
            <p>blink-rapid</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_blink_soft"></div>
            <p>blink-soft</p>
        </div>
    </div>
</section>

<section>
    <h2>Beat</h2>
    <p>Beat and rhythm-based animations.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_beat"></div>
            <p>beat</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_beat_fade"></div>
            <p>beat-fade</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_beat_double"></div>
            <p>beat-double</p>
        </div>
    </div>
</section>

<section>
    <h2>Tada & Pop</h2>
    <p>Celebratory entrance animations.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_tada"></div>
            <p>tada</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_tada_slow"></div>
            <p>tada-slow</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_tada_fast"></div>
            <p>tada-fast</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_pop"></div>
            <p>pop</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_pop_slow"></div>
            <p>pop-slow</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_pop_fast"></div>
            <p>pop-fast</p>
        </div>
    </div>
</section>

<section>
    <h2>Swing & Sway</h2>
    <p>Pendulum-like swinging motions.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_swing"></div>
            <p>swing</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_swing_slow"></div>
            <p>swing-slow</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_sway"></div>
            <p>sway</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_sway_slow"></div>
            <p>sway-slow</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_nod"></div>
            <p>nod</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_nod_slow"></div>
            <p>nod-slow</p>
        </div>
    </div>
</section>

<section>
    <h2>Usage</h2>

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

        .element-flash {
        @include animate_flash;
        }

        <span class="comment">// Utility classes</span>
        &lt;div class="animate_tada"&gt;...&lt;/div&gt;
        &lt;div class="animate_flash"&gt;...&lt;/div&gt;
        &lt;div class="animate_swing"&gt;...&lt;/div&gt;
    </div>
</section>

{%- endblock %}