/*
 * Scroll-reveal. Defined ONCE here and enqueued globally.
 * Never redefine these keyframes inside a block's style.css.
 *
 * Two patterns — do NOT combine them on the same wrapper/children pair, the
 * translateY would compound:
 *   .ehlelectrical-fade-up            on a section wrapper (whole section reveals)
 *   .ehlelectrical-fade-up-stagger    on a parent, .ehlelectrical-fade-up-item on children
 *   .ehlelectrical-fade-right         slides in from the left — this is the one
 *                                     effect the old Kadence site used, via the
 *                                     AOS library. Same look, no dependency.
 */

.ehlelectrical-fade-up,
.ehlelectrical-fade-up-item,
.ehlelectrical-fade-right {
  opacity: 0;
  transition: opacity .7s var(--ehlelectrical-ease), transform .7s var(--ehlelectrical-ease);
  will-change: opacity, transform;
}

.ehlelectrical-fade-up,
.ehlelectrical-fade-up-item { transform: translateY(24px); }

/* AOS's fade-right was a 1000ms ease over 100px. Matched here. */
.ehlelectrical-fade-right {
  transform: translateX(-100px);
  transition-duration: 1s;
  transition-timing-function: ease;
}

.ehlelectrical-fade-up.is-visible,
.ehlelectrical-fade-up-item.is-visible,
.ehlelectrical-fade-right.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children in sequence. */
.ehlelectrical-fade-up-stagger .ehlelectrical-fade-up-item:nth-child(1) { transition-delay: 0ms; }
.ehlelectrical-fade-up-stagger .ehlelectrical-fade-up-item:nth-child(2) { transition-delay: 90ms; }
.ehlelectrical-fade-up-stagger .ehlelectrical-fade-up-item:nth-child(3) { transition-delay: 180ms; }
.ehlelectrical-fade-up-stagger .ehlelectrical-fade-up-item:nth-child(4) { transition-delay: 270ms; }
.ehlelectrical-fade-up-stagger .ehlelectrical-fade-up-item:nth-child(5) { transition-delay: 360ms; }
.ehlelectrical-fade-up-stagger .ehlelectrical-fade-up-item:nth-child(6) { transition-delay: 450ms; }

/* In the block editor there is no IntersectionObserver run — show everything. */
.block-editor-block-list__layout .ehlelectrical-fade-up,
.block-editor-block-list__layout .ehlelectrical-fade-up-item,
.block-editor-block-list__layout .ehlelectrical-fade-right {
  opacity: 1;
  transform: none;
}

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