/* =====================================================
   შენი მზარეული · Your Cook — style.css
   სტრუქტურა:
   1. ფონტი და ცვლადები
   2. ზოგადი სტილები (body, სურათები, canvas)
   3. ნავიგაცია და ღილაკები
   4. სექციები (hero, ლენტა, about, პროდუქცია, ხორცი, პროცესი, კონტაქტი)
   5. დამატებითი ეფექტები (ჩატვირთვის ეკრანი, პროგრესი, ანიმაციები)
   6. დიდი ეკრანი (კომპიუტერი)
   7. შემცირებული მოძრაობა (accessibility)
   ===================================================== */


/* ---------- 1. ფონტი და ცვლადები ---------- */

/* ქართული ფონტი, რომელიც assets საქაღალდეშია */
@font-face {
  font-family: "kartuli";
  src: url("./assets/bpg-web-002-caps-86219167.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap; /* ფონტის ჩატვირთვამდე ტექსტი მაინც ჩანს */
}

/* ფერები და ფონტები ერთ ადგილას — საჭიროებისას მხოლოდ აქ შეცვლი */
:root {
  --pine: #000;
  --deep: #050a07;
  --mint: #bfe3cf;
  --dough: #ead9b8;
  --saffron: #066B1B;
  --white: #f7faf7;

  /* ᲨᲔᲡᲬᲝᲠᲔᲑᲐ: ადრე --sans და --serif არ იყო აღწერილი, ამიტომ
     font: ... var(--serif) მოუქმედებელი რჩებოდა და სათაურები 16px იყო.
     ახლა ორივე ჩვენს ქართულ ფონტზე მიუთითებს (sans-serif — სათადარიგოდ) */
  --sans: "kartuli", sans-serif;
  --serif: "kartuli", sans-serif;

  color-scheme: dark;
}


/* ---------- 2. ზოგადი სტილები ---------- */

/* ყველა ელემენტზე: padding/border არ ზრდის ზომას, ზედმეტი margin იხსნება */
* {
  box-sizing: border-box;
  margin: 0;
  font-family: var(--sans);
}

html {
  scroll-behavior: smooth;                /* ბმულზე დაჭერისას რბილი გადასვლა */
  -webkit-text-size-adjust: 100%;         /* ტელეფონი ტექსტს არ გაადიდებს თავისით */
  -webkit-tap-highlight-color: transparent; /* iOS/Android-ზე დაჭერისას ნაცრისფერი ბლოკი არ ჩანს */
}

body {
  background: var(--pine);
  color: var(--white);
  font: 400 1rem/1.65 var(--sans);
  font-synthesis: none;   /* ბრაუზერი ცრუ "სქელ" ასოებს არ დახატავს */
  overflow-x: hidden;     /* გვერდზე გადაადგილება არ ხდება */
}

img {
  max-width: 100%;
  display: block;
}

/* 3D ხინკალის ტილო (canvas): ეკრანზე დამაგრებულია, ტექსტის უკან */
#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none; /* ტილო დაჭერებს არ იჭერს */
}

/* მთავარი შიგთავსი ტილოს ზემოთაა */
main, nav, footer {
  position: relative;
  z-index: 1;
}

/* ᲨᲔᲡᲬᲝᲠᲔᲑᲐ: დახრილი ლენტა (.marq) ეკრანის ფარგლებს ცოტათი სცდებოდა და
   ტელეფონზე გვერდზე გადაადგილება ჩნდებოდა. overflow-x: clip ზედმეტ ნაწილს ჭრის.
   (ძველი ბრაუზერებისთვის წინ hidden წერია, ის სათადარიგოა) */
