/* web/themes/techprosolutions/css/components/et-reveal.css */
/**
 * ET Reveal — the homepage-wide scroll-reveal system.
 *
 * HOW IT WORKS (fail-safe by design):
 *   Nothing is hidden by CSS alone. js/components/et-reveal.js "arms" curated
 *   elements by adding .et-reveal-armed, then an IntersectionObserver adds
 *   .et-reveal-in when they enter the viewport. If JS never runs (no-JS, or
 *   the legacy script.js aggregate aborts), the page renders fully visible.
 *
 * MOTION LAW (finance-appropriate, per CLAUDE.md):
 *   opacity + standalone `translate` ONLY — never `transform`, so we compose
 *   with component transforms (hero floats, bento illusions) instead of
 *   clobbering them. No bounce, no spring: one decisive ease-out curve.
 *
 * CONTAINING-BLOCK SAFETY:
 *   A non-none translate turns the element into a containing block for
 *   fixed/absolute descendants. After the entrance transition ends, JS adds
 *   .et-reveal-done which settles translate back to `none`, so no permanent
 *   containing block survives the animation (sticky/fixed landmine-proof).
 *
 * 4-PIXEL RULE: shift distances are 24px / 16px / 8px (rem multiples of 4).
 */

/* Armed = waiting below the fold. Only ever added by JS. */
.et-reveal-armed {
  opacity: 0;
  translate: 0 var(--et-reveal-shift, 1.5rem); /* 24px default rise */
  /* Hint the compositor only while the element is mid-choreography. */
  will-change: opacity, translate;
}

/* In = the IntersectionObserver has seen it. Declared after .et-reveal-armed
   so the later rule wins at equal (0-1-0) specificity. --et-reveal-i is the
   per-group stagger index set by JS. */
.et-reveal-in {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--et-reveal-i, 0) * 90ms);
}

/* Done = entrance finished (transitionend). Translate returns to `none` so
   the element stops being a containing block; will-change hint released. */
.et-reveal-done {
  translate: none;
  will-change: auto;
  transition: none;
}

/* Accessibility: reduced motion = no choreography at all. The armed state is
   neutralised too, so even mid-flight elements snap fully visible. */
@media (prefers-reduced-motion: reduce) {
  .et-reveal-armed,
  .et-reveal-in,
  .et-reveal-done {
    opacity: 1;
    translate: none;
    transition: none;
  }
}