/* ============================================================================
   ECOMOBILE — слой визуальных эффектов  eff.01
   Премиальная скролл-анимация в духе ЖК-сайтов: parallax, мягкое появление
   блоков со stagger, clip-reveal картинок, счётчики, прогресс-бар.
   БЕЗОПАСНОСТЬ:
   - все скрытия завязаны на класс .eff-ready (его ставит JS только если есть
     IntersectionObserver и не включён reduced-motion) → без JS контент виден;
   - не трогает существующий .reveal, слайдшоу героя, меню и формы;
   - только transform/opacity/clip-path (композитор, без reflow);
   - полностью отключается при prefers-reduced-motion.
   Переменные сайта переиспользуются с фолбэками.
   ========================================================================== */

:root { --eff-ease: cubic-bezier(.22,.61,.36,1); }

/* ---- прогресс-бар прокрутки ---- */
.eff-progress{
  position:fixed; inset-block-start:0; inset-inline-start:0; height:3px; width:0;
  z-index:1000; pointer-events:none;
  background:linear-gradient(90deg,#0F6B3C,#1FA85C);
  transition:width .12s linear;
}

/* плавный переход к якорям */
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

/* ---- появление блоков (только при .eff-ready) ---- */
.eff-ready .eff{
  opacity:0; will-change:opacity,transform;
  transition:opacity .85s var(--ease,var(--eff-ease)),
             transform .85s var(--ease,var(--eff-ease));
}
.eff-ready .eff--up   { transform:translateY(46px); }
.eff-ready .eff--left { transform:translateX(-52px); }
.eff-ready .eff--right{ transform:translateX(52px); }
.eff-ready .eff--scale{ transform:scale(.92); }
.eff-ready .eff--blur { filter:blur(12px);
  transition:opacity .95s var(--ease,var(--eff-ease)),
             transform .95s var(--ease,var(--eff-ease)),
             filter .95s var(--ease,var(--eff-ease)); }
.eff-ready .eff.eff-in{ opacity:1; transform:none; filter:none; }

/* заголовки и надзаголовки «выезжают» снизу (transform-only — всегда видимы) */
.eff-ready .eff-h{ transform:translateY(40px); will-change:transform;
  transition:transform 1s var(--ease,var(--eff-ease)); }
.eff-ready .eff-h.eff-in{ transform:none; }

/* родной .reveal сайта — плавнее и чуть выразительнее (только когда эффекты включены) */
.eff-ready .reveal{ transition:opacity .9s var(--ease,var(--eff-ease)),
                               transform .9s var(--ease,var(--eff-ease)); }
.eff-ready .reveal:not(.is-visible){ transform:translateY(44px); }

/* ---- clip-reveal картинок ---- */
.eff-ready .eff-img{
  clip-path:inset(0 0 100% 0); transform:scale(1.07); filter:blur(6px);
  will-change:clip-path,transform,filter;
  transition:clip-path 1.05s var(--ease,var(--eff-ease)),
             transform 1.25s var(--ease,var(--eff-ease)),
             filter 1.1s var(--ease,var(--eff-ease));
}
.eff-ready .eff-img.eff-in{ clip-path:inset(0 0 0 0); transform:scale(1); filter:none; }

/* ---- parallax ---- */
.eff-ready .eff-parallax{ will-change:transform; }

/* ---- hero parallax (главная и внутренние страницы) ---- */
.eff-ready .eff-hero-clip{ overflow:hidden; }
.eff-ready .eff-hero-img{
  will-change:transform; transform-origin:center center; backface-visibility:hidden;
  transform:translate3d(0,0,0) scale(1.25);
}

/* ---- hover-lift на карточках ---- */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .eff-lift{ transition:transform .45s var(--ease,var(--eff-ease)),
                        box-shadow .45s var(--ease,var(--eff-ease)); }
  .eff-lift:hover{ transform:translateY(-5px);
                   box-shadow:0 18px 50px rgba(11,31,20,.14); }
}

/* ---- полное отключение при reduced-motion ---- */
@media (prefers-reduced-motion:reduce){
  .eff, .eff-img{ opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important; }
  .eff-h{ transform:none !important; }
  .eff-hero-img{ transform:none !important; }
  .eff-progress{ display:none; }
}