main {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ფონის მწვანე ნათება, რომელიც ნელა მოძრაობს */
/* ᲨᲔᲡᲬᲝᲠᲔᲑᲐ (ლაგი): ადრე ფენა ეკრანზე 1.5-ჯერ დიდი იყო (inset: -25%) და ბრუნავდა,
   დიდ მონიტორზე ეს ვიდეო-ბარათს ძალიან ამძიმებდა. ახლა ფენა მხოლოდ 8%-ით სცდება ეკრანს,
   ბრუნვა მოხსნილია (ბუნდოვან ნათებაზე მაინც არ ჩანდა), will-change კი ფენას GPU-ზე ამყარებს */
body::before {
  content: "";
  position: fixed;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 70% 30%, rgba(6, 107, 27, .55), transparent 45%),
    radial-gradient(circle at 20% 80%, rgba(6, 107, 27, .35), transparent 40%);
  will-change: transform;
  animation: drift 14s ease-in-out infinite alternate;
}

@keyframes drift {
  to { transform: translate(4%, 3%); }
}

/* კლავიატურით ნავიგაციისას ფოკუსის ჩარჩო */
:focus-visible {
  outline: 3px solid var(--saffron);
  outline-offset: 4px;
}


/* ---------- 3. ნავიგაცია და ღილაკები ---------- */

/* ზედა ზოლი: ყოველთვის ზემოთ რჩება */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* env(safe-area-inset-top) — iPhone-ის "ნახვრეტის" (notch) ქვემოთ ჩამოწევა */
  padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px;
  background: linear-gradient(var(--pine) 40%, transparent);
}

nav b {
  font: 900 1.1rem var(--serif);
  white-space: nowrap; /* სახელი ერთ ხაზზე რჩება */
}

/* ლოგოს ტექსტი თეთრია */
.satauri {
  color: white;
}

/* ლოგო + სახელი გვერდიგვერდ (ბმული, რომელიც გვერდის თავში გადადის) */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.logo {
  height: 46px;         /* ლოგო გამჭვირვალეა (ფონის გარეშე), სიგანე თვითონ გამოითვლება */
  width: auto;
  flex: none;           /* ვიწრო ეკრანზე ლოგო არ იკუმშება */
}

/* (ამჟამად HTML-ში არ გამოიყენება, მენიუს ბმულებისთვისაა გამზადებული) */
.links {
  display: none;
}

.links a {
  color: var(--white);
  text-decoration: none;
  margin-right: 24px;
  font-weight: 100;
}

.links a:hover {
  color: var(--saffron);
}

/* ღილაკების საერთო სტილი */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;          /* თითით დასაჭერად საკმარისი სიმაღლე */
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s, background .3s;
}

/* მთავარი (მწვანე) ღილაკი */
.pri {
  background: var(--saffron);
  color: #fff;
  position: relative;
  overflow: hidden;   /* ბზინვარების ზოლი ღილაკის გარეთ არ გამოვა */
}

/* ბზინვარების ზოლი, რომელიც ღილაკზე გადაიქროლებს */
/* ᲨᲔᲡᲬᲝᲠᲔᲑᲐ (ლაგი): ადრე ანიმაცია "left" თვისებას ცვლიდა — ეს ყოველ კადრზე
   გვერდის განლაგებას თავიდან ითვლიდა. transform-ით კი მხოლოდ GPU მუშაობს */
.pri::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: rgba(255, 255, 255, .3);
  transform: translateX(-150%) skewX(-20deg);
  will-change: transform;
  animation: shine 3.6s infinite;
}

@keyframes shine {
  0%, 60% { transform: translateX(-150%) skewX(-20deg); }
  100%    { transform: translateX(325%) skewX(-20deg); }
}

/* მეორადი (კონტურიანი) ღილაკი */
.sec {
  border: 1.5px solid var(--mint);
  color: var(--white);
}

.pri:hover, .sec:hover {
  background: var(--white);
  color: var(--deep);
}

/* პატარა ღილაკი (ნავიგაციაში) */
.sm {
  min-height: 44px;
  padding: 0 20px;
}

/* ძალიან ვიწრო ტელეფონები (≤ 380px): ლოგო, სახელი და ღილაკი ერთ ხაზზე რომ დაეტიოს */
@media (max-width: 380px) {
  nav {
    padding-left: 12px;
    padding-right: 12px;
  }

  nav b {
    font-size: .9rem;
  }

  .sm {
    padding: 0 14px;
  }
}


/* ---------- 4. სექციები ---------- */

