/* CherryFX: проявка реплик, кадра и плеер озвучки */
.cfx-w { display: inline-block; }
.cfx-p { opacity: 0; }
.cfx-in { animation: cfx-in .42s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes cfx-in {
  from { opacity: 0; transform: translateY(4px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* полароид, пока кадр проявляется */
.cfx-pol {
  position: relative; width: min(232px, 100%); padding: 9px 9px 0;
  background: #efe7dc; border-radius: 3px; transform: rotate(-1.2deg);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(232, 69, 95, .12);
  transition: opacity .4s ease, transform .4s ease;
}
.cfx-pol.cfx-gone { opacity: 0; transform: rotate(-1.2deg) translateY(8px) scale(.95); }
.cfx-film { position: relative; aspect-ratio: 3 / 4; background: #140d12; overflow: hidden; }
.cfx-film::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(10, 7, 12, .6));
}
.cfx-film i {
  position: absolute; width: 80%; height: 62%; border-radius: 50%; opacity: 0;
  animation: cfx-emerge 12s ease-out forwards, cfx-float 9s ease-in-out infinite alternate;
}
.cfx-b1 { left: -14%; top: 6%; background: radial-gradient(closest-side, rgba(232, 69, 95, .95), transparent); }
.cfx-film .cfx-b2 { right: -22%; top: 34%; background: radial-gradient(closest-side, rgba(240, 207, 154, .8), transparent);
  animation-duration: 15s, 11s; animation-delay: .6s, -4s; }
.cfx-film .cfx-b3 { left: 6%; bottom: -16%; background: radial-gradient(closest-side, rgba(255, 154, 176, .75), transparent);
  animation-duration: 14s, 13s; animation-delay: 1.4s, -7s; }
@keyframes cfx-emerge { 0% { opacity: .1; } 100% { opacity: 1; } }
@keyframes cfx-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(14%, -9%) scale(1.3); } }
.cfx-grain {
  position: absolute; inset: -50%; z-index: 1; opacity: .26; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .88 0 0 0 1.1 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: cfx-grain .8s steps(4) infinite;
}
@keyframes cfx-grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-7%, 5%); }
  50% { transform: translate(6%, -4%); } 75% { transform: translate(-3%, -7%); } 100% { transform: translate(4%, 6%); }
}
.cfx-cap { height: 48px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 2px; }
.cfx-ph { font: italic 600 15px/1.1 var(--fict, 'CherryFict', Georgia, serif); color: #3b2730; white-space: nowrap; }
.cfx-ph.is-swap { animation: cfx-swap .45s ease-out; }
@keyframes cfx-swap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cfx-bar { display: block; height: 2px; background: rgba(59, 39, 48, .14); overflow: hidden; }
.cfx-bar span {
  display: block; height: 100%; background: #e8455f; transform: scaleX(0); transform-origin: left;
  transition: transform .5s linear;
}
.cfx-full span { transition-duration: .3s; }

/* кадр проявляется: засвет и серость уходят в резкость */
.cfx-reveal { animation: cfx-dev 1.4s cubic-bezier(.3, .55, .2, 1) both; clip-path: inset(0 round 20px); }
@keyframes cfx-dev {
  from { filter: blur(18px) saturate(0) brightness(1.6); }
  55% { filter: blur(5px) saturate(.55) brightness(1.18); }
  to { filter: blur(0) saturate(1) brightness(1); }
}

/* мини-плеер озвучки */
.v3-msg.cfx-voicing .v3-msg-tools { display: flex; }
.v3-msg .v3-msg-tool.cfx-vp {
  display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 11px 0 9px;
  border: 1px solid rgba(232, 69, 95, .5); border-radius: 999px; background: rgba(232, 69, 95, .1);
  color: #f0cf9a; letter-spacing: 0; -webkit-tap-highlight-color: transparent;
}
.cfx-ic { position: relative; width: 8px; height: 9px; flex: none; }
.cfx-ic::before, .cfx-ic::after { content: ''; position: absolute; top: 0; width: 2.5px; height: 9px; background: #ff9ab0; border-radius: 1px; }
.cfx-ic::before { left: 0; } .cfx-ic::after { right: 0; }
.is-paused .cfx-ic::before { width: 0; height: 0; background: none; border-radius: 0;
  border-left: 8px solid #ff9ab0; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.is-paused .cfx-ic::after { display: none; }
.cfx-wave { display: flex; align-items: center; gap: 2px; height: 16px; }
.cfx-wave span {
  width: 2px; height: 16px; border-radius: 1px; background: rgba(255, 255, 255, .26);
  transform: scaleY(.2); transform-origin: center; will-change: transform;
}
.cfx-wave span.on { background: #e8455f; }
.cfx-t { min-width: 26px; font: 600 10px/1 var(--ui, 'Onest', system-ui, sans-serif); font-variant-numeric: tabular-nums; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .cfx-in, .cfx-reveal, .cfx-grain, .cfx-ph.is-swap { animation: none !important; }
  .cfx-film i { animation: none !important; opacity: .55; }
  .cfx-pol, .cfx-bar span { transition: none; }
}