<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Owl Mascot Animations</title>
    <style>
        :root {
            --bg-color: #f8f9fa;
            --owl-white: #ffffff;
            --owl-gray: #e0e0e0;
            --owl-black: #1a1a1a;
            --accent-blue: #4a90e2;
            --accent-yellow: #f1c40f;
        }

        body {
            background-color: var(--bg-color);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            padding: 40px;
            justify-items: center;
        }

        .card {
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
            text-align: center;
            width: 250px;
        }

        h3 {
            color: #555;
            margin-bottom: 20px;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* BASE OWL SVG STYLING */
        .owl-svg {
            width: 150px;
            height: auto;
            overflow: visible;
        }

        .owl-body {
            fill: var(--owl-white);
            stroke: var(--owl-black);
            stroke-width: 8;
        }

        .owl-eyes {
            fill: var(--owl-black);
        }

        .owl-highlights {
            fill: white;
        }

        .owl-beak {
            fill: var(--owl-black);
        }

        .owl-feathers {
            fill: none;
            stroke: var(--owl-black);
            stroke-width: 4;
            stroke-linecap: round;
        }

        .prop {
            visibility: hidden;
        }

        /* --- 1. PLANNING (The Strategist) --- */
        #planning .owl-eye-group {
            animation: eye-dart 4s infinite;
        }

        #planning .lightbulb {
            visibility: visible;
            animation: bulb-glow 2s infinite;
        }

        @keyframes eye-dart {

            0%,
            20%,
            100% {
                transform: translateX(0);
            }

            30%,
            50% {
                transform: translateX(-5px);
            }

            60%,
            80% {
                transform: translateX(5px);
            }
        }

        @keyframes bulb-glow {

            0%,
            100% {
                opacity: 0.3;
                transform: translateY(0);
            }

            50% {
                opacity: 1;
                transform: translateY(-5px);
            }
        }

        /* --- 2. BUILDING (The Constructor) --- */
        #building .owl-wings {
            animation: wing-tap 0.5s infinite alternate ease-in-out;
            transform-origin: center;
        }

        #building .hardhat {
            visibility: visible;
        }

        @keyframes wing-tap {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(-5deg) translateY(-2px);
            }
        }

        /* --- 3. DEBUGGING (The Inspector) --- */
        #debugging .owl-svg {
            animation: lean-in 3s infinite alternate ease-in-out;
        }

        #debugging .magnifier {
            visibility: visible;
            animation: search 3s infinite ease-in-out;
        }

        @keyframes lean-in {
            from {
                transform: scale(1);
            }

            to {
                transform: scale(1.1) translateY(5px);
            }
        }

        @keyframes search {

            0%,
            100% {
                transform: translate(0, 0);
            }

            50% {
                transform: translate(-20px, 10px);
            }
        }

        /* --- 4. LAUNCH (The Celebration) --- */
        #launch .owl-svg {
            animation: hop 0.6s infinite alternate cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        #launch .owl-wings {
            animation: flap 0.2s infinite;
            transform-origin: center;
        }

        #launch .sparkle {
            visibility: visible;
            animation: flash 0.8s infinite;
        }

        @keyframes hop {
            from {
                transform: translateY(0);
            }

            to {
                transform: translateY(-20px);
            }
        }

        @keyframes flap {
            from {
                transform: scaleX(1);
            }

            to {
                transform: scaleX(1.1);
            }
        }

        @keyframes flash {

            0%,
            100% {
                opacity: 0;
                transform: scale(0.5);
            }

            50% {
                opacity: 1;
                transform: scale(1.2);
            }
        }
    </style>
</head>