section {
  /* vh — სათადარიგო ძველი ბრაუზერებისთვის; svh — ტელეფონის ბრაუზერის ზოლის გათვალისწინებით */
  padding: 12vh 20px;
  padding: 12svh 20px;
}

/* --- hero (პირველი ეკრანი) --- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 12vh;
  padding-bottom: 12svh;
  color: #066B1B;
}

/* ლოგო hero-ში (ფონის გარეშე; ჩრდილი ლოგოს ფორმას მიჰყვება). სხვა ანიმაციებთან ერთად ჩნდება */
.hero-logo {
  width: 84px;
  height: auto;
  margin-bottom: 26px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
  opacity: 0;
  animation: fade 1s 1.7s forwards;
}

.hero h1 {
  font: 900 clamp(3rem, 13vw, 10rem)/.95 var(--serif);
  letter-spacing: -.02em;
  /* flex column: მეზობელი .w ბლოკების უარყოფითი margin-ები ერთმანეთს აღარ "ერწყმის" */
  display: flex;
  flex-direction: column;
}

/* სიტყვა ქვემოდან ამოდის: გარე ელემენტი (.w) ჭრის, შიგა (span) მოძრაობს.
   ᲨᲔᲡᲬᲝᲠᲔᲑᲐ: ქართული ასოები ხაზის სიმაღლეზე (.95) მაღალია, ამიტომ overflow: hidden
   მათ თავსა და ბოლოს ბრტყლად ჭრიდა. padding ზრდის "ფანჯარას", უარყოფითი margin
   კი სათაურის ადგილმდებარეობას უცვლელს ტოვებს. */
.w {
  display: block;
  overflow: hidden;
  padding: .2em 0;
  margin: -.2em 0;
}

.w span {
  display: inline-block;
  transform: translateY(150%) rotate(6deg); /* თავიდან ფანჯრის ქვემოთაა და არ ჩანს */
  /* ანიმაცია: სახელი, ხანგრძლივობა, დაყოვნება (ჩატვირთვის ეკრანის შემდეგ იწყება) */
  animation: up 1.1s .9s cubic-bezier(.2, .9, .2, 1) forwards;
}

@keyframes up {
  to { transform: none; }
}

/* ===== არეკვლის (ბზინვარების) ეფექტი სათაურზე "შენი მზარეული" =====
   იგივე იდეაა, რაც ღილაკებზე: ღია ზოლი ტექსტზე მარცხნიდან მარჯვნივ გადაიქროლებს.
   ტექსტს გრადიენტით ვღებავთ (background-clip: text), გრადიენტს კი ვამოძრავებთ.
   @supports: თუ ბრაუზერს background-clip: text არ შეუძლია, ეფექტი უბრალოდ არ ჩაირთვება
   და სათაური ჩვეულებრივი მწვანე ფერით დარჩება (ტექსტი არ გაქრება) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .w span {
    /* ღია ზოლი (#8ff0a8) მწვანე (#066B1B) ტექსტის შუაში */
    background: linear-gradient(105deg, #066B1B 0 42%, #8ff0a8 50%, #066B1B 58% 100%);
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* ქართული ასოები ხაზის სიმაღლეზე მაღალია: padding ფონს ზევით/ქვევით ზრდის,
       უარყოფითი margin კი სათაურის ადგილს უცვლელს ტოვებს, ამიტომ ასოები არ იჭრება */
    padding: .2em .05em;
    margin: -.2em -.05em;
    /* ორი ანიმაცია: 1) სიტყვა ამოდის (up), 2) ბზინვარება (sheen) მერე უსასრულოდ მეორდება */
    animation:
      up 1.1s .9s cubic-bezier(.2, .9, .2, 1) forwards,
      sheen 3.6s .9s infinite;
  }
}

/* ბზინვარება: 0-60% ისვენებს, მერე ზოლი ტექსტზე გადაიქროლებს (როგორც ღილაკებზე) */
@keyframes sheen {
  0%, 60% { background-position: 100% 0; }
  100%    { background-position: 0% 0; }
}

.hero p {
  max-width: 32ch;
  margin: 20px 0 28px;
  font-size: 1.15rem;
  color: var(--mint);
  opacity: 0;
  animation: fade 1s 1.9s forwards;
}

