/* ===== Geo Herb — Motion Layer (adds a distinct animation personality on top of the existing design, without touching it) ===== */

html{scroll-behavior:smooth}

body{opacity:0;animation:gh-bodyIn .6s ease forwards}
@keyframes gh-bodyIn{to{opacity:1}}

/* ---------- Scroll reveal ---------- */
.gh-reveal{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .8s cubic-bezier(.22,.7,.2,1),transform .8s cubic-bezier(.22,.7,.2,1);will-change:transform,opacity}
.gh-reveal.gh-in{opacity:1;transform:none}
.gh-reveal.gh-left{transform:translateX(-40px) scale(.98)}
.gh-reveal.gh-left.gh-in{transform:none}
.gh-reveal.gh-right{transform:translateX(40px) scale(.98)}
.gh-reveal.gh-right.gh-in{transform:none}

/* ---------- Sticky header, shrinks + gains depth on scroll ---------- */
header{transition:box-shadow .35s ease,padding .35s ease,background-color .35s ease}
header.gh-scrolled{box-shadow:0 10px 26px rgba(20,50,32,.14)}
header.gh-scrolled .header-main{padding-top:6px;padding-bottom:6px}
.header-main{transition:padding .35s ease}

/* ---------- Magnetic tilt cards (product / category / review / info) ---------- */
.product,.cat-banner,.review-card,.info-panel,.detail{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.22,.7,.2,1),box-shadow .35s ease}
.gh-tilt{will-change:transform}

/* ---------- Ripple ---------- */
.gh-ripple{position:relative;overflow:hidden}
.gh-ripple-wave{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);pointer-events:none;animation:gh-rippleAnim .65s ease-out forwards}
@keyframes gh-rippleAnim{to{transform:scale(1);opacity:0}}

/* ---------- Floating leaf particles (ambient, ayurvedic touch) ---------- */
#gh-leaf-layer{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.gh-leaf{position:absolute;top:-40px;will-change:transform,opacity;animation:gh-leafFall linear forwards;filter:drop-shadow(0 4px 6px rgba(0,0,0,.12))}
@keyframes gh-leafFall{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  8%{opacity:.85}
  92%{opacity:.7}
  100%{transform:translate3d(var(--gh-drift,40px),110vh,0) rotate(var(--gh-spin,360deg));opacity:0}
}

/* ---------- Cart fly-to-cart clone ---------- */
.gh-fly{position:fixed;z-index:9999;pointer-events:none;font-size:26px;transition:transform .7s cubic-bezier(.3,.6,.15,1),opacity .7s ease;will-change:transform,opacity}
@keyframes gh-cartPulse{0%{transform:scale(1)}30%{transform:scale(1.5)}60%{transform:scale(.9)}100%{transform:scale(1)}}
.gh-pulse{animation:gh-cartPulse .5s ease}

/* ---------- Hero mouse-parallax ---------- */
.hero-art,.geo-hero-visual{will-change:transform}

/* ---------- Buttons: subtle breathing + shine on primary CTA ---------- */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:gh-btnShine 3.6s ease-in-out infinite}
@keyframes gh-btnShine{0%,60%{left:-60%}100%{left:130%}}

/* ---------- Number count-up ---------- */
.gh-count{display:inline-block}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body{opacity:1;animation:none}
  .gh-reveal{opacity:1!important;transform:none!important;transition:none!important}
  #gh-leaf-layer{display:none}
  .btn::before{animation:none;display:none}
  .product,.cat-banner,.review-card,.info-panel,.detail{transition:none!important;transform:none!important}
}

@media (pointer:coarse){
  #gh-leaf-layer{opacity:.7}
}

/* Geo Herb mobile slider height fix */
@media (max-width: 767px) {
  .hero-slider,
  .hero-slider .slide,
  .hero-slider .swiper-slide,
  .hero-slider .carousel-item,
  .hero-slider .slider-item,
  .home-slider,
  .home-slider .slide,
  .home-slider .swiper-slide,
  .slider,
  .main-slider,
  .banner-slider {
    min-height: 650px !important;
    height: 650px !important;
  }

  .hero-slider img,
  .hero-slider .slide img,
  .hero-slider .swiper-slide img,
  .hero-slider .carousel-item img,
  .hero-slider .slider-item img,
  .home-slider img,
  .home-slider .slide img,
  .home-slider .swiper-slide img,
  .slider img,
  .main-slider img,
  .banner-slider img {
    width: 100% !important;
    height: 650px !important;
    min-height: 650px !important;
    object-fit: cover !important;
  }
}