/*
 * animations.css — Animace a přechody
 * Scroll reveal (Intersection Observer), hover efekty, přechody.
 * Respektuje prefers-reduced-motion.
 */

/* ===== SCROLL REVEAL ===== */

/*
 * Přidejte třídu .reveal na elementy, které chcete odhalit při scrollu.
 * Volitelné modifikátory:
 *   .reveal--up        — sklouzne zdola nahoru (výchozí)
 *   .reveal--left      — přijede zleva
 *   .reveal--right     — přijede zprava
 *   .reveal--fade      — pouze fade bez pohybu
 *   .reveal--delay-1   — zpoždění 100 ms
 *   .reveal--delay-2   — zpoždění 200 ms
 *   .reveal--delay-3   — zpoždění 300 ms
 *   .reveal--delay-4   — zpoždění 400 ms
 *
 * JS (main.js) přidá třídu .reveal--visible po průchodu viewportem.
 */

.reveal {
  opacity: 0;
  transition:
    opacity var(--transition-slow),
    transform var(--transition-slow);
}

/* Výchozí: zdola nahoru */
.reveal,
.reveal--up {
  transform: translateY(2rem);
}

.reveal--left  { transform: translateX(-2rem); }
.reveal--right { transform: translateX(2rem); }
.reveal--fade  { transform: none; }

/* Stav po průchodu viewportem */
.reveal--visible {
  opacity: 1;
  transform: none;
}

/* Kaskádová zpoždění pro skupiny karet */
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }
.reveal--delay-5 { transition-delay: 500ms; }

/* ===== HOVER EFEKTY ===== */

/* Lift — karty a klikatelné bloky */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Zvýraznění ikonou — šipka nebo chevron */
.hover-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: gap var(--transition-fast);
}

.hover-arrow:hover {
  gap: var(--space-4);
}

/* Underline efekt pro linky */
.hover-underline {
  position: relative;
  text-decoration: none;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width var(--transition-base);
}

.hover-underline:hover::after {
  width: 100%;
}

/* ===== LOADING / SKELETON ===== */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.skeleton {
  background-color: var(--color-gray-100);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* ===== FADE IN / OUT ===== */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.animate-fade-in {
  animation: fade-in var(--transition-slow) ease forwards;
}

/* ===== SLIDE ANIMACE (carousel) ===== */

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

@keyframes slide-out-right {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}

@keyframes slide-out-left {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}

/* ===== PULSUJÍCÍ ČERVENÁ TEČKA (logo accent) ===== */

@keyframes dot-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.3); }
}

.dot-pulse {
  display: inline-block;
  animation: dot-pulse 2s ease-in-out infinite;
  color: var(--color-accent);
}

/* ===== SPIN (loading indicator) ===== */

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

.animate-spin {
  animation: spin 0.8s linear infinite;
}

/* ===== PREFERS-REDUCED-MOTION ===== */
/*
 * WCAG 2.3 Success Criterion 2.3.3 (AAA) + dobrá praxe:
 * Pokud uživatel nastavil "snížit pohyb", deaktivujeme animace.
 */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal elementy okamžitě zobrazíme */
  .reveal {
    opacity: 1;
    transform: none;
  }
}