.cta {
  display: flex;
  flex-direction: column; /* ტელეფონზე ღილაკები ერთმანეთის ქვეშაა */
  gap: 12px;
  opacity: 0;
  animation: fade 1s 2.2s forwards;
}

@keyframes fade {
  to { opacity: 1; }
}

/* სათაურები */
h2 {
  font: 900 clamp(2rem, 8vw, 4.6rem)/1.08 var(--serif);
}

/* ტექსტის ბლოკის "გამოჩენის" ეფექტი: თავიდან დაფარულია (clip-path),
   სქროლისას JS ამატებს კლასს .in და ბლოკი გამოჩნდება */
.clip {
  clip-path: inset(0 0 100% 0);
  transform: translateY(30px);
  transition: clip-path 1s cubic-bezier(.2, .9, .2, 1), transform 1s cubic-bezier(.2, .9, .2, 1);
}

.clip.in {
  clip-path: inset(0 0 -20% 0);
  transform: none;
}

/* მწვანე ხაზი სათაურის ქვეშ, რომელიც გამოჩენისას იზრდება */
h2.clip::after {
  content: "";
  display: block;
  height: 4px;
  width: 0;
  margin-top: 12px;
  background: #2fd155;
  transition: width 1s .6s;
}

h2.clip.in::after {
  width: 72px;
}

/* --- მოძრავი ლენტა --- */
.marq {
  overflow: hidden;
  background: var(--saffron);
  color: #fff;
  padding: 14px 0;
  transform: rotate(-2deg);
  margin: 0 -4vw;
  position: relative;
  z-index: 1;
}

.marq div {
  display: flex;
  gap: 40px;
  padding-right: 40px; /* ბოლოში იგივე დაშორება, რომ წრე შეუმჩნევლად დაიკეცოს */
  width: max-content;
  font: 900 1.7rem var(--serif);
  will-change: transform; /* ლენტა ცალკე GPU ფენად გადის და მოძრაობისას თავიდან არ იხატება */
  animation: mq 30s linear infinite;
}

@keyframes mq {
  to { transform: translateX(-50%); } /* ტექსტი ორჯერ წერია, ამიტომ -50% საკმარისია */
}

/* ᲨᲔᲡᲬᲝᲠᲔᲑᲐ: ადრე ტელეფონზე .bg სექციებს შავი ფონი ჰქონდა და მწვანე ნათებასა
   და 3D ხინკალს ფარავდა. ახლა ფონი გამჭვირვალეა, ამიტომ ტელეფონზეც და
   კომპიუტერზეც ერთნაირი მწვანე ფონი და ხინკალი ჩანს. */
.bg {
  background: transparent;
}

/* --- about --- */
.txt {
  color: var(--mint);
  margin-top: 18px;
  max-width: 46ch;
}

.facts {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.facts div {
  border-left: 3px solid var(--saffron);
  padding-left: 14px;
}

.facts b {
  display: block;
}

/* მცირე სათაურები (b) */
.facts b, .step b {
  color: var(--dough);
}

/* გუნდის ფოტოების სლაიდერი (ფოტოები staff საქაღალდიდან) */
.team {
  margin-top: 34px;
  position: relative;
  overflow: hidden;
  border-radius: 6px 32px 6px 32px;
}

/* ფოტოები ერთ რიგში დგას; თითით/მაუსით გადაფურცლავ, ან თვითონ გადადის */
.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* გადაფურცლისას ფოტო ზუსტად ჩარჩოში "ჩაიჭერება" */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.slides::-webkit-scrollbar {
  display: none;
}

.slides img {
  flex: 0 0 100%;        /* თითო ფოტო მთელ სიგანეს იკავებს */
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  scroll-snap-align: center;
}

/* წარწერა "ჩვენი გუნდი" ფოტოს ქვედა ნაწილზე */
.team span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 18px 14px;
  background: linear-gradient(transparent, rgba(10, 36, 29, .9));
  font-weight: 600;
  pointer-events: none; /* წარწერა გადაფურცლას ხელს არ უშლის */
}

