/* Homepage UX enhancements: subtle motion without layout redesign */
.homepage-ux [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 620ms ease-out, transform 620ms ease-out;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

.homepage-ux [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.homepage-ux .cyber-card {
  transition: border-color 300ms ease, box-shadow 350ms ease, transform 350ms ease;
  transform: translateZ(0);
}

.homepage-ux .cyber-card:hover {
  transform: translate3d(0, -4px, 0);
}

.homepage-ux .btn-cyber-primary,
.homepage-ux .btn-cyber-outline,
.homepage-ux .inline-flex.items-center.gap-2.px-4.py-2.rounded-full {
  transition: transform 260ms ease, background-color 260ms ease, color 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.homepage-ux .btn-cyber-primary:hover,
.homepage-ux .btn-cyber-outline:hover {
  transform: translate3d(0, -2px, 0) scale(1.02);
}

.homepage-ux .inline-flex.items-center.gap-2.px-4.py-2.rounded-full:hover {
  transform: scale(1.02);
}

.homepage-ux [data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

@media (max-width: 767px) {
  .homepage-ux [data-parallax] {
    transform: none;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-ux [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .homepage-ux [data-parallax],
  .homepage-ux .cyber-card,
  .homepage-ux .btn-cyber-primary,
  .homepage-ux .btn-cyber-outline,
  .homepage-ux .inline-flex.items-center.gap-2.px-4.py-2.rounded-full {
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}