/* =========================================================
   The New Pharmacy & Stores — motion layer
   Layered on top of styles.css / inline page styles.
   Apothecary palette preserved; this file only adds motion.
   ========================================================= */

/* ---- tokens ---- */
:root{
  --motion-fast:.18s;
  --motion:.4s;
  --motion-slow:.7s;
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-soft:cubic-bezier(.25,.46,.45,.94);
}

/* =========================================================
   1. SCROLL REVEAL
   Elements tagged (by animations.js) with .reveal start hidden
   and animate in when .is-visible is added by the observer.
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(30px);
  filter:blur(6px);
  transition:opacity var(--motion-slow) var(--ease-out),
             transform var(--motion-slow) var(--ease-out),
             filter var(--motion-slow) var(--ease-out);
  transition-delay:var(--reveal-delay, 0s);
  will-change:opacity, transform, filter;
}
.reveal.is-visible{opacity:1; transform:none; filter:none;}

/* directional variants */
.reveal--left{transform:translateX(-34px);}
.reveal--right{transform:translateX(34px);}
.reveal--zoom{transform:scale(.94);}
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--zoom.is-visible{transform:none;}

/* =========================================================
   2. HERO ENTRANCE (plays on load, no scroll needed)
   ========================================================= */
@keyframes rise-in{
  from{opacity:0; transform:translateY(28px);}
  to{opacity:1; transform:none;}
}
@keyframes seal-in{
  from{opacity:0; transform:scale(.82) rotate(-6deg);}
  to{opacity:1; transform:none;}
}
@keyframes float-soft{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}

.anim-hero .hero-copy > *{
  opacity:0;
  animation:rise-in var(--motion-slow) var(--ease-out) forwards;
}
.anim-hero .hero-copy > *:nth-child(1){animation-delay:.05s;}
.anim-hero .hero-copy > *:nth-child(2){animation-delay:.15s;}
.anim-hero .hero-copy > *:nth-child(3){animation-delay:.25s;}
.anim-hero .hero-copy > *:nth-child(4){animation-delay:.35s;}
.anim-hero .hero-copy > *:nth-child(5){animation-delay:.45s;}
.anim-hero .hero-copy > *:nth-child(6){animation-delay:.55s;}

.anim-hero .seal-logo-img,
.anim-hero #heroSeal{
  animation:seal-in 1s var(--ease-out) .3s both,
            float-soft 6s ease-in-out 1.3s infinite;
}

/* =========================================================
   3. STAGGERED GRID CHILDREN
   animations.js sets --reveal-delay per child.
   ========================================================= */

/* =========================================================
   4. HEADER ON SCROLL
   ========================================================= */
header.site, .shop-header{
  transition:box-shadow var(--motion) var(--ease-soft),
             padding var(--motion) var(--ease-soft),
             background var(--motion) var(--ease-soft);
}
header.site.is-scrolled, .shop-header.is-scrolled{
  box-shadow:0 6px 24px -14px rgba(16,42,32,.5);
  background:rgba(250,247,240,.92);
  backdrop-filter:saturate(1.1) blur(8px);
}

/* =========================================================
   5. MICRO-INTERACTIONS
   ========================================================= */

/* product / category cards — smoother lift + image zoom */
.product-card, .cat-card, .brand-card{
  transition:transform var(--motion) var(--ease-out),
             box-shadow var(--motion) var(--ease-out);
}
.product-card:hover, .cat-card:hover, .brand-card:hover{
  transform:translateY(-5px);
  box-shadow:0 1px 2px rgba(28,27,23,.06), 0 18px 34px -18px rgba(27,67,50,.35);
}
.pc-image{overflow:hidden;}
.pc-image img{transition:transform var(--motion-slow) var(--ease-out);}
.product-card:hover .pc-image img{transform:scale(1.06);}

/* buttons — press + sheen */
.btn, .pc-add, .nav-cta{
  transition:transform var(--motion-fast) var(--ease-out),
             background .2s ease, box-shadow var(--motion-fast) var(--ease-out);
}
.btn:active, .pc-add:active, .nav-cta:active{transform:scale(.96);}
.btn-primary:hover, .nav-cta:hover{box-shadow:0 8px 20px -10px rgba(16,42,32,.6);}

/* add-to-cart success pulse (toggled by JS) */
@keyframes cart-pop{
  0%{transform:scale(1);}
  40%{transform:scale(1.14);}
  100%{transform:scale(1);}
}
.pc-add.just-added, .btn.just-added{animation:cart-pop .4s var(--ease-out);}

