/* Compa marketing — motion design
 *
 * Restrained per the brief. No bounce, no spin, no entrance fireworks.
 * Just gentle, continuous motion and soft entry rises.
 */

/* ─── Continuous ambient motion ─────────────────────────────────────────── */

/* Gentle vertical float — used on floating phone stacks and cards. */
@keyframes cp-float {
  0%   { transform: translateY(0) rotate(var(--cp-rot, 0deg)); }
  50%  { transform: translateY(-10px) rotate(var(--cp-rot, 0deg)); }
  100% { transform: translateY(0) rotate(var(--cp-rot, 0deg)); }
}

/* Even gentler float for secondary props. */
@keyframes cp-float-sm {
  0%   { transform: translateY(0) rotate(var(--cp-rot, 0deg)); }
  50%  { transform: translateY(-6px) rotate(var(--cp-rot, 0deg)); }
  100% { transform: translateY(0) rotate(var(--cp-rot, 0deg)); }
}

/* Soft blob breathing — the signature radial gradient slowly shifts scale. */
@keyframes cp-breathe {
  0%   { transform: scale(1) translate(0, 0); opacity: var(--cp-blob-op, 0.85); }
  50%  { transform: scale(1.08) translate(-8px, -4px); opacity: calc(var(--cp-blob-op, 0.85) * 1.08); }
  100% { transform: scale(1) translate(0, 0); opacity: var(--cp-blob-op, 0.85); }
}

/* Pulse ring around the NEXT UP indicator dot. */
@keyframes cp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,47,232,0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(124,47,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,47,232,0); }
}

/* Countdown tick — for the "in 12 min" number. Subtle. */
@keyframes cp-tick {
  0%, 94%, 100% { opacity: 1; }
  95%, 99%      { opacity: 0.6; }
}

/* ─── Entry animations ──────────────────────────────────────────────────── */

@keyframes cp-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cp-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Utility classes ────────────────────────────────────────────────────── */

.cp-float     { animation: cp-float 6.5s ease-in-out infinite; will-change: transform; }
.cp-float-sm  { animation: cp-float-sm 7.5s ease-in-out infinite; will-change: transform; }
.cp-breathe   { animation: cp-breathe 9s ease-in-out infinite; will-change: transform, opacity; }
.cp-pulse     { animation: cp-pulse 2.4s ease-out infinite; }
.cp-tick      { animation: cp-tick 3.2s ease-in-out infinite; }

.cp-rise      { animation: cp-rise 0.9s cubic-bezier(.2,.7,.2,1) both; }
.cp-fade      { animation: cp-fade 1.2s ease both; }

/* Staggered entry — apply on a grid/flex parent, children auto-stagger. */
.cp-stagger > * { opacity: 0; animation: cp-rise 0.9s cubic-bezier(.2,.7,.2,1) both; }
.cp-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.cp-stagger > *:nth-child(2) { animation-delay: 0.18s; }
.cp-stagger > *:nth-child(3) { animation-delay: 0.30s; }
.cp-stagger > *:nth-child(4) { animation-delay: 0.42s; }
.cp-stagger > *:nth-child(5) { animation-delay: 0.54s; }
.cp-stagger > *:nth-child(6) { animation-delay: 0.66s; }