/* Motion system: progressive enhancement only. */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-fade {
  opacity: 0;
  transition: opacity .72s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1), clip-path .9s cubic-bezier(.22,.61,.36,1);
}
.reveal-up { transform: translate3d(0, 30px, 0); }
.reveal-left { transform: translate3d(-35px, 0, 0); }
.reveal-right { transform: translate3d(35px, 0, 0); }
.reveal-scale { transform: translate3d(0, 14px, 0) scale(.96); }
.reveal-fade { transform: none; }
.is-visible { opacity: 1; transform: none; }

/* Hero entrance. Hidden states only exist while JavaScript is available. */
.motion-ready .hero-title,
.motion-ready .hero-cta { opacity: 0; will-change: transform, opacity; }
.motion-ready .hero-title { transform: translate3d(0, 30px, 0); }
.motion-ready .hero-cta { transform: translate3d(0, 20px, 0); }
.motion-ready .hero.is-animated .hero-title,
.motion-ready .hero.is-animated .hero-cta { opacity: 1; transform: none; transition: opacity .82s cubic-bezier(.22,.61,.36,1), transform .82s cubic-bezier(.22,.61,.36,1); }
.motion-ready .hero.is-animated .hero-cta { transition-delay: .16s; }
.motion-ready .hero.entrance-complete .hero-title,
.motion-ready .hero.entrance-complete .hero-cta { will-change: auto; }
.motion-ready .hero-marquee-product { opacity: 0; }
.motion-ready .hero.is-animated .hero-marquee-product { animation: hero-product-enter .88s cubic-bezier(.22,.61,.36,1) var(--hero-enter-delay, .3s) both; }
.motion-ready .hero-marquee-product.is-entered { opacity: 1; animation: none; }
.hero-marquee-product img { transform: translate3d(var(--bag-x, 0), calc(var(--bag-y, 0px) + var(--bag-scroll, 0px)), 0); transition: transform .28s ease-out; }
@keyframes hero-product-enter {
  from { opacity: 0; transform: translate3d(0, 40px, 0) scale(.94); }
  to { opacity: 1; transform: none; }
}

/* Decorative texture layers. */
.hero::after { content: ""; position: absolute; z-index: 0; inset: -3%; opacity: .055; background: url('../images/texturas/textura-migas-esquinas.webp') center / cover no-repeat; pointer-events: none; transform: translate3d(var(--texture-x, 0px), var(--texture-y, 0px), 0) rotate(var(--texture-r, 0deg)); }
.flour-reveal { clip-path: inset(0 100% 0 0); }
.flour-reveal.is-visible { clip-path: inset(0 0 0 0); }
.flour-reveal::after { content: ""; position: absolute; z-index: 1; top: -12%; bottom: -12%; left: -48%; width: 52%; opacity: .32; background: url('../images/texturas/textura-harina-marco.webp') center / cover no-repeat; pointer-events: none; transform: translate3d(0,0,0); transition: transform 1.05s cubic-bezier(.22,.61,.36,1), opacity .35s ease .72s; }
.flour-reveal.is-visible::after { opacity: 0; transform: translate3d(290%,0,0); }
.final-cta::before { content: ""; position: absolute; z-index: 0; inset: 0; opacity: .1; border-radius: inherit; background: url('../images/texturas/textura-ondas-organicas.webp') center / cover no-repeat; pointer-events: none; }
.final-cta > * { position: relative; z-index: 1; }
.final-cta img { transform: translate3d(0, var(--cta-product-y, 0px), 0) rotate(5deg); }

/* Focused component motion. */
.private-label-copy li.reveal-up { transform: translate3d(0, 18px, 0); }
.certification-senasa.reveal-up { transform: scale(.92); }
.certification-senasa.reveal-up.is-visible { transform: none; }
.footer-column a { position: relative; transition: color .25s ease, transform .25s ease; }
.footer-column a::after { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }

@media (hover: hover) and (pointer: fine) {
  .footer-column a:hover { transform: translateX(2px); }
  .footer-column a:hover::after { transform: scaleX(1); transform-origin: left; }
  .button:hover { transform: translateY(-2px); }
  .benefit-item:hover .benefit-icon { transform: translateY(-4px) scale(1.06); }
}

@media (max-width: 768px) {
  .reveal-up { transform: translate3d(0, 20px, 0); }
  .reveal-left,
  .reveal-right { transform: translate3d(0, 20px, 0); }
  .reveal-scale { transform: translate3d(0, 10px, 0) scale(.98); }
  .hero::after { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade,
  .motion-ready .hero-title, .motion-ready .hero-cta, .motion-ready .hero-marquee-product { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero-bag-track { animation: none !important; }
  .hero-bag-marquee { overflow-x: auto; mask-image: none; }
  .hero-background-slide { opacity: 0; animation: none !important; transform: none !important; }
  .hero-background-slide:first-child { opacity: 1; }
  .hero::after, .flour-reveal::after { display: none; }
}
