/* ============================================================
   animations.css — Scroll Reveals, Delays, Transitions
============================================================ */

/* ── REVEAL BASE STATES ── */
.reveal {
  opacity: 0;
  transform: translateY(52px);
  transition: opacity .85s var(--ease-expo), transform .85s var(--ease-expo);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-52px);
  transition: opacity .85s var(--ease-expo), transform .85s var(--ease-expo);
}
.reveal-right {
  opacity: 0;
  transform: translateX(52px);
  transition: opacity .85s var(--ease-expo), transform .85s var(--ease-expo);
}
.reveal-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity .85s var(--ease-expo), transform .85s var(--ease-expo);
}

/* ── VISIBLE STATE (added by JS) ── */
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* ── STAGGER DELAYS ── */
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .18s; }
.delay-3 { transition-delay: .28s; }
.delay-4 { transition-delay: .38s; }
.delay-5 { transition-delay: .48s; }
.delay-6 { transition-delay: .58s; }

/* ── HOVER FLOAT ── */
.hover-float {
  transition: transform var(--trans-med);
}
.hover-float:hover { transform: translateY(-6px); }

/* ── SMOOTH SECTION TRANSITION ── */
#about, #services, #projects, #why, #process, #testimonials, #contact {
  position: relative;
}

/* Diagonal wipe between dark/light sections */
#about::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 70px;
  background: var(--off-white);
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 1;
}
#services::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 70px;
  background: var(--white);
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 1;
}
#why::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 70px;
  background: var(--royal);
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 1;
}
#process::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 70px;
  background: var(--off-white);
  clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── PARTICLE CANVAS (global) ── */
#particleCanvas {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
}