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

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

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

{%- block content %}

<section>
    <h2>Flip Transforms</h2>
    <p>Flip elements horizontally, vertically, or both.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box">Normal</div>
            <p>normal</p>
        </div>
        <div class="demo-item">
            <div class="demo-box transform_flip_horizontal">Flip H</div>
            <p>transform_flip_horizontal</p>
        </div>
        <div class="demo-item">
            <div class="demo-box transform_flip_vertical">Flip V</div>
            <p>transform_flip_vertical</p>
        </div>
        <div class="demo-item">
            <div class="demo-box transform_flip_both">Both</div>
            <p>transform_flip_both</p>
        </div>
    </div>
</section>

<section>
    <h2>Rotation Transforms</h2>
    <p>Rotate elements by fixed angles.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box transform_rotate_90">90°</div>
            <p>transform_rotate_90</p>
        </div>
        <div class="demo-item">
            <div class="demo-box transform_rotate_180">180°</div>
            <p>transform_rotate_180</p>
        </div>
        <div class="demo-item">
            <div class="demo-box transform_rotate_270">270°</div>
            <p>transform_rotate_270</p>
        </div>
        <div class="demo-item">
            <div class="demo-box transform_rotate_dynamic" style="--rotate-angle: 45deg;">45°</div>
            <p>transform_rotate_dynamic</p>
        </div>
    </div>
</section>

<section>
    <h2>Scale Transforms</h2>
    <p>Scale elements up or down.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box scale_up"></div>
            <p>scale_up (1.2x)</p>
        </div>
        <div class="demo-item">
            <div class="demo-box scale_down"></div>
            <p>scale_down (0.8x)</p>
        </div>
    </div>
</section>

<section>
    <h2>Translate & Skew Transforms</h2>
    <p>Move and skew elements.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box translate_xy"></div>
            <p>translate_xy</p>
        </div>
        <div class="demo-item">
            <div class="demo-box skew_xy"></div>
            <p>skew_xy</p>
        </div>
    </div>
</section>

<section>
    <h2>Interactive Transforms (Hover)</h2>
    <p>Hover over the elements to see transform effects.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box transform-translate-x"></div>
            <p>translateX</p>
        </div>
        <div class="demo-item">
            <div class="demo-box transform-translate-y"></div>
            <p>translateY</p>
        </div>
        <div class="demo-item">
            <div class="demo-box transform-scale"></div>
            <p>scale</p>
        </div>
        <div class="demo-item">
            <div class="demo-box transform-rotate"></div>
            <p>rotate</p>
        </div>
        <div class="demo-item">
            <div class="demo-box transform-skew-x"></div>
            <p>skewX</p>
        </div>
        <div class="demo-item">
            <div class="demo-box transform-skew-y"></div>
            <p>skewY</p>
        </div>
    </div>
</section>

<section>
    <h2>3D Transforms (Hover)</h2>
    <p>Perspective-based 3D transforms.</p>

    <div class="demo-row">
        <div class="demo-item perspective-container">
            <div class="demo-box transform-rotate-x"></div>
            <p>rotateX</p>
        </div>
        <div class="demo-item perspective-container">
            <div class="demo-box transform-rotate-y"></div>
            <p>rotateY</p>
        </div>
        <div class="demo-item perspective-container">
            <div class="demo-box transform-rotate-z"></div>
            <p>rotateZ</p>
        </div>
    </div>
</section>

<section>
    <h2>Combined Transforms (Hover)</h2>
    <p>Multiple transforms combined.</p>

    <div class="demo-row">
        <div class="demo-item">
            <div class="demo-box transform-combined-1"></div>
            <p>scale + rotate</p>
        </div>
        <div class="demo-item">
            <div class="demo-box transform-combined-2"></div>
            <p>translate + scale</p>
        </div>
        <div class="demo-item perspective-container">
            <div class="demo-box transform-combined-3"></div>
            <p>3D rotate + scale</p>
        </div>
    </div>
</section>

<section>
    <h2>Usage</h2>

    <div class="code-block"><span class="comment">// Utility Classes (immediate transform)</span>
        &lt;div class="transform_flip_horizontal"&gt;...&lt;/div&gt;
        &lt;div class="transform_rotate_90"&gt;...&lt;/div&gt;
        &lt;div class="scale_up"&gt;...&lt;/div&gt;
        &lt;div class="translate_xy"&gt;...&lt;/div&gt;

        <span class="comment">// Dynamic rotation with CSS variable</span>
        &lt;div class="transform_rotate_dynamic" style="--rotate-angle: 45deg;"&gt;...&lt;/div&gt;

        <span class="comment">// SCSS Mixins</span>
        .element {
        @include transform_flip_horizontal;
        }

        .rotated {
        @include transform_rotate(45deg);
        }

        .scaled {
        @include scale(1.5);
        }

        <span class="comment">// Combined transforms</span>
        .card {
        @include transform(
        translateY(-10px) scale(1.05) rotate(2deg)
        );
        }
    </div>
</section>

{%- endblock %}