/* Лёгкая анимация сайта. Только transform и opacity, всё отключается при «уменьшить движение». */

/* Иконки соцсетей: зелёный цвет и подъём на 2px */
.socials .icon-button{transition:color .2s ease,transform .2s ease,background-color .2s ease}
.socials .icon-button:hover,.socials .icon-button:focus-visible{color:var(--green);transform:translateY(-2px)}
.socials .icon-button:active{transform:translateY(0)}

/* Карточка товара открывается кликом по любому месту */
.product-card{cursor:pointer}
.product-card .product-photo img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}

@media (prefers-reduced-motion:no-preference){
  /* Карточки: подъём и плавное приближение фото */
  .product-card{transition:border-color .2s,transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .product-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--green) 45%,transparent)}
  .product-card:hover .product-photo img{transform:scale(1.04)}

  /* Стрелка в кнопках чуть сдвигается вперёд */
  .button svg{transition:transform .25s ease}
  .button:hover svg{transform:translateX(3px)}

  /* Видео: обложка приближается, кнопка мягко «дышит» */
  .work-video .video-poster img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .work-video:hover .video-poster img{transform:scale(1.03)}
  .play-button{animation:play-pulse 2.6s ease-out infinite}
  .play-button:hover{animation:none}

  /* Появление при прокрутке: элементы всплывают по очереди */
  .m-item{opacity:0;transform:translateY(22px);transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--m-delay,0ms)}
  .m-item.m-in{opacity:1;transform:none}
  .m-photo.m-item img{transform:scale(1.06);transition:transform 1.2s cubic-bezier(.2,.7,.2,1);transition-delay:var(--m-delay,0ms)}
  .m-photo.m-item.m-in img{transform:none}

  /* Зелёная черта у надзаголовка вырастает слева направо */
  .section-heading .eyebrow.m-item:before{transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.2,.7,.2,1) .15s}
  .section-heading .eyebrow.m-item.m-in:before{transform:scaleX(1)}
}

@keyframes play-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 40%,transparent)}
  70%{box-shadow:0 0 0 22px color-mix(in srgb,var(--green) 0%,transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 0%,transparent)}
}

/* Подсказка «листайте» для блоков с прокруткой вбок на телефоне */
.swipe-hint-host{position:relative}
.swipe-hint{position:absolute;left:50%;top:50%;z-index:3;display:flex;align-items:center;gap:6px;padding:10px 16px;border:1px solid color-mix(in srgb,var(--green) 55%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--bg) 82%,transparent);color:var(--ink);pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.92);transition:opacity .35s ease,transform .35s ease;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.swipe-hint.is-shown{opacity:1;transform:translate(-50%,-50%) scale(1)}
.swipe-hint svg{display:block}
.swipe-hint .swipe-hand{color:var(--green)}
.swipe-hint .swipe-arrow{opacity:.55}
@media (prefers-reduced-motion:no-preference){
  .swipe-hint.is-shown .swipe-hand{animation:swipe-hand 1.3s ease-in-out infinite}
  .swipe-hint.is-shown .swipe-arrow.left{animation:swipe-arrow-left 1.3s ease-in-out infinite}
  .swipe-hint.is-shown .swipe-arrow.right{animation:swipe-arrow-right 1.3s ease-in-out infinite}
}
@keyframes swipe-hand{0%,100%{transform:translateX(9px) rotate(6deg)}50%{transform:translateX(-9px) rotate(-6deg)}}
@keyframes swipe-arrow-left{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes swipe-arrow-right{0%,100%{opacity:1}50%{opacity:.25}}