/* ============================================================
   HELIOCASTLE — MOCKUP — ecom
   Used by a card with class "mock mock-ecom".
   ============================================================ */

/* ---------- mock: ecommerce ---------- */
.mock-ecom { background: radial-gradient(70% 60% at 50% 30%, #14110c, #070605 75%); }
.ecom-glow {
  position: absolute; top: 8%; left: 18%; width: 64%; height: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(var(--accent-rgb) / 0.12), transparent 70%);
}
.ecom-box {
  position: absolute;
  left: 16%; bottom: 20%;
  width: 42%; height: 56%;
  background: linear-gradient(160deg, #191512 0%, #0c0a08 70%);
  border: 1px solid rgb(var(--accent-rgb) / 0.18);
  box-shadow: 0 30px 50px rgb(var(--shadow-rgb) / calc(0.7 * var(--shadow-a)));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ecom-seal {
  width: 26px; height: 26px;
  border: 1px solid rgb(var(--accent-rgb) / 0.55);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgb(var(--accent-rgb) / 0.4), rgb(var(--accent-rgb) / 0.08));
}
.ecom-brand {
  font-family: var(--serif);
  font-size: clamp(14px, 1.4vw, 20px);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(230, 210, 175, 0.9);
  margin-left: 0.45em;
}
.ecom-line { width: 34%; height: 1px; background: rgb(var(--accent-rgb) / 0.4); }
.ecom-bottle {
  position: absolute;
  right: 18%; bottom: 20%;
  width: 15%; height: 44%;
  background: linear-gradient(90deg, #1c1815, #2a241e 45%, #15110d);
  border-radius: 6px 6px 3px 3px;
  box-shadow: 0 24px 40px rgb(var(--shadow-rgb) / calc(0.7 * var(--shadow-a)));
}
.ecom-bottle i {
  position: absolute;
  top: -14%; left: 32%;
  width: 36%; height: 16%;
  background: linear-gradient(90deg, #2e281f, #4a3d2b 50%, #241e15);
  border-radius: 2px;
}
.ecom-bottle::after {
  content: "";
  position: absolute; top: 30%; left: 20%; width: 60%; height: 34%;
  background: rgb(var(--accent-rgb) / 0.1);
  border: 1px solid rgb(var(--accent-rgb) / 0.25);
}
.ecom-floor {
  position: absolute; left: 0; right: 0; bottom: 12%;
  height: 8%;
  background: radial-gradient(60% 100% at 50% 0%, rgb(var(--accent-rgb) / 0.08), transparent 75%);
  filter: blur(3px);
}
/* animation: specular shine sweeps across the packaging, seal glints */
.ecom-box { overflow: hidden; }
.ecom-box::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 40%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 228, 0.16), transparent);
  transform: rotate(18deg);
  animation: ecom-shine 6s ease-in-out infinite;
}
@keyframes ecom-shine {
  0% { left: -70%; }
  38%, 100% { left: 130%; }
}
.ecom-seal { animation: seal-pulse 4s ease-in-out infinite; }
@keyframes seal-pulse {
  0%, 100% { box-shadow: 0 0 0 rgb(var(--accent-rgb) / 0); }
  50% { box-shadow: 0 0 14px rgb(var(--accent-rgb) / 0.5); }
}
.ecom-glow { animation: ecom-glow-breathe 5s ease-in-out infinite; }
@keyframes ecom-glow-breathe {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* ---------- mock: fitness ---------- */