/**
 * File: css/effects.css
 * Location: /css/effects.css
 * Version: 2.1.0
 * Last updated: 2026-08-07
 *
 * Ústecký Hladáč – effects / motion layer of the split design system.
 * Everything that MOVES lives here: loop animations, hover/touch
 * micro-interactions, focus rings and the animated aurora background.
 * Static layout, colors and tokens stay in css/style.css; per-theme
 * colors live in css/theme-light.css / css/theme-dark.css.
 *
 * Loaded AFTER style.css in inc/header.php (see there).
 */

/* ============================================================
   1. LOOP ANIMATIONS (moved from style.css)
   ============================================================ */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--primary-soft); }
  50% { box-shadow: 0 0 0 7px transparent; }
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Gentle aurora drift behind the fixed body gradient. Applied to a
   fixed -1 z-index layer on body::before so no stacking is broken. */
@keyframes aurora-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.85;
  }
  50% {
    transform: translate3d(2%, -3%, 0) scale(1.06);
    opacity: 1;
  }
}

/* ============================================================
   2. AUDORA BACKGROUND LAYER
   A blurred full-viewport layer that slowly drifts behind content.
   Colors come from --aurora-1..3 (defined per theme). Triggered only
   when the media query below allows motion (see reduced-motion).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  body::before {
    content: '';
    position: fixed;
    inset: -10%;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(45% 45% at 15% 20%, var(--aurora-1), transparent 70%),
      radial-gradient(50% 50% at 85% 15%, var(--aurora-2), transparent 70%),
      radial-gradient(40% 40% at 60% 90%, var(--aurora-3), transparent 70%);
    filter: blur(30px);
    animation: aurora-drift 26s ease-in-out infinite;
  }
}

/* ============================================================
   3. SKELETON / PULSE LOADING (moved from style.css)
   ============================================================ */
.skeleton-line {
  height: 0.85rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--border-strong) 50%, var(--surface-sunken) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
}

.theme-pulse:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
  animation: pulse 1.6s infinite ease-in-out;
}

.widget-refreshing { opacity: 0.55; transition: opacity var(--transition-fast); }

/* ============================================================
   4. TOUCH TARGETS
   Enforce the minimum interactive hit-area (WCAG 2.5.5) for
   touch-oriented controls that tend to be too small on mobile.
   ============================================================ */
@media (pointer: coarse) {
  .theme-toggle-button,
  .navbar-toggler,
  .btn,
  .quick-nav-tile {
    min-height: var(--touch-target);
  }
}

/* ============================================================
   5. HOVER / ACTIVE micro-interactions
   ============================================================ */
/* Apply a soft "raised" feel on tinted interactive surfaces (forme,
   list items, tiles) with a quick settle. */
@media (pointer: fine) {
  .quick-nav-tile {
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  }
}

/* ============================================================
   6. ACCESSIBILITY: reduced motion
   Kill all non-essential animation for users who ask for it.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}