/* =========================================================
   АНІМАЦІЇ · Nadiia Nahorna
   Тільки transform, opacity і clip-path — плавно і без стрибків макета.
   Якщо в системі ввімкнено «Зменшити рух» — усе показується одразу (внизу файлу).
   ========================================================= */

/* 1. Ім'я: літери виїжджають з-під «маски» */
.name .line{display:block;white-space:nowrap;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.name .ch{display:inline-block}
.js .name .ch{transform:translateY(110%) rotate(6deg)}
.hero.is-in .name .ch{transform:none;transition:transform 1.05s var(--ease-out);transition-delay:calc(var(--i) * 45ms + 120ms)}

/* 2. Рукописна фраза «пишеться», стрілка малюється */
.js .hand .txt{clip-path:inset(-20% 100% -20% 0)}
.hero.is-in .hand .txt{clip-path:inset(-20% 0 -20% 0);transition:clip-path 1.3s cubic-bezier(.45,.05,.35,1) .95s}
.hand svg path{stroke-dasharray:160;stroke-dashoffset:0}
.js .hand svg path{stroke-dashoffset:160}
.hero.is-in .hand svg path{stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ease-out) 2.1s}
.hero.is-in .hand svg path+path{transition-delay:2.55s}

/* 3. Скляна рамка з фото + нахил за курсором */
.js .hero .gframe{opacity:0;transform:translateY(40px) scale(.96)}
.hero.is-in .gframe{opacity:1;transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity .9s var(--ease-out) .3s,transform 1.2s var(--ease-out) .3s}
.hero.is-in .gframe.tilting{transition:transform .25s var(--ease-out)}
.js .hero .gframe>img{transform:scale(1.14)}
.hero.is-in .gframe>img{transform:scale(1) translateY(var(--py,0px));transition:transform 1.8s var(--ease-out) .3s}
.gframe::after{content:"";position:absolute;inset:0;border-radius:40px;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.35),transparent 60%);mix-blend-mode:soft-light}
.gframe.tilting::after{opacity:1}

/* 4. Скляні чипи «дихають» */
.js .hero .chip,.js .hero .gcap{opacity:0;transform:translateY(16px) scale(.96)}
.hero.is-in .chip,.hero.is-in .gcap{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .9s var(--ease-spring)}
.hero.is-in .chip.k1{transition-delay:1.15s;animation:bob 6s ease-in-out 2.4s infinite}
.hero.is-in .chip.k2{transition-delay:1.3s;animation:bob 7s ease-in-out 3s infinite}
.hero.is-in .gcap{transition-delay:1.45s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -5px}}

/* 5. Решта першого екрана */
.js .hero .meta,.js .hero .intro,.js .hero .dirs li,.js .hero .nav,.js .hero .m-cta{opacity:0;transform:translateY(14px)}
.hero.is-in .meta,.hero.is-in .intro,.hero.is-in .dirs li,.hero.is-in .nav,.hero.is-in .m-cta{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
.hero.is-in .meta{transition-delay:.2s}.hero.is-in .intro,.hero.is-in .m-cta{transition-delay:.7s}
.hero.is-in .dirs li{transition-delay:calc(.85s + var(--i) * 70ms)}

/* 6. Загальна поява блоків при прокручуванні */
.js [data-reveal]{opacity:0;transform:translateY(28px)}
.js [data-reveal].seen{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}

/* 7. Заголовки: слова виїжджають знизу */
.h2 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .14em .34em .1em;margin:0 -.14em -.34em -.1em}
.h2 .w>span{display:inline-block}
.js .h2.split .w>span{transform:translateY(150%)}
.h2.split.seen .w>span{transform:none;transition:transform .9s var(--ease-out);transition-delay:calc(var(--i) * 55ms)}

/* 8. Картки-аури: стос → віяло */
.js .bento .card{transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--rot,0deg)) scale(.62);opacity:0}
.bento.seen .card{transform:none;opacity:1;transition:transform 1.25s cubic-bezier(.2,.9,.25,1.04),opacity .5s var(--ease-out);transition-delay:calc(.2s + var(--i) * 90ms)}
.bento.seen .card.done{transition:transform .5s var(--ease-out)}
.bento.seen .card.done:hover{transform:translateY(-6px)}
.card::before{animation:drift 16s ease-in-out infinite alternate;animation-play-state:paused}
.live .card::before,.live.course::before{animation-play-state:running}
.course::before{animation:drift 18s ease-in-out infinite alternate;animation-play-state:paused}
@keyframes drift{0%{transform:translate(0,0) rotate(0deg) scale(1)}50%{transform:translate(4%,-5%) rotate(8deg) scale(1.08)}100%{transform:translate(-5%,3%) rotate(-6deg) scale(1.02)}}

/* 9. Колаж «Про мене»: фото лежать стосом → розкладаються */
.js .collage .ph{transform:translate(var(--cx,0),var(--cy,0)) rotate(var(--cr,0deg)) scale(.9);opacity:0}
.collage.seen .ph{opacity:1;transform:rotate(var(--fr,0deg));transition:transform 1.3s cubic-bezier(.2,.9,.25,1.04),opacity .6s var(--ease-out);transition-delay:calc(var(--i) * 110ms)}
.js .collage .note{opacity:0;clip-path:inset(-20% 100% -20% 0)}
.collage.seen .note{opacity:1;clip-path:inset(-20% 0 -20% 0);transition:clip-path 1.2s cubic-bezier(.45,.05,.35,1) 1s,opacity .2s 1s}

/* 10. Кроки співпраці: лінія заповнюється */
.js .steps li{opacity:0;transform:translateY(20px)}
.steps.seen li{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--i) * 140ms)}

/* 11. Натискання: «желе» + скляна хвиля */
@keyframes jelly{0%{transform:scale(1,1)}25%{transform:scale(.9,.86)}45%{transform:scale(1.08,.95)}62%{transform:scale(.97,1.04)}78%{transform:scale(1.02,.99)}100%{transform:scale(1,1)}}
@keyframes jelly-soft{0%{transform:scale(1)}30%{transform:scale(.965,.955)}55%{transform:scale(1.015,.99)}75%{transform:scale(.995,1.005)}100%{transform:scale(1)}}
.jelly{animation:jelly .62s cubic-bezier(.25,.8,.35,1)!important}
.card.jelly,.case.jelly,.channel.jelly{animation:jelly-soft .6s cubic-bezier(.25,.8,.35,1)!important}
.tap-glass{position:absolute;z-index:5;width:var(--d);height:var(--d);left:var(--x);top:var(--y);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7),rgba(255,255,255,.22) 45%,rgba(255,255,255,.06) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(6px) saturate(160%);backdrop-filter:blur(6px) saturate(160%);
  animation:tapglass .7s cubic-bezier(.16,1,.3,1) forwards}
@keyframes tapglass{0%{transform:scale(0);opacity:1}60%{opacity:.9}100%{transform:scale(1);opacity:0}}

/* ---------- Менше руху ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .name .ch,.js .hero .gframe,.js .hero .gframe>img,.js .hero .chip,.js .hero .gcap,.js .hero .meta,.js .hero .intro,.js .hero .dirs li,.js .hero .nav,.js .hero .m-cta,
  .js [data-reveal],.js .h2.split .w>span,.js .bento .card,.js .collage .ph,.js .steps li{transform:none!important;opacity:1!important}
  .js .hand .txt,.js .collage .note{clip-path:none!important;opacity:1!important}.js .hand svg path{stroke-dashoffset:0}
  .tap-glass{display:none}
}