/* ============================================================
   Ghevar.in — Micro-animations & 3D effects
   ============================================================ */

/* ---------- 3D product card tilt ---------- */
.tilt-wrap { perspective: 900px; }
[data-tilt] {
  display: block;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  transition: transform .18s ease-out, box-shadow .3s ease;
  will-change: transform;
}
[data-tilt].tilt-active {
  box-shadow: 0 22px 44px rgba(122, 22, 38, .28);
  z-index: 3;
}
.tilt-inner { transform: translateZ(22px); transform-style: preserve-3d; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .4s; }

/* ---------- Badge shine sweep ---------- */
.badge-shine { overflow: hidden; position: relative; }
.badge-shine::after {
  content: '';
  position: absolute; top: 0; left: -80%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: shineSweep 3.2s ease-in-out infinite;
}
@keyframes shineSweep { 0%,60% { left: -80%; } 100% { left: 160%; } }

/* ---------- Ghee chip on product cards ---------- */
.ghee-chip {
  position: absolute; bottom: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(255,248,236,.96); color: var(--primary-dark);
  border: 1.5px solid var(--gold); border-radius: 999px;
  padding: .28rem .7rem; font-size: .72rem; font-weight: 700;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
  animation: chipPop 4s ease-in-out infinite;
}
.ghee-chip img { animation: chipSpin 6s linear infinite; }
@keyframes chipPop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes chipSpin { to { transform: rotate(360deg); } }

/* ---------- Desi ghee micro block ---------- */
.dg-micro {
  background: linear-gradient(135deg, #fff8ec, #fdf3e2);
  border: 1.5px solid var(--gold); border-radius: var(--radius);
  padding: 1.2rem 1.3rem; margin: 1.4rem 0;
  box-shadow: 0 6px 18px rgba(217,165,32,.15);
}
.dg-micro-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.dg-badge { flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(122,22,38,.25)); }
.dg-micro-head h3 { color: var(--primary-dark); font-size: 1.15rem; margin-bottom: .2rem; }
.dg-micro-head p { color: var(--text-soft); font-size: .9rem; }
.dg-micro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.dg-micro-item {
  display: flex; align-items: center; gap: .6rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: .6rem .7rem; transition: transform .25s ease, box-shadow .25s ease;
}
.dg-micro-item:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(122,22,38,.12); }
.dg-micro-item img { flex-shrink: 0; animation: floatY 3.4s ease-in-out infinite; }
.dg-micro-item:nth-child(2) img { animation-delay: .5s; }
.dg-micro-item:nth-child(3) img { animation-delay: 1s; }
.dg-micro-item:nth-child(4) img { animation-delay: 1.5s; }
.dg-micro-item span { font-size: .78rem; color: var(--text-soft); line-height: 1.3; }
.dg-micro-item strong { display: block; color: var(--text); font-size: .84rem; }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- Hero art (3D scene) ---------- */
.hero-layout { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 1rem; max-width: 1200px; }
.hero-art { position: relative; }
.hero-art img.hero-ghevar { width: 100%; max-width: 520px; margin: 0 auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.35)); }
.hero-art .float-badge {
  position: absolute; z-index: 3; width: 84px; height: 84px; border-radius: 50%;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.3));
  animation: floatY 4s ease-in-out infinite;
}
.hero-art .float-badge.fb-1 { top: 4%; right: 6%; animation-delay: 0s; }
.hero-art .float-badge.fb-2 { bottom: 8%; left: 2%; width: 76px; height: 76px; animation-delay: .8s; }
.hero-art .float-badge.fb-3 { bottom: 2%; right: 16%; width: 66px; height: 66px; animation-delay: 1.4s; }

/* ---------- Trust marquee ---------- */
.trust-marquee {
  overflow: hidden; background: var(--primary-dark); padding: .85rem 0;
  border-top: 1px solid rgba(247,201,72,.35); border-bottom: 1px solid rgba(247,201,72,.35);
  position: relative;
}
.trust-marquee::before, .trust-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.trust-marquee::before { left: 0; background: linear-gradient(90deg, var(--primary-dark), transparent); }
.trust-marquee::after { right: 0; background: linear-gradient(-90deg, var(--primary-dark), transparent); }
.trust-track { display: flex; gap: 2.4rem; width: max-content; animation: marquee 26s linear infinite; }
.trust-track:hover { animation-play-state: paused; }
.trust-item { display: inline-flex; align-items: center; gap: .55rem; color: var(--gold); font-weight: 600; font-size: .88rem; white-space: nowrap; }
.trust-item img { width: 26px; height: 26px; }
.trust-item small { color: #e8d5b8; font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Count-up stats ---------- */
.stat-num { display: inline-block; }

/* ---------- 3D product gallery ---------- */
.product-gallery { perspective: 1100px; }
.product-gallery img { transition: transform .25s ease; }
.product-gallery img.tilt-active { transform: rotateX(2.5deg) rotateY(-2.5deg) scale(1.015); }

/* ---------- Honeycomb divider ---------- */
.divider { display: block; width: min(720px, 86%); height: 26px; margin: 0 auto 2.2rem; opacity: .9; }

/* ---------- Section reveal stagger for grids ---------- */
.product-grid .reveal, .blog-grid .reveal, .category-grid .reveal { animation: none; }

/* ---------- Hero entrance animations ---------- */
.hero-content .hero-eyebrow { animation: fadeUp .7s ease both; }
.hero-content h1 { animation: fadeUp .8s .1s ease both; }
.hero-content p { animation: fadeUp .8s .2s ease both; }
.hero-cta { animation: fadeUp .8s .3s ease both; }
.hero-stats { animation: fadeUp .9s .45s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- Floating honeycomb background (subtle) ---------- */
.hero { overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: url('../images/illustrations/honeycomb-pattern.svg');
  background-size: 90px 90px;
  animation: bgDrift 60s linear infinite;
}
@keyframes bgDrift { to { background-position: 90px 0; } }

/* ---------- Button micro-interactions ---------- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
}
.btn:hover::after { animation: btnSheen .7s ease; }
@keyframes btnSheen { to { left: 140%; } }

/* ---------- Card hover lift (3D depth) ---------- */
.product-card { transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
.product-card:hover { transform: translateY(-6px) scale(1.015); }

/* ---------- Heartbeat on live dot (admin) ---------- */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .hero-layout { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 420px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .hero-art .float-badge { width: 62px; height: 62px; }
  .hero-art .float-badge.fb-2 { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}