/* ==========================================================================
   Forbidden Finance — Animations
   Scroll reveals, stagger delays, gradient mesh canvas, hover transitions
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fade In Up — default scroll-reveal animation
   -------------------------------------------------------------------------- */

.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 500ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   2. Fade In — opacity only
   -------------------------------------------------------------------------- */

.fade-in {
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.revealed {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Stagger Delays — 100ms increments
   -------------------------------------------------------------------------- */

.stagger-1 { transition-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; }
.stagger-5 { transition-delay: 500ms; }
.stagger-6 { transition-delay: 600ms; }
.stagger-7 { transition-delay: 700ms; }
.stagger-8 { transition-delay: 800ms; }

/* --------------------------------------------------------------------------
   4. Gradient Mesh Canvas
   Fixed fullscreen behind content, rendered by gradient-mesh.js
   -------------------------------------------------------------------------- */

#gradient-mesh {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Button Hover Transitions
   -------------------------------------------------------------------------- */

.btn {
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

/* --------------------------------------------------------------------------
   6. Header Scroll Transition
   -------------------------------------------------------------------------- */

.site-header {
  transition:
    background-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

/* --------------------------------------------------------------------------
   7. Reduced Motion — disable all animations
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fade-in-up,
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .stagger-1,
  .stagger-2,
  .stagger-3,
  .stagger-4,
  .stagger-5,
  .stagger-6,
  .stagger-7,
  .stagger-8 {
    transition-delay: 0ms;
  }

  .btn,
  .site-header {
    transition: none;
  }

  /* Let gradient-mesh.js handle its own reduced-motion fallback */
}