@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body {
  overflow-y: scroll;
}
:root {
  --muqi-teqsti: #655449;
  --header: #69473c;
}

#loader {
  position: fixed;
  inset: 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
  font-family: "Tinos", serif;
  font-weight: 400;
  font-style: normal;
}

svg {
  width: 60%;
  height: auto;
}

/* ტალღის რექტანგლი */
.wave {
  animation:
    waveFill 4s ease-in-out forwards,
    waveFloat 4s ease-in-out forwards,
    waveMove 2s ease-in-out infinite;
}

/* ავსება ქვემოდან ზევით */
@keyframes waveFill {
  0%   { y: 200; }
  30%  { y: 140; }
  60%  { y: 80; }
  100% { y: 0; }
}

/* ტალღის "ცურვის" სიმულაცია მაღლა-ქვემოთ */
@keyframes waveFloat {
  0%   { transform: translateY(0px); }
  30%  { transform: translateY(-8px); }
  60%  { transform: translateY(8px); }
  100% { transform: translateY(0px); }
}

/* ჰორიზონტალური მოძრაობა – დაცურავდეს */
@keyframes waveMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100px); }
}

@media(max-width: 700px) {
  svg {
  width: 90%;
  }
}