/* ==========================================================================
   GV Capital · Brand Guidelines
   section-snap.css
   1. მაგნიტური სქროლი: 1 სროლა = 1 სექცია (ხმაურის გარეშე)
   2. გასვლის რბილი ბლარი / აცურება (Scroll-driven Exit Animation)
   3. დროპდაუნების (<details>) რბილი გახსნა/დახურვა
   ========================================================================== */

/* --------------------------------------------------------------------------
   1a. სათაურის ოფსეტის გასწორება
   html-ს აქვს scroll-padding-top: 52px (42px ჰედერი + 10px ჰაერი).
   სექციებს scroll-margin-top უნულდება, რათა არ მოხდეს ორმაგი დათვლა.
   -------------------------------------------------------------------------- */
html {
  scroll-padding-top: 0;
}

section[id] {
  scroll-margin-top: 0;
}

/* იგივე წესი snap-სამიზნეებზე, რომლებსაც id არ აქვთ და ამიტომ ზემოთა
   სელექტორს არ ხვდებიან. გაორმაგებული კლასი სპეციფიკურობას წევს, რომ
   story.css-ის `.story-edition .gi-system` (0,2,0) და icon-system.css-ის
   86px გადაფაროს. ოფსეტის ერთადერთი წყარო რჩება scroll-padding-top. */
.gi-system.gi-system,
.st-context-block.st-context-block,
.st-color-pairings.st-color-pairings,
.ts-hierarchy.ts-hierarchy {
  scroll-margin-top: 0;
}

/* --------------------------------------------------------------------------
   1b. Snap & 1 სექცია = 1 სქროლი (დესკტოპი)
   სექციებს ეძლევა სრული სიმაღლე და ცენტრირება, რათა ეკრანზე მხოლოდ 1 სექცია
   ჩანდეს და არ შეიქმნას ვიზუალური ხმაური.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) and (min-height: 640px) {
  html {
    scroll-snap-type: y mandatory;
  }

  main > section[id],
  .st-page > section[id],
  .st-color-pairings,
  .gi-system,
  .st-context-block {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* ჩადგმული სექცია (#sm-social #digital-ის შიგნით) არ უნდა კონკურირებდეს */
  section[id] section[id]:not(.gi-system) {
    scroll-snap-align: none;
    scroll-snap-stop: normal;
  }

}

/* --------------------------------------------------------------------------
   2. <details>: რბილი ჩამოშლა
   ::details-content-ის სიმაღლის ანიმაცია. auto-მდე ანიმაციისთვის საჭიროა
   interpolate-size: allow-keywords.
   -------------------------------------------------------------------------- */
:root {
  interpolate-size: allow-keywords;
  --disclosure-ms: 380ms; /* JS-ის ტაიმაუტიც ამავე მნიშვნელობაზეა აწყობილი */
}

details.st-notes::details-content,
details.cg-section::details-content {
  block-size: 0;
  overflow: clip;
  transition:
    block-size var(--disclosure-ms) cubic-bezier(.22, .61, .36, 1),
    content-visibility var(--disclosure-ms) allow-discrete;
}

details.st-notes[open]::details-content,
details.cg-section[open]::details-content {
  block-size: auto;
}

/* დროპდაუნის დახურვის შემდეგ snap მოკლე ხნით ჩერდება — თორემ ბრაუზერი
   მაშინვე უახლოეს გაჩერებაზე გადაახტუნებს გვერდს (იხ. disclosure-reveal.js) */
html.gv-snap-hold { scroll-snap-type: none !important; }

/* ეკრანს ზემოთ დარჩენილი ანიმაციის გარეშე იკეცება, რომ სქროლის
   კომპენსაცია ერთ კადრში მოხდეს */
details.is-instant-close::details-content { transition: none !important; }

/* --------------------------------------------------------------------------
   3. მოძრაობის შემცირების პატივისცემა
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  details.st-notes::details-content,
  details.cg-section::details-content {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
/* ჰედერი გაუქმებულია: ლოგო და ნავიგაცია საიდბარის რელსშია გადატანილი */
.st-top { display: none !important; }

/* ყდა ჰედერს აღარ უთმობს ადგილს, რადგან ჰედერი აქ დამალულია:
   თორემ ზემოთ 42px ცარიელი ზოლი რჩება. */
.st-cover { margin-top: 0; }

/* ყდა ზუსტად ერთი ეკრანია. ადრე იყო min(860px, 100svh - 42px): 860px-იანი
   ჭერი მაღალ ეკრანზე ქვემოთ შემდეგ სექციას აჩენდა, 42px კი ჰედერს უთმობდა,
   რომელიც აქ აღარ დგას. */
.st-cover-film { height: 100svh; }

