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

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

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

{%- block content %}

<section>
    <h2>Fade Effects</h2>
    <p>Smooth opacity transitions.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_fade"></div>
            <p>fade</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_fade_in"></div>
            <p>fade-in</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_fade_out"></div>
            <p>fade-out</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_fade_gradual"></div>
            <p>fade-gradual</p>
        </div>
    </div>
</section>

<section>
    <h2>Slide + Fade Effects</h2>
    <p>Combined slide and fade animations.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box animate_slide_fade_in_up"></div>
            <p>slide-fade-in-up</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_slide_fade_in_down"></div>
            <p>slide-fade-in-down</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_slide_fade_in_left"></div>
            <p>slide-fade-in-left</p>
        </div>
        <div class="demo-item">
            <div class="demo-box animate_slide_fade_in_right"></div>
            <p>slide-fade-in-right</p>
        </div>
    </div>
</section>

<section>
    <h2>Usage</h2>

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

        .element-in {
        @include animate_fade_in;
        }

        <span class="comment">// Utility classes</span>
        &lt;div class="animate_fade"&gt;...&lt;/div&gt;
        &lt;div class="animate_fade_in"&gt;...&lt;/div&gt;
        &lt;div class="animate_slide_fade_in_up"&gt;...&lt;/div&gt;
    </div>
</section>

{%- endblock %}