/* ============================================================
   HORTA BOA VISTA — ANIMATIONS.CSS
   Scroll reveal, micro-interactions, transitions
   ============================================================ */

/* ─── Scroll Reveal Base ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s cubic-bezier(0.4, 0, 0.2, 1),
              transform .7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.reveal-left  { transform: translateX(-50px); }
.reveal.reveal-right { transform: translateX(50px); }
.reveal.reveal-scale { transform: scale(0.9) translateY(20px); }
.reveal.reveal-rotate { transform: rotate(-3deg) translateY(30px); }

.reveal.visible {
  opacity: 1;
  transform: none !important;
}

/* Delay classes */
.delay-100 { transition-delay: .1s; }
.delay-200 { transition-delay: .2s; }
.delay-300 { transition-delay: .3s; }
.delay-400 { transition-delay: .4s; }
.delay-500 { transition-delay: .5s; }
.delay-600 { transition-delay: .6s; }
.delay-700 { transition-delay: .7s; }
.delay-800 { transition-delay: .8s; }

/* ─── Page Transition ──────────────────────────────────────── */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--green-900);
  z-index: 9998;
  transform: scaleY(0);
  transform-origin: top;
}

.page-transition-overlay.entering {
  animation: page-enter .5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.page-transition-overlay.leaving {
  animation: page-leave .5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes page-enter {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes page-leave {
  from { transform: scaleY(1); transform-origin: top; }
  to   { transform: scaleY(0); transform-origin: top; }
}

/* ─── Navbar animation ──────────────────────────────────────── */
#navbar {
  animation: navbar-in .6s ease .3s both;
}

@keyframes navbar-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ─── Hero animations (already in style.css via keyframes) ─── */
/* Extra: Ken Burns on hero bg */
.hero-slide.active .hero-slide-bg {
  animation: ken-burns 10s ease-in-out forwards;
}

@keyframes ken-burns {
  0%   { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ─── Floating particle dots ───────────────────────────────── */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: float-particle linear infinite;
  opacity: .15;
}

@keyframes float-particle {
  0%   { transform: translateY(100vh) rotate(0deg); }
  100% { transform: translateY(-10vh) rotate(720deg); }
}

/* ─── Card hover effects ────────────────────────────────────── */
.feature-card {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.feature-card:hover {
  animation: card-tilt .3s ease forwards;
}

@keyframes card-tilt {
  0%   { transform: translateY(0) rotateX(0) rotateY(0); }
  50%  { transform: translateY(-6px) rotateX(2deg) rotateY(-2deg); }
  100% { transform: translateY(-8px) rotateX(0) rotateY(0); }
}

/* ─── Pulse animation for WhatsApp button ───────────────────── */
#whatsapp-float {
  animation: wpp-pulse 3s ease-in-out infinite;
}

@keyframes wpp-pulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(37,211,102,.4); }
  50%       { box-shadow: 0 8px 50px rgba(37,211,102,.7), 0 0 0 12px rgba(37,211,102,.1); }
}

/* ─── Stats counter animation ───────────────────────────────── */
.stat-number {
  display: inline-block;
  animation: none;
}

.stat-number.counting {
  animation: number-pop .3s ease;
}

@keyframes number-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ─── Depoimentos slider animation ─────────────────────────── */
.depoimento-inner {
  transition: all .3s ease;
}

.depoimento-inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

/* ─── Menu link hover underline animation ───────────────────── */
.navbar-menu a {
  position: relative;
  overflow: hidden;
}

/* ─── Image hover zoom-out effect ──────────────────────────── */
.sobre-image-wrapper {
  overflow: hidden;
}
.sobre-image-wrapper img {
  transition: transform .7s cubic-bezier(0.4, 0, 0.2, 1);
}
.sobre-image-wrapper:hover img {
  transform: scale(1.06);
}

/* ─── Add to cart ripple ────────────────────────────────────── */
.add-cart-btn {
  position: relative;
  overflow: hidden;
}

.add-cart-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.4);
  border-radius: inherit;
  transform: scale(0);
  opacity: 1;
  transition: transform .4s ease, opacity .4s ease;
}

