/* ==========================================================================
   PAGE SWITCHING & ENTRY ANIMATION
   Smooth, silky upward entry on all page loads and route changes.
   Zero root raster snapshotting to completely eliminate ghosting and black image bugs.
   ========================================================================== */
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

main,
.careers-main,
.blog-main,
.insights-main {
  animation: page-enter 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  main,
  .careers-main,
  .blog-main,
  .insights-main {
    animation: none !important;
  }
}


/* ==========================================================================
   TIER 1 — CSS SCROLL-DRIVEN REVEAL ANIMATIONS
   Unified reveal system that works on both static HTML and React pages.
   Uses native scroll-driven animations with IntersectionObserver fallback.
   ========================================================================== */

/* Base reveal keyframes */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-scale {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes rule-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/*
 * Modern browsers (Chrome 115+, Edge 115+):
 * Animate as element scrolls into the viewport — no JS needed.
 */
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
  }

  .reveal-left {
    animation: reveal-left linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
  }

  .reveal-right {
    animation: reveal-right linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
  }

  .reveal-scale {
    animation: reveal-scale linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
  }

  .reveal-rule {
    transform-origin: left center;
    animation: rule-grow linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

/*
 * Fallback for Safari / Firefox / older browsers:
 * IntersectionObserver in motion.js adds .is-visible class
 */
@supports not (animation-timeline: view()) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .reveal-left  { transform: translateX(-32px); }
  .reveal-right { transform: translateX(32px); }
  .reveal-scale { transform: scale(0.92); }

  .reveal-rule {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }

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

  .reveal-rule.is-visible {
    transform: scaleX(1);
  }
}

/* Stagger support: add --i custom property inline for cascading delays */
@supports not (animation-timeline: view()) {
  .reveal[style*="--i"],
  .reveal-scale[style*="--i"] {
    transition-delay: calc(var(--i, 0) * 80ms);
  }
}

/* Ensure reveal elements don't flash before scroll-driven kicks in */
@supports (animation-timeline: view()) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-rule {
    will-change: opacity, transform;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-rule {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}