/* css/animations/clarity.css — Mjuka, lugnande animationer för nybörjare */

/* === SIDBYTE === */

body[data-mode="clarity"] .page-enter {
  animation: aicfo-fade-in 450ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body[data-mode="clarity"] .page-exit {
  animation: aicfo-fade-in 200ms ease-in reverse forwards;
  pointer-events: none;
}

/* === STAGGER — Barn-element fade-up i sekvens === */

body[data-mode="clarity"] .page-enter > * {
  opacity: 0;
  animation: aicfo-fade-up 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body[data-mode="clarity"] .page-enter > *:nth-child(1) { animation-delay: 60ms; }
body[data-mode="clarity"] .page-enter > *:nth-child(2) { animation-delay: 150ms; }
body[data-mode="clarity"] .page-enter > *:nth-child(3) { animation-delay: 240ms; }
body[data-mode="clarity"] .page-enter > *:nth-child(4) { animation-delay: 330ms; }
body[data-mode="clarity"] .page-enter > *:nth-child(5) { animation-delay: 420ms; }
body[data-mode="clarity"] .page-enter > *:nth-child(6) { animation-delay: 510ms; }

/* === NAV-KLICK — subtil pulse === */

body[data-mode="clarity"] .nav-item.nav-clicked {
  animation: aicfo-pulse-click 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* === KNAPP-KLICK === */

body[data-mode="clarity"] .btn:active {
  animation: aicfo-pulse-click 200ms ease;
}

/* === KORT — subtle lift på hover === */

body[data-mode="clarity"] .card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-mode="clarity"] .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* === GOAL PROGRESS — mjukare easing === */

body[data-mode="clarity"] .goal-progress-fill {
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}