/* ანიმაციის ეფექტები — **გენერირებული ფაილი**, ხელით არ იხსნება.
   აგება: `node cli/build-anim.mjs`. წყარო: animate.css v4.1.1 (MIT).

   ★ კონტრაქტი (იხ. CLAUDE.md → „ანიმაციები“): ელემენტი მარკაპში **ხილულია**;
     `site.js` ამატებს `.reveal`-ს (დამალვა) და შემდეგ `.is-in`-ს (გაშვება).
     ე.ი. JS-ის გარეშე გვერდი სრულად ჩანს — ბოტი ცარიელს ვერასდროს დაინახავს.
   ★ ეფექტს **სექცია** ირჩევს: `<section data-fx="zoom-in" data-fx-speed="fast">`.
     სახელი `--fx-name` ცვლადში ჯდება, ე.ი. საერთო ბლოკი ერთია და თითო
     ეფექტი ერთ ხაზს იკავებს.
   ⚠️ **ჰერო განზრახ გარეთაა.** მას საკუთარი შემოსვლა აქვს (`heroIn`) და ის
     პირველი ეკრანია: LCP-ის ელემენტის დაყოვნება ყველაზე ძვირი ანიმაციაა. */

/* ★ სამი სიჩქარე — სახელით და არა ციფრით: კლიენტს „620ms“ არაფერს ეუბნება. */
[data-fx-speed="slow"]{--fx-dur:900ms}
[data-fx-speed="normal"]{--fx-dur:620ms}
[data-fx-speed="fast"]{--fx-dur:380ms}

/* ⚠️ `.reveal` ბაზისურად ტრანზიციითაა (site.css); დასახელებულ ეფექტზე ის
   უნდა გაითიშოს, თორემ ტრანზიცია და ანიმაცია ერთსა და იმავე `transform`-ს
   ეცილებიან და შედეგი ბრაუზერზეა დამოკიდებული. */
[data-fx]:not([data-fx="none"]) .reveal{transform:none;transition:none}
[data-fx]:not([data-fx="none"]) .reveal.is-in{
  animation-name:var(--fx-name);
  animation-duration:var(--fx-dur,620ms);
  animation-delay:var(--d,0ms);
  animation-timing-function:cubic-bezier(.2,.7,.3,1);
  /* ★ `both` სავალდებულოა: `forwards`-ის გარეშე ელემენტი დასრულების
     შემდეგ `.reveal`-ის `opacity:0`-ზე **ბრუნდებოდა** და ქრებოდა. */
  animation-fill-mode:both;
}
/* „ეფექტის გარეშე“ — ბლოკი უბრალოდ ჩანს. */
[data-fx="none"] .reveal{opacity:1;transform:none;animation:none;transition:none}

[data-fx="fade"]{--fx-name:fx-fade}
[data-fx="fade-up"]{--fx-name:fx-fade-up}
[data-fx="fade-down"]{--fx-name:fx-fade-down}
[data-fx="fade-left"]{--fx-name:fx-fade-left}
[data-fx="fade-right"]{--fx-name:fx-fade-right}
[data-fx="slide-up"]{--fx-name:fx-slide-up}
[data-fx="zoom-in"]{--fx-name:fx-zoom-in}
[data-fx="zoom-out"]{--fx-name:fx-zoom-out}
[data-fx="rise"]{--fx-name:fx-rise}
[data-fx="flip"]{--fx-name:fx-flip}
[data-fx="blur"]{--fx-name:fx-blur}
[data-fx="wipe"]{--fx-name:fx-wipe}
[data-fx="tilt"]{--fx-name:fx-tilt}

@keyframes fx-fade{from{opacity:0}to{opacity:1}}
@keyframes fx-fade-up{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fx-fade-down{from{opacity:0;transform:translate3d(0,-26px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fx-fade-left{from{opacity:0;transform:translate3d(-26px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fx-fade-right{from{opacity:0;transform:translate3d(26px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fx-slide-up{from{opacity:1;transform:translate3d(0,38px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fx-zoom-in{from{opacity:0;transform:scale3d(.94,.94,1)}to{opacity:1;transform:scale3d(1,1,1)}}
@keyframes fx-zoom-out{from{opacity:0;transform:scale3d(1.06,1.06,1)}to{opacity:1;transform:scale3d(1,1,1)}}
@keyframes fx-rise{from{opacity:0;transform:translate3d(0,38px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes fx-flip{from{transform:perspective(400px) rotate3d(1,0,0,90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotate3d(1,0,0,-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{transform:perspective(400px) rotate3d(1,0,0,-5deg)}to{transform:perspective(400px);opacity:1}}
@keyframes fx-blur{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}
@keyframes fx-wipe{from{opacity:1;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes fx-tilt{from{opacity:0;transform:perspective(900px) rotateX(9deg) translate3d(0,26px,0)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  /* ⚠️⚠️ მხოლოდ ხანგრძლივობის განულება **არ კმარა**: `clip-path` და
     `filter` საწყის კადრში რჩებოდა და ბლოკი დაჭრილი ან დაბინდული იყო.
     ამიტომ ანიმაცია მთლიანად ითიშება და ხილულობა ცხადად ბრუნდება. */
  [data-fx] .reveal,[data-fx] .reveal.is-in{
    animation:none!important;opacity:1!important;transform:none!important;
    filter:none!important;clip-path:none!important;
  }
}
