/* ════════════════════════════════════════════════════════════
   ALTO MOTION — premium animation & visual polish layer.
   Loads last. Enhances the existing structure without changing
   layout. Respects prefers-reduced-motion.
════════════════════════════════════════════════════════════ */

/* ── Smooth scrolling + better font rendering ── */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ════════════════════════════════════════════
   1. ENHANCED SCROLL REVEALS
   Richer entrance: fade + lift + subtle scale + blur clear
════════════════════════════════════════════ */
.rv {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  filter: blur(4px);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1),
    filter .8s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform, filter;
}
.rv.go {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
/* Staggered children reveal */
.rv-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.rv-stagger.go > * { opacity: 1; transform: translateY(0); }
.rv-stagger.go > *:nth-child(1) { transition-delay: .05s; }
.rv-stagger.go > *:nth-child(2) { transition-delay: .13s; }
.rv-stagger.go > *:nth-child(3) { transition-delay: .21s; }
.rv-stagger.go > *:nth-child(4) { transition-delay: .29s; }
.rv-stagger.go > *:nth-child(5) { transition-delay: .37s; }
.rv-stagger.go > *:nth-child(6) { transition-delay: .45s; }

/* ════════════════════════════════════════════
   2. HERO — cinematic entrance + parallax glow
════════════════════════════════════════════ */
#hero, .hero {
  position: relative;
  overflow: hidden;
}
/* Animated ambient glow orbs behind hero */
#hero::after, .hero::after {
  content: '';
  position: absolute;
  width: 60vw; height: 60vw;
  max-width: 720px; max-height: 720px;
  top: -20%; right: -10%;
  background: radial-gradient(circle, var(--grad-b, var(--grad-b)) 0%, transparent 65%);
  opacity: .14;
  filter: blur(40px);
  pointer-events: none;
  animation: altoFloat1 14s ease-in-out infinite;
  z-index: 0;
}
@keyframes altoFloat1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-40px,30px) scale(1.12); }
}

/* Hero text staggered load-in */
.hero-content > *, .hero-inner > *, .hero-left > * {
  animation: altoHeroIn .9s cubic-bezier(.16,1,.3,1) both;
}
.hero-content > *:nth-child(1) { animation-delay: .05s; }
.hero-content > *:nth-child(2) { animation-delay: .15s; }
.hero-content > *:nth-child(3) { animation-delay: .25s; }
.hero-content > *:nth-child(4) { animation-delay: .35s; }
.hero-content > *:nth-child(5) { animation-delay: .45s; }
@keyframes altoHeroIn {
  from { opacity: 0; transform: translateY(30px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ════════════════════════════════════════════
   3. BUTTONS — magnetic hover, shine sweep, press
════════════════════════════════════════════ */
.hero-cta, .add-to-cart, .pack-cta, .mid-cta-btn, .cp-checkout,
.acf-submit, .acb-send-btn, .spc-cta, .blog-empty-cta {
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, filter .3s !important;
}
/* Shine sweep */
.hero-cta::after, .add-to-cart::after, .pack-cta::after, .mid-cta-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  pointer-events: none;
}
.hero-cta:hover::after, .add-to-cart:hover::after,
.pack-cta:hover::after, .mid-cta-btn:hover::after { left: 140%; }
.hero-cta:hover, .add-to-cart:hover, .pack-cta:hover, .mid-cta-btn:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--grad-b, var(--grad-b)) 40%, transparent);
}
.hero-cta:active, .add-to-cart:active, .pack-cta:active, .mid-cta-btn:active {
  transform: translateY(-1px) scale(.99);
}

/* ════════════════════════════════════════════
   4. CARDS — lift, tilt-ready, glow on hover
════════════════════════════════════════════ */
.feat-card, .shop-product-card, .blog-card, .up-card, .pu-card,
.review-card, .sp-card {
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .3s !important;
  will-change: transform;
}
.feat-card:hover, .up-card:hover, .pu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 50px rgba(0,0,0,.13);
}

/* Image zoom inside cards (where not already set) */
.feat-card img, .pu-card img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
.feat-card:hover img, .pu-card:hover img { transform: scale(1.05); }

