/* =====================================================================
   Receptia shared motion kit — motion.css
   Extracted from index.html's conventions (HARVEST kit) so the team/
   pages move with exactly the same rhythm as the front page.
   Rules of the house: transform/opacity only, spring-feel easing,
   everything settles instantly under reduced motion.
   ===================================================================== */

:root {
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);   /* soft spring-feel out */
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Reveal system (IO) — same classes as index.html ---------- */
html.js .reveal { opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js .reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Persona idle motion — the "alive" layer ----------
   Scoped to avatars ONLY (never CTAs, never text). Slow cycles so it
   reads as presence, not attention-seeking. Cards desync via --i
   (negative delay = already mid-breath on load). */
.persona-fig { position: relative; }
.persona-fig .halo {
  position: absolute; inset: -12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,229,160,0.16), rgba(0,229,160,0) 72%);
  opacity: .55;
  animation: personaHalo 8.5s var(--ease-io) calc(var(--i, 0) * -2.1s) infinite alternate;
}
.persona-fig img, .persona-fig .avatar {
  animation: personaBreathe 7s var(--ease-io) calc(var(--i, 0) * -1.7s) infinite alternate;
  will-change: transform;
}
/* presence dot — blinks like a slow heartbeat; padded keyframes keep the
   blink to a sliver of the cycle so it never strobes */
.persona-fig .pip {
  position: absolute; right: 7%; bottom: 9%; width: 12px; height: 12px;
  border-radius: 50%; background: #00e5a0;
  box-shadow: 0 0 0 3px rgba(10,13,18,0.9), 0 0 10px rgba(0,229,160,0.45);
  animation: personaPip 6s linear calc(var(--i, 0) * -1.3s) infinite;
}
@keyframes personaBreathe { from { transform: translateY(0) scale(1); } to { transform: translateY(-4px) scale(1.012); } }
@keyframes personaHalo    { from { opacity: .38; transform: scale(0.98); } to { opacity: .62; transform: scale(1.03); } }
@keyframes personaPip     { 0%, 91%, 100% { opacity: 1; } 94%, 97% { opacity: .25; } }

/* ---------- Interactive states — every clickable persona card ---------- */
.persona-card {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* re-synced 2026-07-26 to index.html's recipe (shadow lift + accent border + rotate) */
.persona-card:hover  { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--acc-line); }
.persona-card:active { transform: translateY(-1px) scale(0.985); }
.persona-card:focus-visible { outline: 2px solid #00e5a0; outline-offset: 3px; }
.persona-card:hover .persona-fig img,
.persona-card:hover .persona-fig .avatar { animation-play-state: paused; transform: translateY(-7px) rotate(-1.6deg) scale(1.03); transition: transform .4s var(--ease); }

/* ---------- Reduced motion — presence goes still, nothing breaks ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html.js .reveal { opacity: 1; transform: none; filter: none; }
  .persona-fig img, .persona-fig .avatar, .persona-fig .halo, .persona-fig .pip { animation: none; }
  .persona-fig .halo { opacity: .5; }
}