/*  Движение: анимации, преходи, reduced-motion.  */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
.hero-copy > .eyebrow,
.hero-copy > h1,
.hero-copy > p {
  animation: entrance var(--t-base) var(--ease) both;
}
.hero-copy > h1 {
  animation-delay: var(--stagger);
}
.hero-copy > p {
  animation-delay: calc(var(--stagger) * 2);
}
.ticker:hover .ticker-track {
  animation-play-state: paused;
}
/* Hover/active: само transform и opacity (MOT-03). Сянката на .button е в ::after (opacity); останалите промени на цвят са без преход. */
.button {
  position: relative;
  isolation: isolate;
  transition: transform var(--t-fast) var(--ease);
}
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 5px 16px var(--shadow-1);
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.button:hover::after {
  opacity: 1;
}
.button:active::after {
  opacity: 0;
}
.button > span {
  transition: transform var(--t-fast) var(--ease);
}
/* MOT-06: картите се появяват само при първото показване на каталога (app.js слага data-first-show и го маха след края на входа), не при всеки render() (търсене, филтър, смяна на езика). */
#products[data-first-show] .product-card {
  animation: card-enter var(--t-slow) var(--ease) both;
}
#products[data-first-show] .product-card:nth-child(2) {
  animation-delay: var(--stagger);
}
#products[data-first-show] .product-card:nth-child(3) {
  animation-delay: calc(var(--stagger) * 2);
}
.add {
  transition: transform var(--t-fast) var(--ease);
}
dialog[open] {
  animation: dialog-enter var(--t-base) var(--ease);
}
#cart[open] {
  animation: drawer-enter var(--t-base) var(--ease);
}
#add-panel.enter {
  animation: panel-enter var(--t-base) var(--ease);
}
dialog[open]::backdrop {
  animation: backdrop-enter var(--t-base) var(--ease);
}
.bag.cart-pulse #count {
  animation: cart-pop var(--t-slow) var(--ease);
}
.art-bottom a {
  transition: transform var(--t-fast) var(--ease);
}
@keyframes entrance {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes dialog-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes drawer-enter {
  from {
    opacity: 0;
    transform: translateX(48px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes panel-enter {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes cart-pop {
  50% {
    transform: scale(1.3);
  }
}
.motion-off *,
.motion-off *:before,
.motion-off *:after {
  animation: none !important;
  transition: none !important;
}
.motion-off {
  scroll-behavior: auto;
}
.motion-off .hero-art img {
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .hero-art img {
    will-change: auto;
  }
}
html.motion-off .equipment-card {
  transition: none;
}
html.motion-off .equipment-card:hover {
  transform: none;
}
html.motion-off .product-card,
html.motion-off .equipment-card,
html.motion-off .value-card,
html.motion-off .rig-card {
  transition: none;
}
/* Движещи се CMY ореоли на фона (VIS-CMY-BG „AB“): само transform/opacity (композитор), без анимиран blur/filter.
   Слоевете и началните им позиции са в theme.css; различни цикъл и фаза, за да не се синхронизират.
   Спират с motion-off (бутонът и prefers-reduced-motion през motion.js) и с @media (prefers-reduced-motion: reduce) по-горе в този файл (резерва без JS):
   ореолите остават в началната си позиция със статична opacity от theme.css (0,9; на ≤600 px 0,65) и без will-change (MOT-01, MOT-03).
   На ≤600 px – два ореола, по-слаби и с по-малък ход (keyframes с -s). */
body:before {
  animation: halo-drift-c var(--dur-halo-c) ease-in-out -11s infinite alternate;
  will-change: transform, opacity;
}
body:after {
  animation: halo-drift-m var(--dur-halo-m) ease-in-out -33s infinite alternate;
  will-change: transform, opacity;
}
html:before {
  animation: halo-drift-y var(--dur-halo-y) ease-in-out -22s infinite alternate;
  will-change: transform, opacity;
}
html.motion-off:before {
  animation: none !important;
}
html.motion-off:before,
html.motion-off body:before,
html.motion-off body:after {
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  html:before,
  body:before,
  body:after {
    will-change: auto;
  }
}
@keyframes halo-drift-c {
  from {
    transform: translate3d(10vw, -6vh, 0) scale(1);
    opacity: 0.85;
  }
  to {
    transform: translate3d(-26vw, 14vh, 0) scale(1.14);
    opacity: 1;
  }
}
@keyframes halo-drift-m {
  from {
    transform: translate3d(-8vw, 12vh, 0) scale(1.1);
    opacity: 1;
  }
  to {
    transform: translate3d(24vw, -14vh, 0) scale(0.95);
    opacity: 0.8;
  }
}
@keyframes halo-drift-y {
  from {
    transform: translate3d(12vw, 8vh, 0) scale(0.95);
    opacity: 0.8;
  }
  to {
    transform: translate3d(-26vw, -14vh, 0) scale(1.12);
    opacity: 1;
  }
}
/* ≤600 px: по-слаби и с по-малък ход (отделни keyframes без var()/calc – по-евтино за стила) */
@keyframes halo-drift-c-s {
  from {
    transform: translate3d(6vw, -4vh, 0) scale(1);
    opacity: 0.55;
  }
  to {
    transform: translate3d(-15vw, 8vh, 0) scale(1.08);
    opacity: 0.75;
  }
}
@keyframes halo-drift-m-s {
  from {
    transform: translate3d(-5vw, 7vh, 0) scale(1.06);
    opacity: 0.75;
  }
  to {
    transform: translate3d(14vw, -8vh, 0) scale(0.97);
    opacity: 0.55;
  }
}
@media (max-width: 600px) {
  body:before {
    animation-name: halo-drift-c-s;
  }
  body:after {
    animation-name: halo-drift-m-s;
  }
}