/* =================== foundation-motion.css =================== */
/* Centralized keyframes to avoid duplicate animation-name declarations across blocks. */

@keyframes hcToastIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes hcSpin { to { transform: rotate(360deg); } }

@keyframes hcSkel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes hcShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes hcFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hcSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hcPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes hc-empty-float {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 10px 24px rgba(27, 20, 13, 0.1);
  }
  50% {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(27, 20, 13, 0.16);
  }
}

@keyframes hcFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes hzTileFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}

@keyframes hz-orb-float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3%, -4%); }
}

@keyframes hcPhSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes hcPhSpinR {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes hcPhDot {
  0%, 100% { r: 2; opacity: 0.85; }
  50% { r: 2.8; opacity: 1; }
}

@keyframes hcPhSchema {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes hc-svg-draw {
  from { stroke-dashoffset: 100%; }
  to { stroke-dashoffset: 0; }
}

@keyframes hc-float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes hc-pulse-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes hc-orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-r, 40px)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(var(--orbit-r, 40px)) rotate(-360deg); }
}

@keyframes hc-isearch-pop {
  from { transform: translateY(-12px) scale(0.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes hc-livechat-pop {
  from { transform: scale(0.92) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes hcHingeSwing {
  0%, 15% { transform: rotate(0deg); }
  45%, 60% { transform: rotate(-108deg); }
  92%, 100% { transform: rotate(0deg); }
}

@keyframes hcDrawerSlide {
  0%, 10% { transform: translateX(0); }
  45%, 55% { transform: translateX(140px); }
  90%, 100% { transform: translateX(0); }
}

@keyframes hcMotionFade {
  0%, 10% { opacity: 0.5; }
  45%, 55% { opacity: 0; }
  90%, 100% { opacity: 0.5; }
}

@keyframes hcLiftRaise {
  0%, 12% { transform: rotate(0deg); }
  42%, 58% { transform: rotate(-85deg); }
  88%, 100% { transform: rotate(0deg); }
}

@keyframes hcRailSlide {
  0%, 45% { transform: translateX(0); }
  55%, 100% { transform: translateX(110px); }
}

@keyframes hcTipOnPush {
  0%, 25% { transform: translate(0, 0); opacity: 0; }
  30%, 40% { transform: translate(0, -12px); opacity: 1; }
  45%, 50% { transform: translate(0, 0); opacity: 0.7; }
  55%, 100% { transform: translate(0, 0); opacity: 0; }
}

@keyframes hcTipOnSpring {
  0%, 48% { transform: translateX(0); }
  52%, 75% { transform: translateX(30px); }
  85%, 100% { transform: translateX(0); }
}

@keyframes hcCatGlow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.05); }
}

@keyframes hcCatPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.08); }
}

@keyframes hcCatArm {
  0%, 85% { transform: rotate(0deg); }
  92%, 100% { transform: rotate(-4deg); }
}

@keyframes hcCatAvntos {
  0%, 18% { transform: rotate(0deg); }
  48%, 62% { transform: rotate(-70deg); }
}

@keyframes hcCatTipOnDrawer {
  0%, 45% { transform: translateX(0); }
  55%, 70% { transform: translateX(32px); }
  80%, 100% { transform: translateX(0); }
}

@keyframes hcCatPush {
  0%, 30% { opacity: 0; transform: translate(0, 0); }
  40%, 50% { opacity: 1; transform: translate(0, -8px); }
  58%, 100% { opacity: 0; transform: translate(0, 0); }
}

@keyframes hcCatBearings {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

@keyframes hcCatShimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.85; }
}

@keyframes hcCatArrow {
  0%, 30% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(8px); }
  70%, 100% { opacity: 0.5; transform: translateX(0); }
}

@keyframes hcCatLed {
  0%, 100% { fill: #3d6b4f; }
  50% { fill: #7dbf96; }
}

@keyframes hcCatCable {
  0%, 100% { stroke-dashoffset: 0; }
  50% { stroke-dashoffset: 8; }
}

@keyframes hcCatSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes hc-hero-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

@keyframes hc-pcard-stock-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.4); }
}

@keyframes hc-fx-auto-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes hcCheckDraw {
  from { stroke-dashoffset: 100%; }
  to { stroke-dashoffset: 0; }
}

@keyframes hcTimelinePulse {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(214, 48, 49, 0.3); }
  50% { box-shadow: 0 4px 12px rgba(214, 48, 49, 0.5); }
}

@keyframes salePulse {
  0%, 100% { background: linear-gradient(90deg, transparent 0%, rgba(214, 48, 49, 0.05) 100%); }
  50% { background: linear-gradient(90deg, transparent 0%, rgba(214, 48, 49, 0.1) 100%); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes slideIn {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes hcModalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

@keyframes hcModalSlideUp {
  from { transform: translateY(40px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes hcTabSlide {
  from { width: 0; left: 50%; right: 50%; }
  to { width: 100%; left: 0; right: 0; }
}

@keyframes hcGlowPulse {
  0%, 100% { text-shadow: 0 0 20px rgba(139, 115, 85, 0.3); }
  50% { text-shadow: 0 0 30px rgba(139, 115, 85, 0.6); }
}

@keyframes hcPulseDot {
  0% { box-shadow: 0 0 0 0 rgba(61, 107, 79, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(61, 107, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 107, 79, 0); }
}

@keyframes hcModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hcModalRise {
  from { transform: translateY(20px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes hcBlogRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes hcOrbitFloat {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.4); opacity: 1; }
}

@keyframes hcHaloPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes hc-acc-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hc-isearch-shimmer {
  0% { background-position: -220px 0; }
  100% { background-position: calc(100% + 220px) 0; }
}