/* Keep server-rendered content accessible until AOS initializes. */
[data-aos]:not(.aos-init) {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Flip the form around its vertical center like a physical card. */
[data-aos="form-flip"].aos-init {
  opacity: 1;
  transform: perspective(1200px) rotateY(-180deg);
  transform-origin: center;
  backface-visibility: hidden;
  transition-property: transform;
}

[data-aos="form-flip"].aos-animate {
  opacity: 1;
  transform: perspective(1200px) rotateY(0deg);
}

/* Banner transitions begin one second after window.load, not hydration. */
html:not(.banner-ready) .campaign-hero [data-aos].aos-init {
  opacity: 0;
  transform: translateY(28px);
  pointer-events: none;
}

html:not(.banner-ready) .campaign-hero [data-aos="form-flip"].aos-init {
  opacity: 1;
  transform: perspective(1200px) rotateY(-180deg);
}

/* Keyboard focus and recommendation links must reveal their target immediately. */
html body .campaign-hero [data-aos].aos-init[data-motion-focus="true"],
html body [data-aos].aos-init[data-motion-focus="true"] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.banner-ready) .campaign-hero [data-aos="form-flip"].aos-init,
  html:not(.banner-ready) .campaign-hero [data-aos].aos-init,
  html body .campaign-page [data-aos],
  html body .campaign-footer[data-aos],
  html body .campaign-footer [data-aos] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }
}

/* Hover lift is limited to desktop devices with a precise pointing device. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .product-card[data-aos][data-aos] {
    transition-property: transform, opacity, box-shadow, border-color;
  }

  .product-card[data-aos].aos-animate:hover {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--alt-color) 40%, white);
    box-shadow: 0 14px 30px rgb(44 43 125 / 12%), 0 0 20px rgb(226 31 38 / 14%);
  }
}