/* cart count bump when it changes */
@keyframes count-bump{
  0%{transform:scale(1);}
  50%{transform:scale(1.5);}
  100%{transform:scale(1);}
}
.sh-cart-count.bump, #navCartCount.bump{animation:count-bump .35s var(--ease-out);}

/* flying dot for add-to-cart */
.fly-dot{
  position:fixed; z-index:300; width:14px; height:14px; border-radius:50%;
  background:var(--forest, #1B4332); pointer-events:none;
  box-shadow:0 4px 12px rgba(16,42,32,.4);
  transition:transform .65s cubic-bezier(.5,-0.3,.7,1), opacity .65s ease;
}

/* category strip link underline grow (shop pages) */
.cat-strip a{position:relative;}

/* =========================================================
   6. STAT COUNT-UP (no CSS needed; JS drives text)
      Keep numerals from reflowing width.
   ========================================================= */
[data-count-to]{font-variant-numeric:tabular-nums;}

/* =========================================================
   7. MARQUEE (if page has .brand-marquee track)
   ========================================================= */
@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
.marquee-track{animation:marquee-scroll 32s linear infinite;}
.marquee-viewport:hover .marquee-track{animation-play-state:paused;}

/* =========================================================
   8. LINK / NAV underline already in page; add smooth focus
   ========================================================= */
a, button{transition:color var(--motion-fast) var(--ease-soft);}

/* =========================================================
   10. SCROLL PROGRESS BAR (top of viewport)
   ========================================================= */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  z-index:100; pointer-events:none;
  background:linear-gradient(90deg, var(--forest,#1B4332), var(--gold,#C9A227));
  box-shadow:0 0 10px rgba(201,162,39,.5);
  transition:width .1s linear;
}

/* =========================================================
   11. HERO HEADLINE — word-by-word reveal + highlight sweep
   ========================================================= */
.word{
  display:inline-block;
  opacity:0;
  transform:translateY(90%) rotate(2deg);
  animation:word-up .7s var(--ease-out) forwards;
  animation-delay:var(--word-delay, 0s);
}
.word-wrap{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em;}
@keyframes word-up{
  to{opacity:1; transform:none;}
}
/* the <em> inside the heading gets a gold underline sweep */
.hero h2 em{position:relative; font-style:italic; white-space:nowrap;}
.hero h2 em::after{
  content:''; position:absolute; left:0; bottom:.02em; height:.14em; width:100%;
  background:linear-gradient(90deg, var(--gold,#C9A227), var(--gold-soft,#E9D9A0));
  transform:scaleX(0); transform-origin:left;
  animation:sweep .7s var(--ease-out) 1s forwards;
  border-radius:2px;
}
@keyframes sweep{to{transform:scaleX(1);}}

/* =========================================================
   12. PARALLAX (JS sets --parallax on scroll)
   ========================================================= */
.hero-visual, .seal{will-change:transform;}

/* =========================================================
   13. 3D TILT CARDS (JS sets rotate vars on pointermove)
   ========================================================= */
.tilt{
  transform-style:preserve-3d;
  transition:transform var(--motion) var(--ease-out),
             box-shadow var(--motion) var(--ease-out);
}
.tilt.tilting{transition:box-shadow var(--motion) var(--ease-out);}
.tilt-glare{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity var(--motion) var(--ease-out);
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),
            rgba(255,255,255,.35), transparent 45%);
}
.tilt.tilting .tilt-glare{opacity:1;}

/* =========================================================
   14. SKELETON SHIMMER (async grids while data loads)
   ========================================================= */
.skeleton-card{
  background:var(--white,#fff); border:1px solid var(--line,#D8D2C2);
  border-radius:var(--radius,2px); padding:14px; min-height:270px;
}
.skeleton-card .sk{
  border-radius:4px;
  background:linear-gradient(100deg,
    var(--parchment-dim,#F1ECE0) 30%, var(--sage,#E8EFE6) 50%,
    var(--parchment-dim,#F1ECE0) 70%);
  background-size:200% 100%;
  animation:shimmer 1.3s ease-in-out infinite;
}
.skeleton-card .sk-img{aspect-ratio:1; margin:-14px -14px 12px;}
.skeleton-card .sk-line{height:12px; margin:8px 0;}
.skeleton-card .sk-line.short{width:55%;}
.skeleton-card .sk-btn{height:38px; margin-top:14px;}
@keyframes shimmer{
  from{background-position:200% 0;}
  to{background-position:-200% 0;}
}

/* =========================================================
   15. RIPPLE on buttons
   ========================================================= */
.ripple-host{position:relative; overflow:hidden;}
.ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(250,247,240,.45); pointer-events:none;
  animation:ripple-out .6s var(--ease-out) forwards;
}
@keyframes ripple-out{to{transform:scale(2.6); opacity:0;}}

/* =========================================================
   15b. UPLOAD-PRESCRIPTION floating action button
   Sits above the WhatsApp button, below back-to-top.
   Expands from a pill to reveal the label on hover.
   ========================================================= */
.rx-fab{
  position:fixed; right:22px; bottom:150px; z-index:120;
  height:46px; padding:0 14px 0 12px;
  display:inline-flex; align-items:center; gap:8px;
  border-radius:999px; background:#C29A20; color:#0F1F16;
  box-shadow:0 10px 26px -10px rgba(194,154,32,.7);
  text-decoration:none; font-weight:700; font-size:13.5px;
  letter-spacing:.02em;
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.rx-fab:hover{transform:translateY(-3px); background:#B58A18;}
.rx-fab svg{width:20px; height:20px; flex:0 0 auto;}
.rx-fab__label{white-space:nowrap;}
@media (max-width: 560px){
  /* On narrow screens, collapse to icon only to save space alongside other FABs. */
  .rx-fab{padding:0; width:46px; justify-content:center;}
  .rx-fab__label{display:none;}
}

/* =========================================================
   16. BACK TO TOP button
   ========================================================= */
.to-top{
  position:fixed; right:22px; bottom:88px; z-index:120;
  width:46px; height:46px; border-radius:50%;
  background:var(--forest,#1B4332); color:var(--parchment,#FAF7F0);
  border:none; display:grid; place-items:center;
  opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
  box-shadow:0 10px 26px -10px rgba(16,42,32,.6);
  transition:opacity var(--motion) var(--ease-out),
             transform var(--motion) var(--ease-out),
             background .2s ease;
}
.to-top.show{opacity:1; transform:none; pointer-events:auto;}
.to-top:hover{background:var(--forest-deep,#102A20); transform:translateY(-3px);}
.to-top svg{width:20px; height:20px;}

/* =========================================================
   17. PAGE TRANSITION — fade the page out on internal nav
   (body is never hidden by default; only fades during navigation)
   ========================================================= */
html.is-leaving body{
  opacity:0 !important;
  transition:opacity .28s var(--ease-soft) !important;
}

/* =========================================================
   18. HERO AURORA — soft drifting glow behind hero content
   ========================================================= */
.hero{position:relative;}
.hero::after{
  content:''; position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38% 48% at 15% 28%, rgba(27,67,50,.12), transparent 70%),
    radial-gradient(34% 44% at 82% 72%, rgba(201,162,39,.16), transparent 70%),
    radial-gradient(30% 40% at 60% 10%, rgba(27,67,50,.08), transparent 70%);
  animation:aurora 18s ease-in-out infinite alternate;
  will-change:transform;
}
.hero > .wrap{position:relative; z-index:1;}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1); opacity:.9;}
  50%{opacity:1;}
  100%{transform:translate3d(0,-16px,0) scale(1.08); opacity:.85;}
}

/* =========================================================
   19. MAGNETIC BUTTONS (JS translates toward cursor)
   ========================================================= */
.magnetic{transition:transform var(--motion) var(--ease-out);}

/* =========================================================
   20. SECTION EYEBROW — accent line draws in on reveal
   ========================================================= */
.section-head .eyebrow::before{transform-origin:left center;}
.section-head.is-visible .eyebrow::before{
  animation:eyebrow-draw .6s var(--ease-out) .15s both;
}
@keyframes eyebrow-draw{from{transform:scaleX(0);} to{transform:scaleX(1);}}

/* =========================================================
   21. REDUCED MOTION — honour user preference (WCAG)
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,
  .reveal,
  .word,
  .hero h2 em::after,
  .hero::after,
  .skeleton-card .sk,
  .anim-hero .hero-copy > *,
  .anim-hero .seal-logo-img,
  .anim-hero #heroSeal,
  .marquee-track{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1 !important; transform:none !important; filter:none !important;}
  .word{opacity:1 !important; transform:none !important;}
  .hero h2 em::after{transform:scaleX(1) !important;}
  .section-head.is-visible .eyebrow::before{animation:none !important; transform:scaleX(1) !important;}
  .scroll-progress, .tilt-glare{display:none !important;}
  .tilt, .magnetic{transform:none !important;}
  html.is-leaving body{opacity:1 !important;}
}