/* Global animations and transitions */
html {
  scroll-behavior: smooth;
}

body {
  /* Body is visible by default for graceful noscript fallback */
  opacity: 1;
}

body.page-loaded {
  animation: page-fade-in var(--transition-slow) var(--ease-in-out) forwards;
}

.fade-in {
  opacity: 0;
  animation: fade-in var(--transition-base) var(--ease-out) forwards;
}

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

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}