@import url("base.css");
@import url("layout.css");
@import url("components-v2.css");

/* ======================================
   INTRO PAGE LOADER / BACKDROP
====================================== */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-dark);
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.2s ease;
  pointer-events: none;
  animation: fadeInBackdrop 0.2s ease-out forwards;
}

.page-loader.hidden {
  opacity: 0;
  transition: opacity 0.3s ease;
}

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


/* ======================================
   ENTRANCE ANIMATION CLASSES
====================================== */

.animated-fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.animated-fade-down {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.2s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.fade-in-start {
  opacity: 1;
  transform: translateY(0);
}