/* ==================== PAGE TRANSITIONS ==================== */

/* Page fade in on load */
body {
  animation: pageFadeIn 0.5s ease-in-out;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Main content fade in */
main {
  animation: contentSlideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes contentSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section fade in (general) */
section:not([class*="animate"]) {
  animation: sectionFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes sectionFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger sections */
section:nth-of-type(1) { animation-delay: 0s; }
section:nth-of-type(2) { animation-delay: 0.1s; }
section:nth-of-type(3) { animation-delay: 0.2s; }
section:nth-of-type(4) { animation-delay: 0.3s; }
section:nth-of-type(5) { animation-delay: 0.4s; }

/* Links smooth transition */
a {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prevent flash of unstyled content */
html {
  opacity: 0;
  animation: htmlFadeIn 0.3s ease-in-out forwards;
}

@keyframes htmlFadeIn {
  to {
    opacity: 1;
  }
}