/* ============================================================
   animations.css — keyframes, loader, skeleton, reveal
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(55, 217, 155, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(55, 217, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(55, 217, 155, 0); }
}

@keyframes star-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(1.18) rotate(8deg); opacity: .85; }
}

@keyframes wheel-scroll {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

@keyframes toast-in {
  from { transform: translateY(24px) scale(.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes toast-out {
  from { transform: none; opacity: 1; }
  to   { transform: translateY(14px) scale(.96); opacity: 0; }
}

@keyframes float-slow {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(18px, -24px); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes logo-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 22px rgba(61, 123, 253, 0.45)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 40px rgba(61, 123, 253, 0.75)); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes fav-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45) rotate(-8deg); }
  70%  { transform: scale(.9) rotate(4deg); }
  100% { transform: scale(1); }
}

/* ---------- Page loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--bg-0);
  transition: opacity .55s ease, visibility .55s;
}
.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-logo {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 800;
  animation: logo-pulse 1.6s ease-in-out infinite;
}
.loader-logo .b { color: var(--blue-2); }
.loader-logo .y { color: var(--yellow); }

.loader-bar {
  width: min(260px, 60vw);
  height: 3px;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.loader-bar::after {
  content: '';
  display: block;
  width: 45%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 14px rgba(61, 123, 253, 0.8);
  animation: loader-slide 1.1s var(--ease) infinite;
}
@keyframes loader-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(340%); }
}
.loader-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- Skeleton loading ---------- */
.skeleton-card {
  border-radius: var(--r-md);
  padding: 22px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.sk-line {
  height: 13px;
  border-radius: 7px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.05) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}
.sk-line.w40 { width: 40%; }
.sk-line.w70 { width: 70%; }
.sk-line.w90 { width: 90%; }
.sk-line.tall { height: 26px; width: 30%; border-radius: 9px; }

/* ---------- Entrance (використовується GSAP-ом) ---------- */
.gs-reveal { will-change: transform, opacity; }

/* Плаваючі орби */
.orb-float { animation: float-slow 11s ease-in-out infinite; }

/* Іконка обраного — поп при кліку */
.icon-btn.pop .icon { animation: fav-pop .45s var(--ease); }

/* ---------- Reduced motion ----------
   Свідомо НЕ вимикаємо анімації глобально: у багатьох Windows-користувачів
   «Ефекти анімації» вимкнені на рівні ОС, і сайт виглядав би повністю статичним.
   Анімації — ключова частина дизайну цього проекту. */