/* ისრები (მხოლოდ მაუსიან მოწყობილობაზე; ტელეფონზე თითით გადაფურცლავ) */
.arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.arrow:hover {
  background: var(--saffron);
}

.prev { left: 12px; }
.next { right: 12px; }

/* წერტილები: რომელ ფოტოზე ვართ */
.dots {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: background .3s, transform .3s;
}

.dots i.on {
  background: #2fd155;
  transform: scale(1.3);
}

@media (hover: hover) {
  .arrow { display: block; }
}

/* --- ჰორიზონტალური გადასაფურცლი რიგი (rail) --- */
.rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* გადაფურცლისას ბარათი "ჩაიჭერება" */
  scroll-padding: 0 20px;
  margin: 28px -20px 0;
  padding: 0 20px 10px;
  scrollbar-width: none;         /* ზოლს ვმალავთ (Firefox) */
  -webkit-overflow-scrolling: touch;
}

.rail::-webkit-scrollbar {
  display: none;                 /* ზოლს ვმალავთ (Chrome/Safari) */
}

.rail > * {
  flex: 0 0 76%;                 /* ბარათი ეკრანის 76%-ია, შემდეგი ცოტათი ჩანს */
  scroll-snap-align: center;
}

.rail.g > * {
  flex-basis: 68%;
}

/* "გადაფურცლე" მინიშნება */
.hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--mint);
  font-size: .9rem;
}

.hint i {
  width: 30px;
  height: 2px;
  background: #2fd155;
  animation: sw 1.6s ease-in-out infinite;
}

@keyframes sw {
  50% { transform: translateX(14px); }
}

/* --- პროდუქციის ბარათი --- */
.pc {
  background: var(--deep);
  border: 1px solid rgba(191, 227, 207, .22);
  border-radius: 26px 6px 26px 6px;
  overflow: hidden;
  /* გამოჩენამდე უჩინარია; JS-ი ამატებს .in კლასს */
  opacity: 0;
  transform: translateY(40px) rotate(2deg);
  transition: opacity .8s, transform .9s cubic-bezier(.2, .9, .2, 1), border-color .3s;
}

.pc.in {
  opacity: 1;
  transform: none;
}

.pc img, .blank {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.pc img {
  transform: scale(1.15);
  transition: transform 1.3s cubic-bezier(.2, .9, .2, 1);
}

.pc.in img {
  transform: scale(1.1);
}

/* (ამჟამად არ გამოიყენება) ფერადი ბლოკი სურათის ნაცვლად */
.blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 20%, #0d9a2e, var(--saffron));
  color: #fff;
  font: 900 6rem var(--serif);
}

/* ᲨᲔᲡᲬᲝᲠᲔᲑᲐ: მასშტაბირებული (scale) სურათი თავისი ყუთის გარეთ გადიოდა და
   ტექსტს ფარავდა. position: relative + ფონი ტექსტის ბლოკს სურათის ზემოთ ამოაქვს,
   ამიტომ სურათი ადიდდება, მაგრამ პროდუქტის სახელი ყოველთვის ჩანს. */
.pc div.t {
  position: relative;
  background: var(--deep);
  padding: 16px 18px 22px;
}

.pc h3 {
  font: 900 1.3rem/1.3 var(--serif);
  color: var(--dough);
}

.pc p {
  color: var(--mint);
  font-size: .95rem;
  margin-top: 4px;
}

/* --- ნედლი ხორცის დიდი ბარათები --- */
.stack {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.big {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  border-radius: 6px 32px 6px 32px;
}

.big img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.5s cubic-bezier(.2, .9, .2, 1);
}

.big.in img {
  transform: scale(1.1);
}

/* სურათზე ბნელი გრადიენტი, რომ ტექსტი კარგად იკითხებოდეს */
.big::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 30%, rgba(10, 36, 29, .92));
}

.big div {
  position: relative;
  z-index: 1; /* ტექსტი გრადიენტის ზემოთაა */
  padding: 22px;
}

.big h3 {
  font: 900 1.6rem var(--serif);
  color: var(--dough);
}

.big p {
  color: var(--mint);
}

