/* ==========================================================================
   FEMME MEDIALE — MOTION & MICRO-ANIMATIONS
   Subtle, refined, non-bouncy, respects prefers-reduced-motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SCROLL REVEAL (IntersectionObserver triggered)
   -------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-medium) var(--ease-editorial),
              transform var(--duration-medium) var(--ease-editorial);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger Children within a Grid */
.reveal-stagger > *:nth-child(1) { transition-delay: 60ms; }
.reveal-stagger > *:nth-child(2) { transition-delay: 140ms; }
.reveal-stagger > *:nth-child(3) { transition-delay: 220ms; }
.reveal-stagger > *:nth-child(4) { transition-delay: 300ms; }

/* --------------------------------------------------------------------------
   2. REFINED HOVER & INTERACTION MICRO-EFFECTS
   -------------------------------------------------------------------------- */
/* Subtle image zoom on card hover */
.img-hover-subtle {
  transition: transform var(--duration-medium) var(--ease-editorial);
}

.img-hover-subtle:hover {
  transform: scale(1.02);
}

/* Floating offset layer micro-drift on scroll */
.parallax-subtle {
  transition: transform 0.15s ease-out;
}

/* Hero Content Card: soft fade-in with 8-12px upward movement on load only */
@keyframes hero-card-entrance {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Left Hero Image: very slow scale from 1.00 to approximately 1.025 with minimal vertical drift */
@keyframes hero-left-scale {
  0% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(1.025) translateY(-3px);
  }
}

/* --------------------------------------------------------------------------
   3. ACCESSIBILITY: PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }

  .btn:hover,
  .nav-link:hover,
  .nav-link:hover::after,
  .brand-link:hover .brand-signet-img,
  .card-editorial:hover,
  .resource-card:hover,
  .blog-card:hover,
  .hero-split-scene,
  .hero-floating-card,
  .hero-img-workspace,
  .hero-img-bella {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}