/* =====================================================================
   BADDEST BOTTLE — social360-fx.css  (Phase 3+)
   "Spin any design on the bottle in 360" + AI featured designs strip on
   the Social hub. Additive & revertible. Kill switch: ?nofx=1.
   ===================================================================== */

/* ---- Spin-in-3D badge on social post thumbnails -------------------- */
.socialPostThumb{ position:relative; }
.bbSpinBadge{
  position:absolute; top:8px; left:8px; z-index:6;
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 9px; border-radius:999px;
  font-size:11px; font-weight:900; letter-spacing:.04em;
  color:#fff; cursor:pointer;
  background:linear-gradient(150deg, rgba(230,51,41,.92), rgba(120,20,16,.92));
  border:1px solid rgba(255,180,120,.5);
  box-shadow:0 6px 16px rgba(0,0,0,.4);
  transition:transform .16s ease, box-shadow .16s ease;
  opacity:0; transform:translateY(-4px) scale(.9);
}
.socialPostThumb:hover .bbSpinBadge,
.bbSpinBadge:focus-visible{ opacity:1; transform:none; }
.bbSpinBadge:hover{ transform:scale(1.08); box-shadow:0 8px 22px rgba(230,51,41,.55); }
.bbSpinBadge svg{ width:13px; height:13px; animation:bbSpinIco 3.5s linear infinite; }
@keyframes bbSpinIco{ to{ transform:rotate(360deg); } }

/* ---- 360 spin modal ------------------------------------------------ */
.bb360Modal{
  position:fixed; inset:0; z-index:2147483400;
  display:none; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 20%, rgba(20,10,8,.86), rgba(5,4,6,.95));
  backdrop-filter:blur(14px);
  opacity:0; transition:opacity .28s ease;
}
.bb360Modal.is-open{ display:flex; opacity:1; }
.bb360Card{
  position:relative;
  width:min(94vw, 560px);
  max-height:92vh;
  border-radius:24px; overflow:hidden;
  border:1px solid rgba(255,102,0,.3);
  background:linear-gradient(180deg, rgba(30,16,24,.7), rgba(12,8,12,.85));
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  animation:bb360Pop .4s cubic-bezier(.16,.9,.3,1.15) both;
}
@keyframes bb360Pop{
  0%{ opacity:0; transform:translateY(28px) scale(.88); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:none; }
}
.bb360Card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:3;
  background:linear-gradient(90deg,#e63329,#ff8a3d,#ffd23f,#e63329);
  background-size:200% 100%; animation:bb360Bar 3s linear infinite;
}
@keyframes bb360Bar{ to{ background-position:200% 0; } }
.bb360Head{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px 10px;
}
.bb360Title{ font-size:15px; font-weight:900; letter-spacing:.02em; color:#fff; }
.bb360Sub{ font-size:12px; color:rgba(255,255,255,.6); }
.bb360Close{
  margin-left:auto; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.35);
  color:#fff; font-size:20px; line-height:1; cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.bb360Close:hover{ transform:scale(1.1); background:rgba(230,51,41,.5); }
.bb360Stage{
  position:relative;
  width:100%; aspect-ratio:1/1; max-height:62vh;
  background:radial-gradient(120% 120% at 50% 30%, #241018, #0a0708);
}
.bb360Stage iframe{ width:100%; height:100%; border:0; display:block; }
.bb360Loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.7); font-size:13px; letter-spacing:.04em;
}
.bb360Foot{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:12px 16px 16px;
}
.bb360Hint{ font-size:12px; color:rgba(255,255,255,.55); }
.bb360ShareBtn{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:999px; cursor:pointer;
  font-size:12px; font-weight:900; color:#fff;
  background:linear-gradient(150deg,#e63329,#ff8a3d);
  border:1px solid rgba(255,190,130,.5);
  transition:transform .16s ease, box-shadow .16s ease;
}
.bb360ShareBtn:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 10px 26px rgba(230,51,41,.5); }

/* ---- Featured AI designs strip on Social --------------------------- */
.bbFeaturedStrip{
  margin:14px 0 4px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,138,61,.28);
  background:linear-gradient(150deg, rgba(230,51,41,.12), rgba(12,8,12,.6));
  animation:bbFadeUp .5s cubic-bezier(.16,.84,.44,1) both;
}
.bbFeaturedHead{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.bbFeaturedTitle{
  font-size:14px; font-weight:900; text-transform:uppercase; letter-spacing:.08em;
  color:#fff;
}
.bbFeaturedTitle b{ color:#ff8a3d; }
.bbFeaturedSub{ font-size:11.5px; color:rgba(255,255,255,.6); }
.bbFeaturedRow{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(120px, 1fr);
  gap:10px; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:thin;
}
.bbFeaturedCard{
  position:relative; border-radius:14px; overflow:hidden; cursor:pointer;
  aspect-ratio:1/1;
  border:1px solid rgba(255,255,255,.1);
  background:#160c12;
  transition:transform .18s ease, box-shadow .18s ease;
}
.bbFeaturedCard:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 12px 28px rgba(230,51,41,.4); }
.bbFeaturedCard img{ width:100%; height:100%; object-fit:cover; display:block; }
.bbFeaturedCard .bbFeaturedTag{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 8px 6px; font-size:10.5px; font-weight:800; color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  text-transform:uppercase; letter-spacing:.05em;
}
.bbFeaturedCard .bbSpinBadge{ opacity:0; }
.bbFeaturedCard:hover .bbSpinBadge{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .bb360Card, .bb360Card::before, .bbSpinBadge svg, .bbFeaturedStrip{ animation:none !important; }
  .bbSpinBadge{ opacity:1 !important; transform:none !important; }
}