@page "/scott"

<PageTitle>Scott</PageTitle>

<div class="scott-wrapper">
    <div class="poo-orbit">
        <div class="poo-spin">
            <div class="poo-wobble">
                <div class="poo-pulse">
                    <span class="poo-text">💩POO💩</span>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .scott-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70vh;
        overflow: hidden;
        background: radial-gradient(ellipse at center, #1a0033 0%, #000 100%);
        border-radius: 12px;
        margin-top: 2rem;
    }

    .poo-orbit {
        animation: orbit 3s linear infinite;
    }

    .poo-spin {
        animation: spin 0.4s linear infinite;
    }

    .poo-wobble {
        animation: wobble 0.7s ease-in-out infinite alternate;
    }

    .poo-pulse {
        animation: pulse 0.5s ease-in-out infinite alternate;
    }

    .poo-text {
        font-size: clamp(4rem, 12vw, 9rem);
        font-weight: 900;
        font-family: Impact, sans-serif;
        letter-spacing: 0.05em;
        background: linear-gradient(
            90deg,
            #ff0000, #ff7700, #ffff00,
            #00ff00, #0000ff, #8b00ff,
            #ff0000
        );
        background-size: 300% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: rainbow 0.8s linear infinite;
        filter: drop-shadow(0 0 18px #ff00ff) drop-shadow(0 0 40px #00ffff);
        display: inline-block;
        text-shadow: none;
    }

    @@keyframes orbit {
        0%   { transform: rotate(0deg)   translateX(40px) rotate(0deg); }
        100% { transform: rotate(360deg) translateX(40px) rotate(-360deg); }
    }

    @@keyframes spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }

    @@keyframes wobble {
        from { transform: skewX(-15deg) scaleY(0.9); }
        to   { transform: skewX(15deg)  scaleY(1.15); }
    }

    @@keyframes pulse {
        from { transform: scale(0.85); }
        to   { transform: scale(1.2); }
    }

    @@keyframes rainbow {
        0%   { background-position: 0% center; }
        100% { background-position: 300% center; }
    }
</style>