/* Shared circle focus treatments; the studies preserve all five options. */
.voice-card .focus-layer { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .8s ease; }
.voice-card .focus-layer img {
  position:absolute; width:168%; max-width:none; height:168%; left:-30.6%; top:-3%;
  transform:scale(1.03); filter:blur(.6px);
}
.voice-card .focus-soft img { filter:blur(11px); }
.voice-card .focus-mid img { filter:blur(4px); }
.voice-card .focus-mid {
  mask-image:linear-gradient(135deg,#000 10%,#000d 36%,transparent 90%);
}
.voice-card .focus-clear {
  mask-image:linear-gradient(135deg,#000 8%,#000e 25%,#0005 44%,transparent 70%);
}
.voice-card[data-focus-variant]:not([data-focus-variant="original"]).is-playing .orb-detail { opacity:0; }
.voice-card[data-focus-variant]:not([data-focus-variant="original"]).is-playing .focus-layer { opacity:1; }
.voice-card[data-focus-variant="clouded"] .focus-soft img,
.voice-card[data-focus-variant="drift"] .focus-soft img { filter:blur(9px); }
.voice-card[data-focus-variant="clouded"] .focus-mid,
.voice-card[data-focus-variant="drift"] .focus-mid {
  mask-image:linear-gradient(135deg,#000b,transparent 80%);
}
.voice-card[data-focus-variant="clouded"] .focus-clear,
.voice-card[data-focus-variant="drift"] .focus-clear {
  mask-image:url('/ben-flow/tone-research/card-studies/focus-noise.svg'); mask-mode:alpha;
  mask-size:145% 145%; mask-position:46% 46%; mask-repeat:no-repeat;
}
.voice-card[data-focus-variant="drift"].is-playing .focus-clear {
  animation:cloud-focus-drift 12s ease-in-out infinite;
}
.voice-card[data-focus-variant="slow"] .focus-soft img { filter:blur(9px); }
.voice-card[data-focus-variant="slow"].is-playing .focus-mid {
  animation:mid-focus-breathe 12s ease-in-out infinite;
}
.voice-card[data-focus-variant="slow"].is-playing .focus-clear {
  animation:clear-focus-breathe 12s ease-in-out infinite;
}
@keyframes cloud-focus-drift {
  0%,100% { mask-position:38% 42%; opacity:.95; }
  50% { mask-position:54% 57%; opacity:.7; }
}
@keyframes mid-focus-breathe { 0%,100% { opacity:.9; } 50% { opacity:.5; } }
@keyframes clear-focus-breathe { 0%,100% { opacity:1; } 50% { opacity:.28; } }

@media(prefers-reduced-motion:reduce) { .voice-card.is-playing .focus-layer { animation:none!important; } }

/* Ours, over Adam's studies. His "slow" variant drifts the sharp layer
   down to .28 and masks it to a narrow diagonal, so a speaking face
   never really arrives. We keep the drift and the diagonal, but let
   the clear layer stay dominant and reach across the face. */
.voice-card[data-focus-variant="slow"] .focus-clear {
  mask-image:linear-gradient(135deg,#000 22%,#000e 46%,#0009 66%,transparent 90%);
}
.voice-card[data-focus-variant="slow"] .focus-clear img { filter:blur(0); }
.voice-card[data-focus-variant="slow"] .focus-mid img { filter:blur(3px); }
@keyframes mid-focus-breathe { 0%,100% { opacity:.7; } 50% { opacity:.42; } }
@keyframes clear-focus-breathe { 0%,100% { opacity:1; } 50% { opacity:.8; } }

/* Ours, again: the voice grid bleeds past the shell's gutter at
   anything under 1441px, so the first and last card sat flush against
   the window. It keeps the page's own gutter now, the way the nav and
   the hero above it do, and gains a little air under the row. */
.voice-grid { margin-inline:0; }
.hero { padding-bottom:104px; }