/* STEP 50D-P1A-R1: homepage-only capability reveal and CTA spacing candidate. */

.accueco-home #hero .hero-icons {
  margin-block-start: clamp(18px, 2vw, 28px);
}

.accueco-home #hero .hero-icons > div.accueco-capability-reveal {
  --accueco-capability-reveal-x: 0;
  --accueco-capability-reveal-y: 0;
  opacity: 1;
  translate: 0 0;
  will-change: auto;
}

body.accueco-home.accueco-capability-reveals-active #hero .hero-icons > div.accueco-capability-reveal:not(.is-capability-reveal-complete) {
  opacity: 0;
  translate: var(--accueco-capability-reveal-x) var(--accueco-capability-reveal-y);
  transition-property: opacity, translate;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--accueco-capability-reveal-delay, 0ms);
  will-change: opacity, translate;
}

.accueco-home #hero .hero-icons > div.accueco-capability-reveal--left {
  --accueco-capability-reveal-x: -16px;
}

.accueco-home #hero .hero-icons > div.accueco-capability-reveal--up {
  --accueco-capability-reveal-y: 16px;
}

.accueco-home #hero .hero-icons > div.accueco-capability-reveal--right {
  --accueco-capability-reveal-x: 16px;
}

.accueco-home #hero .hero-icons > div.is-capability-reveal-complete {
  opacity: 1;
  translate: 0 0;
  will-change: auto;
}

@media (max-width: 767px) {
  .accueco-home #hero .hero-icons > div.accueco-capability-reveal--left {
    --accueco-capability-reveal-x: -12px;
  }

  .accueco-home #hero .hero-icons > div.accueco-capability-reveal--up {
    --accueco-capability-reveal-y: 12px;
  }

  .accueco-home #hero .hero-icons > div.accueco-capability-reveal--right {
    --accueco-capability-reveal-x: 12px;
  }
}

@supports not (translate: 0 0) {
  body.accueco-home.accueco-capability-reveals-active #hero .hero-icons > div.accueco-capability-reveal:not(.is-capability-reveal-complete) {
    opacity: 0;
    transition-property: opacity;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.accueco-home.accueco-capability-reveals-active #hero .hero-icons > div.accueco-capability-reveal,
  .accueco-home #hero .hero-icons > div.accueco-capability-reveal {
    opacity: 1;
    translate: 0 0;
    transition: none;
    will-change: auto;
  }
}

@media (forced-colors: active) {
  body.accueco-home.accueco-capability-reveals-active #hero .hero-icons > div.accueco-capability-reveal,
  .accueco-home #hero .hero-icons > div.accueco-capability-reveal {
    opacity: 1;
    translate: 0 0;
    transition: none;
    will-change: auto;
  }
}

@media print {
  body.accueco-home.accueco-capability-reveals-active #hero .hero-icons > div.accueco-capability-reveal,
  .accueco-home #hero .hero-icons > div.accueco-capability-reveal {
    opacity: 1;
    translate: 0 0;
    transition: none;
    will-change: auto;
  }
}