html {
  scroll-behavior: smooth;
}

.section {
  scroll-margin-top: 110px;
}

/* Smooth scroll reveal */
.reveal-item {
  opacity: 0;
  transform: translate3d(0, 46px, 0) scale(0.975);
  filter: blur(14px);
  transition:
    opacity 1.15s ease,
    transform 1.15s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.15s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity, filter;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

/* Hero image stays still — no floating */
.hero-visual {
  transform: none;
  animation: none !important;
}

/* Premium hover, not too much */
.info-card,
.contact-form,
.btn {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

.info-card:hover,
.contact-form:hover {
  transform: translateY(-5px);
  border-color: rgba(237, 33, 125, 0.35);
}

/* Mobile */
@media (max-width: 768px) {
  .reveal-item {
    transform: translate3d(0, 28px, 0) scale(0.985);
    filter: blur(8px);
    transition-duration: 0.9s;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal-item {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ===== BENEFITS IPHONE DELETE SHAKE — DESKTOP HOVER ONLY =====
   Works on desktop/laptop mouse hover. Disabled on touch devices.
   Important: do NOT put transform: ... !important on hover, because it stops keyframe shake.
*/
@media (hover: hover) and (pointer: fine) {
  .benefits-row span {
    transform-origin: center center;
    cursor: default;
    will-change: transform;
  }

  .benefits-row span:hover {
    animation: benefitIphoneDeleteShake 0.86s ease-in-out infinite !important;
    color: var(--text) !important;
    border-color: rgba(237, 33, 125, 0.68) !important;
    background:
      linear-gradient(145deg, rgba(237, 33, 125, 0.16), rgba(255, 255, 255, 0.045)),
      rgba(0, 0, 0, 0.34) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 18px 40px rgba(0, 0, 0, 0.18),
      0 0 24px rgba(237, 33, 125, 0.22) !important;
  }

  .benefits-row span:not(:hover),
  .benefits-row span.is-near {
    animation: none !important;
  }
}

@keyframes benefitIphoneDeleteShake {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  18% {
    transform: translate3d(-0.45px, -0.35px, 0) rotate(-0.75deg);
  }

  36% {
    transform: translate3d(0.45px, 0.35px, 0) rotate(0.75deg);
  }

  54% {
    transform: translate3d(-0.35px, 0.25px, 0) rotate(-0.55deg);
  }

  72% {
    transform: translate3d(0.35px, -0.25px, 0) rotate(0.55deg);
  }
}

@media (hover: none), (pointer: coarse) {
  .benefits-row span,
  .benefits-row span:hover,
  .benefits-row span:active,
  .benefits-row span.is-near {
    animation: none !important;
    transform: none !important;
  }
}