/* ==========================================================================
   Entrance Transitions - Page Orchestrator
   ========================================================================== */

/* State Classes
   ------------------------------------------------------------------ */

/* Hidden state - elements start here (enter) or end here (exit) */
.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Visible state - normal visible state */
.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Exiting state - applied during exit animation */
.is-exiting {
  opacity: 0;
  pointer-events: none;
}

/* Disabled state - for elements waiting on JS */
.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Once JS is ready, remove disabled state */
.js-ready .is-disabled {
  pointer-events: auto;
  opacity: 1;
}

/* Enter Transition Classes
   ------------------------------------------------------------------ */

/* Fade */
.enter-fade {
  transition: opacity var(--transition-normal);
}

/* Fade + slide up */
.enter-fade-up {
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}
.enter-fade-up.is-hidden {
  transform: translateY(var(--entrance-distance));
}
.enter-fade-up.is-visible {
  transform: translateY(0);
}

/* Slide from end (RTL-ready) */
.enter-slide-end {
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}
.enter-slide-end.is-hidden {
  transform: translateX(var(--entrance-distance));
}
[dir="rtl"] .enter-slide-end.is-hidden {
  transform: translateX(calc(var(--entrance-distance) * -1));
}
.enter-slide-end.is-visible {
  transform: translateX(0);
}

/* Swipe from end - offscreen (RTL-ready) */
.enter-swipe-end {
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}
.enter-swipe-end.is-hidden {
  transform: translateX(var(--entrance-offscreen));
}
[dir="rtl"] .enter-swipe-end.is-hidden {
  transform: translateX(calc(var(--entrance-offscreen) * -1));
}
.enter-swipe-end.is-visible {
  transform: translateX(0);
}

/* Slide from start (RTL-ready) */
.enter-slide-start {
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}
.enter-slide-start.is-hidden {
  transform: translateX(calc(var(--entrance-distance) * -1));
}
[dir="rtl"] .enter-slide-start.is-hidden {
  transform: translateX(var(--entrance-distance));
}
.enter-slide-start.is-visible {
  transform: translateX(0);
}

/* Slide from top */
.enter-slide-top {
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}
.enter-slide-top.is-hidden {
  transform: translateY(calc(var(--entrance-distance) * -1));
}
.enter-slide-top.is-visible {
  transform: translateY(0);
}

/* Slide from bottom */
.enter-slide-bottom {
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}
.enter-slide-bottom.is-hidden {
  transform: translateY(var(--entrance-distance));
}
.enter-slide-bottom.is-visible {
  transform: translateY(0);
}

/* Exit Transition Classes
   ------------------------------------------------------------------ */

/* Fade out */
.exit-fade {
  transition: opacity var(--transition-normal);
}

/* Fade + slide down */
.exit-fade-down {
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}
.exit-fade-down.is-exiting {
  transform: translateY(var(--entrance-distance));
}

/* Slide to end (RTL-ready) */
.exit-slide-end {
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}
.exit-slide-end.is-exiting {
  transform: translateX(var(--entrance-distance));
}
[dir="rtl"] .exit-slide-end.is-exiting {
  transform: translateX(calc(var(--entrance-distance) * -1));
}

/* Slide to start (RTL-ready) */
.exit-slide-start {
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}
.exit-slide-start.is-exiting {
  transform: translateX(calc(var(--entrance-distance) * -1));
}
[dir="rtl"] .exit-slide-start.is-exiting {
  transform: translateX(var(--entrance-distance));
}

/* Slide to top */
.exit-slide-top {
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}
.exit-slide-top.is-exiting {
  transform: translateY(calc(var(--entrance-distance) * -1));
}

/* Slide to bottom */
.exit-slide-bottom {
  transition:
    opacity var(--transition-normal),
    transform var(--transition-normal);
}
.exit-slide-bottom.is-exiting {
  transform: translateY(var(--entrance-distance));
}

/* Reduced Motion Support
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* Override all entrance transitions to simple fast fade */
  .enter-fade,
  .enter-fade-up,
  .enter-slide-end,
  .enter-swipe-end,
  .enter-slide-start,
  .enter-slide-top,
  .enter-slide-bottom {
    transition: opacity 0.1s ease !important;
  }

  /* Remove transform from hidden state */
  .enter-fade-up.is-hidden,
  .enter-slide-end.is-hidden,
  .enter-swipe-end.is-hidden,
  .enter-slide-start.is-hidden,
  .enter-slide-top.is-hidden,
  .enter-slide-bottom.is-hidden {
    transform: none !important;
  }

  /* Same for exit transitions */
  .exit-fade,
  .exit-fade-down,
  .exit-slide-end,
  .exit-slide-start,
  .exit-slide-top,
  .exit-slide-bottom {
    transition: opacity 0.1s ease !important;
  }

  .exit-fade-down.is-exiting,
  .exit-slide-end.is-exiting,
  .exit-slide-start.is-exiting,
  .exit-slide-top.is-exiting,
  .exit-slide-bottom.is-exiting {
    transform: none !important;
  }
}