/* =============================================
   POHYB ONLINE — Animace & přechody
   ============================================= */

/* ─── Page load ─── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

/* Hero entrance */
.hero__label   { animation: fadeInUp  0.6s 0.1s both; }
.hero__title   { animation: fadeInUp  0.7s 0.25s both; }
.hero__desc    { animation: fadeInUp  0.7s 0.4s both; }
.hero__actions { animation: fadeInUp  0.7s 0.55s both; }
.hero__stats   { animation: fadeInUp  0.7s 0.65s both; }
.hero__image-wrap { animation: scaleIn 0.9s 0.35s both; }

/* Stagger helper pro sekce */
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.15s; }
.stagger > *:nth-child(3) { animation-delay: 0.25s; }
.stagger > *:nth-child(4) { animation-delay: 0.35s; }
.stagger > *:nth-child(5) { animation-delay: 0.45s; }

/* Floating efekt pro dekoraci */
@keyframes float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
.float { animation: float 5s ease-in-out infinite; }

/* Shimmer loader */
@keyframes shimmer {
  to { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--border) 50%, var(--bg-subtle) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}

/* Progress bar (kapacita kurzu) */
.progress-bar {
  height: 8px;
  background: var(--bg-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  border-radius: var(--radius-full);
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}

/* Ripple pro tlačítka */
.btn { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: ripple-anim 0.6s linear;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(4); opacity: 0; }
}