/* 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); }
}

/* Added for the doctor sub-themes -- each one gets its own signature motion instead of reusing
   the same handful of animations, so the five feel genuinely distinct in the hero art too. */

.hh-bounce-soft { animation: hhBounceSoft 2.2s cubic-bezier(.36,1.4,.4,1) infinite; transform-box: fill-box; transform-origin: bottom center; }
@keyframes hhBounceSoft {
    0%, 100% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-16px) scale(1.03); }
    55% { transform: translateY(0) scale(0.97); }
    75% { transform: translateY(-6px) scale(1.01); }
}

.hh-breathe { animation: hhBreathe 4.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hhBreathe {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.08); opacity: 1; }
}

.hh-pulse-fast { animation: hhPulseFast 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hhPulseFast {
    0%, 100% { opacity: .3; transform: scale(0.85); }
    50% { opacity: .8; transform: scale(1.15); }
}

.hh-scan { animation: hhScan 2.4s linear infinite; }
@keyframes hhScan {
    0% { transform: translateX(-60px); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateX(60px); opacity: 0; }
}

/* Added for the engineer sub-themes -- five more signature motions on top of the doctor set. */

.hh-cursor-blink { animation: hhCursorBlink 1s steps(1) infinite; }
@keyframes hhCursorBlink { 50% { opacity: 0; } }

.hh-code-fall { animation: hhCodeFall 2.8s linear infinite; transform-box: fill-box; }
@keyframes hhCodeFall {
    0% { transform: translateY(-16px); opacity: 0; }
    20% { opacity: .8; }
    80% { opacity: .8; }
    100% { transform: translateY(16px); opacity: 0; }
}

.hh-current-flow { animation: hhCurrentFlow 1.8s linear infinite; }
@keyframes hhCurrentFlow {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

.hh-led-blink { animation: hhLedBlink 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hhLedBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .2; }
}

.hh-arm-swing { animation: hhArmSwing 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
@keyframes hhArmSwing {
    0%, 100% { transform: rotate(-15deg); }
    50% { transform: rotate(15deg); }
}

/* Two-joint kinematic arm (engineer_robotics hero) -- deliberately NOT setting
   transform-box: fill-box here, unlike .hh-arm-swing above. Each of these elements pairs its
   class with an inline `transform-origin` in absolute px (e.g. "185px 230px"), meant as a point
   in the shared SVG viewBox coordinate space -- exactly how the working .hh-rotate/.hh-rotate-rev
   groups do it elsewhere in this file. Adding transform-box: fill-box would instead make that
   origin relative to each element's own bounding box, rotating around the wrong point. */
.hh-shoulder-swing { animation: hhShoulderSwing 4.2s ease-in-out infinite; }
@keyframes hhShoulderSwing {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(24deg); }
}

.hh-elbow-swing { animation: hhElbowSwing 3.4s ease-in-out infinite; animation-delay: -0.4s; }
@keyframes hhElbowSwing {
    0%, 100% { transform: rotate(10deg); }
    50% { transform: rotate(-28deg); }
}

.hh-claw-l { animation: hhClawL 2.6s ease-in-out infinite; }
@keyframes hhClawL {
    0%, 15%, 85%, 100% { transform: rotate(0deg); }
    45%, 55% { transform: rotate(16deg); }
}

.hh-claw-r { animation: hhClawR 2.6s ease-in-out infinite; }
@keyframes hhClawR {
    0%, 15%, 85%, 100% { transform: rotate(0deg); }
    45%, 55% { transform: rotate(-16deg); }
}

/* Added for the student sub-themes -- one more batch of signature motions. */

.hh-wiggle-big { animation: hhWiggleBig 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hhWiggleBig {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

.hh-bar-fill { animation: hhBarFill 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }
@keyframes hhBarFill {
    0% { transform: scaleX(0); }
    60%, 100% { transform: scaleX(1); }
}

.hh-confetti-fall { animation: hhConfettiFall 3s ease-in infinite; transform-box: fill-box; }
@keyframes hhConfettiFall {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(180px) rotate(340deg); opacity: 0; }
}

/* Added for the artist/creator sub-themes -- one more batch of signature motions. */

.hh-eq-bounce { animation: hhEqBounce 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
@keyframes hhEqBounce {
    0%, 100% { transform: scaleY(0.35); }
    50% { transform: scaleY(1); }
}

.hh-flash { animation: hhFlash 2.6s ease-in-out infinite; }
@keyframes hhFlash {
    0%, 92%, 100% { opacity: 0; }
    94% { opacity: 1; }
    97% { opacity: 0.2; }
}

/* A camera-flash "pop" -- scale + opacity burst rather than .hh-flash's plain pulse, so several
   of these scattered around a scene (each on its own animation-delay) read as flashes going off
   at different moments, not one thing blinking in place. */
.hh-flash-pop { animation: hhFlashPop 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hhFlashPop {
    0%, 78%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
    84% { opacity: 1; transform: scale(1.2) rotate(8deg); }
    92% { opacity: 0.25; transform: scale(0.9) rotate(8deg); }
}

.hh-clap-snap { animation: hhClapSnap 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom left; }
@keyframes hhClapSnap {
    0%, 20%, 100% { transform: rotate(0deg); }
    8% { transform: rotate(-22deg); }
    14% { transform: rotate(0deg); }
}