<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Luxury Gold Owl</title>

<style>

body{
    margin:0;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    background:#06111b;
}

svg{
    width:260px;
    overflow:visible;
}

.owl{
    fill:none;
    stroke:url(#gold);
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;

    stroke-dasharray:1200;
    stroke-dashoffset:1200;

    animation:
        draw 4s ease forwards,
        float 5s ease-in-out infinite 4s;
}

.eye{
    fill:#FFD86A;
    opacity:0;
    animation:eyeGlow .8s ease forwards 3.2s,
               blink 8s infinite 5s;
    filter:drop-shadow(0 0 8px gold);
}

.sparkle{
    fill:#fff6b5;
    opacity:0;
    animation:sparkle 2s infinite;
}

.sparkle:nth-child(2){
    animation-delay:.8s;
}

.sparkle:nth-child(3){
    animation-delay:1.6s;
}

@keyframes draw{
    to{
        stroke-dashoffset:0;
    }
}

@keyframes float{

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

    50%{
        transform:translateY(-8px);
    }

}

@keyframes eyeGlow{

    from{
        opacity:0;
        transform:scale(.5);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

@keyframes sparkle{

    0%{
        opacity:0;
        transform:scale(.4);
    }

    50%{
        opacity:1;
        transform:scale(1.3);
    }

    100%{
        opacity:0;
        transform:scale(.4);
    }

}

@keyframes blink{

    0%,95%,100%{
        transform:scaleY(1);
    }

    97%{
        transform:scaleY(.1);
    }

}

</style>

</head>

<body>

<svg viewBox="0 0 300 320">

<defs>

<linearGradient id="gold" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFF3A3"/>
<stop offset="30%" stop-color="#FFD54F"/>
<stop offset="55%" stop-color="#C89B2A"/>
<stop offset="75%" stop-color="#FFE08A"/>
<stop offset="100%" stop-color="#8B6B14"/>
</linearGradient>

</defs>

<!-- Ears -->
<path class="owl" d="M95 70 L120 30 L140 70"/>
<path class="owl" d="M205 70 L180 30 L160 70"/>

<!-- Head -->
<path class="owl" d="
M90 75
Q70 130 80 190
Q90 255 150 270
Q210 255 220 190
Q230 130 210 75
Q185 45 150 45
Q115 45 90 75Z"/>

<!-- Left Eye -->
<circle class="owl" cx="120" cy="130" r="28"/>

<!-- Right Eye -->
<circle class="owl" cx="180" cy="130" r="28"/>

<!-- Eye Centers -->

<circle class="eye" cx="120" cy="130" r="7"/>
<circle class="eye" cx="180" cy="130" r="7"/>

<!-- Beak -->

<path class="owl"
d="
M150 142
L140 160
L150 170
L160 160
Z"/>

<!-- Chest -->

<path class="owl"
d="
M120 190
Q150 220 180 190

M125 210
Q150 235 175 210

M130 230
Q150 248 170 230"/>

<!-- Wings -->

<path class="owl"
d="
M85 135
Q45 180 70 235"/>

<path class="owl"
d="
M215 135
Q255 180 230 235"/>

<!-- Feet -->

<path class="owl"
d="
M130 270
L120 290
M145 270
L145 292

M170 270
L180 290
M155 270
L155 292"/>

<!-- Sparkles -->

<polygon class="sparkle" points="45,55 49,65 59,69 49,73 45,83 41,73 31,69 41,65"/>

<polygon class="sparkle" points="255,85 259,95 269,99 259,103 255,113 251,103 241,99 251,95"/>

<polygon class="sparkle" points="150,20 154,30 164,34 154,38 150,48 146,38 136,34 146,30"/>

</svg>

</body>
</html>