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

/* ---------- mock: fitness ---------- */
.mock-fit { background: radial-gradient(80% 70% at 60% 25%, #0d1013, #060708 75%); }
.fit-phone {
  position: absolute;
  top: 12%; left: 22%;
  width: 38%; height: 92%;
  background: #17181c;
  border-radius: 22px;
  padding: 4.5%;
  box-shadow: 0 30px 60px rgb(var(--shadow-rgb) / calc(0.7 * var(--shadow-a))), inset 0 0 0 1px rgb(var(--ink-rgb) / 0.09);
  transform: rotate(-5deg);
}
.fit-phone--back {
  left: 48%; top: 6%;
  transform: rotate(6deg) scale(0.94);
  opacity: 0.75;
}
.fit-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 14px;
  background: linear-gradient(190deg, #101216, #0a0b0d);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16% 10% 10%;
  gap: 10%;
}
.fit-notch {
  position: absolute; top: 5%; left: 32%;
  width: 36%; height: 7px;
  border-radius: 4px;
  background: rgb(var(--ink-rgb) / 0.1);
}
/* the ring + chart SVGs draw with currentColor so they follow the accent */
.fit-ring { width: 62%; color: var(--gold); }
.fit-ring-val { filter: drop-shadow(0 0 6px rgb(var(--accent-rgb) / 0.6)); }
.fit-lines { width: 100%; }
.fit-lines i { display: block; height: 4px; border-radius: 2px; background: rgb(var(--ink-rgb) / 0.14); margin-bottom: 6px; }
.fit-lines i.short { width: 55%; background: rgb(var(--ink-rgb) / 0.07); }
.fit-pill { width: 66%; height: 14px; border-radius: 8px; background: linear-gradient(135deg, rgb(var(--accent-rgb) / 0.8), rgba(169, 133, 78, 0.8)); }
.fit-stats { display: flex; gap: 8%; width: 100%; }
.fit-stats b { flex: 1; height: 22px; border-radius: 5px; background: rgb(var(--ink-rgb) / 0.07); }
.fit-bars { display: flex; align-items: flex-end; gap: 7%; width: 100%; flex: 1; }
.fit-bars i { flex: 1; height: var(--h); background: linear-gradient(180deg, rgb(var(--accent-rgb) / 0.7), rgb(var(--accent-rgb) / 0.1)); border-radius: 2px; }

/* animation: activity ring fills, chart bars breathe, CTA pulses */
.fit-ring-val { animation: ring-fill 4.5s ease-in-out infinite; }
@keyframes ring-fill {
  0% { stroke-dashoffset: 188.5; }
  45%, 72% { stroke-dashoffset: 52; }
  100% { stroke-dashoffset: 188.5; }
}
.fit-bars i {
  transform-origin: bottom;
  animation: bar-breathe 2.8s ease-in-out infinite;
}
.fit-bars i:nth-child(1) { animation-delay: 0s; }
.fit-bars i:nth-child(2) { animation-delay: .14s; }
.fit-bars i:nth-child(3) { animation-delay: .28s; }
.fit-bars i:nth-child(4) { animation-delay: .42s; }
.fit-bars i:nth-child(5) { animation-delay: .56s; }
@keyframes bar-breathe {
  0%, 100% { transform: scaleY(0.72); }
  50% { transform: scaleY(1); }
}
.fit-pill { animation: pill-pulse 3.4s ease-in-out infinite; }
@keyframes pill-pulse {
  0%, 100% { box-shadow: 0 0 0 rgb(var(--accent-rgb) / 0); }
  50% { box-shadow: 0 0 16px rgb(var(--accent-rgb) / 0.45); }
}

/* ---------- mock: corporate website ---------- */