/* =====================================================================
   DigiMitra — animation layer (anim.css)
   Additive, premium, GPU-friendly. Loads AFTER dm.css.
   All entrance-hiding is scoped to html.anim-on so the site is fully
   visible if JS fails. Everything is disabled under reduced-motion.
   ===================================================================== */

/* ---------- Scroll reveal (richer than the base) ---------- */
html.anim-on .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
html.anim-on .reveal.in{ opacity:1; transform:none; }

/* Directional + scale variants (opt-in via data-anim) */
html.anim-on .reveal[data-anim="left"]{ transform:translateX(-32px); }
html.anim-on .reveal[data-anim="right"]{ transform:translateX(32px); }
html.anim-on .reveal[data-anim="scale"]{ transform:scale(.94); }
html.anim-on .reveal[data-anim="blur"]{ filter:blur(8px); }
html.anim-on .reveal[data-anim="left"].in,
html.anim-on .reveal[data-anim="right"].in,
html.anim-on .reveal[data-anim="scale"].in{ transform:none; }
html.anim-on .reveal[data-anim="blur"].in{ filter:none; }

/* Stagger children of grids so cards cascade in */
html.anim-on .pgrid > .reveal:nth-child(1){transition-delay:.02s}
html.anim-on .pgrid > .reveal:nth-child(2){transition-delay:.09s}
html.anim-on .pgrid > .reveal:nth-child(3){transition-delay:.16s}
html.anim-on .pgrid > .reveal:nth-child(4){transition-delay:.23s}
html.anim-on .pgrid > .reveal:nth-child(5){transition-delay:.30s}
html.anim-on .pgrid > .reveal:nth-child(6){transition-delay:.37s}
html.anim-on .pgrid > .reveal:nth-child(7){transition-delay:.44s}
html.anim-on .pgrid > .reveal:nth-child(8){transition-delay:.51s}
html.anim-on .catgrid > .reveal:nth-child(odd){transition-delay:.05s}
html.anim-on .catgrid > .reveal:nth-child(even){transition-delay:.12s}
html.anim-on .proof-grid > .reveal:nth-child(2){transition-delay:.08s}
html.anim-on .proof-grid > .reveal:nth-child(3){transition-delay:.16s}
html.anim-on .proof-grid > .reveal:nth-child(4){transition-delay:.24s}
html.anim-on .how-grid > .reveal:nth-child(2){transition-delay:.1s}
html.anim-on .how-grid > .reveal:nth-child(3){transition-delay:.2s}
html.anim-on .reviews-grid > .reveal:nth-child(2){transition-delay:.1s}
html.anim-on .reviews-grid > .reveal:nth-child(3){transition-delay:.2s}

/* ---------- Hero entrance (staggered, on load) ---------- */
@keyframes dm-rise{ from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
html.anim-on .hero-left > *{ opacity:0; animation:dm-rise .8s cubic-bezier(.16,1,.3,1) forwards; }
html.anim-on .hero-left > *:nth-child(1){animation-delay:.05s}
html.anim-on .hero-left > *:nth-child(2){animation-delay:.14s}
html.anim-on .hero-left > *:nth-child(3){animation-delay:.23s}
html.anim-on .hero-left > *:nth-child(4){animation-delay:.32s}
html.anim-on .hero-left > *:nth-child(5){animation-delay:.41s}
html.anim-on .hero-right{ opacity:0; animation:dm-rise .9s cubic-bezier(.16,1,.3,1) .28s forwards; }

/* ---------- Ambient hero glow (subtle, brand-tinted) ---------- */
.hero{ position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; z-index:0; top:-30%; right:-10%;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(34,197,94,.16), transparent 62%);
  filter:blur(20px); pointer-events:none;
  animation:dm-float 12s ease-in-out infinite;
}
.hero::after{
  content:""; position:absolute; z-index:0; bottom:-35%; left:-12%;
  width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,201,118,.12), transparent 62%);
  filter:blur(20px); pointer-events:none;
  animation:dm-float 15s ease-in-out infinite reverse;
}
.hero > *{ position:relative; z-index:1; }
@keyframes dm-float{
  0%,100%{ transform:translate(0,0) scale(1) }
  50%{ transform:translate(-24px,20px) scale(1.08) }
}

/* ---------- Header: shrink + elevate on scroll ---------- */
.site-header{ transition:height .25s ease, background .25s ease, box-shadow .25s ease; }
.site-header.scrolled{ box-shadow:0 6px 24px rgba(0,0,0,.35); }
.site-header.scrolled .header-inner{ height:56px; }
.header-inner{ transition:height .25s ease; }

