/* ============================================================
   ANIMATIONS — replaces Framer Motion runtime
   Canvas and Allied — canvasandallied.co.za

   Source animation spec (from <script type="framer/appear">):
     initial:  { opacity: 0.001, y: -10px }
     animate:  { opacity: 1, y: 0 }
     spring:   { bounce: 0.2, duration: 1.6s, delay: 1s }
   ============================================================ */


/* ── SCROLL REVEAL ──────────────────────────────────────────── */
/*
   Initial hidden states — GSAP drives all animation.
   No CSS transition here: GSAP owns the timing. If GSAP fails to load,
   the .is-visible fallback below snaps elements visible instantly.
*/
.reveal-up    { opacity: 0; transform: translateY(-10px); }
.reveal-fade  { opacity: 0; transform: none; }
.reveal-down  { opacity: 0; transform: translateY(10px); }
.reveal-left  { opacity: 0; transform: translateX(-24px); }
.reveal-right { opacity: 0; transform: translateX(24px); }

.reveal-up.is-visible,
.reveal-fade.is-visible,
.reveal-down.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: none;
}


/* ── STAGGER DELAYS ─────────────────────────────────────────── */
/* Applied to children of a .stagger parent */

.stagger > *:nth-child(1) { transition-delay: 0.00s; }
.stagger > *:nth-child(2) { transition-delay: 0.10s; }
.stagger > *:nth-child(3) { transition-delay: 0.20s; }
.stagger > *:nth-child(4) { transition-delay: 0.30s; }
.stagger > *:nth-child(5) { transition-delay: 0.40s; }
.stagger > *:nth-child(6) { transition-delay: 0.50s; }
.stagger > *:nth-child(7) { transition-delay: 0.60s; }
.stagger > *:nth-child(8) { transition-delay: 0.70s; }

/* Manual delay overrides */
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }
.reveal-delay-5 { transition-delay: 0.50s; }
.reveal-delay-6 { transition-delay: 0.60s; }


/* ── NAV ENTRANCE ────────────────────────────────────────────── */
/*
   The nav uses data-framer-appear-id with:
     initial: opacity:0.001, translateY(-10px)
     spring: { bounce:0.2, delay:1, duration:1.6 }
   The 1s delay is intentional — nav enters after page content settles.
*/

/* Nav entrance: confirmed delay:1s, same spring as reveals */
.nav-entrance {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  animation: navEnter 1.6s cubic-bezier(0.34, 1.1, 0.64, 1) 1.0s forwards;
}

@keyframes navEnter {
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Alternate class form (for IntersectionObserver-driven nav reveals) */
.reveal-nav {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity  1.6s cubic-bezier(0.34, 1.1, 0.64, 1) 1s,
              transform 1.6s cubic-bezier(0.34, 1.1, 0.64, 1) 1s;
}
.reveal-nav.is-visible {
  opacity: 1;
  transform: none;
}


/* ── STICKY NAV TRANSITION ───────────────────────────────────── */
/* Applied via JS adding .is-scrolled to header when scrollY > 20 */
/* Transition lives in main.css .site-nav rule */


/* ── HOVER — CARDS ───────────────────────────────────────────── */
/*
   Framer data-framer-hover elements on cards and interactive tiles.
   Source: 5 hover instances found in index.html.
*/

.hover-lift {
  transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.28s ease;
  will-change: transform;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}


/* ── HOVER — NAV LINKS ───────────────────────────────────────── */
/* Framer uses opacity fade on link hover. Handled in main.css
   .site-nav__links a:hover { opacity: 0.7 } */


/* ── HOVER — BUTTONS ─────────────────────────────────────────── */
/* Handled in main.css .btn:hover rules */


/* ── HOVER — SCALE ───────────────────────────────────────────── */
.hover-scale {
  transition: transform 0.2s ease;
}

.hover-scale:hover {
  transform: scale(1.03);
}


/* ── RESPECT REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-up,
  .reveal-fade,
  .reveal-down,
  .reveal-left,
  .reveal-right {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .nav-entrance {
    animation: none;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .reveal-nav {
    transition: none;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .hover-lift  { transition: none; }
  .hover-scale { transition: none; }
}