/* ══════════════════════════════════════════════════════════════
   PULSE SHAPE — Organic health-score-driven visual component

   An ambient, blob-like shape that communicates overall life health
   at a glance through three visual dimensions:
   - Size (large when thriving, contracted when struggling)
   - Color temperature (warm amber/coral → cool blue/gray)
   - Animation intensity (gentle breathing pulse → still and dim)
   ══════════════════════════════════════════════════════════════ */

.pulse-shape {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.pulse-shape__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  /* GPU compositing for smooth animations */
  will-change: transform, opacity;
  transform-origin: center center;
}

/* ── Blob Layers ─────────────────────────────────────────────── */
/* Multiple layers create depth and organic glow */

.pulse-shape__blob {
  transform-origin: center center;
  transition:
    fill var(--duration-slow) var(--ease-default),
    opacity var(--duration-slow) var(--ease-default);
}

.pulse-shape__blob--core {
  /* Primary blob — color set via JS custom properties */
  fill: var(--pulse-color, oklch(0.72 0.12 55));
  opacity: var(--pulse-opacity, 0.9);
}

.pulse-shape__blob--glow {
  /* Outer glow layer — softer, larger, more transparent */
  fill: var(--pulse-color-glow, oklch(0.78 0.08 55));
  opacity: var(--pulse-glow-opacity, 0.25);
  filter: blur(8px);
}

.pulse-shape__blob--inner {
  /* Inner highlight for depth */
  fill: var(--pulse-color-inner, oklch(0.82 0.06 55));
  opacity: var(--pulse-inner-opacity, 0.4);
}

/* ── Breathing Animation ─────────────────────────────────────── */
/* CSS keyframes for battery-friendly GPU-composited pulse */

.pulse-shape__svg {
  animation: pulseShapeBreathe var(--pulse-duration, 4s) ease-in-out infinite;
  animation-play-state: var(--pulse-play-state, running);
}

@keyframes pulseShapeBreathe {
  0%, 100% {
    transform: scale(var(--pulse-scale-min, 0.97));
  }
  50% {
    transform: scale(var(--pulse-scale-max, 1.03));
  }
}

/* Glow layer breathes with slight offset for organic feel */
.pulse-shape__blob--glow {
  animation: pulseShapeGlow var(--pulse-duration, 4s) ease-in-out infinite;
  animation-delay: calc(var(--pulse-duration, 4s) * -0.25);
  animation-play-state: var(--pulse-play-state, running);
}

@keyframes pulseShapeGlow {
  0%, 100% {
    transform: scale(0.95);
    opacity: var(--pulse-glow-opacity, 0.25);
  }
  50% {
    transform: scale(1.08);
    opacity: calc(var(--pulse-glow-opacity, 0.25) * 1.4);
  }
}

/* Inner highlight subtly shifts */
.pulse-shape__blob--inner {
  animation: pulseShapeInner var(--pulse-duration, 4s) ease-in-out infinite;
  animation-delay: calc(var(--pulse-duration, 4s) * -0.5);
  animation-play-state: var(--pulse-play-state, running);
}

@keyframes pulseShapeInner {
  0%, 100% {
    transform: scale(1.02) translate(2%, -2%);
    opacity: var(--pulse-inner-opacity, 0.4);
  }
  50% {
    transform: scale(0.96) translate(-1%, 1%);
    opacity: calc(var(--pulse-inner-opacity, 0.4) * 0.7);
  }
}

/* ── Size Transition ─────────────────────────────────────────── */
/* Smooth scale based on health score — set via CSS custom prop */

.pulse-shape {
  transform: scale(var(--pulse-size, 1));
  transition: transform 0.8s var(--ease-default);
}

/* ── Reduced Motion ──────────────────────────────────────────── */
/* Respect user preference — disable all animations */

@media (prefers-reduced-motion: reduce) {
  .pulse-shape__svg,
  .pulse-shape__blob--glow,
  .pulse-shape__blob--inner {
    animation: none !important;
  }

  .pulse-shape {
    transition: transform 0.3s var(--ease-default);
  }
}

/* ── Mobile Optimization ─────────────────────────────────────── */

@media (max-width: 430px) {
  .pulse-shape {
    max-width: 220px;
  }
}

@media (max-width: 320px) {
  .pulse-shape {
    max-width: 180px;
  }
}

