/* Qwipy — phone/tablet motion enhancements.
   Additive only: does not modify any Framer-generated rule.
   Scoped to <1300px so desktop (which already animates) is untouched. */

@media (max-width: 1299px) {
  /* Tap feedback — pure CSS, no JS dependency, always safe. */
  a, button, [role="button"] {
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  a:active, button:active, [role="button"]:active {
    transform: scale(0.96);
    opacity: 0.85;
  }

  /* Scroll reveal — only takes effect once JS confirms it initialized
     (html.qr-anim). If JS fails or is blocked, content stays fully
     visible at all times: this rule never hides content on its own. */
  html.qr-anim [data-qr-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 0.8, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 0.8, 0.3, 1);
    transition-delay: var(--qr-delay, 0s);
    will-change: opacity, transform;
  }
  html.qr-anim [data-qr-reveal].qr-in {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1299px) and (prefers-reduced-motion: reduce) {
  html.qr-anim [data-qr-reveal] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  a:active, button:active, [role="button"]:active {
    transform: none !important;
  }
}