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

{%- block title %}Special Effects — move.gl{%- endblock %}

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

{%- block content %}

<section>
    <h2>Float Effects</h2>
    <p>Subtle floating animations.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_float"></div>
            <p>float</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_float_horizontal"></div>
            <p>float-horizontal</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_float_rotate"></div>
            <p>float-rotate</p>
        </div>
    </div>
</section>

<section>
    <h2>Glow Effects</h2>
    <p>Glowing box-shadow animations.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_glow"></div>
            <p>glow</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_glow_soft"></div>
            <p>glow-soft</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_glow_pulse"></div>
            <p>glow-pulse</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_glow_multicolor"></div>
            <p>glow-multicolor</p>
        </div>
    </div>
</section>

<section>
    <h2>Ripple Effects</h2>
    <p>Ripple and wave animations.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_ripple"></div>
            <p>ripple</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_ripple_slow"></div>
            <p>ripple-slow</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_ripple_multi"></div>
            <p>ripple-multi</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_ripple_color"></div>
            <p>ripple-color</p>
        </div>
    </div>
</section>

<section>
    <h2>Wave & Twist</h2>
    <p>Complex transformation animations.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_wave"></div>
            <p>wave</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_wave_slow"></div>
            <p>wave-slow</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_twist"></div>
            <p>twist</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_twist_fast"></div>
            <p>twist-fast</p>
        </div>
    </div>
</section>

<section>
    <h2>Usage</h2>

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

        .element-glow {
        @include animate_glow;
        }

        <span class="comment">// Utility classes</span>
        &lt;div class="animate_float"&gt;...&lt;/div&gt;
        &lt;div class="animate_glow"&gt;...&lt;/div&gt;
        &lt;div class="animate_ripple"&gt;...&lt;/div&gt;
    </div>
</section>

{%- endblock %}