/* Three four-second beats: turn in, communicate, hold, turn out. */
.hero-channel-flip {
  position: relative;
  width: 2.65em;
  flex-basis: 2.65em;
  height: 1.05em;
  perspective: 480px;
  text-shadow: none;
  isolation: isolate;
}
.hero-channel-flip::before,
.hero-channel-flip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgb(189 211 255 / .3);
  clip-path: polygon(0 0, 8% 0, 8% 1px, 1px 1px, 1px 14%, 0 14%, 0 0, 100% 0, 100% 14%, calc(100% - 1px) 14%, calc(100% - 1px) 1px, 92% 1px, 92% 0);
}
.hero-channel-flip::after { rotate: 180deg; }
.hero-channel-flip .hero-channel-face {
  --channel-phase: 0s;
  position: absolute;
  inset: 0;
  color: #edf3ff;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  opacity: 0;
  transform: rotateX(90deg);
  animation: channel-turn 12s var(--channel-phase) linear infinite;
}
.hero-channel-flip .hero-channel-face--sms { opacity: 1; transform: none; }
.hero-channel-flip .hero-channel-face--whatsapp { --channel-phase: -8s; }
.hero-channel-flip .hero-channel-face--voice { --channel-phase: -4s; }
.hero-channel-face svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-channel-face text { fill: #c3d4f7; font-family: var(--font-display); font-size: 10px; font-weight: 500; letter-spacing: 1.4px; }
.hero-channel-flip * { animation-play-state: var(--hero-message-play-state, paused) !important; }
.channel-bubble { stroke-width: 1.25; }
.scenario-card { fill: rgb(80 134 240 / .16); stroke: #acc9ff; stroke-width: 1.25; }
.hero-channel-face--whatsapp text { fill: #9de8c8; }
.hero-channel-face--voice text { fill: #f3d6a8; }
.hero-channel-face--voice .channel-wave { stroke: #f3d6a8; stroke-linecap: round; }
.hero-channel-face--voice .channel-voice-track { stroke: #f3d6a8; }
.scenario-success { fill: rgb(80 134 240 / .28); stroke: #acc9ff; stroke-width: 1.25; }
.scenario-code { fill: #edf3ff; }
.scenario-code circle { animation: scenario-digit 12s var(--channel-phase) ease infinite; }
.scenario-code circle:nth-child(2) { animation-delay: .12s; }
.scenario-code circle:nth-child(3) { animation-delay: .24s; }
.scenario-code circle:nth-child(4) { animation-delay: .36s; }
.scenario-code circle:nth-child(5) { animation-delay: .48s; }
.scenario-code circle:nth-child(6) { animation-delay: .6s; }
@keyframes scenario-digit { 0% { opacity: 0; } 6%,100% { opacity: 1; } }
.channel-bubble--blue { fill: #1644a2; stroke: #aac9ff; }
.channel-bubble--green { fill: #106849; stroke: #8de3bd; }
.channel-bubble--reply { fill: #d6eee5; stroke: #effff8; }
.channel-ink { stroke: #f3f7ff; stroke-width: 1.8; }
.channel-reply-ink { stroke: #1a604a; stroke-width: 1.5; }
.channel-route { stroke: #a9c7ff; stroke-width: 1; opacity: .45; }
.channel-sms-flight { stroke: #f5f9ff; stroke-width: 2.5; stroke-dasharray: 9 90; animation: channel-send 12s var(--channel-phase) linear infinite; }
.channel-sms-bubble { transform-box: fill-box; transform-origin: center; animation: channel-bubble-in 12s var(--channel-phase) cubic-bezier(.16,1,.3,1) infinite; }
.channel-sms-received { transform-box: fill-box; transform-origin: center; animation: channel-received 12s var(--channel-phase) cubic-bezier(.16,1,.3,1) infinite; }
.channel-sms-check { stroke-dasharray: 26; animation: channel-check 12s var(--channel-phase) linear infinite; }
.channel-typing { fill: #d8ffec; animation: channel-typing 12s var(--channel-phase) linear infinite; }
.channel-typing-dot { transform-box: fill-box; transform-origin: center; animation: channel-dot 12s var(--channel-phase) ease-in-out infinite; }
.channel-typing-dot:nth-child(2) { animation-delay: calc(var(--channel-phase) + .12s); }
.channel-typing-dot:nth-child(3) { animation-delay: calc(var(--channel-phase) + .24s); }
.channel-wa-sent { animation: channel-reply 12s var(--channel-phase) ease-out infinite; }
.channel-wa-reply { animation: channel-reply 12s var(--channel-phase) cubic-bezier(.16,1,.3,1) infinite; }
.channel-voice-track { stroke: #8ca9f0; opacity: .24; stroke-width: 1; }
.channel-wave { stroke: #b8caff; stroke-width: 4; }
.channel-wave path { transform-box: fill-box; transform-origin: center; animation: channel-wave 12s var(--channel-phase) ease-in-out infinite; }
.channel-wave path:nth-child(3n+2) { animation-name: channel-wave-alt; }
.channel-wave path:nth-child(3n) { animation-name: channel-wave-third; }
@keyframes channel-turn {
  0%,28% { opacity: 1; transform: rotateX(0); }
  32% { opacity: 0; transform: rotateX(-90deg); }
  33%,94% { opacity: 0; transform: rotateX(90deg); }
  98%,100% { opacity: 1; transform: rotateX(0); }
}
@keyframes channel-bubble-in { 0% { opacity: .5; transform: translateY(5px) scale(.92); } 7%,100% { opacity: 1; transform: none; } }
@keyframes channel-send { 0%,7% { opacity: 0; stroke-dashoffset: 10; } 9% { opacity: 1; } 17% { opacity: 1; stroke-dashoffset: -80; } 19%,100% { opacity: 0; stroke-dashoffset: -90; } }
@keyframes channel-received { 0%,15% { opacity: 0; transform: scale(.65); } 20%,100% { opacity: 1; transform: scale(1); } }
@keyframes channel-check { 0%,19% { stroke-dashoffset: 26; } 25%,100% { stroke-dashoffset: 0; } }
@keyframes channel-typing { 0%,12% { opacity: 1; } 15%,100% { opacity: 0; } }
@keyframes channel-dot { 0%,3%,9%,15%,100% { transform: translateY(0); } 6%,12% { transform: translateY(-3px); } }
@keyframes channel-reply { 0%,14% { opacity: 0; transform: translateY(5px); } 21%,100% { opacity: 1; transform: translateY(0); } }
@keyframes channel-wave { 0%,3%,12%,21%,28%,100% { transform: scaleY(.3); } 7%,16%,25% { transform: scaleY(1); } }
@keyframes channel-wave-alt { 0%,3%,10%,19%,28%,100% { transform: scaleY(.5); } 6%,15%,24% { transform: scaleY(.95); } }
@keyframes channel-wave-third { 0%,3%,14%,23%,28%,100% { transform: scaleY(.4); } 9%,18%,26% { transform: scaleY(.9); } }
@media (prefers-reduced-motion: reduce) {
  .hero-channel-flip * { animation: none !important; }
  .hero-channel-flip .hero-channel-face { opacity: 0; transform: none; }
  .hero-channel-flip .hero-channel-face--sms { opacity: 1; }
  .channel-sms-flight { opacity: 0; }
}