/* ==========================================================================
   imecadine.ge — მოძრაობის ფენა (2026-08-24)

   წესები, რომლებსაც ვიცავთ:
   • მხოლოდ transform და opacity — layout არასდროს ანიმირდება (jank-ის გარეშე)
   • ყველაფერი `prefers-reduced-motion: reduce`-ზე ითიშება
   • JS-ის გარეშეც გვერდი სრულად ჩანს (`.no-js` fallback ქვემოთ)
   • ხანგრძლივობა 180–620ms — შესამჩნევი, მაგრამ არა შემაფერხებელი
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* რბილი გაჩერება */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* მსუბუქი აცილება */
  --dur-1: .18s;
  --dur-2: .32s;
  --dur-3: .52s;
}

/* ── 1. სქროლზე გამოჩენა ──────────────────────────────────── */
/* JS ამატებს .is-in-ს, როცა ელემენტი ეკრანში შემოდის */
.reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--dur-3) var(--ease-out),
              transform var(--dur-3) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal--left  { transform: translate3d(-22px, 0, 0); }
.reveal--right { transform: translate3d(22px, 0, 0); }
.reveal--scale { transform: scale(.965); }

/* ── 2. ჰეროს შემოსვლა (გვერდის ჩატვირთვისთანავე) ─────────── */
@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}
.v2-hero__in > div > * { animation: rise .62s var(--ease-out) both; }
.v2-hero__in > div > *:nth-child(1) { animation-delay: .04s }
.v2-hero__in > div > *:nth-child(2) { animation-delay: .10s }
.v2-hero__in > div > *:nth-child(3) { animation-delay: .16s }
.v2-hero__in > div > *:nth-child(4) { animation-delay: .22s }
.v2-hero__in > div > *:nth-child(5) { animation-delay: .28s }
.v2-shot { animation: rise .72s var(--ease-out) .18s both; }

/* ჰეროს ფონის ნაზი „სუნთქვა" — გრადიენტი ნელა მოძრაობს */
@keyframes aura {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .95 }
  50%      { transform: translate3d(2%, -2%, 0) scale(1.06); opacity: 1 }
}
.v2-hero::before { animation: aura 18s ease-in-out infinite; }

/* რუკის მოტივი ფონზე — ხაზები ნელა იხატება */
@keyframes dash { to { stroke-dashoffset: 0 } }
.v2-hero__map path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: dash 3.4s var(--ease-out) .35s forwards;
}
.v2-hero__map circle { animation: pop .5s var(--ease-spring) 2.4s both; }
@keyframes pop { from { transform: scale(0); opacity: 0 } to { transform: scale(1); opacity: .65 } }

/* მცურავი ბარათი — ძალიან ნაზი ტივტივი */
@keyframes bob {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-7px) }
}
.v2-float { animation: rise .6s var(--ease-out) .5s both, bob 6.5s ease-in-out 1.2s infinite; }

/* მზაობის ზოლი — გამოჩენისას ივსება */
.v2-float__bar i { transform-origin: left center; animation: fillbar 1.1s var(--ease-out) .9s both; }
@keyframes fillbar { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* ── 3. ინტერაქციები ──────────────────────────────────────── */
.v2-btn {
  transition: transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.v2-btn:hover { transform: translateY(-2px); }
.v2-btn:active { transform: translateY(0) scale(.985); transition-duration: .06s; }
/* ისარი ღილაკში ოდნავ წინ იწევს */
.v2-btn svg:last-child { transition: transform var(--dur-2) var(--ease-out); }
.v2-btn:hover svg:last-child { transform: translateX(3px); }

/* ბარათები — ერთიანი აწევა + კიდის ნაზი შუქი */
.v2-card, .v2-feat, .v2-step, .v2-plan {
  transition: transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              border-color var(--dur-2) var(--ease-out);
}
.v2-card:hover, .v2-feat:hover, .v2-plan:hover { transform: translateY(-4px); }
.v2-feat__ico, .v2-ico { transition: transform var(--dur-2) var(--ease-spring); }
.v2-feat:hover .v2-feat__ico, .v2-card:hover .v2-ico { transform: scale(1.08) rotate(-4deg); }

/* ნაბიჯების ნომერი */
.v2-step__n { transition: transform var(--dur-2) var(--ease-spring), background-color var(--dur-2); }
.v2-step:hover .v2-step__n { transform: scale(1.1); }

/* ნავიგაცია — ხაზი ქვემოდან */
.v2-nav > a { position: relative; }
.v2-nav > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-2) var(--ease-out);
}
.v2-nav > a:hover::after, .v2-nav > a.is-on::after { transform: scaleX(1); }

/* ── 4. FAQ აკორდეონი ─────────────────────────────────────── */
.v2-faq details { transition: background-color var(--dur-2) var(--ease-out); }
.v2-faq summary { transition: color var(--dur-1) var(--ease-out); }
.v2-faq summary::marker, .v2-faq summary::-webkit-details-marker { content: ''; display: none; }
/* პასუხი იშლება, არა ხტება */
.v2-faq details[open] > p { animation: unfold .34s var(--ease-out) both; }
@keyframes unfold {
  from { opacity: 0; transform: translateY(-6px) }
  to   { opacity: 1; transform: none }
}

/* ── 5. ენის მენიუ ────────────────────────────────────────── */
.lang__menu {
  transform-origin: top right;
  animation: menuIn .2s var(--ease-out) both;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97) }
  to   { opacity: 1; transform: none }
}

/* ── 6. ზედა სქროლ-ინდიკატორი ─────────────────────────────── */
.scrollbar {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 999;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--teal));
  transform: scaleX(var(--p, 0)); transform-origin: left center;
  transition: transform .08s linear;
  pointer-events: none;
}

/* ── 7. სურათების ნაზი გამოჩენა ───────────────────────────── */
.v2-shot__frame img, .th-feat__media img, .pr-city img {
  transition: transform .6s var(--ease-out), opacity .4s ease;
}
.v2-shot:hover .v2-shot__frame img { transform: scale(1.03); }

/* ── 8. „ჩატვირთვის" ეფექტი ციფრებზე ──────────────────────── */
.count { font-variant-numeric: tabular-nums; }

/* ── 9. თეორიის/პრაქტიკის ბარათები ────────────────────────── */
.th-card, .pr-card { transition: transform var(--dur-2) var(--ease-out),
                                 box-shadow var(--dur-2) var(--ease-out),
                                 border-color var(--dur-2) var(--ease-out); }
.th-quick__i, .lang__item { transition: background-color var(--dur-1) var(--ease-out); }

/* ── 10. ფოკუსი — ხილული, მაგრამ არა მკვეთრი ──────────────── */
.v2 a:focus-visible, .v2 button:focus-visible, .v2 summary:focus-visible {
  outline: 3px solid rgba(29,155,240,.55); outline-offset: 2px;
  border-radius: 10px;
}

/* ══ ხელმისაწვდომობა: მოძრაობის შემცირება ═══════════════════
   მომხმარებელს სისტემაში აქვს მითითებული — ვცვლით ყველაფერს
   მყისიერი გამოჩენით, არაფერი ქრება. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .v2-hero__map path { stroke-dashoffset: 0 !important; }
  .scrollbar { display: none; }
}

/* JS გამორთულია — ყველაფერი უბრალოდ ჩანს */
.no-js .reveal { opacity: 1; transform: none; }