/* Shared hero-logo animation — keyframes + variant/mode gating + reduced-motion.
   Linked by index.html (public hero) and /admin (preview). Sizing/layout is
   defined per page, NOT here. */
  .hero-logo .lean{transform-box:fill-box;transform-origin:50% 88%}
  .hero-logo .anim{transform-box:fill-box;transform-origin:50% 60%}
  .hero-logo .breathe{transform-box:fill-box;transform-origin:50% 56%}
  .hero-logo .wing{transform-box:fill-box;transform-origin:82% 28%}
  .hero-logo .eye{transform-box:fill-box;transform-origin:50% 50%}
  .hero-logo .blink{transform-box:fill-box;transform-origin:50% 50%}
  /* per-variant pivot for .anim */
  [data-logo-variant="hop"] .anim{transform-origin:50% 100%}
  [data-logo-variant="tilt"] .anim{transform-origin:50% 55%}
  [data-logo-variant="wave"] .anim{transform-origin:50% 100%}
  [data-logo-variant="sway"] .anim{transform-origin:50% 95%}
  [data-logo-variant="puff"] .anim{transform-origin:50% 65%}
  [data-logo-variant="spin"] .anim{transform-origin:50% 58%}
  /* live-logo keyframes (from Shiro Live Logo.dc.html) */
  @keyframes shBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
  @keyframes shIdleBlink{0%,91%,100%{transform:scaleY(1)}95.5%{transform:scaleY(0.1)}}
  @keyframes shWave{0%,100%{transform:rotate(-4deg)}20%{transform:rotate(-30deg)}40%{transform:rotate(-13deg)}60%{transform:rotate(-30deg)}80%{transform:rotate(-13deg)}}
  @keyframes shHop{0%{transform:translateY(0) scaleX(1) scaleY(1)}8%{transform:translateY(0) scaleX(1.08) scaleY(0.9)}32%{transform:translateY(-32px) scaleX(0.94) scaleY(1.1)}55%{transform:translateY(0) scaleX(1.09) scaleY(0.89)}72%{transform:translateY(-7px) scaleX(0.99) scaleY(1.02)}86%{transform:translateY(0) scaleX(1.02) scaleY(0.98)}100%{transform:translateY(0) scaleX(1) scaleY(1)}}
  @keyframes shHopEyes{0%,16%{transform:scaleY(1)}30%{transform:scaleY(1.18)}52%{transform:scaleY(0.18)}66%,100%{transform:scaleY(1)}}
  @keyframes shShadowIdle{0%,100%{transform:translateX(-50%) scaleX(1);opacity:0.15}50%{transform:translateX(-50%) scaleX(0.97);opacity:0.13}}
  @keyframes shShadowHop{0%{transform:translateX(-50%) scaleX(1);opacity:0.15}32%{transform:translateX(-50%) scaleX(0.58);opacity:0.06}55%{transform:translateX(-50%) scaleX(1.1);opacity:0.2}72%{transform:translateX(-50%) scaleX(0.96);opacity:0.14}100%{transform:translateX(-50%) scaleX(1);opacity:0.15}}
  /* variant keyframes (from BirdIcon.dc.html) */
  @keyframes birdHop{0%{transform:translateY(0) scaleX(1) scaleY(1)}10%{transform:translateY(0) scaleX(1.08) scaleY(0.9)}35%{transform:translateY(-26px) scaleX(0.93) scaleY(1.1)}55%{transform:translateY(0) scaleX(1.09) scaleY(0.9)}70%{transform:translateY(-7px) scaleX(0.98) scaleY(1.03)}82%{transform:translateY(0) scaleX(1.02) scaleY(0.98)}100%{transform:translateY(0) scaleX(1) scaleY(1)}}
  @keyframes birdHopWing{0%,100%{transform:rotate(0deg)}35%{transform:rotate(-14deg)}62%{transform:rotate(7deg)}}
  @keyframes birdHappyBlink{0%,28%,46%,100%{transform:scaleY(1)}37%{transform:scaleY(0.18)}}
  @keyframes birdBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
  @keyframes birdWave{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-24deg)}50%{transform:rotate(-7deg)}75%{transform:rotate(-24deg)}}
  @keyframes birdBlink{0%,42%,50%,100%{transform:scaleY(1)}46%{transform:scaleY(0.1)}}
  @keyframes birdStep{0%{transform:translateX(-3px) rotate(-2.2deg)}25%{transform:translateX(-3px) rotate(-2.2deg) translateY(-3px)}50%{transform:translateX(3px) rotate(2.2deg)}75%{transform:translateX(3px) rotate(2.2deg) translateY(-3px)}100%{transform:translateX(-3px) rotate(-2.2deg)}}
  @keyframes birdWaveSlow{0%,100%{transform:rotate(-4deg)}20%{transform:rotate(-30deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(-30deg)}80%{transform:rotate(-12deg)}}
  @keyframes birdSway{0%,100%{transform:translateX(-5px) rotate(-5deg)}50%{transform:translateX(5px) rotate(5deg)}}
  @keyframes birdSwayWing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(7deg)}}
  @keyframes birdProudBob{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.025) translateY(-2px)}}
  @keyframes birdProudWing{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-6deg)}}
  @keyframes birdSpin{0%{transform:translateY(0) rotate(0deg) scaleY(1)}12%{transform:translateY(-7px) rotate(0deg) scaleY(1.05)}55%{transform:translateY(-15px) rotate(360deg) scaleY(1)}72%{transform:translateY(0) rotate(360deg) scaleY(0.9)}85%{transform:translateY(-4px) rotate(360deg) scaleY(1.02)}100%{transform:translateY(0) rotate(360deg) scaleY(1)}}
  /* idle mode */
  [data-logo-anim="idle"] .breathe{animation:shBreathe 4.2s ease-in-out infinite}
  [data-logo-anim="idle"] .blink{animation:shIdleBlink 5.4s ease-in-out infinite}
  /* live mode: always-on loops + shadow; .near/.hopping toggled by logo-bird.js */
  [data-logo-anim="live"] .breathe{animation:shBreathe 4.2s ease-in-out infinite}
  [data-logo-anim="live"] .blink{animation:shIdleBlink 5.4s ease-in-out infinite}
  [data-logo-anim="live"] .hero-logo-shadow{animation:shShadowIdle 4.2s ease-in-out infinite}
  [data-logo-anim="live"].near .wing{animation:shWave 1.9s ease-in-out infinite}
  .hero-logo.hopping .anim{animation:shHop .72s cubic-bezier(.34,1.1,.5,1) both}
  .hero-logo.hopping .blink{animation:shHopEyes .72s ease-out both}
  .hero-logo.hopping .hero-logo-shadow{animation:shShadowHop .72s cubic-bezier(.34,1.1,.5,1) both}
  /* variant playback: hover mode on :hover, auto mode on .playing (toggled by JS) */
  [data-logo-anim="hover"][data-logo-variant="hop"]:hover .anim,[data-logo-anim="auto"][data-logo-variant="hop"].playing .anim{animation:birdHop 1.3s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="hop"]:hover .wing,[data-logo-anim="auto"][data-logo-variant="hop"].playing .wing{animation:birdHopWing 1.3s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="hop"]:hover .blink,[data-logo-anim="auto"][data-logo-variant="hop"].playing .blink{animation:birdHappyBlink 1.3s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="tilt"] .lean,[data-logo-anim="auto"][data-logo-variant="tilt"] .lean{transition:transform .55s cubic-bezier(.22,1,.36,1);transform-origin:50% 78%}
  [data-logo-anim="hover"][data-logo-variant="tilt"]:hover .lean,[data-logo-anim="auto"][data-logo-variant="tilt"].playing .lean{transform:rotate(-9deg)}
  [data-logo-anim="hover"][data-logo-variant="tilt"]:hover .anim,[data-logo-anim="auto"][data-logo-variant="tilt"].playing .anim{animation:birdBreathe 2.6s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="tilt"]:hover .wing,[data-logo-anim="auto"][data-logo-variant="tilt"].playing .wing{animation:birdWave 1.2s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="tilt"]:hover .blink,[data-logo-anim="auto"][data-logo-variant="tilt"].playing .blink{animation:birdBlink 3s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="wave"]:hover .anim,[data-logo-anim="auto"][data-logo-variant="wave"].playing .anim{animation:birdStep 1s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="wave"]:hover .wing,[data-logo-anim="auto"][data-logo-variant="wave"].playing .wing{animation:birdWaveSlow 1.8s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="wave"]:hover .blink,[data-logo-anim="auto"][data-logo-variant="wave"].playing .blink{animation:birdBlink 3.4s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="sway"]:hover .anim,[data-logo-anim="auto"][data-logo-variant="sway"].playing .anim{animation:birdSway .72s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="sway"]:hover .wing,[data-logo-anim="auto"][data-logo-variant="sway"].playing .wing{animation:birdSwayWing .36s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="sway"]:hover .blink,[data-logo-anim="auto"][data-logo-variant="sway"].playing .blink{animation:birdBlink 2.6s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="puff"] .lean,[data-logo-anim="auto"][data-logo-variant="puff"] .lean{transition:transform .42s cubic-bezier(.22,1,.36,1);transform-origin:50% 100%}
  [data-logo-anim="hover"][data-logo-variant="puff"]:hover .lean,[data-logo-anim="auto"][data-logo-variant="puff"].playing .lean{transform:scale(1.1) translateY(-6px)}
  [data-logo-anim="hover"][data-logo-variant="puff"]:hover .anim,[data-logo-anim="auto"][data-logo-variant="puff"].playing .anim{animation:birdProudBob 2.8s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="puff"]:hover .wing,[data-logo-anim="auto"][data-logo-variant="puff"].playing .wing{animation:birdProudWing 2.6s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="puff"] .blink{transition:transform .3s ease}
  [data-logo-anim="hover"][data-logo-variant="puff"]:hover .blink,[data-logo-anim="auto"][data-logo-variant="puff"].playing .blink{transform:scaleY(0.72)}
  [data-logo-anim="hover"][data-logo-variant="spin"]:hover .anim,[data-logo-anim="auto"][data-logo-variant="spin"].playing .anim{animation:birdSpin 1.6s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="spin"]:hover .wing,[data-logo-anim="auto"][data-logo-variant="spin"].playing .wing{animation:birdHopWing 1.6s ease-in-out infinite}
  [data-logo-anim="hover"][data-logo-variant="spin"]:hover .blink,[data-logo-anim="auto"][data-logo-variant="spin"].playing .blink{animation:birdHappyBlink 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .hero-logo .breathe,.hero-logo .blink,.hero-logo .wing,.hero-logo .anim,.hero-logo .lean{animation:none!important;transition:none!important;transform:none!important}
  .hero-logo-shadow{animation:none!important}
}