/* ══════════════════════════════════════════════════════════════
   PULSE CLUSTER — Organic per-role shape arrangement

   Six pulse shapes positioned with intentional irregularity
   so the cluster reads as a living organism rather than a
   dashboard widget. Positions are predefined (percentage-based)
   for deterministic, testable layouts across screen sizes.
   ══════════════════════════════════════════════════════════════ */

.pulse-cluster {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1.05;
  margin: 0 auto;
}

.pulse-cluster__item {
  position: absolute;
  width: 28%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Keyboard-navigable */
  outline: none;
}

.pulse-cluster__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

/* ── Organic Position Offsets ──────────────────────────────────
   Staggered positions create an irregular, organic cluster.
   Not aligned to any grid — intentional visual irregularity. */

.pulse-cluster__item:nth-child(1) { left: 15%; top: 2%; }
.pulse-cluster__item:nth-child(2) { left: 56%; top: 0%; }
.pulse-cluster__item:nth-child(3) { left: 1%;  top: 36%; }
.pulse-cluster__item:nth-child(4) { left: 63%; top: 33%; }
.pulse-cluster__item:nth-child(5) { left: 19%; top: 65%; }
.pulse-cluster__item:nth-child(6) { left: 51%; top: 67%; }

/* ── Shape Container (inside cluster items) ────────────────── */

.pulse-cluster__shape {
  width: 100%;
  aspect-ratio: 1;
}

/* Override default pulse-shape sizing when inside a cluster */
.pulse-cluster .pulse-shape {
  max-width: none;
  width: 100%;
  margin: 0;
}

/* ── Role Label ────────────────────────────────────────────── */

.pulse-cluster__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: var(--space-1);
  line-height: var(--leading-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120%;
}

/* Role-specific label colors for identity */
.pulse-cluster__label--faith    { color: var(--color-role-faith); }
.pulse-cluster__label--husband  { color: var(--color-role-husband); }
.pulse-cluster__label--father   { color: var(--color-role-father); }
.pulse-cluster__label--athlete  { color: var(--color-role-athlete); }
.pulse-cluster__label--builder  { color: var(--color-role-builder); }
.pulse-cluster__label--provider { color: var(--color-role-provider); }

/* ── Staggered Breathing ──────────────────────────────────────
   Offset animation phases so shapes don't breathe in sync,
   enhancing the organic, living quality. */

.pulse-cluster__item:nth-child(2) .pulse-shape__svg { animation-delay: -0.7s; }
.pulse-cluster__item:nth-child(3) .pulse-shape__svg { animation-delay: -1.5s; }
.pulse-cluster__item:nth-child(4) .pulse-shape__svg { animation-delay: -2.3s; }
.pulse-cluster__item:nth-child(5) .pulse-shape__svg { animation-delay: -0.4s; }
.pulse-cluster__item:nth-child(6) .pulse-shape__svg { animation-delay: -1.9s; }

/* Glow layers also stagger for more organic feel */
.pulse-cluster__item:nth-child(2) .pulse-shape__blob--glow { animation-delay: -1.1s; }
.pulse-cluster__item:nth-child(3) .pulse-shape__blob--glow { animation-delay: -2.0s; }
.pulse-cluster__item:nth-child(4) .pulse-shape__blob--glow { animation-delay: -0.3s; }
.pulse-cluster__item:nth-child(5) .pulse-shape__blob--glow { animation-delay: -1.7s; }
.pulse-cluster__item:nth-child(6) .pulse-shape__blob--glow { animation-delay: -2.5s; }

/* ── Cluster — Mobile ─────────────────────────────────────── */

@media (max-width: 430px) {
  .pulse-cluster {
    max-width: 300px;
  }

  .pulse-cluster__label {
    font-size: 0.6875rem; /* 11px — legible but compact */
  }
}

@media (max-width: 320px) {
  .pulse-cluster {
    max-width: 260px;
  }

  .pulse-cluster__item {
    width: 30%; /* Slightly larger ratio to maintain touch targets */
  }

  .pulse-cluster__label {
    font-size: 0.625rem; /* 10px */
  }
}

/* ── Cluster — Reduced Motion ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pulse-cluster__item .pulse-shape__svg,
  .pulse-cluster__item .pulse-shape__blob--glow,
  .pulse-cluster__item .pulse-shape__blob--inner {
    animation: none !important;
  }
}