/* Home motion accents live inside the existing blocks; no section dimensions change. */
.hm-route-step { --hm-step: 0; }
.hm-route-track {
  position: absolute;
  inset: auto 24px 14px;
  height: 2px;
  background: rgba(193, 42, 42, .12);
  overflow: hidden;
  pointer-events: none;
}
.hm-route-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #c12a2a;
  transform: scaleX(0);
  transform-origin: left;
}
.hm-route-step.hm-play .hm-route-track::before {
  animation: hmRouteDraw 1.1s cubic-bezier(.2, .7, .2, 1) calc(var(--hm-step) * .7s) both;
}
.hm-route-step:hover .hm-route-track::before,
.hm-route-step:focus-visible .hm-route-track::before { background: currentColor; }
.hn-route-inner a:focus-visible { outline: 2px solid #c12a2a; outline-offset: -4px; }

.home-next .product-icon-wrap.hm-product-stage { position: relative; }
.hm-product-blueprint {
  position: absolute;
  inset: -9px;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  max-width: none;
  fill: none;
  stroke: #c12a2a;
  stroke-width: 1;
  overflow: visible;
  pointer-events: none;
  opacity: .5;
}
.hm-product-blueprint .hm-dimension { stroke: #a1a1a1; stroke-width: .65; }
.hm-product-blueprint .hm-product-ring { stroke-dasharray: 100; stroke-dashoffset: 0; }
.hm-product-stage > img { position: relative; z-index: 1; }
.hm-product-stage.hm-play .hm-product-ring {
  animation: hmRingDraw 2s cubic-bezier(.2, .7, .2, 1) both;
}
.hm-product-stage.hm-play .hm-orbit {
  transform-origin: 60px 60px;
  animation: hmProductOrbit 3.6s cubic-bezier(.2, .7, .2, 1) both;
}
.hm-product-stage.hm-play > img { animation: hmProductLift 3.6s ease-in-out both; }
.product-line-card:hover .hm-product-blueprint,
.product-line-card:focus-within .hm-product-blueprint { opacity: .9; }

.home-next .evelx-equipment-banner { isolation: isolate; }
.home-next .evelx-equipment-banner::after { display: none; }
/* The old frosted banner would blur the new linework behind its text panel. */
.home-next .evelx-equipment-banner > .wapper1 { backdrop-filter: none; }
.hm-factory-motion {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  color: #f2e3d3;
  contain: layout paint;
  mask-image: linear-gradient(90deg, #000 0%, #000 14%, transparent 27%, transparent 73%, #000 86%, #000 100%);
}
.hm-factory-drawing {
  position: absolute;
  top: 50%;
  width: clamp(180px, 21vw, 320px);
  height: 100%;
  max-height: 260px;
  transform: translateY(-50%);
  opacity: .6;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
}
.hm-factory-drawing--layers { left: max(0px, calc((100vw - 1500px) / 2)); }
.hm-factory-drawing--ball { right: max(0px, calc((100vw - 1500px) / 2)); }
.hm-factory-drawing .hm-construction { opacity: .25; stroke-dasharray: 3 6; }
.hm-factory-drawing .hm-panel { stroke-dasharray: 100; stroke-dashoffset: 0; }
.hm-factory-drawing .hm-material { stroke: #ea726c; }
.hm-factory-drawing .hm-registration { opacity: .5; }
.hm-factory-motion.hm-play .hm-panel { animation: hmRingDraw 2.8s ease .4s both; }
.hm-factory-motion.hm-play .hm-layer-top { animation: hmLayerTop 3.8s cubic-bezier(.2,.7,.2,1) both; }
.hm-factory-motion.hm-play .hm-layer-bottom { animation: hmLayerBottom 3.8s cubic-bezier(.2,.7,.2,1) both; }
.hm-factory-motion.hm-play .hm-ball-outline { animation: hmBallTurn 3.8s cubic-bezier(.2,.7,.2,1) both; transform-origin: 140px 130px; }
.hm-replay {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #fff;
  background: rgba(10, 10, 10, .3);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.hm-replay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.hm-replay:hover { background: #a82626; border-color: #e0a2a2; }
.hm-replay:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hm-replay[hidden] { display: none; }

/* Finite motion (under five seconds) replays only after an intentional interaction. */
@keyframes hmRouteDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hmRingDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes hmProductOrbit { from { transform: rotate(-160deg); } to { transform: rotate(0deg); } }
@keyframes hmProductLift { 0%, 100% { translate: 0 0; } 45% { translate: 0 -4px; } }
@keyframes hmLayerTop { 0% { translate: 0 -20px; opacity: .25; } 65%, 100% { translate: 0 0; opacity: 1; } }
@keyframes hmLayerBottom { 0% { translate: 0 20px; opacity: .25; } 65%, 100% { translate: 0 0; opacity: 1; } }
@keyframes hmBallTurn { 0% { transform: rotate(-24deg); opacity: .2; } 100% { transform: rotate(0); opacity: 1; } }

.hm-paused, .hm-paused *, .hm-paused::before, .hm-paused *::before { animation-play-state: paused !important; }
@media (max-width: 1023px) {
  .hm-route-track { left: 12px; right: 12px; bottom: 8px; }
  .hm-product-blueprint { inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); }
  .hm-factory-drawing { width: 150px; opacity: .28; }
  .hm-factory-drawing--layers { left: -45px; }
  .hm-factory-drawing--ball { right: -40px; }
  .hm-replay { top: 4px; right: 6px; width: 24px; height: 24px; }
}
@media (max-width: 520px) {
  .hm-factory-drawing { opacity: .18; }
  .hm-factory-drawing--layers { left: -65px; }
  .hm-factory-drawing--ball { right: -65px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-play *, .hm-play *::before { animation: none !important; }
  .hm-route-track::before { transform: scaleX(1); }
  .hm-replay { display: none; }
}