.velara-smart-bottle-wrap{
  display:flex;
  width:100%;
}

.velara-smart-bottle{
  --vsb-liquid:#d987ff;
  --vsb-glow:#f7dcff;
  --vsb-level:58%;
  --vsb-energy:1;
  position:relative;
  max-width:100%;
}

.velara-bottle-core{
  position:relative;
  width:100%;
  aspect-ratio:1/1.18;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}

.velara-bottle-core::before{
  content:"";
  position:absolute;
  left:50%;
  top:52%;
  width:82%;
  height:72%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, var(--vsb-glow) 0%, color-mix(in srgb, var(--vsb-glow) 45%, transparent) 34%, transparent 72%);
  filter:blur(calc(28px * var(--vsb-energy)));
  z-index:0;
  transition:background .45s ease, filter .45s ease, opacity .45s ease;
}

.velara-bottle-img{
  position:relative;
  z-index:5;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 38px 48px rgba(35,13,82,.35)) drop-shadow(0 0 18px rgba(255,255,255,.25));
  pointer-events:none;
  user-select:none;
}

.velara-liquid{
  position:absolute;
  z-index:2;
  left:22%;
  right:22%;
  bottom:14%;
  height:var(--vsb-level);
  border-radius:42% 42% 20% 20%;
  background:radial-gradient(circle at 50% 28%, color-mix(in srgb, #fff 60%, var(--vsb-liquid)) 0%, var(--vsb-liquid) 38%, color-mix(in srgb, var(--vsb-liquid) 58%, transparent) 72%, transparent 100%);
  mix-blend-mode:screen;
  transition:height .55s ease, background .45s ease, opacity .35s ease, filter .35s ease;
  transform:translateZ(0);
}

.velara-liquid::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:6%;
  height:18%;
  border-radius:50%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  opacity:.55;
  animation:velaraLiquidBreath 3.8s ease-in-out infinite;
}

.velara-liquid-shine{
  position:absolute;
  z-index:3;
  left:25%;
  top:20%;
  width:16%;
  height:62%;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.08), transparent);
  filter:blur(6px);
  opacity:.42;
  mix-blend-mode:screen;
  animation:velaraShine 4.8s ease-in-out infinite;
}

.velara-particles{
  position:absolute;
  z-index:4;
  left:20%;
  right:20%;
  bottom:16%;
  height:60%;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:screen;
}

.velara-particles span{
  position:absolute;
  bottom:-10%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  box-shadow:0 0 10px var(--vsb-glow);
  animation:velaraParticle calc(4.6s / var(--vsb-energy)) linear infinite;
}

.velara-particles span:nth-child(1){left:18%;animation-delay:.1s;transform:scale(.7)}
.velara-particles span:nth-child(2){left:34%;animation-delay:1.1s;transform:scale(.45)}
.velara-particles span:nth-child(3){left:48%;animation-delay:2.1s;transform:scale(.9)}
.velara-particles span:nth-child(4){left:62%;animation-delay:.7s;transform:scale(.55)}
.velara-particles span:nth-child(5){left:75%;animation-delay:1.7s;transform:scale(.75)}
.velara-particles span:nth-child(6){left:88%;animation-delay:2.7s;transform:scale(.4)}

.velara-scent-controls{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:18px;
}

.velara-scent-option{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  cursor:pointer;
  color:inherit;
}

.velara-scent-icon{
  width:58px;
  height:58px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(74,43,142,.36);
  box-shadow:0 14px 30px rgba(42,15,95,.18), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(8px);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease;
}

.velara-scent-icon svg{
  width:28px;
  height:28px;
  color:rgba(255,255,255,.88);
  fill:none;
  stroke:currentColor;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:color .28s ease, filter .28s ease, transform .28s ease;
}

.velara-scent-label{
  color:rgba(255,255,255,.86);
  font-size:12px;
  line-height:1;
  letter-spacing:.02em;
  text-shadow:0 2px 8px rgba(30,10,70,.4);
  transition:opacity .28s ease, transform .28s ease;
}

.velara-scent-option:hover .velara-scent-icon,
.velara-scent-option.is-active .velara-scent-icon{
  transform:translateY(-3px) scale(1.04);
  border-color:rgba(255,255,255,.62);
  box-shadow:0 20px 38px rgba(42,15,95,.28), 0 0 22px color-mix(in srgb, var(--vsb-glow) 42%, transparent), inset 0 1px 0 rgba(255,255,255,.35);
  background:color-mix(in srgb, var(--vsb-liquid) 28%, rgba(74,43,142,.36));
}

.velara-scent-option:hover svg,
.velara-scent-option.is-active svg{
  color:#fff;
  filter:drop-shadow(0 0 8px var(--vsb-glow));
  transform:scale(1.05);
}

.velara-scent-option:hover .velara-scent-label,
.velara-scent-option.is-active .velara-scent-label{
  opacity:1;
  transform:translateY(1px);
}

@keyframes velaraParticle{
  0%{transform:translateY(0) scale(.6);opacity:0}
  14%{opacity:.75}
  100%{transform:translateY(-120px) scale(1);opacity:0}
}

@keyframes velaraLiquidBreath{
  0%,100%{transform:translateY(0);opacity:.68}
  50%{transform:translateY(-3px);opacity:.95}
}

@keyframes velaraShine{
  0%,100%{transform:translateX(0);opacity:.28}
  50%{transform:translateX(26px);opacity:.58}
}

@media (max-width:767px){
  .velara-scent-controls{gap:10px;margin-top:14px}
  .velara-scent-icon{width:50px;height:50px}
  .velara-scent-icon svg{width:24px;height:24px}
  .velara-scent-label{font-size:11px}
}