/* ============================================================
   Nabho Bazaar — "Alive" layer v20261005-r1
   Hero slideshow + scroll reveals + micro-motion.
   Scoped to blend with the existing editorial theme
   (deep green #171b14, cream #f1e5cb, gold #c3a47b).
   ============================================================ */

/* ---------- Hero slideshow frame ---------- */
.hero-photo.hero-alive{position:relative}
.hero-slideshow{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border:6px solid #f1e5cb;
  border-radius:2px;
  background:#10140d;
  box-shadow:inset 0 0 60px #00000055;
}
.hero-slideshow .hero-slide{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity 1.1s ease;
  pointer-events:none;
}
.hero-slideshow .hero-slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.hero-slideshow .hero-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  border:0;aspect-ratio:auto;position:static;
  transform:scale(1.02);
}
.hero-slideshow .hero-slide.is-active img{animation:hero-kb 6.8s ease-out forwards}
.hero-slideshow .hero-slide:nth-child(2n).is-active img{animation-name:hero-kb-b}
@keyframes hero-kb{from{transform:scale(1.02)}to{transform:scale(1.11) translate(-1.5%,1%)}}
@keyframes hero-kb-b{from{transform:scale(1.11) translate(1.5%,-1%)}to{transform:scale(1.02)}}

/* soft legibility gradient */
.hero-slideshow::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#00000038 0%,transparent 26%,transparent 62%,#00000059 100%);
}

/* caption chip */
.hero-slideshow figcaption{
  position:absolute;left:12px;bottom:12px;z-index:3;
  background:#171b14d9;color:#f4e8d2;
  font-family:Fragment,monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 12px;border-radius:20px;border:1px solid #c3a47b55;
  opacity:0;translate:0 8px;transition:opacity .6s ease .35s,translate .6s ease .35s;
  max-width:70%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-slideshow .hero-slide.is-active figcaption{opacity:1;translate:0 0}

/* dots */
.hero-dots{
  position:absolute;right:12px;bottom:14px;z-index:4;
  display:flex;gap:7px;align-items:center;
}
.hero-dot{
  width:22px;height:5px;border-radius:4px;border:0;padding:0;cursor:pointer;
  background:#f1e5cb66;transition:background .3s,width .3s;
}
.hero-dot:hover{background:#f1e5cbcc}
.hero-dot.is-active{background:#c3a47b;width:34px}

/* arrows */
.hero-arrow{
  position:absolute;top:50%;translate:0 -50%;z-index:4;
  width:34px;height:34px;border-radius:50%;border:1px solid #f1e5cb44;
  background:#171b1499;color:#f4e8d2;font-size:19px;line-height:1;cursor:pointer;
  opacity:0;transition:opacity .3s,background .3s;
  display:flex;align-items:center;justify-content:center;padding:0 0 2px;
}
.hero-arrow.prev{left:10px}
.hero-arrow.next{right:10px}
.hero-slideshow:hover .hero-arrow,.hero-slideshow:focus-within .hero-arrow{opacity:1}
.hero-arrow:hover{background:#c3a47b;color:#171b14}
@media(hover:none){.hero-arrow{opacity:.85}}

/* gold progress bar */
.hero-progress{
  position:absolute;top:0;left:0;height:3px;width:100%;z-index:5;
  background:#c3a47b;transform-origin:left;transform:scaleX(0);
}
.hero-slideshow.playing .hero-progress{animation:hero-prog 6s linear forwards}
@keyframes hero-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Scroll reveals ---------- */
[data-reveal]{opacity:0;translate:0 20px;transition:opacity .7s ease,translate .7s ease}
[data-reveal].is-in{opacity:1;translate:0 0}

/* ---------- Micro-motion ---------- */
.promo{transition:transform .35s ease,box-shadow .35s ease}
.promo:hover{transform:translateY(-4px)}
.promo img{transition:transform .6s ease}
.promo:hover img{transform:scale(1.05) rotate(-1deg)}
.product .product-image img{transition:transform .5s ease}
.product:hover .product-image img{transform:scale(1.07)}
.btn-section-action,.primary{transition:transform .25s ease,box-shadow .25s ease}
.btn-section-action:hover,.primary:hover{transform:translateY(-2px)}
.category-tile{transition:transform .3s ease}
.category-tile:hover{transform:translateY(-3px)}

/* announcement shimmer (keeps admin links intact) */
.store-announcement>span:first-child{
  background:linear-gradient(100deg,#ffe6cb 30%,#fff 50%,#ffe6cb 70%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:ann-shimmer 5s linear infinite;
}
@keyframes ann-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- Safety: reduced motion & small screens ---------- */
@media(prefers-reduced-motion:reduce){
  .hero-slideshow .hero-slide.is-active img,
  .hero-slideshow.playing .hero-progress,
  .store-announcement>span:first-child{animation:none!important}
  [data-reveal]{opacity:1;translate:none;transition:none}
}
@media(max-width:640px){
  .hero-slideshow figcaption{font-size:9px;left:8px;bottom:8px;max-width:62%}
  .hero-arrow{width:30px;height:30px}
}