/* ============================================================
   MARKETING PAGE — АНИМАЦИИ
   Только opacity/transform/filter/transition/animation.
   Раскладка и цвета — в marketing-styles.css.
   HTML не меняется; классы .mk-in / .mk-hero-in добавляет JS
   (marketing-animations.js) по IntersectionObserver.
   ============================================================ */

:root{
  --mk-ease-out: cubic-bezier(.16,1,.3,1);
  --mk-ease: cubic-bezier(.22,.61,.36,1);
  --mk-pop: cubic-bezier(.2,1.4,.4,1);
}

@media (prefers-reduced-motion: reduce){
  .marketing-page, .marketing-page *{
    animation: none !important;
    transition: none !important;
  }
  .marketing-page{ opacity:1 !important; }
  .marketing-page *{ opacity:1 !important; transform:none !important; filter:none !important; }
}

/* ---------- 1. Текстовые секции — заход ---------- */
.wrapSingleCR,
.marketing-section,
.marketing-cta{
  opacity: 0;
  transform: translateY(64px);
}
.wrapSingleCR.mk-in,
.marketing-section.mk-in,
.marketing-cta.mk-in{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.1s var(--mk-ease-out), transform 1.1s var(--mk-ease-out);
}

/* ---------- 2. Карточки / сервисы / шаги — "поп" с блюром ---------- */
.marketing-card,
.marketing-service,
.marketing-step{
  opacity: 0;
  transform: translateY(56px) scale(.9);
  filter: blur(7px);
}
.marketing-card.mk-in,
.marketing-service.mk-in,
.marketing-step.mk-in{
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity .8s var(--mk-ease-out),
    filter .8s var(--mk-ease-out),
    transform .9s var(--mk-pop);
}

.marketing-cards .marketing-card:nth-child(1){ transition-delay: .00s; }
.marketing-cards .marketing-card:nth-child(2){ transition-delay: .12s; }
.marketing-cards .marketing-card:nth-child(3){ transition-delay: .24s; }
.marketing-cards .marketing-card:nth-child(4){ transition-delay: .36s; }
.marketing-cards .marketing-card:nth-child(5){ transition-delay: .48s; }
.marketing-cards .marketing-card:nth-child(6){ transition-delay: .60s; }

.marketing-services .marketing-service:nth-child(1){ transition-delay: .00s; }
.marketing-services .marketing-service:nth-child(2){ transition-delay: .09s; }
.marketing-services .marketing-service:nth-child(3){ transition-delay: .18s; }
.marketing-services .marketing-service:nth-child(4){ transition-delay: .27s; }
.marketing-services .marketing-service:nth-child(5){ transition-delay: .36s; }
.marketing-services .marketing-service:nth-child(6){ transition-delay: .45s; }

.marketing-steps .marketing-step:nth-child(1){ transition-delay: .00s; }
.marketing-steps .marketing-step:nth-child(2){ transition-delay: .15s; }
.marketing-steps .marketing-step:nth-child(3){ transition-delay: .30s; }
.marketing-steps .marketing-step:nth-child(4){ transition-delay: .45s; }

/* ---------- 3. HERO — вход при загрузке, centered scale-in заголовка, параллакс фона ---------- */
.marketing-hero{
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.marketing-hero::before{
  content:"";
  position:absolute;
  inset:-30% -15%;
  z-index:-1;
  /* background:
    radial-gradient(55% 50% at 18% 20%, rgba(110,110,255,.16), transparent 60%),
    radial-gradient(42% 42% at 85% 15%, rgba(255,140,90,.14), transparent 60%); */
  pointer-events:none;
  transform: translateY(var(--mk-parallax-y, 0px)) scale(var(--mk-parallax-s, 1));
  will-change: transform;
}

.marketing-hero .marketing-label{
  opacity: 0;
  transform: translateY(34px);
}
.marketing-hero p{
  opacity: 0;
  transform: translateY(42px);
}
.marketing-hero h1,
.cntnrCRHead > .lnng{
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
}

/* JS добавляет .mk-hero-in после гарантированной отрисовки скрытого
   состояния — так анимация не "сгорает" ещё до первой краски страницы,
   даже если загрузка остальных ресурсов сайта занимает время. */
.marketing-hero .marketing-label.mk-in{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s var(--mk-ease-out), transform 1s var(--mk-ease-out);
}
.marketing-hero p.mk-in{
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.1s var(--mk-ease-out), transform 1.1s var(--mk-ease-out);
}
.marketing-hero h1.mk-in,
.cntnrCRHead > .lnng.mk-in{
  opacity: 1;
  transform: scale(1);
  transition: transform 1.4s var(--mk-ease-out), opacity 1.4s var(--mk-ease-out);
}

/* ---------- 4. Hover-акценты ---------- */
.marketing-card{
  transition:
    opacity .8s var(--mk-ease-out),
    filter .8s var(--mk-ease-out),
    transform .9s var(--mk-pop),
    box-shadow .4s var(--mk-ease);
}
.marketing-card.mk-in:hover,
.marketing-card.mk-in:focus-within{
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 24px 40px -18px rgba(20,20,40,.32);
}
.marketing-card a{
  position: relative;
  display: inline-block;
  transition: transform .35s var(--mk-ease);
}
.marketing-card a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background: currentColor;
  transition: right .35s var(--mk-ease-out);
}
.marketing-card:hover a::after{ right:0; }
.marketing-card:hover a{ transform: translateX(4px); }

.marketing-service{
  transition:
    opacity .8s var(--mk-ease-out),
    filter .8s var(--mk-ease-out),
    transform .9s var(--mk-pop);
}
.marketing-service.mk-in:hover{ transform: translateY(-6px) scale(1.02); }

.marketing-steps{ position: relative; }
.marketing-steps::before{
  content:"";
  position:absolute; left:0; right:0; top:14px; height:2px;
  background: currentColor; opacity:.2;
  transform-origin:left center; transform: scaleX(0);
  transition: transform 1.3s var(--mk-ease-out);
}
.marketing-steps.mk-in::before{ transform: scaleX(1); }

.marketing-step span{
  display: inline-block;
  transition: transform .5s var(--mk-pop);
}
.marketing-step.mk-in:hover span{ transform: scale(1.2) rotate(-3deg); }

/* ---------- 5. Кнопка CTA — "дышит" и реагирует ---------- */
.marketing-button{
  position: relative;
  transition: transform .35s var(--mk-ease), box-shadow .35s var(--mk-ease);
  animation: mkPulse 2.6s ease-in-out infinite;
}
@keyframes mkPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  50%{ box-shadow: 0 10px 26px -10px rgba(0,0,0,.35); }
}
.marketing-button:hover{
  transform: translateY(-4px) scale(1.05);
  animation-play-state: paused;
}
.marketing-button:active{ transform: translateY(-1px) scale(.97); }

/* /public_html/elite/assts/effects.css */
@media (prefers-reduced-motion: reduce) {
  .wrapSingleCR, .cntnrCRHead > .lnng { opacity: 1 !important; transform: none !important; transition: none !important; }
}