/* წარწერა "მალე" */
.badge {
  display: inline-block;
  background: var(--saffron);
  color: #fff;
  font-weight: 600;
  padding: 2px 14px;
  border-radius: 999px;
  margin-bottom: 8px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  50% { transform: scale(1.08); }
}

/* --- პროცესის ფოტოები --- */
.ph {
  border-radius: 20px 6px 20px 6px;
  overflow: hidden;
}

.ph img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* --- პროცესის ეტაპები (ვერტიკალური ხაზით) --- */
.steps {
  position: relative;
  margin-top: 34px;
  padding-left: 30px;
}

/* ნაცრისფერი ხაზი */
.line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(191, 227, 207, .2);
}

/* მწვანე ხაზი, რომელიც სქროლისას ივსება (--p ცვლადს JS ცვლის) */
.line i {
  display: block;
  width: 100%;
  height: var(--p, 0%);
  background: var(--saffron);
}

.step {
  position: relative;
  margin-bottom: 24px;
}

.step b {
  font: 900 1.4rem var(--serif);
  display: block;
}

.step span {
  color: var(--mint);
}

/* წრე ხაზზე თითოეული ეტაპის გვერდით */
.step::before {
  content: "";
  position: absolute;
  left: -37px;
  top: .6em;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #000;
  border: 3px solid #2fd155;
  transform: scale(0);
  transition: transform .5s .3s;
}

.step.in::before {
  transform: scale(1);
}

/* clip-path გაფართოებულია, რომ წრე (::before) ამოჭრილი არ დარჩეს */
.step.clip.in {
  clip-path: inset(-8px -60px -20% -60px);
}

/* --- კონტაქტი --- */
.contact {
  text-align: center;
  padding-bottom: 18vh;
  padding-bottom: 18svh;
}

/* ორი ღილაკი (WhatsApp და ლოკაცია) ერთმანეთის ქვეშ, ცენტრში — ტელეფონზეც და კომპიუტერზეც */
.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.contact .btn {
  width: 100%;
  max-width: 340px;
}

/* ლოკაციის ხატულა ღილაკის ტექსტთან გვერდით */
.btn svg {
  flex: none;
  margin-right: 8px;
  fill: currentColor; /* ფერი ტექსტის ფერს მიჰყვება (ჰოვერზეც იცვლება) */
}

/* (ამჟამად არ გამოიყენება) მცირე შენიშვნის ტექსტი */
.note {
  font-size: .85rem;
  opacity: .7;
  margin-top: 14px;
}

footer {
  padding: 26px 20px calc(90px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: .9rem;
  background: var(--deep);
  color: var(--mint);
}

/* (ამჟამად არ გამოიყენება) მოლივლივე ღილაკი ტელეფონისთვის */
.fab {
  position: fixed;
  z-index: 6;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  animation: pulse 2.6s infinite;
}


/* ---------- 5. დამატებითი ეფექტები ---------- */

/* სქროლის პროგრესის მწვანე ზოლი ეკრანის თავში (--sp-ს JS ცვლის) */
#bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9;
  background: #2fd155;
  transform: scaleX(var(--sp, 0));
  transform-origin: left;
}

/* ჩატვირთვის ეკრანი: მწვანე ფარდა, რომელიც ზემოთ ადის (JS მერე შლის) */
#cur {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;              /* ლოგო და სახელი ერთმანეთის ქვეშ, ცენტრში */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--saffron);
  color: #fff;
  font: 900 clamp(1.6rem, 7vw, 3rem) var(--serif);
  pointer-events: none;
  animation: cur 1.5s cubic-bezier(.77, 0, .18, 1) forwards;
}

@keyframes cur {
  0%, 55% { transform: none; }
  100%    { transform: translateY(-100%); }
}

/* ლოგო ჩატვირთვის ეკრანზე: ოდნავ იზრდება და ჩნდება */
/* წარწერა "შენი მზარეული" ცენტრში მყოფი ხინკლის ქვემოთ */
#cur span {
  position: absolute;
  left: 0;
  right: 0;
  top: 74%;
  text-align: center;
}

