/* ============================================
   ANIMATIONS – Sarvashreshth Ventures
   ============================================ */

/* ── Keyframes ── */
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(40px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity:0; transform:translateX(-50px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes fadeInRight {
  from { opacity:0; transform:translateX(50px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(.8); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes zoomPulse {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.06); }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-12px); }
}
@keyframes shimmer {
  0%   { background-position:-400px 0; }
  100% { background-position:400px 0; }
}
@keyframes spin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes leafSway {
  0%,100% { transform:rotate(-4deg) scale(1); }
  50%      { transform:rotate(4deg) scale(1.04); }
}
@keyframes countUp {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes gradientShift {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
@keyframes ripple {
  0%   { transform:scale(0); opacity:.6; }
  100% { transform:scale(2.5); opacity:0; }
}
@keyframes typewriter {
  from { width:0; }
  to   { width:100%; }
}
@keyframes blinkCursor {
  0%,100% { border-color:transparent; }
  50%      { border-color:var(--gold-light); }
}
@keyframes slideInBanner {
  from { transform:translateX(-100%); opacity:0; }
  to   { transform:translateX(0);     opacity:1; }
}
@keyframes bounceIn {
  0%   { transform:scale(.3);   opacity:0; }
  50%  { transform:scale(1.08); opacity:.8; }
  70%  { transform:scale(.95); }
  100% { transform:scale(1);    opacity:1; }
}
@keyframes particleDrift {
  0%   { transform:translateY(0) translateX(0) rotate(0deg);   opacity:.8; }
  100% { transform:translateY(-120vh) translateX(30px) rotate(360deg); opacity:0; }
}
@keyframes logoReveal {
  0%   { clip-path:inset(0 100% 0 0); opacity:0; }
  100% { clip-path:inset(0 0% 0 0);   opacity:1; }
}

/* ── Scroll-reveal base (Progressive enhancement: visible by default) ── */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

/* Staggered children visible by default */
.stagger > * {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s ease;
}

/* ── LOGO ── */
.logo-wrap {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0 !important;
}
.logo-img {
  height: 46px;
  width: auto;
  display: block;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  transition: transform .25s ease, filter .25s ease;
}
.logo-img:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
}

/* ── HEADER entrance ── */
header { animation: headerFadeIn .5s ease; }
@keyframes headerFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── NAV link underline slide (Desktop Only) ── */
@media (min-width: 901px) {
  nav ul li a {
    position: relative;
    overflow: hidden;
  }
  nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 50%;
    width: 0; height: 2px;
    background: var(--gold-light);
    transition: width .3s ease, left .3s ease;
    border-radius: 2px;
  }
  nav ul li a:hover::after,
  nav ul li a.active::after {
    width: 70%; left: 15%;
  }
}

/* ── HERO text entrance ── */
.hero-content h2    { animation: fadeInLeft  .9s ease both .2s; }
.hero-content > p   { animation: fadeInLeft  .9s ease both .4s; }
.hero-badges        { animation: fadeInLeft  .8s ease both .55s; }
.hero-content > div:last-child { animation: fadeInUp .8s ease both .7s; }
.hero-img           { animation: fadeInRight .9s ease both .3s; }

/* Hero image floating */
.hero-img > div,
.hero-img img { animation: float 4s ease-in-out infinite; }

/* ── BUTTONS ── */
.btn-green, .btn-gold, .btn-cart, .btn-view, .btn-cart {
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, background .2s !important;
}
.btn-green:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(26,74,46,.35); }
.btn-gold:hover  { transform:translateY(-3px); box-shadow:0 8px 20px rgba(212,160,23,.4); }

/* Ripple on click */
.btn-green::before,
.btn-gold::before {
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:6px; height:6px;
  background:rgba(255,255,255,.5);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
}
.btn-green:active::before,
.btn-gold:active::before {
  animation:ripple .5s ease;
}

/* ── STATS counter ── */
.stat-item h3 { animation: countUp .6s ease both; }

/* ── PRODUCT CARDS hover ── */
.product-card {
  transition: transform .3s ease, box-shadow .3s ease !important;
}
.product-card:hover .prod-img { animation: zoomPulse .6s ease; }

/* ── DOC CARDS ── */
.doc-card { transition: transform .3s ease, box-shadow .3s ease !important; }
.doc-card:hover .doc-img-wrap { animation: leafSway 1s ease; }

/* ── WHY ITEMS ── */
.why-item { transition: transform .25s ease, box-shadow .25s ease; }
.why-item:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.1); }
.why-item:hover .why-icon { animation:spin 1s ease; }

/* ── CAT CARDS ── */
.cat-card .cat-icon { transition: transform .3s ease; }
.cat-card:hover .cat-icon { transform:scale(1.2) rotate(-5deg); }

/* ── PARTICLES (hero background) ── */
.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  pointer-events: none;
  animation: particleDrift linear infinite;
}

/* ── HERO animated gradient background ── */
.hero {
  background-size: 200% 200% !important;
  animation: gradientShift 8s ease infinite;
}

/* ── SECTION TITLES ── */
.section-title h2 {
  position: relative;
  display: inline-block;
}
.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 3px;
  background: var(--gold);
  border-radius: 2px;
  transition: width .8s ease;
}
.section-title.visible h2::after { width: 60%; }

/* ── PAGE LOADER ── */
#page-loader {
  display: none !important;
}

.loader-spinner {
  width: 44px; height: 44px;
  border: 4px solid rgba(255,255,255,.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin-top: 16px;
}

/* ── SCROLL TO TOP ── */
#scroll-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 48px; height: 48px;
  background: var(--green-dark);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s, background .2s;
  z-index: 999;
}
#scroll-top.show { opacity:1; transform:translateY(0); }
#scroll-top:hover { background:var(--green-mid); }

/* ── WHATSAPP FAB ── */
#whatsapp-fab {
  position: fixed;
  bottom: 88px; right: 26px;
  width: 52px; height: 52px;
  background: #25d366;
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  font-size: 28px;
  box-shadow: 0 4px 16px rgba(37,211,102,.45);
  z-index: 999;
  cursor: pointer;
  text-decoration: none;
  animation: bounceIn .8s ease 1s both;
  transition: transform .2s, box-shadow .2s;
}
#whatsapp-fab:hover { transform:scale(1.12); box-shadow:0 6px 24px rgba(37,211,102,.55); }

/* ── ANNOUNCEMENT BAR ── */
#announcement-bar {
  background: linear-gradient(90deg, #052e16 0%, #14532d 50%, #052e16 100%) !important;
  color: #ffffff !important;
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2px;
}

/* ── CONTACT info icon pulse ── */
.ci-icon {
  transition: transform .3s ease;
  animation: float 3s ease-in-out infinite;
}
.ci-item:nth-child(2) .ci-icon { animation-delay:.4s; }
.ci-item:nth-child(3) .ci-icon { animation-delay:.8s; }
.ci-item:nth-child(4) .ci-icon { animation-delay:1.2s; }

/* ── Value items ── */
.value-item { transition:transform .3s ease, box-shadow .3s ease; }
.value-item:hover { transform:translateY(-6px); box-shadow:0 10px 28px rgba(0,0,0,.1); }
.value-item .icon { transition:transform .4s ease; }
.value-item:hover .icon { transform:scale(1.3) rotate(10deg); }

/* ── Step numbers bounce on hover ── */
.step-item:hover .step-num { animation:bounceIn .5s ease; }

/* ── Shimmer on price ── */
.price-now {
  background: linear-gradient(90deg, var(--green-dark) 25%, var(--green-mid) 50%, var(--green-dark) 75%);
  background-size: 400px 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}