/* ============================================================
   SHAPES LAB — ANIMATIONS
   Entrance: fadeUp — opacity + translateY on page load.
   Apply .animate-N classes to stagger elements in sequence.
   Adjust duration (0.55s) or step gap (0.08s) to taste.
   ============================================================ */


/* ===== KEYFRAME ============================================== */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ===== BASE RULE ============================================= */

[class*="animate-"] {
  opacity: 0;
  animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}


/* ===== STAGGER DELAYS (step = 0.08s) ======================== */

.animate-1  { animation-delay: 0.00s; }
.animate-2  { animation-delay: 0.08s; }
.animate-3  { animation-delay: 0.16s; }
.animate-4  { animation-delay: 0.24s; }
.animate-5  { animation-delay: 0.32s; }
.animate-6  { animation-delay: 0.40s; }
.animate-7  { animation-delay: 0.48s; }
.animate-8  { animation-delay: 0.56s; }
.animate-9  { animation-delay: 0.64s; }
.animate-10 { animation-delay: 0.72s; }
.animate-11 { animation-delay: 0.80s; }
.animate-12 { animation-delay: 0.88s; }
.animate-13 { animation-delay: 0.96s; }
.animate-14 { animation-delay: 1.04s; }
.animate-15 { animation-delay: 1.12s; }
.animate-16 { animation-delay: 1.20s; }
.animate-17 { animation-delay: 1.28s; }

/* Portfolio grid — waits for sidebar animations to finish (~1.1s) */
.animate-portfolio { animation-delay: 1.0s; }