/* ─── Contact Us floating button ──────────────────────────────────────────── */
.contact-us-btn {
  position: fixed !important;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: auto !important;
  left: auto !important;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  max-width: calc(100vw - 2rem);
  padding: 10px 22px;
  background: #007AFF;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 980px;
  box-shadow: 0 6px 20px rgba(0,122,255,0.36), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: background 0.22s cubic-bezier(0.4,0,0.2,1), transform 0.22s cubic-bezier(0.4,0,0.2,1), box-shadow 0.22s cubic-bezier(0.4,0,0.2,1);
}
.contact-us-btn:hover {
  background: #0056CC;
  transform: scale(1.05) translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,122,255,0.42), inset 0 1px 0 rgba(255,255,255,0.25);
}
@media (max-width: 480px) {
  .contact-us-btn { padding: 8px 16px; font-size: 0.7rem; letter-spacing: 0.04em; }
}

/* ─── Apple Liquid Glass tap animation ────────────────────────────────────── */
/* Adds a specular shimmer sweep + spring squish + radial bloom on press.     */

.btn-buy,
.btn-enter,
.product-card,
.site-nav a,
.contact-us-btn {
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}

/* CTA buttons: full Liquid Glass treatment (shimmer + bloom + squish)         */
.btn-buy,
.btn-enter,
.contact-us-btn {
  position: relative;
  overflow: hidden;
}

.btn-buy::before,
.btn-enter::before,
.site-nav a::before,
.contact-us-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.55) 47%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.55) 53%,
    transparent 65%,
    transparent 100%
  );
  transform: translateX(-130%) skewX(-14deg);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  mix-blend-mode: overlay;
  border-radius: inherit;
}

.btn-buy::after,
.btn-enter::after,
.site-nav a::after,
.contact-us-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.22) 35%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  border-radius: inherit;
  transform: scale(0.6);
}

/* Nav: needs overflow:hidden so shimmer clips to pill shape */
.site-nav a {
  position: relative;
  overflow: hidden;
}

/* JS adds .lg-tap on pointerdown; animationend removes it */
.lg-tap::before {
  animation: lgShimmer 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.lg-tap::after {
  animation: lgBloom 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.lg-tap {
  animation: lgSquish 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Product cards: the visible glass surface is .product-img inside .product-card.
   Apply the shimmer + bloom pseudo-elements onto .product-img and squish the card. */
.product-card .product-img {
  position: relative;
  isolation: isolate;
}

.product-card .product-img::before,
.product-card .product-img::after {
  /* keep the existing idle shimmer that lives on .product-img — don't override */
}

/* Keyframes ─────────────────────────────────────────────────────────────── */
@keyframes lgShimmer {
  0%   { transform: translateX(-130%) skewX(-14deg); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateX(130%) skewX(-14deg); opacity: 0; }
}

@keyframes lgBloom {
  0%   { opacity: 0;    transform: scale(0.6); }
  35%  { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.18); }
}

@keyframes lgSquish {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.05); }
  60%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lg-tap,
  .lg-tap::before,
  .lg-tap::after { animation: none !important; }
}