<body>

    <div class="card" id="planning">
        <h3>Planning</h3>
        <svg class="owl-svg" viewBox="0 0 200 220">
            <g class="prop lightbulb" transform="translate(140, 20)">
                <circle cx="0" cy="0" r="15" fill="#f1c40f" />
                <rect x="-5" y="12" width="10" height="8" fill="#95a5a6" />
            </g>
            <path class="owl-body"
                d="M100,20 C140,20 170,40 170,90 C170,150 145,200 100,200 C55,200 30,150 30,90 C30,40 60,20 100,20 Z" />
            <path d="M50,45 L35,25 L65,35 Z" fill="black" />
            <path d="M150,45 L165,25 L135,35 Z" fill="black" />
            <g class="owl-eye-group">
                <circle class="owl-eyes" cx="70" cy="90" r="28" />
                <circle class="owl-eyes" cx="130" cy="90" r="28" />
                <circle class="owl-highlights" cx="78" cy="80" r="8" />
                <circle class="owl-highlights" cx="138" cy="80" r="8" />
            </g>
            <path class="owl-beak" d="M100,105 L92,125 L108,125 Z" />
            <path class="owl-feathers" d="M80,150 Q90,160 100,150 M110,150 Q120,160 130,150 M95,170 Q105,180 115,170" />
        </svg>
    </div>

    <div class="card" id="building">
        <h3>Building</h3>
        <svg class="owl-svg" viewBox="0 0 200 220">
            <path class="prop hardhat" d="M60,35 Q100,10 140,35 L145,45 L55,45 Z" fill="#f1c40f" stroke="black"
                stroke-width="4" />
            <g class="owl-wings">
                <path d="M30,100 Q10,130 35,170" fill="none" stroke="black" stroke-width="8" stroke-linecap="round" />
                <path d="M170,100 Q190,130 165,170" fill="none" stroke="black" stroke-width="8"
                    stroke-linecap="round" />
            </g>
            <path class="owl-body"
                d="M100,20 C140,20 170,40 170,90 C170,150 145,200 100,200 C55,200 30,150 30,90 C30,40 60,20 100,20 Z" />
            <g>
                <circle class="owl-eyes" cx="70" cy="90" r="28" />
                <circle class="owl-eyes" cx="130" cy="90" r="28" />
                <circle class="owl-highlights" cx="78" cy="80" r="8" />
                <circle class="owl-highlights" cx="138" cy="80" r="8" />
            </g>
            <path class="owl-beak" d="M100,105 L92,125 L108,125 Z" />
        </svg>
    </div>

    <div class="card" id="debugging">
        <h3>Debugging</h3>
        <svg class="owl-svg" viewBox="0 0 200 220">
            <g class="prop magnifier" transform="translate(140, 130)">
                <circle cx="0" cy="0" r="20" fill="none" stroke="black" stroke-width="5" />
                <line x1="15" y1="15" x2="30" y2="30" stroke="black" stroke-width="8" stroke-linecap="round" />
            </g>
            <path class="owl-body"
                d="M100,20 C140,20 170,40 170,90 C170,150 145,200 100,200 C55,200 30,150 30,90 C30,40 60,20 100,20 Z" />
            <g>
                <circle class="owl-eyes" cx="70" cy="90" r="28" />
                <circle class="owl-eyes" cx="130" cy="90" r="28" />
                <circle class="owl-highlights" cx="78" cy="80" r="8" />
                <circle class="owl-highlights" cx="138" cy="80" r="8" />
            </g>
            <path class="owl-beak" d="M100,105 L92,125 L108,125 Z" />
        </svg>
    </div>

    <div class="card" id="launch">
        <h3>Launch</h3>
        <svg class="owl-svg" viewBox="0 0 200 220">
            <path class="prop sparkle" d="M20,50 L25,40 L30,50 L40,55 L30,60 L25,70 L20,60 L10,55 Z" fill="#f1c40f" />
            <path class="prop sparkle" d="M160,30 L165,20 L170,30 L180,35 L170,40 L165,50 L160,40 L150,35 Z"
                fill="#f1c40f" />
            <g class="owl-wings">
                <path d="M30,100 Q0,80 15,140" fill="none" stroke="black" stroke-width="8" stroke-linecap="round" />
                <path d="M170,100 Q200,80 185,140" fill="none" stroke="black" stroke-width="8" stroke-linecap="round" />
            </g>
            <path class="owl-body"
                d="M100,20 C140,20 170,40 170,90 C170,150 145,200 100,200 C55,200 30,150 30,90 C30,40 60,20 100,20 Z" />
            <g>
                <circle class="owl-eyes" cx="70" cy="90" r="28" />
                <circle class="owl-eyes" cx="130" cy="90" r="28" />
                <circle class="owl-highlights" cx="78" cy="80" r="8" />
                <circle class="owl-highlights" cx="138" cy="80" r="8" />
            </g>
            <path class="owl-beak" d="M100,105 L92,125 L108,125 Z" />
        </svg>
    </div>

</body>

</html>