/* ==========================================================================
   Motion & Animation - SUCURLE
   ========================================================================== */

/* Preloader */
.preloader {
  position: fixed;
  inset: 0;
  background-color: var(--clr-bg);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.8s var(--ease-precise);
}
.preloader.hidden {
  opacity: 0;
  pointer-events: none;
}
.preloader__text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--clr-silver);
  position: relative;
  overflow: hidden;
}
.preloader__text::after {
  content: 'SUCURLE';
  position: absolute;
  top: 0;
  left: 0;
  color: var(--clr-text);
  width: 0%;
  overflow: hidden;
  animation: fillText 1s var(--ease-precise) forwards;
}

@keyframes fillText {
  100% { width: 100%; }
}

/* Intersection Observer - Assembly Animation */
.assemble-up {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.assemble-up.is-inview {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.assemble-left {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.assemble-left.is-inview {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger Delays */
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.6s; }

/* Sticky Container */
.sticky-container {
  height: 200vh; /* Allow scrolling while sticky is active */
  position: relative;
}
.sticky-element {
  position: sticky;
  top: 15vh;
  height: 70vh;
  display: flex;
  align-items: center;
}