/* --------------------------------------------------------------------------
   შენიშვნა: ჰორიზონტალური სქროლი გასწორებულია არა clip-ით, არამედ მიზეზში —
   story.css-ში .st-marquee-ს full-bleed ახლა გვერდის ნამდვილი შიდა ველებიდან
   ითვლება (--page-pad-l / --page-pad-r), და არა 100vw + 50%-ით.
   ახალი full-bleed ბლოკიც ამ ორივე ცვლადს უნდა იყენებდეს.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   SCROLL ღილაკი ყდაზე — თანამედროვე, მშვიდი მინიშნება

   ისარი ჩამოდის და ქრება, შემდეგ ზემოდან ბრუნდება — ერთი უწყვეტი მოძრაობა
   და არა ხტუნვა. აბზაცის გამჭვირვალობა ნელა „სუნთქავს", რომ ელემენტი
   ფონურად იგრძნობოდეს და თვალს არ ეცემოდეს.

   ცენტრირება translate-ზე გადავიდა, transform კი ანიმაციისთვის გათავისუფლდა
   (story.css-ში translateX(-50%) transform-ს იკავებდა).
   ========================================================================== */

.st-cover .st-scroll-pill {
  left: 50%;
  translate: -50% 0;
  transform: none;
  will-change: opacity, translate;
  /* მთელი ფორმა მოძრაობს, და არა შიგთავსი ფიქსირებულ აბზაცში —
     ერთი საგანი ცურავს, და არა ორი ფენა ერთმანეთის მიმართ.
     ცენტრირება translate-ზეა, ამიტომ transform ანიმაციისთვის თავისუფალია. */
  animation:
    gv-scroll-enter .75s cubic-bezier(.16, 1, .3, 1) .9s both,
    gv-scroll-travel 3.4s cubic-bezier(.4, 0, .5, 1) 1.5s infinite;
}

/* ჰოვერზე მოძრაობა ჩერდება — კურსორი უკვე აქაა, მინიშნება აღარ სჭირდება */
/* ჰოვერზე ციკლი ჩერდება და ფორმა სრულად ჩნდება — კურსორი უკვე აქაა,
   მინიშნება აღარ სჭირდება და ღილაკი ვერ გაქრება თითის ქვეშ */
.st-cover .st-scroll-pill:hover,
.st-cover .st-scroll-pill:focus-visible {
  opacity: 1;
  filter: none;
  transform: translateY(-2px) scale(1);
  animation-play-state: paused;
}

.st-cover .st-scroll-pill:hover .st-arrow-down,
.st-cover .st-scroll-pill:focus-visible .st-arrow-down {
  transform: translateY(3px);
}

/* დამალვა არ სჭირდება: ღილაკი .st-cover-ის შიგნით absolute-ია და ყდასთან
   ერთად ისედაც გადის ეკრანიდან. past-cover-ზე მიბმა ზედმეტი დამოკიდებულება
   იქნებოდა (ამ დროისთვის ის დროშა ყდაზე დაბრუნებისას არ ნულდება). */

@keyframes gv-scroll-enter {
  from { opacity: 0; translate: -50% 16px; }
  to   { opacity: 1; translate: -50% 0; }
}

/* ერთმიმართულებიანი ციკლი: ფორმა ჩადის, პატარავდება, ბუნდოვანდება და ქრება,
   ხოლო ზემოთ დაბრუნებას თვალი ვერ ხედავს (ორივე კიდეზე opacity 0).

   წინა ვერსია სიმეტრიული რხევა იყო — ზემოთ-ქვემოთ ერთსა და იმავე გზაზე.
   ასეთი მოძრაობა თვალს აიძულებს ერთსა და იმავე საგანს ოდნავ სხვა
   პოზიციაზე ხელახლა მიადევნოს თვალი; სწორედ ეს იწვევს თავბრუს.
   ერთი მიმართულება ამ პრობლემას სრულად აქრობს და მინიშნებაც
   („ჩამოდი ქვემოთ") გაცილებით უფრო წაკითხვადი ხდება. */
@keyframes gv-scroll-travel {
  0%   { transform: translateY(-6px) scale(.96); opacity: 0; filter: blur(1.6px); }
  12%  { transform: translateY(0)    scale(1);   opacity: 1; filter: blur(0); }
  58%  { transform: translateY(0)    scale(1);   opacity: 1; filter: blur(0); }
  100% { transform: translateY(15px) scale(.94); opacity: 0; filter: blur(1.6px); }
}

@media (prefers-reduced-motion: reduce) {
  .st-cover .st-scroll-pill,
  .st-cover .st-scroll-pill > span,
  .st-cover .st-scroll-pill .st-arrow-down { animation: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   მარჯვენა კიდე: გვერდის სქროლბარი
   კიდეზე QUICK REF და TOP ჩანართები დგას, სქროლბარი კი ზუსტად მათზე ხატავს.
   მიბმულ დეკში ის იმას აჩვენებს, რასაც რელსის ტირეები ისედაც — ამიტომ
   გვერდის სქროლბარი იმალება. ჩადგმულ სქროლერებს (quick reference-ის უჯრა,
   სოც. რიგი) თავისი რჩება.
   -------------------------------------------------------------------------- */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; }