/* Arocell: анімація (hero + поява блоків).
   Вимкнути: у index.html поставити <html ... data-motion="off"> або прибрати рядки з motion.css і motion.js.
   Працює лише коли JS додав клас .motion-ready і користувач не просив «Зменшити рух». */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- HERO: фон, що живе ---------- */
  .motion-ready .hero{position:relative;overflow:hidden;isolation:isolate;
    background:linear-gradient(120deg,#e3f4f3 0%,#eef0f6 35%,#fbeef3 65%,#e6f5f4 100%);
    background-size:300% 300%;animation:ar-grad 28s ease-in-out infinite}
  .motion-ready .hero-in{position:relative;z-index:1}
  .ar-blobs{position:absolute;inset:0;z-index:0;pointer-events:none}
  .ar-blob{position:absolute;display:block;opacity:.55;will-change:transform,border-radius;
    border-radius:58% 42% 36% 64% / 55% 38% 62% 45%;
    animation:ar-morph var(--dur,22s) ease-in-out infinite alternate,ar-float var(--fdur,30s) ease-in-out infinite alternate;
    animation-delay:var(--delay,0s)}
  .ar-blob.m{background:radial-gradient(circle at 35% 35%,rgba(161,218,216,.95),rgba(161,218,216,.35) 70%)}
  .ar-blob.p{background:radial-gradient(circle at 35% 35%,rgba(237,207,219,.95),rgba(237,207,219,.35) 70%)}
  .ar-blob.l{background:radial-gradient(circle at 35% 35%,rgba(214,212,226,.95),rgba(214,212,226,.3) 70%)}

  @keyframes ar-grad{0%{background-position:0% 30%}50%{background-position:100% 70%}100%{background-position:0% 30%}}
  @keyframes ar-morph{
    0%{border-radius:58% 42% 36% 64% / 55% 38% 62% 45%}
    50%{border-radius:40% 60% 62% 38% / 42% 58% 42% 58%}
    100%{border-radius:64% 36% 48% 52% / 38% 62% 38% 62%}}
  @keyframes ar-float{
    0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
    100%{transform:translate3d(var(--tx,30px),var(--ty,-24px),0) rotate(var(--rot,18deg)) scale(var(--sc,1.08))}}

  /* Hero: текст і кнопки з'являються по черзі (фото без затримки) */
  .motion-ready .hero-text > *{animation:ar-up .7s cubic-bezier(.2,.7,.2,1) both}
  .motion-ready .hero-text > :nth-child(1){animation-delay:.05s}
  .motion-ready .hero-text > :nth-child(2){animation-delay:.12s}
  .motion-ready .hero-text > :nth-child(3){animation-delay:.2s}
  .motion-ready .hero-text > :nth-child(4){animation-delay:.28s}
  .motion-ready .hero-text > :nth-child(5){animation-delay:.36s}
  .motion-ready .hero-media{will-change:transform}
  @keyframes ar-up{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

  /* ---------- Поява блоків при прокрутці ---------- */
  .motion-ready [data-reveal]{opacity:0;transform:translate3d(0,24px,0);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
    transition-delay:var(--rd,0s)}
  .motion-ready [data-reveal].is-in{opacity:1;transform:none}
}

/* Телефон: менше фону */
@media (max-width:640px){ .ar-blob.xs-hide{display:none} }