/*----------------------------------------*/
/*  Motion tokens + overrides
/*  Loaded after main.css so these win. One duration/easing
/*  scale for UI transitions; everything collapses under
/*  prefers-reduced-motion.
/*----------------------------------------*/
:root {
  --motion-duration-fast: 200ms;
  --motion-duration: 320ms;
  --motion-duration-slow: 400ms;
  /* easeOutQuint-ish: quick start, soft landing */
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Route change: fade the incoming page ---------- */
/* Opacity only: a transform on this wrapper would become the containing
   block for GSAP-pinned (position: fixed) elements and break them. */
.route-fade {
  animation: route-fade-in var(--motion-duration) var(--motion-ease) backwards;
}
@keyframes route-fade-in {
  from {
    opacity: 0;
  }
}

/* ---------- Offcanvas drawer + overlay ---------- */
/* Template animated `right` (layout on every frame) with different
   open/close timings. Use a GPU transform and one timing both ways. */
.at-offcanvas,
.at-offcanvas.opened {
  right: 0;
  transform: translateX(100%);
  transition:
    transform var(--motion-duration) var(--motion-ease-in-out),
    opacity var(--motion-duration) var(--motion-ease-in-out),
    visibility 0s linear var(--motion-duration);
}
.at-offcanvas.opened {
  transform: none;
  transition-delay: 0s;
}
.body-overlay {
  transition:
    opacity var(--motion-duration) var(--motion-ease-in-out),
    visibility 0s linear var(--motion-duration);
}
.body-overlay.apply {
  transition-delay: 0s;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  /* ScrollSmoother normally clips the page, which hides the closed offcanvas
     drawer parked off to the right. With the smoother off, that drawer leaks a
     few pixels of horizontal scroll on narrow screens. `clip` rather than
     `hidden` so it does not become a scroll container (which would break
     position: sticky). */
  html,
  body {
    overflow-x: clip;
  }

  /* Scroll-driven card stacks (".scroll-section"): the GSAP pin/scrub is skipped, so
     lay every card out in normal flow. Without this the cards stay absolutely
     positioned on top of each other and only the first one is ever readable. */
  .scroll-section .wrapper,
  .scroll-section .list {
    height: auto !important;
  }
  .scroll-section .item,
  .scroll-section .item:first-child,
  .scroll-section .item:not(:first-child) {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    transform: none !important;
    opacity: 1 !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}