/* Loady — CDN Page Loader
 * Paste this snippet into the <head> of your page.
 * https://github.com/szsoma/loady
 * made by Soma Szoboszlai
 */

/* 1. Instantly hide elements meant for GSAP/JS animations */
[data-gsap-hide] {
  visibility: hidden;
  opacity: 0;
}

/* 2. Lock body scroll while loading */
body[data-loady-status="loading"] {
  overflow: hidden;
}

/* Note: Loady also sets the `inert` attribute on every <body> child except the
   loader container while loading, which blocks keyboard focus, pointer, and
   scroll into page content behind the loader. This is enforced by the browser
   (no CSS needed here). Older browsers without `inert` support degrade gracefully
   to the scroll-lock above. */

/* 3. Ensure the loader is always on top and visible initially */
[data-loady="container"] {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
}

/* 4. Animation transitions driven by CSS custom properties */
[data-loady="container"] {
  transition: opacity var(--loady-duration, 0.5s) var(--loady-easing, ease-in-out),
              transform var(--loady-duration, 0.5s) var(--loady-easing, ease-in-out);
}

/* animateOut states */
[data-loady="container"][data-loady-state="fade"] {
  opacity: 0;
}
[data-loady="container"][data-loady-state="slide-up"] {
  transform: translateY(-100%);
}
[data-loady="container"][data-loady-state="slide-down"] {
  transform: translateY(100%);
}

/* Outbound initial states */
[data-loady="container"][data-loady-state="outbound-fade"] {
  opacity: 0;
}
[data-loady="container"][data-loady-state="outbound-slide-up"] {
  transform: translateY(100%);
}
[data-loady="container"][data-loady-state="outbound-slide-down"] {
  transform: translateY(-100%);
}

/* Outbound final states */
[data-loady="container"][data-loady-state="outbound-fade-final"] {
  opacity: 1;
}
[data-loady="container"][data-loady-state="outbound-slide-up-final"] {
  transform: translateY(0);
}
[data-loady="container"][data-loady-state="outbound-slide-down-final"] {
  transform: translateY(0);
}

/* 5. View Transition keyframes (active only during startViewTransition) */
::view-transition-old(root) {
  animation: loady-vt-old var(--loady-duration, 0.5s)
    var(--loady-easing, ease-in-out) forwards;
}

::view-transition-new(root) {
  animation: loady-vt-new var(--loady-duration, 0.5s)
    var(--loady-easing, ease-in-out) forwards;
}

@keyframes loady-vt-old {
  from {
    opacity: 1;
    translate: 0 0;
  }
  to {
    opacity: 0;
    translate: 0 -40px;
  }
}

@keyframes loady-vt-new {
  from {
    opacity: 0;
    translate: 0 40px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* 6. Reduced motion — suppress all loader and view transition animations */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  [data-loady="container"] {
    transition-duration: 0ms !important;
  }
}