.add-cart-btn.ripple::after {
  transform: scale(2.5);
  opacity: 0;
}

/* ─── Produto card hover 3D ─────────────────────────────────── */
.produto-card {
  transform-style: preserve-3d;
}

/* ─── Section entrance animations ──────────────────────────── */
.section-header.reveal .divider {
  transform: scaleX(0);
  transition: transform .6s ease .3s;
}

.section-header.visible .divider {
  transform: scaleX(1);
}

/* ─── Feature icon spin on hover ────────────────────────────── */
.feature-card:hover .feature-icon {
  animation: icon-bounce .5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes icon-bounce {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.2) rotate(-10deg); }
  60%  { transform: scale(0.9) rotate(5deg); }
  100% { transform: scale(1.1) rotate(-5deg); }
}

/* ─── Footer link hover ─────────────────────────────────────── */
.footer-col ul li a {
  position: relative;
  display: inline-block;
}

.footer-col ul li a::before {
  content: '→ ';
  opacity: 0;
  transform: translateX(-8px);
  display: inline-block;
  transition: all .3s ease;
}

.footer-col ul li a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* ─── Scroll progress bar ───────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--green-500), var(--lime), var(--gold));
  z-index: 9999;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .1s linear;
}

/* ─── Back to top button ────────────────────────────────────── */
#back-top {
  position: fixed;
  bottom: 2rem;
  right: 5.5rem;
  width: 44px;
  height: 44px;
  background: var(--green-100);
  color: var(--green-800);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 500;
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition);
  font-size: 1.1rem;
  box-shadow: var(--shadow-md);
}

#back-top.visible { opacity: 1; transform: translateY(0); }
#back-top:hover { background: var(--green-700); color: var(--white); transform: translateY(-3px); }

/* ─── Shimmer loading for product images ──────────────────── */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--gray-100) 0%,
    var(--gray-200) 50%,
    var(--gray-100) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* ─── Batch stagger children ────────────────────────────────── */
.stagger-children > *:nth-child(1) { transition-delay: .05s; }
.stagger-children > *:nth-child(2) { transition-delay: .10s; }
.stagger-children > *:nth-child(3) { transition-delay: .15s; }
.stagger-children > *:nth-child(4) { transition-delay: .20s; }
.stagger-children > *:nth-child(5) { transition-delay: .25s; }
.stagger-children > *:nth-child(6) { transition-delay: .30s; }
.stagger-children > *:nth-child(7) { transition-delay: .35s; }
.stagger-children > *:nth-child(8) { transition-delay: .40s; }

/* ─── Glow effects ──────────────────────────────────────────── */
.glow-green {
  box-shadow: 0 0 20px rgba(76,175,80,.3), 0 0 60px rgba(76,175,80,.1);
}

/* ─── Navbar mobile menu entrance ───────────────────────────── */
.mobile-menu a {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .4s ease, transform .4s ease;
}

.mobile-menu.open a {
  opacity: .85;
  transform: none;
}

.mobile-menu.open a:nth-child(1) { transition-delay: .1s; }
.mobile-menu.open a:nth-child(2) { transition-delay: .15s; }
.mobile-menu.open a:nth-child(3) { transition-delay: .2s; }
.mobile-menu.open a:nth-child(4) { transition-delay: .25s; }
.mobile-menu.open a:nth-child(5) { transition-delay: .3s; }
.mobile-menu.open a:nth-child(6) { transition-delay: .35s; }
.mobile-menu.open a:nth-child(7) { transition-delay: .4s; }

/* ─── Localizacao items stagger ─────────────────────────────── */
.localizacao-item {
  transition: all .3s ease;
}

/* ─── Hover border gradient ─────────────────────────────────── */
.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--green-500), var(--lime), var(--gold));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity .3s ease;
}

.gradient-border:hover::before { opacity: 1; }

/* ─── Floating elements ─────────────────────────────────────── */
.float-1 { animation: float 4s ease-in-out infinite; }
.float-2 { animation: float 4s ease-in-out infinite .7s; }
.float-3 { animation: float 4s ease-in-out infinite 1.4s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}