/* =============================================================================
   ANIMATION VARIABLES
   ============================================================================= */

:root {
  /* ── Durations ──────────────────────────────────────────────────────────── */

  --duration-hover: 0.2s; /* article.css — next article hover */
  --duration-dreams-fade: 0.25s; /* dreams.css — grid overlay fade */
  --duration-hamburger: 0.3s; /* style.css — hamburger rotate */
  --duration-page: 0.4s; /* page-load.css — page fade in/out → manually update PAGE_DURATION in page-load.js */
  --duration-reveal: 0.8s; /* scroll.css — scroll reveal → manually update IMG_FADE_DURATION in img-lazy.js */
  --duration-nav: 1s; /* style.css — nav slide → manually update NAV_DURATION in page-load.js */
  --duration-breathe: 4s; /* style.css, dreams.css — breathe loop */
  --duration-pulse: 5s; /* article.css — gradient pulse loop */
  --duration-g1: 33s; /* article.css  — gradient blob g1 */
  --duration-g2: 40s; /* article.css  — gradient blob g2 */
  --duration-g3: 10s; /* article.css  — gradient blob g3 */

  /* ── Easings ────────────────────────────────────────────────────────────── */

  --ease-default: ease;
  --ease-in: ease-in;
  --ease-in-out: ease-in-out;
  --ease-nav: cubic-bezier(0.84, 0, 0.61, 1); /* nav slide + hamburger rotate */
  --ease-blob: cubic-bezier(0.84, 0, 0.61, 1);
}

@keyframes moveInCircle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes moveHorizontal {
  0% {
    transform: translateX(-50%) translateY(-10%);
  }
  50% {
    transform: translateX(50%) translateY(10%);
  }
  100% {
    transform: translateX(-50%) translateY(-10%);
  }
}