/* ==========================================================================
   GECM Consulting - Animations System
   GPU-accelerated, scroll-driven, entry/exit effects
   ========================================================================== */

/* ── 1. Base hidden state for all animated elements ── */
[data-anim] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity  0.70s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.70s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 2. Entrance directions ── */
[data-anim="fade-up"]    { transform: translateY(36px); }
[data-anim="fade-down"]  { transform: translateY(-28px); }
[data-anim="fade-left"]  { transform: translateX(36px); }
[data-anim="fade-right"] { transform: translateX(-36px); }
[data-anim="scale-in"]   { transform: scale(0.90); }
[data-anim="fade-in"]    { transform: none; }

/* ── 3. Visible state (enters viewport from below) ── */
[data-anim].anim--visible {
  opacity: 1 !important;
  transform: none !important;
}

/* ── 4. Exit state (scrolled past — subtle, readable) ── */
[data-anim].anim--exit {
  opacity: 0.55;
  transform: translateY(-12px) scale(0.98);
  transition:
    opacity  0.45s ease,
    transform 0.45s ease;
}

/* ── 5. Stagger delays via data-anim-delay attribute ── */
[data-anim-delay="1"] { transition-delay: 0.08s; }
[data-anim-delay="2"] { transition-delay: 0.16s; }
[data-anim-delay="3"] { transition-delay: 0.24s; }
[data-anim-delay="4"] { transition-delay: 0.32s; }
[data-anim-delay="5"] { transition-delay: 0.42s; }
[data-anim-delay="6"] { transition-delay: 0.52s; }

/* ── 6. Hero entrance (plays on load, no scroll needed) ── */
.hero__label,
.hero__title,
.hero__description,
.hero__pillar {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero--loaded .hero__label       { opacity: 1; transform: none; transition-delay: 0.10s; }
.hero--loaded .hero__title       { opacity: 1; transform: none; transition-delay: 0.25s; }
.hero--loaded .hero__description { opacity: 1; transform: none; transition-delay: 0.42s; }
.hero--loaded .hero__pillar:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.55s; }
.hero--loaded .hero__pillar:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.68s; }
.hero--loaded .hero__pillar:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.80s; }

/* ── 7. Exit state: keep info visible on mobile (no fade-out) ── */
@media (max-width: 767px) {
  [data-anim].anim--exit {
    opacity: 1;
    transform: none;
  }
}

/* ── 8. Respect system prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  .hero__label,
  .hero__title,
  .hero__description,
  .hero__pillar {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}