/* The passive and active material from Figma 375:57, shared with the studies. */
.voice-card {
  --orb-size: 167px;
  border-radius: 54px;
  background: rgba(245,245,244,.04);
}
.voice-card .voice-glow { display: none; }
.voice-backplate {
  position: absolute; z-index: -1; pointer-events: none;
  width: 67%; height: 75%; left: 16.5%; top: 13.5%;
  border-radius: 92px; overflow: hidden; filter: blur(37px);
  opacity: 0; transform: scale(.94);
  transition: opacity .8s ease, transform 1.2s cubic-bezier(.22,1,.36,1);
}
.voice-backplate img { width: 100%; height: 100%; object-fit: cover; }
.voice-card.is-playing .voice-backplate { opacity: .4; transform: scale(1); }
.orb-shell { position: relative; flex: 0 0 auto; width: var(--orb-size); height: var(--orb-size); margin-bottom: 44px; }
.voice-card .voice-orb,
.voice-card.featured .voice-orb,
.voice-card:nth-child(n) .voice-orb,
.voice-card:hover .voice-orb {
  width: 100%; height: 100%; margin: 0; filter: none; opacity: .6;
  transform: none; animation: none; overflow: hidden; isolation: isolate;
  transition: opacity .6s ease;
}
.voice-orb > img { filter: blur(5px); transform: scale(1.03); }
.voice-orb > .orb-detail {
  filter: blur(.6px); opacity: 0;
  mask-image: linear-gradient(#000 15%, #000b 42%, transparent 88%);
  transition: opacity .75s ease;
}
/* Feather the silhouette and keep image detail soft around the entire rim. */
.voice-card .voice-orb {
  mask-image:radial-gradient(circle closest-side,#000 76%,#000f 81%,#000a 90%,#0003 97%,transparent 100%);
}
.voice-orb .orb-edge {
  position:absolute; inset:0; z-index:5; pointer-events:none;
  mask-image:radial-gradient(circle closest-side,transparent 48%,#0006 63%,#000c 76%,#000 86%);
}
.voice-orb .orb-edge img { filter:blur(6px); transform:scale(1.03); }
.voice-orb .orb-edge-diffuse {
  z-index:6; opacity:.7;
  mask-image:radial-gradient(circle closest-side,transparent 58%,#0009 78%,#000 92%),linear-gradient(135deg,transparent 20%,#0005 50%,#000 85%);
  mask-composite:intersect;
}
.voice-orb .orb-edge-diffuse img { filter:blur(9px); }
/* Playing adds a drifting, uneven blur over the permanently soft rim. */
.voice-card.is-playing .orb-edge-diffuse {
  mask-image:radial-gradient(circle closest-side,transparent 58%,#0009 78%,#000 92%),url('/ben-flow/tone-research/assets/edge-focus-noise.svg');
  mask-mode:alpha,alpha;
  mask-size:100% 100%,145% 145%;
  mask-repeat:no-repeat;
  animation:edge-focus-drift 4.8s ease-in-out infinite;
}
.voice-card.is-playing .orb-edge-diffuse img { filter:blur(14px); }
@keyframes edge-focus-drift {
  0%,100% { mask-position:50% 50%,18% 40%; opacity:.78; }
  32% { mask-position:50% 50%,72% 22%; opacity:1; }
  68% { mask-position:50% 50%,46% 82%; opacity:.9; }
}
/* The mask is inside the blur so the image can flare past the silhouette. */
.voice-card .voice-orb { z-index:1; }
.orb-flare {
  position:absolute; inset:-7px; z-index:0; pointer-events:none;
  filter:blur(7px) saturate(1.15) brightness(1.25);
  opacity:0; transition:opacity .55s ease;
}
.orb-flare-carrier, .orb-flare-photo { position:absolute; inset:0; transform-origin:50% 50%; }
.orb-flare-carrier {
  mask-image:radial-gradient(circle closest-side,transparent 56%,#000b 74%,#000 88%,transparent 100%),conic-gradient(transparent 0deg,#000 24deg,transparent 78deg,transparent 120deg,#000c 164deg,transparent 222deg,transparent 266deg,#000a 303deg,transparent 348deg);
  mask-composite:intersect;
  animation:flare-orbit 10.4s linear infinite paused;
}
.orb-flare-photo { animation:flare-counter-orbit 10.4s linear infinite paused; }
.orb-flare-photo img { position:absolute; width:168%; max-width:none; height:168%; left:-30.6%; top:-3%; transform:scale(1.03); }
.voice-card.is-playing .orb-flare { opacity:.95; }
.voice-card.is-playing .orb-flare-carrier, .voice-card.is-playing .orb-flare-photo { animation-play-state:running; }
@keyframes flare-orbit { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes flare-counter-orbit { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } }
.voice-card.is-playing .voice-orb { opacity: 1; }
.voice-card.is-playing .orb-detail { opacity: 1; }
.voice-card.is-playing .orb-shell { animation: soft-breath 4.717s ease-in-out infinite; }
.voice-card.is-playing .sample-button { background: #fefefcf0; color: #0c0a09; }
.voice-card.is-playing .sample-button .waveform { display: none; }
.card-playing-mark { position:absolute; top:34px; right:34px; display:block; width:28px; height:28px; pointer-events:none; opacity:0; transition:opacity .4s; }
.voice-card.is-playing .card-playing-mark { opacity: .95; }
.orb-echoes { position:absolute; inset:0; pointer-events:none; opacity:0; }
.orb-echoes i { position:absolute; inset:-10px; border-radius:50%; border:1px solid #e9d5c966; }
@keyframes soft-breath { 0%,100% { transform:scale(1); } 50% { transform:scale(1.0378); } }

/* A light-catching pane over a deeper image plate. */
.voice-card[data-treatment="glass"]::after {
  content:""; position:absolute; inset:1px; border-radius:inherit; pointer-events:none;
  border:1px solid transparent; opacity:0; transition:opacity .7s;
  background:linear-gradient(115deg,#fff2,transparent 30%,transparent 70%,#ffffff08);
}
.voice-card[data-treatment="glass"].is-playing::after { opacity:1; border-color:#fff2; }
.voice-card[data-treatment="glass"] .voice-backplate { width:100%; height:100%; inset:0; filter:blur(24px); }
.voice-card[data-treatment="glass"].is-playing .voice-backplate { opacity:.3; }
.voice-card[data-treatment="glass"].is-playing .orb-shell { animation:glass-drift 7s ease-in-out infinite; }
.voice-card[data-treatment="glass"] .orb-detail { mask-image:linear-gradient(#000 45%,transparent 100%); }
.voice-card[data-treatment="glass"].is-playing .voice-orb { box-shadow:0 0 0 1px #fff2,0 10px 36px #0003; }
@keyframes glass-drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }

/* Expanding rings carry the motion while the portrait stays steady. */
.voice-card[data-treatment="echo"].is-playing .orb-shell { animation:none; }
.voice-card[data-treatment="echo"].is-playing .orb-echoes { opacity:1; }
.voice-card[data-treatment="echo"].is-playing .orb-echoes i { animation:voice-echo 3.6s ease-out infinite; }
.voice-card[data-treatment="echo"] .orb-echoes i:nth-child(2) { animation-delay:-1.2s; }
.voice-card[data-treatment="echo"] .orb-echoes i:nth-child(3) { animation-delay:-2.4s; }
.voice-card[data-treatment="echo"].is-playing .voice-backplate { opacity:.24; }
.voice-card[data-treatment="echo"] .orb-detail { mask-image:linear-gradient(#000 40%,transparent 100%); }
@keyframes voice-echo { 0% { transform:scale(.9); opacity:0; } 15% { opacity:.6; } 100% { transform:scale(1.48); opacity:0; } }

/* Layered image drift suggests refraction, without a full-canvas renderer. */
.voice-card[data-treatment="lens"].is-playing .orb-shell { animation:none; }
.voice-card[data-treatment="lens"] .orb-detail { mask-image:radial-gradient(ellipse at 36% 32%,#000 22%,#000c 45%,transparent 70%); }
.voice-card[data-treatment="lens"].is-playing .voice-orb { animation:lens-shape 8s ease-in-out infinite; box-shadow:inset 0 1px 4px #fff3; }
.voice-card[data-treatment="lens"].is-playing .voice-orb > img { animation:lens-drift 8s ease-in-out infinite; }
.voice-card[data-treatment="lens"].is-playing .voice-orb > .orb-detail { animation:lens-detail 8s ease-in-out infinite; }
.voice-card[data-treatment="lens"].is-playing .voice-backplate { opacity:.46; animation:plate-drift 9s ease-in-out infinite; }
@keyframes lens-shape { 0%,100% { border-radius:50%; transform:rotate(-3deg); } 40% { border-radius:46% 54% 49% 51%; transform:rotate(2deg); } 70% { border-radius:54% 46% 52% 48%; transform:rotate(-1deg); } }
@keyframes lens-drift { 0%,100% { transform:scale(1.06) translate(-2px,0); } 50% { transform:scale(1.14) translate(4px,3px); } }
@keyframes lens-detail { 0%,100% { transform:scale(1.04) translate(0,0); } 50% { transform:scale(1.1) translate(-3px,-2px); } }
@keyframes plate-drift { 0%,100% { transform:translate(-4px,0) scale(1); } 50% { transform:translate(7px,5px) scale(1.08); } }
.voice-card.motion-paused *, .card-motion-paused .voice-card * { animation-play-state:paused!important; }
@media(max-width:1100px) { .voice-card { --orb-size:144px; border-radius:44px; } }
@media(min-width:768px) and (max-width:1024px) {
  .voice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-inline:0; }
  .voice-card { --orb-size:167px; }
}
@media(max-width:767px) {
  .orb-flare { inset:-4px; filter:blur(4px) saturate(1.15) brightness(1.25); }
  .voice-card { --orb-size:122px; border-radius:32px; }
  .orb-shell { margin-bottom:28px; }
  .card-playing-mark { top:18px; right:18px; }
  .voice-backplate { filter:blur(25px); }
}
@media(max-width:390px) { .voice-card { --orb-size:110px; } }
@media(prefers-reduced-motion:reduce) {
  .voice-card *, .voice-card::after { animation:none!important; transition:none!important; }
  .voice-card.is-playing .orb-echoes i { opacity:.3; transform:scale(1.12); }
  .voice-card.is-playing .orb-echoes i:nth-child(2) { transform:scale(1.28); opacity:.18; }
  .voice-card.is-playing .orb-echoes i:nth-child(3) { transform:scale(1.44); opacity:.08; }
}

/* Coalesce by Dania Syrofi: https://loading.daniasyrofi.com/ */
.card-playing-mark svg { display:block; width:28px; height:28px; }
.coalesce-orbit { transform-box:view-box; transform-origin:21px 13px; animation:coalesce-orbit 3.6s linear infinite paused; }
.coalesce-body { transform-box:fill-box; transform-origin:center; animation:coalesce-breathe 1.8s cubic-bezier(.45,0,.55,1) infinite paused; }
.voice-card.is-playing .coalesce-orbit,.voice-card.is-playing .coalesce-body { animation-play-state:running; }
@keyframes coalesce-orbit { to { rotate:360deg; } }
@keyframes coalesce-breathe { 0%,100% { translate:0 0; scale:1.22; } 50% { translate:9.2px 0; scale:.76; } }