/* ============================================================
   BIONARA — Hero orbital showcase
   Frascos reales flotando en órbita alrededor del medallón.
   Cambian por categoría cada 4s. Autoplay · flechas · dots · swipe.
   ============================================================ */

.showcase{position:relative;}

/* category pill on top */
.hc-cat{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);z-index:9;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border:1px solid rgba(231,224,207,.9);box-shadow:0 10px 26px rgba(16,58,39,.12);
  padding:10px 20px;border-radius:var(--r-pill);
  font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--green-900);
}
.hc-cat .lead{width:8px;height:8px;border-radius:50%;background:var(--gold-400);flex-shrink:0;box-shadow:0 0 0 0 rgba(243,181,58,.6);animation:pulse-dot 2s infinite;}
.hc-cat .txt{transition:opacity .4s var(--ease),transform .4s var(--ease);display:inline-block;}
.hc-cat.swap .txt{opacity:0;transform:translateY(-6px);}

/* stage — el video del remolino vive aquí, escalado y con borde difuminado (sin cuadro);
   su centro coincide siempre con el centro del conjunto de frascos */
.hc-stage{position:relative;width:100%;aspect-ratio:1/1;}
.hc-video-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;height:150%;z-index:0;pointer-events:none;
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 30%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.18) 64%, transparent 76%);
          mask:radial-gradient(circle at 50% 50%, #000 30%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.18) 64%, transparent 76%);}
.hc-video{width:100%;height:100%;object-fit:cover;object-position:87% 50%;display:block;}

/* glowing orbit */
.hc-orbit{position:absolute;inset:4%;z-index:2;border-radius:50%;pointer-events:none;}
.hc-orbit::before,.hc-orbit::after{content:"";position:absolute;inset:0;border-radius:50%;}
.hc-orbit::before{border:1.5px dashed rgba(91,191,111,.35);animation:spin 46s linear infinite;}
.hc-orbit::after{inset:11%;border:1.5px solid rgba(243,181,58,.28);animation:spin 64s linear infinite reverse;}
.hc-spark{position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle,#fff,var(--gold-400));box-shadow:0 0 12px 3px rgba(243,181,58,.6);z-index:2;}

/* central medallion */
.hc-medallion{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:30%;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #ffffff, #f3efe2 92%);
  box-shadow:0 18px 44px rgba(16,58,39,.18), inset 0 0 0 1px rgba(255,255,255,.8);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;
}
.hc-medallion img{width:42%;height:auto;filter:drop-shadow(0 3px 5px rgba(16,58,39,.18));}
.hc-medallion b{font-family:var(--font-head);font-weight:800;font-size:1rem;letter-spacing:.06em;color:var(--green-800);line-height:1;}
.hc-medallion small{font-size:.46rem;letter-spacing:.2em;color:var(--gold-600);font-weight:700;}

/* soft halo behind the product cluster so frascos resaltan sobre el video */
.hc-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:66%;height:66%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.62), rgba(255,255,255,.28) 48%, transparent 72%);
  filter:blur(8px);animation:hcBreathe 6s ease-in-out infinite;}
@keyframes hcBreathe{50%{transform:translate(-50%,-50%) scale(1.07);opacity:.92;}}

/* bottle track */
.hc-track{position:absolute;inset:0;z-index:4;}

.hc-bottle{
  position:absolute;left:var(--x);top:var(--y);width:30%;height:48%;
  transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--s));
  cursor:pointer;opacity:0;
}
.hc-slide.active .hc-bottle{animation:hcPop .6s var(--ease-bounce) forwards;}
.hc-slide.active .hc-bottle:nth-child(1){animation-delay:.04s;}
.hc-slide.active .hc-bottle:nth-child(2){animation-delay:.14s;}
.hc-slide.active .hc-bottle:nth-child(3){animation-delay:.24s;}
.hc-slide.active .hc-bottle:nth-child(4){animation-delay:.34s;}
.hc-bottle .bw{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;animation:hcFloat 5s ease-in-out infinite;}
.hc-bottle:nth-child(2) .bw{animation-duration:5.6s;animation-delay:.5s;}
.hc-bottle:nth-child(3) .bw{animation-duration:6.2s;animation-delay:1s;}
.hc-bottle:nth-child(4) .bw{animation-duration:5.2s;animation-delay:.3s;}
.hc-bottle img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 22px 22px rgba(16,40,28,.22));transition:transform .4s var(--ease);}
.hc-bottle:hover{z-index:6;}
.hc-bottle:hover img{transform:scale(1.06);}
.hc-bottle .star{
  position:absolute;top:6%;right:14%;z-index:3;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-500),var(--amber));color:#fff;
  display:grid;place-items:center;box-shadow:0 5px 14px rgba(239,125,46,.45);
  animation:hcStar .5s var(--ease-bounce) .5s both;
}
.hc-bottle .star svg{width:15px;height:15px;}
.hc-bottle .nm{
  position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--font-head);font-weight:700;font-size:.7rem;color:var(--green-900);
  background:rgba(255,255,255,.94);box-shadow:0 6px 16px rgba(16,58,39,.14);
  padding:5px 11px;border-radius:var(--r-pill);opacity:0;transition:opacity .3s,transform .3s;
  pointer-events:none;
}
.hc-bottle:hover .nm{opacity:1;transform:translateX(-50%) translateY(4px);}

@keyframes hcPop{from{opacity:0;transform:translate(-50%,-50%) rotate(var(--r)) scale(calc(var(--s) * .6));}
  to{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scale(var(--s));}}
@keyframes hcFloat{50%{transform:translateY(-13px);}}
@keyframes hcStar{from{opacity:0;transform:scale(0);}to{opacity:1;transform:scale(1);}}

/* slide wrapper (only one active) */
.hc-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;}
.hc-slide.active{opacity:1;visibility:visible;}

/* arrows */
.hc-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.95);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--green-800);box-shadow:var(--shadow-md);
  transition:transform .3s var(--ease),box-shadow .3s,background .2s;
}
.hc-arrow:hover{background:var(--green-800);color:#fff;transform:translateY(-50%) scale(1.08);}
.hc-arrow svg{width:22px;height:22px;}
.hc-arrow.prev{left:-6px;}
.hc-arrow.next{right:-6px;}

/* dots */
.hc-dots{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);z-index:10;display:flex;gap:9px;align-items:center;}
.hc-dot{width:9px;height:9px;border-radius:50%;background:rgba(36,138,82,.25);transition:all .35s var(--ease);cursor:pointer;}
.hc-dot:hover{background:rgba(36,138,82,.5);}
.hc-dot.active{width:30px;border-radius:5px;background:linear-gradient(90deg,var(--green-600),var(--gold-500));}

@media (prefers-reduced-motion:reduce){
  .hc-slide.active .hc-bottle{animation:none!important;opacity:1;}
  .hc-bottle .bw,.hc-orbit::before,.hc-orbit::after{animation:none!important;}
}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .showcase{max-width:440px;margin:8px auto 0;}
}
@media (max-width:480px){
  .hc-cat{font-size:.8rem;padding:8px 15px;top:-2px;}
  .hc-medallion b{font-size:.86rem;}
  .hc-medallion small{font-size:.4rem;}
  .hc-bottle .star{width:26px;height:26px;}
  .hc-bottle .star svg{width:13px;height:13px;}
  .hc-arrow{width:38px;height:38px;}
  .hc-arrow.prev{left:-2px;} .hc-arrow.next{right:-2px;}
}