/* ════════════════════════════════════════════
   5. NAV — frosted blur deepens on scroll
════════════════════════════════════════════ */
.site-header, #siteHeader, header.frosted {
  transition: background .4s, backdrop-filter .4s, box-shadow .4s, padding .4s !important;
}
body.scrolled .site-header, body.scrolled #siteHeader {
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 4px 30px rgba(0,0,0,.08);
}

/* ════════════════════════════════════════════
   6. SECTION HEADINGS — gradient text shimmer
   Appears once every ~8s (3s animation, 5s pause via animation-delay hack)
════════════════════════════════════════════ */
.sec-title .acc {
  background-size: 250% auto;
  animation: altoShimmerText 7s ease-in-out infinite;
}
.blog-hero-acc {
  background-size: 100% auto;
  animation: none;
}
@keyframes altoShimmerText {
  0%       { background-position: 150% center; }
  20%      { background-position: -50% center; }
  21%,100% { background-position: 150% center; }
}

/* ════════════════════════════════════════════
   7. GRAD BARS — animated draw-in
════════════════════════════════════════════ */
.grad-bar {
  position: relative;
  overflow: hidden;
}
.grad-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: translateX(-100%);
  animation: altoBarSweep 3s ease-in-out infinite;
}
@keyframes altoBarSweep {
  0% { transform: translateX(-100%); }
  60%,100% { transform: translateX(200%); }
}

/* ── Sticky bar uses transform managed by JS — no override here ── */

/* ════════════════════════════════════════════
   9. CART DRAWER — items slide in staggered
════════════════════════════════════════════ */
.cp-item {
  animation: altoCartItemIn .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes altoCartItemIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ════════════════════════════════════════════
   10. FLOATING HELP BUTTON — gentle attention pulse
════════════════════════════════════════════ */
.acb-float-btn { animation: altoFloatPulse 3.5s ease-in-out infinite; }
@keyframes altoFloatPulse {
  0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,.25); }
  50%     { box-shadow: 0 4px 20px rgba(0,0,0,.25), 0 0 0 8px color-mix(in srgb, var(--grad-b,var(--grad-b)) 12%, transparent); }
}
.acb-float-btn:hover { animation-play-state: paused; }

/* ════════════════════════════════════════════
   11. PRODUCT/REVIEW MEDIA — soft float idle
   (only floats if JS parallax isn't controlling transform)
════════════════════════════════════════════ */
.hero-product-img:not([style*="transform"]) {
  animation: altoIdleFloat 5.4s ease-in-out infinite;
}
@keyframes altoIdleFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

/* ════════════════════════════════════════════
   12. POPUPS / MODALS — spring entrance
════════════════════════════════════════════ */
.pp-modal.open .pp-inner, .pm-modal.open .pm-inner,
#cartPanel.open, .review-modal.open .rm-inner {
  animation: altoModalIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes altoModalIn {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ════════════════════════════════════════════
   13. LINKS & ICONS — micro polish
════════════════════════════════════════════ */
.nav-pill, .nav-link-always, .ft-social-link, .ft-links a {
  transition: color .25s, transform .25s !important;
}
.ft-social-link:hover { transform: translateX(3px); }

/* Faq items expand smoother */
.faq-item, .faq-q { transition: background .3s; }

/* ════════════════════════════════════════════
   14. NOISE / GRAIN texture on dark sections (subtle depth)
════════════════════════════════════════════ */
.shop-hero::after, .blog-hero::before {
  mix-blend-mode: screen;
}

/* ════════════════════════════════════════════
   ACCESSIBILITY — respect reduced motion
════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ════════════════════════════════════════════════════════════
   HERO — extended cinematic treatment
════════════════════════════════════════════════════════════ */
/* Second drifting glow orb (opposite corner, different rhythm) */
#hero::before, .hero::before {
  content: '';
  position: absolute;
  width: 50vw; height: 50vw;
  max-width: 560px; max-height: 560px;
  bottom: -15%; left: -8%;
  background: radial-gradient(circle, var(--grad-a, var(--grad-a)) 0%, transparent 65%);
  opacity: .10;
  filter: blur(50px);
  pointer-events: none;
  animation: altoFloat2 18s ease-in-out infinite;
  z-index: 0;
}
@keyframes altoFloat2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(50px,-35px) scale(1.15); }
}

