.glass-frame {
  background: rgba(255, 255, 255, 0.08); /* лёгкая белая прозрачность */
  backdrop-filter: blur(20px); /* эффект стекла */
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2);
}

/* ====== Flip Card (Tilda Zero Block) ======
   Работает с парами классов:
   ti-cardfront1 / ti-cardback1, ti-cardfront2 / ti-cardback2 и т.д.
*/

/* Общие настройки (можешь править) */
:root{
  --ti-flip-perspective: 1200px;
  --ti-flip-duration: 700ms;
  --ti-flip-ease: cubic-bezier(.2,.8,.2,1);
}

/* База для обеих сторон */
.ti-cardfront1, .ti-cardback1,
.ti-cardfront2, .ti-cardback2,
.ti-cardfront3, .ti-cardback3,
.ti-cardfront4, .ti-cardback4,
.ti-cardfront5, .ti-cardback5,
.ti-cardfront6, .ti-cardback6,
.ti-cardfront7, .ti-cardback7,
.ti-cardfront8, .ti-cardback8,
.ti-cardfront9, .ti-cardback9,
.ti-cardfront10, .ti-cardback10{
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform var(--ti-flip-duration) var(--ti-flip-ease),
              opacity   var(--ti-flip-duration) var(--ti-flip-ease);
  will-change: transform, opacity;
  cursor: pointer;
}

/* Перспектива — задаём на "контейнер", но в ZeroBlock контейнера нет.
   Поэтому ставим на обе стороны: визуально работает стабильно. */
.ti-cardfront1, .ti-cardback1,
.ti-cardfront2, .ti-cardback2,
.ti-cardfront3, .ti-cardback3,
.ti-cardfront4, .ti-cardback4,
.ti-cardfront5, .ti-cardback5,
.ti-cardfront6, .ti-cardback6,
.ti-cardfront7, .ti-cardback7,
.ti-cardfront8, .ti-cardback8,
.ti-cardfront9, .ti-cardback9,
.ti-cardfront10, .ti-cardback10{
  perspective: var(--ti-flip-perspective);
}

/* Стартовое состояние */
.ti-cardback1,
.ti-cardback2,
.ti-cardback3,
.ti-cardback4,
.ti-cardback5,
.ti-cardback6,
.ti-cardback7,
.ti-cardback8,
.ti-cardback9,
.ti-cardback10{
  transform: rotateY(180deg);
  opacity: 0;
  pointer-events: none;
}

/* Класс состояния "перевёрнуто" (его будет ставить JS) */
.ti-flipped.ti-cardfront1,
.ti-flipped.ti-cardfront2,
.ti-flipped.ti-cardfront3,
.ti-flipped.ti-cardfront4,
.ti-flipped.ti-cardfront5,
.ti-flipped.ti-cardfront6,
.ti-flipped.ti-cardfront7,
.ti-flipped.ti-cardfront8,
.ti-flipped.ti-cardfront9,
.ti-flipped.ti-cardfront10{
  transform: rotateY(180deg);
  opacity: 0;
  pointer-events: none;
}

.ti-flipped.ti-cardback1,
.ti-flipped.ti-cardback2,
.ti-flipped.ti-cardback3,
.ti-flipped.ti-cardback4,
.ti-flipped.ti-cardback5,
.ti-flipped.ti-cardback6,
.ti-flipped.ti-cardback7,
.ti-flipped.ti-cardback8,
.ti-flipped.ti-cardback9,
.ti-flipped.ti-cardback10{
  transform: rotateY(360deg); /* 180 + 180 = чтобы смотрелась "вперёд" */
  opacity: 1;
  pointer-events: auto;
}

/* Уважение к reduced motion */
@media (prefers-reduced-motion: reduce){
  .ti-cardfront1, .ti-cardback1,
  .ti-cardfront2, .ti-cardback2,
  .ti-cardfront3, .ti-cardback3,
  .ti-cardfront4, .ti-cardback4,
  .ti-cardfront5, .ti-cardback5,
  .ti-cardfront6, .ti-cardback6,
  .ti-cardfront7, .ti-cardback7,
  .ti-cardfront8, .ti-cardback8,
  .ti-cardfront9, .ti-cardback9,
  .ti-cardfront10, .ti-cardback10{
    transition: none !important;
  }
}
/* ====== Hint wobble (только лицевая сторона) ====== */

/* Анимация "лёгкое шатание" */
@keyframes tiWobble {
  0%, 100% { transform: rotateY(0deg) rotateZ(0deg) translateY(0); }
  15%      { transform: rotateY(-6deg) rotateZ(-0.6deg) translateY(-1px); }
  30%      { transform: rotateY(6deg)  rotateZ(0.6deg)  translateY(0); }
  45%      { transform: rotateY(-4deg) rotateZ(-0.4deg) translateY(-1px); }
  60%      { transform: rotateY(4deg)  rotateZ(0.4deg)  translateY(0); }
  75%      { transform: rotateY(-2deg) rotateZ(-0.2deg) translateY(-1px); }
}

/* Применяем к фронтам (1..10, расширь если нужно) */
.ti-cardfront1, .ti-cardfront2, .ti-cardfront3, .ti-cardfront4, .ti-cardfront5,
.ti-cardfront6, .ti-cardfront7, .ti-cardfront8, .ti-cardfront9, .ti-cardfront10{
  animation: tiWobble 2.6s ease-in-out infinite;
  transform-origin: 50% 60%;
}

/* На ховере — стоп (приятнее) */
.ti-cardfront1:hover, .ti-cardfront2:hover, .ti-cardfront3:hover, .ti-cardfront4:hover, .ti-cardfront5:hover,
.ti-cardfront6:hover, .ti-cardfront7:hover, .ti-cardfront8:hover, .ti-cardfront9:hover, .ti-cardfront10:hover{
  animation-play-state: paused;
}

/* Когда карточка уже перевёрнута — фронт не анимируем */
.ti-flipped.ti-cardfront1,
.ti-flipped.ti-cardfront2,
.ti-flipped.ti-cardfront3,
.ti-flipped.ti-cardfront4,
.ti-flipped.ti-cardfront5,
.ti-flipped.ti-cardfront6,
.ti-flipped.ti-cardfront7,
.ti-flipped.ti-cardfront8,
.ti-flipped.ti-cardfront9,
.ti-flipped.ti-cardfront10{
  animation: none !important;
}
/* ================================
   FLOATING ISLANDS (7 items)
   ================================ */

@keyframes floatY {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(0, -14px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* базовый класс */
.float-island {
  animation-name: floatY;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* индивидуальные настройки */
.float-island--1 { animation-duration: 5.2s; animation-delay: -0.8s; }
.float-island--2 { animation-duration: 6.0s; animation-delay: -2.1s; }
.float-island--3 { animation-duration: 6.6s; animation-delay: -3.4s; }
.float-island--4 { animation-duration: 5.8s; animation-delay: -1.6s; }
.float-island--5 { animation-duration: 7.0s; animation-delay: -4.2s; }
.float-island--6 { animation-duration: 6.3s; animation-delay: -2.7s; }
.float-island--7 { animation-duration: 5.5s; animation-delay: -3.9s; }

/* уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .float-island {
    animation: none !important;
  }
}