/* =====================================================================
   ৯ এ Naru — Premium motion layer
   Loaded after style.css. Everything here is progressive enhancement:
   remove this file and the site still works perfectly.
   ===================================================================== */

/* ---------- 1. AURORA CURSOR (replaces the old dot + ring) ---------- */
.aur-glow, .aur-dot, .aur-label{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9997;
  will-change:transform,opacity;
}
.aur-glow{
  width:230px;height:230px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 50% 50%,
    rgba(196,25,124,.20) 0%, rgba(242,101,42,.14) 38%, rgba(43,42,156,.10) 62%, transparent 72%);
  filter:blur(14px);
  transition:opacity .5s ease, width .5s var(--ease), height .5s var(--ease);
}
.aur-dot{
  width:9px;height:9px;border-radius:50%;background:var(--grad);z-index:9999;
  box-shadow:0 0 0 4px rgba(196,25,124,.12), 0 4px 12px -4px rgba(196,25,124,.7);
  transition:width .35s var(--ease-back), height .35s var(--ease-back), opacity .3s;
}
.aur-label{
  z-index:9998;padding:9px 17px;border-radius:100px;white-space:nowrap;
  background:var(--grad);color:#fff;font-size:.74rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  opacity:0;transform:translate(-50%,-50%) scale(.5);
  transition:opacity .3s var(--ease);      /* transform is driven by JS each frame */
  box-shadow:0 12px 30px -12px rgba(196,25,124,.8);
}
body.aur-on .aur-glow{opacity:1;}
body.aur-live .aur-label{opacity:1;transform:translate(-50%,-50%) scale(1);}
body.aur-live .aur-dot{opacity:0;}
body.aur-hover .aur-dot{width:16px;height:16px;}
body.aur-press .aur-dot{width:5px;height:5px;}
body.aur-press .aur-glow{width:150px;height:150px;}
@media (hover:none),(max-width:1024px){.aur-glow,.aur-dot,.aur-label{display:none;}}

/* ---------- 1b. FREEZE HOVER WHILE SCROLLING ----------
   Only on pointer devices — touch screens never have this problem and we must
   not disable tapping during momentum scroll. */
@media (hover:hover){
  body.is-scrolling .card,
  body.is-scrolling .usp,
  body.is-scrolling .cat,
  body.is-scrolling .tst{pointer-events:none;}
  body.is-scrolling .card-media img,
  body.is-scrolling .card-media::before,
  body.is-scrolling .cat img{transition:none !important;}
}

/* ---------- 2. SCROLL PROGRESS ---------- */
#scrollbar{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:995;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--grad);
  box-shadow:0 0 14px rgba(196,25,124,.55);
}

/* ---------- 3a. WHOLE-CARD CLICK TARGET ----------
   The aurora cursor says "View Details" over the entire card, so the entire
   card must actually be clickable — not just the photo and the title.
   This transparent link covers the card and sits BELOW the add-to-cart /
   wishlist controls, which are lifted above it. */
.card{position:relative;}
.card-hit{position:absolute;inset:0;z-index:4;border-radius:inherit;}
/* these are already absolutely positioned — only lift them */
.card .quick{z-index:6;}
.card .wish{z-index:6;}
/* these are in normal flow — they need position to accept a z-index */
.card .add-btn{position:relative;z-index:6;}
.card h3 a{position:relative;z-index:6;}

/* ---------- 3. CARD TILT + SHINE SWEEP ----------
   No `transform-style:preserve-3d` here on purpose: it promotes every card to
   its own GPU layer, and on a page with 12+ cards that layer pressure makes the
   browser drop and re-rasterise other layers (the marquees) during fast scroll.
   The tilt uses perspective() inside the transform, which needs no 3D context. */
.card-media::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 47%,transparent 62%);
  transform:translateX(-120%);
  transition:transform 0s;
}
.card:hover .card-media::before{transform:translateX(120%);transition:transform 1.05s var(--ease);}

/* soft inner glow ring on hover */
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .5s var(--ease);
}
.card:hover::after{box-shadow:inset 0 0 0 1.5px rgba(196,25,124,.22);}

/* ---------- 4. BUTTON RIPPLE ---------- */
.btn{position:relative;}
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.45);transform:translate(-50%,-50%) scale(0);
  animation:rip .65s var(--ease) forwards;
}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0;}}