/* Hero video / media — atmospheric glow behind */
.hero-vid-frame,
.hero-video-wrap,
#heroVideoFrameDesktop,
#heroVideoFrameMobile {
  position: relative;
}
.hero-vid-frame::before,
.hero-video-wrap::before,
#heroVideoFrameDesktop::before,
#heroVideoFrameMobile::before {
  content: '';
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 6px;
  background: radial-gradient(
    ellipse at 50% 60%,
    color-mix(in srgb, var(--grad-b, var(--grad-b)) 55%, transparent) 0%,
    color-mix(in srgb, var(--grad-a, var(--grad-a)) 20%, transparent) 45%,
    transparent 70%
  );
  filter: blur(24px);
  opacity: .65;
  animation: altoVideoGlow 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes altoVideoGlow {
  0%,100% { opacity: .5; transform: scale(1); filter: blur(24px); }
  50%     { opacity: .85; transform: scale(1.06); filter: blur(30px); }
}

/* Hero CTA — breathing glow to draw the eye */
.hero-cta {
  animation: altoCtaBreath 3.5s ease-in-out infinite;
}
@keyframes altoCtaBreath {
  0%,100% { box-shadow: 0 8px 30px color-mix(in srgb, var(--grad-b,var(--grad-b)) 25%, transparent); }
  50%     { box-shadow: 0 12px 44px color-mix(in srgb, var(--grad-b,var(--grad-b)) 50%, transparent); }
}
.hero-cta:hover { animation-play-state: paused; }

/* Hero trust row chips — gentle stagger fade after load */
.hero-trust-row > *, .trust-row > * {
  animation: altoChipIn .6s ease both;
}
.hero-trust-row > *:nth-child(1) { animation-delay: .6s; }
.hero-trust-row > *:nth-child(2) { animation-delay: .72s; }
.hero-trust-row > *:nth-child(3) { animation-delay: .84s; }
@keyframes altoChipIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero stock urgency — subtle pulse dot */
.hero-stock-line .s0-dot, .stock-dot {
  animation: altoDotPulse 1.8s ease-in-out infinite;
}
@keyframes altoDotPulse {
  0%,100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--grad-a,var(--grad-a)) 60%, transparent); }
  50%     { transform: scale(1.15); opacity: .85; box-shadow: 0 0 0 6px color-mix(in srgb, var(--grad-a,var(--grad-a)) 0%, transparent); }
}

/* Hero media frame — gradient ring glow */
.hero-vid-frame, .hero-product-img {
  position: relative;
}
.hero-vid-frame::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .5;
  animation: altoRingPulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes altoRingPulse {
  0%,100% { opacity: .35; }
  50%     { opacity: .7; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE — touch-based motion (no hover available)
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Tap feedback on all interactive cards & buttons */
  .feat-card:active, .shop-product-card:active, .blog-card:active,
  .up-card:active, .pu-card:active, .spc-cta:active,
  .hero-cta:active, .add-to-cart:active, .pack-cta:active,
  .mid-cta-btn:active, .nav-pill:active, .acb-topic-btn:active {
    transform: scale(.97) !important;
    transition: transform .12s ease !important;
  }

  /* Cards animate in on scroll with a touch more presence on mobile */
  .feat-card, .shop-product-card, .blog-card {
    transition: transform .3s ease, box-shadow .3s ease !important;
  }

  /* Continuous shine sweep on the main hero CTA (since no hover) */
  .hero-cta::after {
    animation: altoMobileShine 3.2s ease-in-out infinite;
    left: -120%;
  }
  @keyframes altoMobileShine {
    0%, 60% { left: -120%; }
    100%    { left: 140%; }
  }

  /* Gentle auto-pulse on add-to-cart buttons to draw the thumb */
  .add-to-cart, .pack-cta {
    animation: altoCtaBreath 3.5s ease-in-out infinite;
  }

  /* Reveal animations slightly faster on mobile (shorter scroll) */
  .rv { transition-duration: .6s; }

  /* Sticky bar entrance bounce on mobile */
  #stickyBar.show { animation: altoStickyPop .5s cubic-bezier(.34,1.56,.64,1); }
  @keyframes altoStickyPop {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}

/* In-view "active" class that JS toggles on mobile (simulates hover) */
.in-view-card {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,.12);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s;
}