/* ლოგო ჩატვირთვის ეკრანზე მხოლოდ სათადარიგოა (თუ 3D ხინკალი ვერ ჩაიტვირთა) */
#cur img {
  display: none;
  width: min(46vw, 220px);
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .4));
  animation: pop .8s cubic-bezier(.2, .9, .2, 1) both;
}

@keyframes pop {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: none; }
}

#cur.no3d img {
  display: block;
}

/* სურათების პარალაქსი: --py ცვლადს სქროლისას JS ცვლის */
.pc img, .big img {
  translate: 0 var(--py, 0px);
  will-change: translate, transform; /* სქროლისას ფოტოები GPU-ზე მოძრაობს, თავიდან არ იხატება */
}

/* მაუსის მქონე მოწყობილობაზე (ტელეფონზე არა) ბარათზე ზევით აყვანა */
@media (hover: hover) {
  .pc:hover {
    border-color: #2fd155;
  }

  .pc:hover img {
    transform: scale(1.18);
  }
}


/* ---------- 6. დიდი ეკრანი (კომპიუტერი, ≥ 800px) ---------- */
@media (min-width: 800px) {
  nav {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .links {
    display: block;
  }

  section {
    padding: 14vh 5vw;
  }

  .hero {
    justify-content: center;
    padding-top: 11vh; /* ლოგოსთვის ადგილის დასაზოგად ზედა დაშორება ოდნავ ნაკლებია */
  }

  /* ლოგო კომპიუტერზე: ეკრანის სიმაღლის მიხედვით 84-150px */
  .hero-logo {
    width: clamp(70px, 11vh, 120px);
    margin-bottom: 30px;
  }

  /* ᲨᲔᲡᲬᲝᲠᲔᲑᲐ: ადრე აქ max-width: 9ch იყო და სიტყვის ბოლო ასო იჭრებოდა
     (.w ელემენტს overflow: hidden აქვს), ამიტომ შეზღუდვა მოვხსენი */
  /* min(12vw, 18vh): სათაური ეკრანის სიმაღლესაც ითვალისწინებს, რომ დაბალ
     ფანჯარაში ლოგოსთან ერთად ღილაკები ეკრანის ქვემოთ არ ჩავარდეს */
  .hero h1 {
    font-size: clamp(4.5rem, min(12vw, 18vh), 10rem);
  }

  .cta {
    flex-direction: row; /* ღილაკები გვერდიგვერდ */
  }

  .txt, .hero p {
    font-size: 1.2rem;
  }

  .marq div {
    font-size: 3rem;
  }

  .facts {
    max-width: 46ch;
  }

  .team {
    max-width: 720px;
  }

  .rail {
    margin: 40px 0 0;
    padding: 0 0 10px;
  }

  /* ᲨᲔᲡᲬᲝᲠᲔᲑᲐ: კომპიუტერზე ორივე რიგი (.p და .g) ბადედაა.
     ადრე .g რიგი დაფარული ზოლით რჩებოდა და მაუსით ბოლო ფოტოები ვერ ჩანდა */
  .rail.p, .rail.g {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    overflow: visible;
  }

  .hint {
    display: none; /* "გადაფურცლე" კომპიუტერზე საჭირო არ არის */
  }

  .stack {
    grid-template-columns: 2fr 1fr;
  }

  .stack .big:first-child {
    grid-row: span 2;
    min-height: 520px;
  }

  .steps {
    max-width: 520px;
  }

  .fab {
    display: none;
  }

  footer {
    padding-bottom: 26px;
  }
}


/* ---------- 7. შემცირებული მოძრაობა ----------
   თუ მომხმარებელს ტელეფონში/კომპიუტერში ანიმაციები გამორთული აქვს,
   ვაჩვენებთ ყველაფერს ანიმაციის გარეშე */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  .w span, .hero p, .cta, .hero-logo {
    opacity: 1;
    transform: none;
  }

  .clip {
    clip-path: none;
    transform: none;
  }

  .pc {
    opacity: 1;
    transform: none;
  }

  .pc img, .big img {
    transform: none;
  }

  #cur {
    display: none;
  }
}