/* =========================================================
   ECOPLAST — реакция на наведение
   Подключается последним: правила здесь дополняют базовые состояния
   из style.css / page.css / product.css и страниц.

   Всё завёрнуто в `@media (hover:hover) and (pointer:fine)`. На тачскринах
   :hover «залипает» после тапа — карточка осталась бы приподнятой до
   следующего касания, поэтому там эффектов нет вовсе.

   Анимируем только transform, opacity, тени и цвета — раскладку это
   не пересчитывает. При `prefers-reduced-motion: reduce` глобальное
   правило в style.css обнуляет длительности.
   ========================================================= */

@media (hover:hover) and (pointer:fine){

  /* ---------- общий ритм ---------- */
  :root{
    --hv: .24s cubic-bezier(.22,.75,.3,1);
  }

  /* ---------- карточки ---------- */
  .pcard,.whycard,.step,.ucard,.srv-card,.fcard,.tstep,.gstep,.gcards li,
  .opt,.cmp,.ptype,.work,.chips a,.wfilter__btn,.pick,.seg,.rcard{
    transition:
      transform var(--hv),
      box-shadow var(--hv),
      background-color .18s ease,
      border-color .18s ease;
  }

  /* Карточка растёт целиком — вместе с картинкой внутри. Отдельно
     масштабировать изображение нельзя: оно упирается в края своего
     контейнера и срезается.
     !important — потому что появление при скролле держит на этих же
     элементах свой transform; без него карточка не поднималась бы. */
  .pcard:hover,.whycard:hover,.step:hover,.ucard:hover,.srv-card:hover,.fcard:hover,
  .tstep:hover,.gstep:hover,.gcards li:hover,.opt:hover,.work:hover,
  .ptype:hover,.rcard:hover{
    transform:translateY(-3px) scale(1.012) !important;
    box-shadow:var(--shadow-card-hover);
  }
  /* У карточек услуг текст и фотография лежат в отдельных слоях.
     Масштабирование всей карточки даёт субпиксельный шов между ними,
     поэтому здесь сохраняем подъём и тень без scale. */
  .srv-card:hover{transform:translateY(-3px) !important}
  .chips a:hover{transform:translateY(-3px) scale(1.02) !important;box-shadow:var(--shadow-card-hover)}
  /* панели сравнения во всю ширину — масштаб на них читался бы как рывок */
  .cmp:hover{transform:translateY(-2px) !important;box-shadow:var(--shadow-card-hover)}

  /* полупрозрачные карточки на фото становятся плотнее */
  .gstep:hover,.gcards li:hover,.whycard:hover{background:#fff}
  .opt:hover{border-color:#bcdcf0;background:#fbfdff}
  .guses--card .guse:hover{background:#eef6fc;box-shadow:var(--shadow-card)}

  /* ---------- стрелки и шевроны ---------- */
  .opt__chev,.ptype__go,.fcard__go,.work__go,.srow__chev,.mrow__chev,
  .btn__chev,.pcard__foot .btn svg,.mpromo__btn svg{
    transition:transform var(--hv),background-color .18s ease,color .18s ease;
  }
  .opt:hover .opt__chev,
  .work:hover .work__go,
  .pcard:hover .pcard__foot .btn svg,
  .mpromo:hover .mpromo__btn svg{transform:translateX(4px)}
  .ptype:hover .ptype__go,.fcard:hover .fcard__go{
    transform:translateX(3px);
    background:#d9ebfa;
  }
  .srow:hover .srow__chev,.mrow:hover .mrow__chev{transform:translateX(3px)}

  /* ---------- иконки внутри карточки ---------- */
  .ico-box,.ico-circle{transition:background-color .18s ease,color .18s ease}
  .pcard:hover .ico-circle,.opt:hover .ico-circle,.gcards li:hover .ico-circle,
  .step:hover .ico-circle,.whycard:hover .ico-circle,.guse:hover .ico-circle{
    background:#d8eafa;
  }

  /* ---------- кнопки ---------- */
  .btn{transition:background var(--hv),color .18s,border-color .18s,box-shadow var(--hv),transform var(--hv)}
  .btn--primary:hover{
    background:var(--blue-d);
    transform:translateY(-2px) !important;
    box-shadow:0 12px 24px -12px rgba(26,128,196,.65);
  }
  .btn--ghost:hover,.btn--outline:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 10px 22px -14px rgba(18,42,66,.4);
  }
  .btn--teal:hover{transform:translateY(-2px) !important;box-shadow:0 12px 24px -12px rgba(1,92,113,.6)}
  .btn--wa:hover{transform:translateY(-2px) !important;box-shadow:0 12px 24px -12px rgba(37,211,102,.6)}
  /* стрелка в кнопке подаётся вперёд */
  .btn:hover .btn__chev,.btn:hover > svg:last-child{transform:translateX(3px)}
  .btn:active{transform:translateY(0)}
  .btn--primary:active{transform:translateY(1px)}

  /* круглые кнопки-мессенджеры */
  .rbtn{transition:background .18s ease,transform var(--hv),box-shadow var(--hv)}
  .rbtn:hover{transform:translateY(-2px) scale(1.04) !important;box-shadow:0 10px 20px -12px rgba(18,42,66,.55)}

  /* телефон и WhatsApp в шапке */
  .wa-pill{transition:background .18s ease,transform var(--hv)}
  .wa-pill:hover{transform:translateY(-1px) !important}
  .header__phone b{transition:color .18s ease}
  .header__phone:hover b{color:var(--blue)}

  /* ---------- ссылки с подчёркиванием ---------- */
  .footer__nav a,.footer__legal a,.crumbs a{
    background-image:linear-gradient(currentColor,currentColor);
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:0 1px;
    transition:background-size var(--hv),color .18s ease;
  }
  .footer__nav a:hover,.footer__legal a:hover,.crumbs a:hover{background-size:100% 1px}

  /* ---------- поля формы ---------- */
  .pick:hover{border-color:#c6dcec;background:#fbfdff}
  .seg:hover{border-color:#c6dcec}
  .drop{transition:border-color .18s ease,background .18s ease,transform var(--hv)}
  .drop:hover{transform:translateY(-1px) !important}

  /* ---------- строки меню ---------- */
  .mrow,.srow,.mpromo{transition:background-color .18s ease,transform var(--hv)}
  .mpromo:hover{transform:translateY(-2px) !important}
}