/**
 * Sitewide luxurious motion — parallax, magnetic CTAs, veils, soft sheen.
 */

:root {
  --lux-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --lux-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Extra reveal variants */
.be-motion-on .be-reveal--blur {
  transform: translateY(28px) scale(0.985);
  filter: blur(8px);
}
.be-motion-on .be-reveal--blur.is-inview {
  filter: none;
}
.be-motion-on .be-reveal--veil {
  clip-path: inset(12% 8% 12% 8% round 4px);
  transform: scale(1.03);
  filter: saturate(0.85);
}
.be-motion-on .be-reveal--veil.is-inview {
  clip-path: inset(0 0 0 0);
  filter: none;
}
.be-motion-on .be-reveal--soft {
  transform: translateY(18px);
  transition-duration: 1.15s, 1.35s;
}

/* Page banners */
.be-motion-on .page-banner {
  position: relative;
}
.be-motion-on .page-banner h1,
.be-motion-on .page-banner .page-banner-lead {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 1s var(--lux-ease),
    transform 1.15s var(--lux-ease);
}
.be-motion-on .page-banner.is-lux-ready h1 {
  opacity: 1;
  transform: none;
  transition-delay: 0.08s;
}
.be-motion-on .page-banner.is-lux-ready .page-banner-lead {
  opacity: 1;
  transform: none;
  transition-delay: 0.22s;
}
.be-motion-on .page-banner--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, rgb(255 255 255 / 0.08), transparent 42%);
  mix-blend-mode: soft-light;
  transform: translateX(-12%);
  opacity: 0;
  transition: opacity 1.2s var(--lux-ease), transform 1.6s var(--lux-ease);
}
.be-motion-on .page-banner--photo.is-lux-ready::before {
  opacity: 1;
  transform: translateX(0);
}

/* Header — silk settle on scroll */
.site-header {
  transition:
    background 0.55s var(--lux-ease),
    box-shadow 0.55s var(--lux-ease),
    backdrop-filter 0.55s var(--lux-ease),
    border-color 0.55s var(--lux-ease),
    transform 0.55s var(--lux-ease);
}
.be-motion-on .site-header.is-scrolled {
  box-shadow: 0 10px 40px rgb(15 23 32 / 0.08);
  backdrop-filter: blur(14px) saturate(1.15);
}

/* Hero parallax layer */
.be-motion-on .hero-bg img,
.be-motion-on .hero-bg picture img {
  will-change: transform;
  transition: transform 0.15s linear;
}

/* Soft sheen on primary buttons */
.be-motion-on .btn.btn-accent,
.be-motion-on .btn.btn-black,
.be-motion-on a.btn.btn-accent,
.be-motion-on a.btn.btn-black {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.45s var(--lux-ease),
    box-shadow 0.45s var(--lux-ease),
    background 0.35s ease,
    color 0.35s ease;
}
.be-motion-on .btn.btn-accent::after,
.be-motion-on .btn.btn-black::after {
  content: '';
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgb(255 255 255 / 0.22) 48%,
    transparent 62%
  );
  transform: translateX(-40%) rotate(8deg);
  transition: transform 0.9s var(--lux-ease);
  pointer-events: none;
}
.be-motion-on .btn.btn-accent:hover::after,
.be-motion-on .btn.btn-black:hover::after,
.be-motion-on .btn.btn-accent:focus-visible::after,
.be-motion-on .btn.btn-black:focus-visible::after {
  transform: translateX(40%) rotate(8deg);
}
.be-motion-on .btn.btn-accent:hover,
.be-motion-on .btn.btn-black:hover {
  transform: translateY(-2px);
}

/* Magnetic CTA helper (JS sets --mx/--my) */
.be-motion-on .btn.is-magnetic {
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
}

/* Product / value cards — silk lift */
.be-motion-on .product-card,
.be-motion-on .value-card,
.be-motion-on .blog-card,
.be-motion-on .contact-card,
.be-motion-on .trust-item,
.be-motion-on .process-step {
  transition:
    transform 0.55s var(--lux-ease),
    box-shadow 0.55s var(--lux-ease),
    border-color 0.4s ease,
    opacity 0.85s var(--lux-ease);
}
.be-motion-on .product-card:hover,
.be-motion-on .value-card:hover,
.be-motion-on .blog-card:hover,
.be-motion-on .contact-card:hover {
  transform: translateY(-5px);
}

/* Nav links soft underline grow */
.be-motion-on .main-nav a {
  position: relative;
}
.be-motion-on .main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand, #0c6b8a);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--lux-ease);
  opacity: 0.85;
}
.be-motion-on .main-nav a:hover::after,
.be-motion-on .main-nav a.active::after,
.be-motion-on .main-nav a[aria-current='page']::after {
  transform: scaleX(1);
}

/* Soft accent pulse → calmer breathe (replace neon feel) */
@keyframes beLuxCtaBreathe {
  0%, 100% { box-shadow: 0 8px 22px rgb(var(--accent-rgb, 0 168 150) / 0.22); }
  50% { box-shadow: 0 12px 30px rgb(var(--accent-rgb, 0 168 150) / 0.34); }
}
.be-motion-on .home-spot__cta .btn.btn-accent {
  animation: beLuxCtaBreathe 4.2s ease-in-out infinite;
}

/* Section titles — delayed underline already in pine; lux opacity */
.be-motion-on .home-draw__eyebrow,
.be-motion-on .home-classic__eyebrow,
.be-motion-on .home-spot__eyebrow {
  letter-spacing: 0.08em;
}

/* Footer soft rise */
.be-motion-on .site-footer .footer-col,
.be-motion-on .site-footer .footer-brand,
.be-motion-on .site-footer .footer-bottom {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.9s var(--lux-ease),
    transform 1s var(--lux-ease);
}
.be-motion-on .site-footer.is-lux-ready .footer-col,
.be-motion-on .site-footer.is-lux-ready .footer-brand,
.be-motion-on .site-footer.is-lux-ready .footer-bottom {
  opacity: 1;
  transform: none;
}
.be-motion-on .site-footer.is-lux-ready .footer-col:nth-child(1) { transition-delay: 0.05s; }
.be-motion-on .site-footer.is-lux-ready .footer-col:nth-child(2) { transition-delay: 0.12s; }
.be-motion-on .site-footer.is-lux-ready .footer-col:nth-child(3) { transition-delay: 0.19s; }
.be-motion-on .site-footer.is-lux-ready .footer-col:nth-child(4) { transition-delay: 0.26s; }
.be-motion-on .site-footer.is-lux-ready .footer-bottom { transition-delay: 0.32s; }

/* Shop intro / content blocks */
.be-motion-on .shop-intro-lead,
.be-motion-on .m57-intro,
.be-motion-on .about-copy > *,
.be-motion-on .content-narrow > h2,
.be-motion-on .content-narrow > p {
  /* prepared by page-motion */
}

@media (prefers-reduced-motion: reduce) {
  .be-reveal--blur,
  .be-reveal--veil,
  .page-banner h1,
  .page-banner .page-banner-lead,
  .page-banner--photo::before,
  .site-footer .footer-col,
  .site-footer .footer-brand,
  .site-footer .footer-bottom,
  .btn.btn-accent::after,
  .btn.btn-black::after {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
  .be-motion-on .btn.is-magnetic {
    transform: none !important;
  }
}