/* ============================================
   COMPONENTS CSS
   
   Reusable component styles that could be shared
   across multiple client sites. Think of this as
   your component library.
   ============================================ */


/* ============================================
   SCROLL ANIMATIONS
   
   Elements with .reveal class will fade in as
   they enter the viewport. The JS in main.js
   handles adding the .visible class.
   ============================================ */

.reveal {
  --reveal-y: 28px;
  --reveal-delay: 0ms;
  --reveal-duration: 720ms;
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition:
    opacity var(--reveal-duration) cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--reveal-duration) cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 280ms ease,
    background-color 280ms ease,
    border-color 280ms ease;
  transition-delay: var(--reveal-delay);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/* Staggered delays for grid items */
.reveal-delay-1 { --reveal-delay: 80ms; }
.reveal-delay-2 { --reveal-delay: 150ms; }
.reveal-delay-3 { --reveal-delay: 220ms; }
.reveal-delay-4 { --reveal-delay: 290ms; }
.reveal-delay-5 { --reveal-delay: 360ms; }
.reveal-delay-6 { --reveal-delay: 430ms; }

.reveal--soft {
  --reveal-y: 18px;
  --reveal-duration: 820ms;
}

.reveal--hero {
  --reveal-y: 16px;
  --reveal-duration: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}


/* ============================================
   LOADING / PAGE TRANSITION
   ============================================ */

.page-loader {
  position: fixed;
  inset: 0;
  background: var(--color-white);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease;
}

.page-loader.loaded {
  opacity: 0;
  pointer-events: none;
}