/* ---------- 5. BACK TO TOP with progress ring ---------- */
#totop{
  position:fixed;right:22px;bottom:94px;z-index:935;width:48px;height:48px;
  border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);
  box-shadow:var(--sh-2);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.85);
  transition:opacity .45s var(--ease),transform .5s var(--ease-back),visibility .45s;
}
#totop.on{opacity:1;visibility:visible;transform:none;}
#totop:hover{transform:translateY(-3px) scale(1.06);}
#totop svg.ring{position:absolute;inset:0;transform:rotate(-90deg);}
#totop svg.ring circle{fill:none;stroke-width:2.4;}
#totop svg.ring .bg{stroke:rgba(23,19,16,.10);}
#totop svg.ring .fg{stroke:url(#totopGrad);stroke-linecap:round;transition:stroke-dashoffset .12s linear;}
#totop .arw{width:17px;height:17px;stroke:var(--ink);stroke-width:2;fill:none;}
@media (max-width:640px){#totop{right:16px;bottom:80px;width:42px;height:42px;}}

/* ---------- 6. PAGE TRANSITION CURTAIN ---------- */
#curtain{
  position:fixed;inset:0;z-index:9400;pointer-events:none;
  display:flex;
}
#curtain i{
  flex:1;background:var(--cream-2);transform:scaleY(0);transform-origin:bottom;
  transition:transform .55s var(--ease);
}
#curtain.out{pointer-events:all;}
#curtain.out i{transform:scaleY(1);transform-origin:bottom;}
#curtain.in i{transform:scaleY(0);transform-origin:top;transition-duration:.6s;}

/* ---------- 7. HEADING GRADIENT SWEEP ON REVEAL ----------
   IMPORTANT: background-clip:text only paints the element's OWN text.
   Headings with class="split" are rebuilt into <span class="ch"> children by
   main.js, and those children would inherit the transparent fill with no
   background of their own — i.e. an invisible heading. So the sweep is applied
   to non-split headings, and split headings get the sweep on each character. */
.sec-head h2:not(.split), .phead h1:not(.split){
  background-image:linear-gradient(115deg,var(--ink) 0%,var(--ink) 38%,
    var(--magenta) 50%,var(--orange) 58%,var(--ink) 70%,var(--ink) 100%);
  background-size:280% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.sec-head h2:not(.split).swept, .phead h1:not(.split).swept{
  transition:background-position 1.5s var(--ease);
  background-position:0 0;
}

/* split headings: colour ripples across the characters instead */
.split.swept .ch{
  animation:chIn .7s var(--ease) forwards, chHue 1.6s var(--ease) forwards;
}
@keyframes chHue{
  0%   {color:var(--ink);}
  35%  {color:var(--magenta);}
  60%  {color:var(--orange);}
  100% {color:var(--ink);}
}

/* ---------- 8. HERO SPOTLIGHT ---------- */
.hero{--sx:50%;--sy:40%;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(420px circle at var(--sx) var(--sy),rgba(255,255,255,.55),transparent 68%);
  opacity:0;transition:opacity .7s var(--ease);
}
.hero:hover::before{opacity:1;}

/* ---------- 9. FLOATING INGREDIENT PARTICLES ---------- */
.dust{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1;}
.dust i{
  position:absolute;border-radius:50%;
  background:var(--grad);opacity:.16;
  animation:driftUp linear infinite;
}
@keyframes driftUp{
  0%{transform:translate3d(0,110%,0) scale(.6);opacity:0;}
  12%{opacity:.22;}
  88%{opacity:.16;}
  100%{transform:translate3d(var(--dx,20px),-15%,0) scale(1.1);opacity:0;}
}

/* ---------- 10. STICKY BUY BAR (product page, mobile) ---------- */
#buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:930;
  background:rgba(251,249,243,.94);backdrop-filter:blur(16px);
  border-top:1px solid var(--line-2);
  padding:11px 16px;display:flex;align-items:center;gap:12px;
  transform:translateY(120%);transition:transform .5s var(--ease);
  box-shadow:0 -10px 30px -20px rgba(23,19,16,.6);
}
#buybar.on{transform:none;}
#buybar img{width:42px;height:42px;border-radius:10px;object-fit:cover;flex:none;}
#buybar .nm{flex:1;min-width:0;}
#buybar .nm b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#buybar .nm span{font-size:.82rem;color:var(--ink-3);}
@media (min-width:961px){#buybar{display:none;}}

/* ---------- 11. IMAGE CLIP REVEAL ---------- */
[data-rv="curtain"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--ease);}
.rv-in[data-rv="curtain"]{clip-path:inset(0 0 0 0);}

/* ---------- 12. LINK UNDERLINE GROW ---------- */
.footer li a, .crumbs a{
  background-image:var(--grad);background-size:0% 1.5px;
  background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease),color .3s,padding-left .3s;
}
.footer li a:hover, .crumbs a:hover{background-size:100% 1.5px;}

/* ---------- 13. SOFT FOCUS-VISIBLE RING (accessibility) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--magenta);outline-offset:3px;border-radius:6px;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .aur-glow,.aur-dot,.aur-label,#curtain,.dust,#scrollbar{display:none !important;}
  .sec-head h2,.phead h1{-webkit-text-fill-color:currentColor;background:none;}
}