/* =========================================================================
   garage-transition.css — გარაჟიდან გამოსვლის გადასვლის ეკრანი (GTA V სტილი)
   ეკრანი ბნელდება -> ლოგო მარჯვნიდან მარცხნივ გაირბენს -> ეკრანი ნელა ქრება
   ტაიმინგები JS-ში არის (garage-transition.js, ზედა მუდმივები)
   ========================================================================= */
#gt-screen {
  position: fixed; inset: 0; z-index: 40000;
  display: none; pointer-events: none; overflow: hidden;
}
#gt-screen.on { display: block; }

/* შავი ფონი */
#gt-screen .gt-bg {
  position: absolute; inset: 0; background: #000; opacity: 0;
  transition: opacity var(--gt-in, 700ms) ease-in;
}
#gt-screen.dark .gt-bg { opacity: 1; }
#gt-screen.out .gt-bg {
  opacity: 0;
  transition: opacity var(--gt-out, 700ms) ease-out;
}

/* ლოგოს ზოლი: მარჯვნიდან მარცხნივ */
#gt-screen .gt-track {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 0; transform: translateY(-50%);
}
#gt-screen .gt-logo {
  position: absolute; left: 50%; top: 0;
  width: clamp(220px, 24vw, 460px); height: auto;
  opacity: 0; will-change: transform, opacity, filter;
  transform: translate(-50%, -50%) translateX(75vw);
  filter: drop-shadow(0 0 18px rgba(255, 70, 70, .35));
}
#gt-screen.run .gt-logo {
  animation: gtRun var(--gt-run, 1800ms) linear forwards;
}

/* ძალიან თხელი სინათლის ხაზი ლოგოს უკან, სიჩქარის შეგრძნებისთვის */
#gt-screen .gt-streak {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  transform: translateY(-50%) scaleX(0); opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) 50%, transparent);
  transform-origin: 100% 50%;
}
#gt-screen.run .gt-streak { animation: gtStreak var(--gt-run, 1800ms) ease-in-out forwards; }

/* ლოგო სწრაფად შემოდის, შუაში ნელდება (იკითხება), სწრაფად გადის */
@keyframes gtRun {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(75vw);  filter: blur(8px) drop-shadow(0 0 18px rgba(255,70,70,.35)); }
  12%  { opacity: 1; }
  40%  { opacity: 1; transform: translate(-50%, -50%) translateX(7vw);   filter: blur(0)   drop-shadow(0 0 18px rgba(255,70,70,.35)); }
  60%  { opacity: 1; transform: translate(-50%, -50%) translateX(-7vw);  filter: blur(0)   drop-shadow(0 0 18px rgba(255,70,70,.35)); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translateX(-75vw); filter: blur(8px) drop-shadow(0 0 18px rgba(255,70,70,.35)); }
}
@keyframes gtStreak {
  0%   { opacity: 0; transform: translateY(-50%) scaleX(0); }
  20%  { opacity: .9; transform: translateY(-50%) scaleX(1); }
  80%  { opacity: .9; transform: translateY(-50%) scaleX(1); }
  100% { opacity: 0; transform: translateY(-50%) scaleX(1); }
}