/* ============================================================
   Глобальные анимации и эффекты сайта specprom_2026.
   Подключается в <head>. Работает вместе с наблюдателем в footer.php.
   Конвенции для страниц:
     class="reveal"           — плавное появление секции при скролле
     class="reveal reveal-2"  — с задержкой (2/3/4)
     class="reveal-stagger"   — каскадное появление прямых детей
     class="fx-zoom"          — контейнер с зумом фонового изображения при hover
   Всегда уважает prefers-reduced-motion.
   ============================================================ */

html{scroll-behavior:smooth}

/* Заглушка вместо текста «фото» — намеренный паттерн, не «битая картинка» */
.sp-ph{
  position:relative;
  background-color:var(--photo-bg, #f3f5f6) !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(20,126,129,.1), transparent 70%),
    linear-gradient(160deg, var(--photo-bg, #f3f5f6) 0%, var(--muted-bg, #eef2f5) 100%) !important;
  background-size:auto !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  color:transparent !important;
  font-size:0 !important;
}
.sp-ph::before{
  content:"";
  position:absolute;
  inset:24%;
  opacity:.22;
  background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23147e81' stroke-width='1.8'%3E%3Cpath d='M12 44V28l10-8h20l10 8v16a4 4 0 0 1-4 4H16a4 4 0 0 1-4-4z'/%3E%3Ccircle cx='32' cy='34' r='7'/%3E%3Cpath d='M22 20h6l2-4h4l2 4h6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sp-ph::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(20,126,129,.06);
  pointer-events:none;
}

/* ---- Появление при скролле ---- */
.reveal{opacity:0;transform:translateY(22px);
    transition:opacity .6s cubic-bezier(.16,.84,.44,1),transform .6s cubic-bezier(.16,.84,.44,1)}
.reveal.is-in{opacity:1;transform:none}
.reveal-2{transition-delay:.08s}
.reveal-3{transition-delay:.16s}
.reveal-4{transition-delay:.24s}

/* каскад для детей — на transition (надёжнее анимации: всегда доходит до финала) */
.reveal-stagger > *{opacity:0;transform:translateY(16px);
    transition:opacity .55s cubic-bezier(.16,.84,.44,1),transform .55s cubic-bezier(.16,.84,.44,1)}
.reveal-stagger.is-in > *{opacity:1;transform:none}
.reveal-stagger.is-in > *:nth-child(1){transition-delay:.02s}
.reveal-stagger.is-in > *:nth-child(2){transition-delay:.07s}
.reveal-stagger.is-in > *:nth-child(3){transition-delay:.12s}
.reveal-stagger.is-in > *:nth-child(4){transition-delay:.17s}
.reveal-stagger.is-in > *:nth-child(5){transition-delay:.22s}
.reveal-stagger.is-in > *:nth-child(6){transition-delay:.27s}
.reveal-stagger.is-in > *:nth-child(7){transition-delay:.32s}
.reveal-stagger.is-in > *:nth-child(8){transition-delay:.37s}
@keyframes fxUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- Микро-взаимодействия ---- */
/* нажатие кнопок */
.tpl-btn,.btn{transition:background .16s ease,box-shadow .16s ease,transform .12s ease,color .16s ease}
.tpl-btn:active,.btn:active,.prod__btn:active,.sc-card__btn:active,.so-sum__btn:active{transform:translateY(1px)}

/* зум фонового изображения при наведении на контейнер */
.fx-zoom{overflow:hidden}
.fx-zoom > .fx-zoom__img,.fx-zoom .fx-img{transition:transform .5s cubic-bezier(.16,.84,.44,1)}
.fx-zoom:hover > .fx-zoom__img,.fx-zoom:hover .fx-img{transform:scale(1.06)}

/* мягкая подсветка ссылок-«ещё» */
.hp__more,.works__all,.cs-group__all{transition:color .15s,transform .15s}
.hp__more:hover,.works__all:hover{transform:translateX(2px)}

/* аккуратный фокус для доступности */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
    outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* появление модалок/поповеров чуть живее уже задано в компонентах */

/* ---- Уважение к настройке «меньше движения» ---- */
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .reveal,.reveal-stagger > *,.reveal-stagger.is-in > *{
        opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}
    .fx-zoom:hover > .fx-zoom__img,.fx-zoom:hover .fx-img{transform:none}
}