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

{%- block title %}Keyframes — move.gl{%- endblock %}

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

{%- block content %}

<section>
    <h2>About Keyframes</h2>
    <p>Keyframes are the building blocks of CSS animations. In move.gl, keyframes are used internally by the
        <code>animate_*</code> utility classes. This page demonstrates how different keyframe animations look when
        applied via the animation classes.</p>
</section>

<section>
    <h2>Beat Animations</h2>
    <p>Pulsing heartbeat-style animations using scale keyframes.</p>

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

<section>
    <h2>Flash Animations</h2>
    <p>Attention-grabbing flash effects using opacity keyframes.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_flash"></div>
            <p>animate_flash</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_flash_fade"></div>
            <p>animate_flash_fade</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_flash_strobe"></div>
            <p>animate_flash_strobe</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_flash_fade_slow"></div>
            <p>animate_flash_fade_slow</p>
        </div>
    </div>
</section>

<section>
    <h2>Pulse Animations</h2>
    <p>Rhythmic pulsing effects using scale keyframes.</p>

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

<section>
    <h2>Scale Animations</h2>
    <p>Size-changing animations using transform scale keyframes.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_scale_expand"></div>
            <p>animate_scale_expand</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_scale_shrink"></div>
            <p>animate_scale_shrink</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_zoom"></div>
            <p>animate_zoom</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_zoom_fade"></div>
            <p>animate_zoom_fade</p>
        </div>
    </div>
</section>

<section>
    <h2>Rotation Animations</h2>
    <p>Spinning and rotating animations using transform rotate keyframes.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_spin">↻</div>
            <p>animate_spin</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_spin_reverse">↺</div>
            <p>animate_spin_reverse</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_spin_pulse">↻</div>
            <p>animate_spin_pulse</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_wobble">~</div>
            <p>animate_wobble</p>
        </div>
    </div>
</section>

<section>
    <h2>Translate Animations</h2>
    <p>Movement-based animations using transform translate keyframes.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_slide_in_right">→</div>
            <p>animate_slide_in_right</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_slide_in_down">↓</div>
            <p>animate_slide_in_down</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_float">☁</div>
            <p>animate_float</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_bounce">⬆</div>
            <p>animate_bounce</p>
        </div>
    </div>
</section>

<section>
    <h2>Fade Animations</h2>
    <p>Opacity-based animations using fade keyframes.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_fade"></div>
            <p>animate_fade</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_fade_in"></div>
            <p>animate_fade_in</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_blink"></div>
            <p>animate_blink</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_blink_soft"></div>
            <p>animate_blink_soft</p>
        </div>
    </div>
</section>

<section>
    <h2>Skew & Jiggle Animations</h2>
    <p>Skewing and shearing animations using transform skew keyframes.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_jiggle"></div>
            <p>animate_jiggle</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_jiggle_vertical"></div>
            <p>animate_jiggle_vertical</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_shake"></div>
            <p>animate_shake</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_shake_horizontal"></div>
            <p>animate_shake_horizontal</p>
        </div>
    </div>
</section>

<section>
    <h2>3D Animations</h2>
    <p>3D transform-based animations using perspective and rotate3d keyframes.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_flip"></div>
            <p>animate_flip</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_flip_horizontal"></div>
            <p>animate_flip_horizontal</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_swing"></div>
            <p>animate_swing</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_tada"></div>
            <p>animate_tada</p>
        </div>
    </div>
</section>

<section>
    <h2>Combined Animations</h2>
    <p>Complex animations combining multiple keyframe properties.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_bounce_rotate"></div>
            <p>animate_bounce_rotate</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_pop"></div>
            <p>animate_pop</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_elastic"></div>
            <p>animate_elastic</p>
        </div>
    </div>
</section>

<section>
    <h2>Usage</h2>

    <div class="code-block"><span class="comment">// Use the animate_* utility classes directly</span>
        &lt;div class="animate_beat"&gt;♥&lt;/div&gt;
        &lt;div class="animate_pulse"&gt;...&lt;/div&gt;
        &lt;div class="animate_spin"&gt;...&lt;/div&gt;

        <span class="comment">// Or use the SCSS mixins</span>
        .my-element {
        @include animate_beat;
        }

        .pulsing-button {
        @include animate_pulse_slow;
        }

        <span class="comment">// Custom keyframes using the mixin</span>
        @include keyframes('my-custom-animation') {
        0% { transform: translateY(0); }
        50% { transform: translateY(-30px); }
        100% { transform: translateY(0); }
        }

        .bouncing-element {
        animation: my-custom-animation 0.6s ease infinite;
        }
    </div>
</section>

{%- endblock %}