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

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

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

{%- block content %}

<section>
    <h2>Basic Flip Effects</h2>
    <p>Perspective-based rotation animations.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_flip"></div>
            <p>flip</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_flip_horizontal"></div>
            <p>flip-horizontal</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_flip_vertical"></div>
            <p>flip-vertical</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_flip_diagonal"></div>
            <p>flip-diagonal</p>
        </div>
    </div>
</section>

<section>
    <h2>180° Flip Effects</h2>
    <p>Full 180-degree flip animations.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_flip_180_horizontal"></div>
            <p>flip-180-horizontal</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_flip_180_vertical"></div>
            <p>flip-180-vertical</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_flip_180_diagonal"></div>
            <p>flip-180-diagonal</p>
        </div>
    </div>
</section>

<section>
    <h2>Usage</h2>

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

        .card-horizontal {
        @include animate_flip_horizontal;
        }

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

{%- endblock %}