/* Custom CSS added by Mousetrap */



/* STAGGERED GRID - elements fade into existence in order - for Lists, Flexbox, Grids */

/* ────────────────────────────────────────────────────────────────
   Stagger-grid · fade-in one-by-one as the grid scrolls into view
   ----------------------------------------------------------------
   1.  Add class="stagger-grid" to any container (Grid, Flex, list)
   2.  The IntersectionObserver script injects the index ( --i )
       and later adds .stagger-start when 15 % of the grid is visible
   3.  Use .stagger--slower / .stagger--faster or your own class
       to tweak --duration / --stagger on a per-grid basis
   ---------------------------------------------------------------- */

/* ─── Stagger-grid (full, final stylesheet) ─────────────────── */

.stagger-grid {
  display: grid;                  /* customise layout as you like  */
  --duration: .7s;                /* fade length                   */
  --stagger : .25s;               /* gap between items             */
}

/* 1️⃣  Keep items hidden until grid is observed */
.stagger-grid:not(.stagger-start) > * {
  opacity: 0 !important;          /* beats Elementor inline styles */
  transform: translateY(8px);
}

/* 2️⃣  Launch the animation once .stagger-start is added */
.stagger-grid.stagger-start > * {
  animation: sg-fade var(--duration) ease-out forwards !important;
  animation-fill-mode: both !important;
  animation-delay: calc(var(--i) * var(--stagger)) !important;
}

/* 3️⃣  Optional speed utilities */
.stagger--slower { --duration: .7s;  --stagger: .25s; }
.stagger--faster { --duration: .25s; --stagger: .06s; }

/* 4️⃣  Keyframes — now with an explicit 0 % frame */
@keyframes sg-fade {
  0%   { opacity: 0; transform: translateY(8px); }  /* starting state  */
  100% { opacity: 1; transform: translateY(0); }    /* end state       */
}


/* END Staggered Grids */