/* Animated, hand-drawn hero illustrations for each profession's homepage (see
   templates/partials/homepage-hero-svg.php). Shapes are theme-colored via CSS custom
   properties; only the motion lives here, shared across every theme's artwork. */

.homepage-hero-art {
    width: 100%;
    max-width: 440px;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .homepage-hero-art * { animation: none !important; }
}

.hh-pulse, .hh-flicker, .hh-float, .hh-float-slow, .hh-rise, .hh-rise-paw, .hh-sway, .hh-rocket {
    transform-box: fill-box;
    transform-origin: center;
}

.hh-pulse { animation: hhPulse 2.6s ease-in-out infinite; }
@keyframes hhPulse {
    0%, 100% { opacity: .25; transform: scale(0.9); }
    50% { opacity: .55; transform: scale(1.06); }
}

.hh-draw { stroke-dasharray: 100; animation: hhDraw 3.4s ease-in-out infinite; }
@keyframes hhDraw {
    0% { stroke-dashoffset: 100; }
    45%, 60% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -100; }
}

.hh-float { animation: hhFloat 3s ease-in-out infinite; }
.hh-float-slow { animation: hhFloat 5.5s ease-in-out infinite; }
@keyframes hhFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.hh-rotate { animation: hhRotate 9s linear infinite; }
.hh-rotate-rev { animation: hhRotateRev 11s linear infinite; }
.hh-rotate-slow { animation: hhRotate 34s linear infinite; }
@keyframes hhRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hhRotateRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }

.hh-flicker { animation: hhFlicker 1.9s ease-in-out infinite; }
@keyframes hhFlicker {
    0%, 100% { opacity: .6; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1.06); }
}

.hh-sway { animation: hhSway 3.4s ease-in-out infinite; }
@keyframes hhSway {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

.hh-wave { animation: hhWave 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }
@keyframes hhWave {
    0%, 100% { transform: skewY(0deg) scaleX(1); }
    50% { transform: skewY(-3deg) scaleX(0.98); }
}

.hh-rise { animation: hhRise 3s ease-in-out infinite; transform-origin: bottom; }
@keyframes hhRise {
    0%, 100% { transform: scaleY(0.85); }
    50% { transform: scaleY(1); }
}

.hh-rise-sun { animation: hhFloat 6s ease-in-out infinite; }

.hh-rise-paw { animation: hhPawFade 2.4s ease-in-out infinite; }
@keyframes hhPawFade {
    0%, 100% { opacity: .15; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1); }
}

.hh-steam { animation: hhSteam 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
@keyframes hhSteam {
    0% { opacity: 0; transform: translateY(6px) scaleY(0.8); }
    30% { opacity: .9; }
    100% { opacity: 0; transform: translateY(-22px) scaleY(1.15); }
}

.hh-rocket { animation: hhRocket 3.2s ease-in-out infinite; }
@keyframes hhRocket {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(-2deg); }
}