/* ---------- Nav link underline slide ---------- */
.nav a{ position:relative; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--brand); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.nav a:hover::after{ transform:scaleX(1); }

/* ---------- Product cards: lift + image zoom + sheen ---------- */
.pcard{ transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, box-shadow .25s ease; }
.pcard:hover{ box-shadow:0 18px 44px rgba(0,0,0,.45); }
.pcard-media img{ transition:transform .5s cubic-bezier(.16,1,.3,1); }
.pcard:hover .pcard-media img{ transform:scale(1.07); }
.catcard{ transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.catcard:hover{ box-shadow:0 12px 30px rgba(0,0,0,.4); }
.catcard .ico{ transition:transform .3s cubic-bezier(.16,1,.3,1); display:inline-block; }
.catcard:hover .ico{ transform:translateY(-4px) scale(1.12); }

/* ---------- Primary CTA sheen ---------- */
.btn-primary, .btn-gold{ position:relative; overflow:hidden; }
.btn-primary::after, .btn-gold::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(-18deg); transition:none;
}
.btn-primary:hover::after, .btn-gold:hover::after{ animation:dm-sheen .8s ease; }
@keyframes dm-sheen{ from{left:-120%} to{left:140%} }

/* Gentle idle pulse on the main buy button */
@keyframes dm-cta-pulse{
  0%,100%{ box-shadow:0 8px 30px rgba(34,197,94,.28) }
  50%{ box-shadow:0 10px 40px rgba(34,197,94,.5) }
}
html.anim-on #payBtn, html.anim-on .buybar .btn-primary{ animation:dm-cta-pulse 2.6s ease-in-out infinite; }

/* ---------- Badges / countdown / proof ticks ---------- */
@keyframes dm-badge{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
html.anim-on .badge-hot{ animation:dm-badge 2.2s ease-in-out infinite; }
.countdown{ transition:opacity .3s ease; }
html.anim-on .countdown{ animation:dm-badge 2s ease-in-out infinite; }
@keyframes dm-tick{ 0%{opacity:.4} 100%{opacity:1} }
html.anim-on .pc-time .tick{ animation:dm-tick 1.4s ease-in-out infinite alternate; }

/* ---------- Floating WhatsApp: pulse ring ---------- */
.fab{ position:fixed; }
.fab::before{
  content:""; position:absolute; inset:0; border-radius:100px;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:dm-ring 2.4s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes dm-ring{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.45) }
  70%{ box-shadow:0 0 0 16px rgba(34,197,94,0) }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0) }
}

/* ---------- Marquee (if present) pause on hover ---------- */
.marquee-track:hover{ animation-play-state:paused; }

/* ---------- Count-up: hold layout steady ---------- */
.trust-cell .n, .proof-stat .n{ font-variant-numeric:tabular-nums; }

/* ---------- Reduce motion: turn it all off ---------- */
@media (prefers-reduced-motion: reduce){
  html.anim-on .reveal,
  html.anim-on .reveal.in,
  html.anim-on .hero-left > *,
  html.anim-on .hero-right{ opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }
  .hero::before, .hero::after,
  html.anim-on .badge-hot, html.anim-on .countdown,
  html.anim-on #payBtn, html.anim-on .buybar .btn-primary,
  html.anim-on .pc-time .tick, .fab::before{ animation:none !important; }
  .pcard, .pcard-media img, .catcard .ico, .nav a::after{ transition:none !important; }
}

/* ---------- Complete the columns: no trailing empty cells ----------
   The main product/category grids fill each row edge-to-edge. An
   incomplete last row stretches to complete the width instead of
   leaving an empty framed cell. Scoped to the dynamic grids only so
   fixed layouts (e.g. "What's included") are untouched. */
#hotGrid, #shopGrid{ display:flex !important; flex-wrap:wrap; gap:18px; align-items:stretch; }
#hotGrid > *, #shopGrid > *{ flex:1 1 calc(25% - 14px); }
#catGrid{ display:flex !important; flex-wrap:wrap; gap:14px; }
#catGrid > *{ flex:1 1 calc(20% - 12px); }
@media(max-width:960px){
  #hotGrid > *, #shopGrid > *{ flex-basis:calc(33.333% - 12px); }
  #catGrid > *{ flex-basis:calc(33.333% - 10px); }
}
@media(max-width:640px){
  #hotGrid, #shopGrid{ gap:12px; }
  #hotGrid > *, #shopGrid > *{ flex-basis:calc(50% - 6px); }
  #catGrid > *{ flex-basis:calc(50% - 7px); }
}