/* ==========================================================================
   Floating Georgian Letters — Persistent Background
   ========================================================================== */

.floating-letters-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-letter {
  position: absolute;
  font-family: 'Noto Serif Georgian', serif;
  color: var(--gold-primary, #c9a84c);
  will-change: transform;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}


/* --- Float Animation Variants --- */

/* Variant 1: gentle sway right */
@keyframes floatUp1 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  25% {
    transform: translateY(-30vh) translateX(20px) rotate(4deg);
  }
  50% {
    transform: translateY(-60vh) translateX(-10px) rotate(8deg);
  }
  75% {
    transform: translateY(-90vh) translateX(15px) rotate(12deg);
  }
  100% {
    transform: translateY(-120vh) translateX(-5px) rotate(15deg);
  }
}

/* Variant 2: wider sway left */
@keyframes floatUp2 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  25% {
    transform: translateY(-30vh) translateX(-30px) rotate(-4deg);
  }
  50% {
    transform: translateY(-60vh) translateX(15px) rotate(6deg);
  }
  75% {
    transform: translateY(-90vh) translateX(-20px) rotate(-8deg);
  }
  100% {
    transform: translateY(-120vh) translateX(10px) rotate(-12deg);
  }
}

/* Variant 3: subtle sine wave */
@keyframes floatUp3 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  20% {
    transform: translateY(-24vh) translateX(12px) rotate(3deg);
  }
  40% {
    transform: translateY(-48vh) translateX(-12px) rotate(-3deg);
  }
  60% {
    transform: translateY(-72vh) translateX(12px) rotate(3deg);
  }
  80% {
    transform: translateY(-96vh) translateX(-12px) rotate(-3deg);
  }
  100% {
    transform: translateY(-120vh) translateX(0) rotate(0deg);
  }
}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .floating-letter {
    animation: none !important;
    display: none;
  }
}