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

{%- block title %}Spin & Rotate Animations — move.gl{%- endblock %}

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

{%- block content %}

<section>
    <h2>Spin</h2>
    <p>Continuous rotation animations.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_spin"></div>
            <p>spin</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_spin_reverse"></div>
            <p>spin-reverse</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_spin_pulse"></div>
            <p>spin-pulse</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_spin_grow"></div>
            <p>spin-grow</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_spin_flip"></div>
            <p>spin-flip</p>
        </div>
    </div>
</section>

<section>
    <h2>Roll</h2>
    <p>Rolling entrance and exit effects.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_roll"></div>
            <p>roll</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_roll_slow"></div>
            <p>roll-slow</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_roll_reverse"></div>
            <p>roll-reverse</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_roll_vertical"></div>
            <p>roll-vertical</p>
        </div>
    </div>
</section>

<section>
    <h2>Usage</h2>

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

        .element-roll {
        @include animate_roll;
        }

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

{%- endblock %}