.mvp-solution-visual {
--mvp-v-bg:#020B14;
--mvp-v-dark:#061B31;
--mvp-v-primary:#0A2B4D;
--mvp-v-border:#244A6A;
--mvp-v-accent:#EC268F;
--mvp-v-accent-light:#F15BA8;
position:relative;
width:100%;
min-width:0;
isolation:isolate;
}
.mvp-solution-visual *,
.mvp-solution-visual *::before,
.mvp-solution-visual *::after{box-sizing:border-box}
.mvp-solution-visual-frame{
position:relative;
width:100%;
min-height:690px;
overflow:hidden;
border:1px solid rgba(36,74,106,.82);
border-radius:20px;
background:#020B14;
box-shadow:0 30px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.025);
}
.mvp-solution-chip{
position:absolute;
z-index:30;
display:inline-flex;
align-items:center;
gap:7px;
padding:8px 11px;
border:1px solid rgba(62,91,114,.72);
border-radius:999px;
background:rgba(2,11,20,.76);
box-shadow:0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.03);
color:#d5dee7;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
font-size:10px;
font-weight:800;
line-height:1;
letter-spacing:.055em;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
pointer-events:none;
}
.mvp-solution-chip::before{
content:"";
width:6px;height:6px;flex:0 0 6px;border-radius:50%;
background:var(--mvp-v-accent);
box-shadow:0 0 10px rgba(236,38,143,.72);
} .mvp-software-scene{
display:flex;align-items:center;justify-content:center;
padding:clamp(20px,3vw,38px);
background:radial-gradient(circle at 82% 12%,rgba(236,38,143,.15),transparent 29%),radial-gradient(circle at 8% 88%,rgba(10,43,77,.52),transparent 34%),linear-gradient(145deg,#061B31 0%,#020B14 62%,#04111E 100%);
perspective:1100px;
}
.mvp-software-scene::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:34px 34px;pointer-events:none}
.mvp-software-chip--api{top:9%;right:7%;animation:mvpSoftwareFloat 5.5s ease-in-out infinite}
.mvp-software-chip--automation{left:6%;bottom:12%;animation:mvpSoftwareFloat 6.3s ease-in-out -2s infinite}
.mvp-terminal{position:relative;z-index:3;width:min(100%,650px);min-height:480px;overflow:hidden;border:1px solid rgba(72,111,143,.56);border-radius:16px;background:rgba(1,8,15,.94);box-shadow:0 34px 70px rgba(0,0,0,.40),0 0 55px rgba(10,43,77,.24);transform:rotateY(-4deg) rotateX(1.5deg);transition:transform .45s ease,border-color .45s ease,box-shadow .45s ease}
.mvp-software-scene:hover .mvp-terminal{transform:rotateY(-1deg) translateY(-4px);border-color:rgba(236,38,143,.35)}
.mvp-terminal-bar{display:flex;align-items:center;height:48px;padding:0 16px;border-bottom:1px solid rgba(36,74,106,.48);background:linear-gradient(180deg,rgba(10,43,77,.58),rgba(6,27,49,.42))}
.mvp-terminal-dots{display:flex;gap:6px}.mvp-terminal-dots span{width:9px;height:9px;border-radius:50%}.mvp-terminal-dots span:nth-child(1){background:#EC268F}.mvp-terminal-dots span:nth-child(2){background:#F2B84B}.mvp-terminal-dots span:nth-child(3){background:#43C78C}
.mvp-terminal-title{flex:1;min-width:0;color:#8FA1B1;font:11px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mvp-terminal-live{display:inline-flex;align-items:center;gap:6px;color:#9CB0C1;font-size:9px;font-weight:800;letter-spacing:.08em}.mvp-terminal-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#43C78C;box-shadow:0 0 9px rgba(67,199,140,.65)}
.mvp-terminal-body{position:relative;height:432px;overflow:hidden;padding:21px 20px 45px;background:linear-gradient(180deg,rgba(2,11,20,.86),rgba(1,7,13,.99))}
.mvp-terminal-output{display:block;height:100%;margin:0;overflow:hidden;color:#B8C8D6;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:clamp(11px,.88vw,13px);line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.mvp-terminal-line{display:block;min-height:1.7em}.mvp-terminal-line.is-accent{color:#F15BA8}.mvp-terminal-line.is-success{color:#73DDB0}.mvp-terminal-line.is-muted{color:#718596}.mvp-terminal-line.is-code{color:#C9D7E2}
.mvp-terminal-caret{display:inline-block;width:.56em;height:1em;margin-left:2px;vertical-align:-.12em;background:var(--mvp-v-accent);box-shadow:0 0 10px rgba(236,38,143,.44);animation:mvpTerminalCaret .85s steps(1,end) infinite}
.mvp-terminal-status{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(36,74,106,.45);background:rgba(6,27,49,.95)}
.mvp-terminal-status span{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 5px;color:#8FA1B1;font:700 8px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;letter-spacing:.06em}.mvp-terminal-status span::before{content:"";width:5px;height:5px;border-radius:50%;background:#43C78C} .mvp-distribution-cinematic{
min-height:690px;
background:#071923;
}
.mvp-distribution-video,
.mvp-distribution-photo-fallback{
position:absolute;
inset:0;
z-index:1;
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:42% 50%;
filter:saturate(.95) contrast(1.02) brightness(.96);
transform:none;
}
.mvp-distribution-video{
background:#071923;
}
.mvp-distribution-photo-fallback{
animation:none;
}
.mvp-distribution-video-grade{
position:absolute;
inset:0;
z-index:4;
pointer-events:none;
background:
linear-gradient(180deg,rgba(3,15,25,.10) 0%,rgba(2,11,20,.04) 42%,rgba(2,11,20,.44) 100%),
linear-gradient(90deg,rgba(6,27,49,.18),transparent 35%,transparent 70%,rgba(6,27,49,.13));
mix-blend-mode:multiply;
}
.mvp-distribution-vignette{
position:absolute;
inset:0;
z-index:5;
pointer-events:none;
background:radial-gradient(circle at 52% 44%,transparent 40%,rgba(2,11,20,.10) 72%,rgba(2,11,20,.44) 100%);
box-shadow:inset 0 0 80px rgba(1,7,12,.30);
}
.mvp-distribution-chip--network{left:5%;top:5%}
.mvp-distribution-data{
position:absolute;
left:28px;
bottom:27px;
z-index:22;
display:flex;
align-items:center;
gap:11px;
color:rgba(213,222,231,.82);
font:700 9px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
letter-spacing:.11em;
text-shadow:0 2px 12px rgba(0,0,0,.55);
pointer-events:none;
}
.mvp-distribution-data-line{display:flex;align-items:center;gap:4px}
.mvp-distribution-data-line span{
display:block;
width:17px;
height:2px;
border-radius:99px;
background:rgba(236,38,143,.30);
box-shadow:0 0 8px rgba(236,38,143,.18);
animation:mvpDistributionPulse 2.2s ease-in-out infinite;
}
.mvp-distribution-data-line span:nth-child(2){animation-delay:.18s}
.mvp-distribution-data-line span:nth-child(3){animation-delay:.36s}
.mvp-distribution-data-line span:nth-child(4){animation-delay:.54s}
.mvp-distribution-route{
position:absolute;
left:0;
right:0;
bottom:0;
z-index:18;
width:100%;
height:150px;
pointer-events:none;
overflow:visible;
}
.mvp-distribution-route-base{fill:none;stroke:rgba(236,38,143,.16);stroke-width:3;stroke-dasharray:5 11}
.mvp-distribution-route-light{fill:none;stroke:#EC268F;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:34 250;filter:drop-shadow(0 0 5px rgba(236,38,143,.74));animation:mvpDistributionRoute 5s linear infinite}
.mvp-distribution-globe{
position:absolute;
right:24px;
bottom:24px;
z-index:30;
width:96px;
height:96px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(71,107,135,.62);
border-radius:50%;
background:radial-gradient(circle at 34% 28%,rgba(28,73,101,.86),rgba(3,17,29,.96) 67%);
box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 34px rgba(236,38,143,.09),inset 0 0 26px rgba(65,121,159,.16);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
animation:mvpGlobeFloat 5.2s ease-in-out infinite;
}
.mvp-distribution-globe svg{width:70px;height:70px;filter:drop-shadow(0 0 10px rgba(236,38,143,.22))}
.mvp-globe-grid{transform-origin:50px 50px;animation:mvpGlobeSpin 15s linear infinite}
@keyframes mvpTerminalCaret{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes mvpSoftwareFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mvpDistributionPhotoDrift{0%{transform:scale(1.03) translate3d(-.6%,0,0)}100%{transform:scale(1.09) translate3d(.8%,-.8%,0)}}
@keyframes mvpDistributionRoute{to{stroke-dashoffset:-290}}
@keyframes mvpDistributionPulse{0%,100%{opacity:.28;transform:scaleX(.85)}50%{opacity:1;transform:scaleX(1)}}
@keyframes mvpGlobeSpin{to{transform:rotate(360deg)}}
@keyframes mvpGlobeFloat{50%{transform:translateY(-4px)}}
.mvp-solution-visual:not(.is-active) .mvp-software-chip--api,
.mvp-solution-visual:not(.is-active) .mvp-software-chip--automation,
.mvp-solution-visual:not(.is-active) .mvp-terminal-caret,
.mvp-solution-visual:not(.is-active) .mvp-distribution-photo-fallback,
.mvp-solution-visual:not(.is-active) .mvp-distribution-route-light,
.mvp-solution-visual:not(.is-active) .mvp-distribution-data-line span,
.mvp-solution-visual:not(.is-active) .mvp-distribution-globe,
.mvp-solution-visual:not(.is-active) .mvp-globe-grid{
animation-play-state:paused;
}
@media(max-width:1024px){
.mvp-solution-visual-frame{min-height:590px}
.mvp-terminal{transform:none}
}
@media(max-width:767px){
.mvp-solution-visual-frame{min-height:500px;border-radius:16px}
.mvp-software-scene{padding:15px}
.mvp-terminal{width:100%;min-height:400px;transform:none}
.mvp-terminal-body{height:356px}
.mvp-software-chip--api,.mvp-software-chip--automation{display:none}
.mvp-solution-chip{font-size:8px;padding:7px 9px}
.mvp-distribution-chip--network{left:4%;top:4%}
.mvp-distribution-globe{right:14px;bottom:14px;width:80px;height:80px}
.mvp-distribution-globe svg{width:58px;height:58px}
.mvp-distribution-data{left:16px;bottom:19px;font-size:7px;gap:7px}
.mvp-distribution-data-line span{width:10px}
}
@media(prefers-reduced-motion:reduce){
.mvp-software-chip--api,
.mvp-software-chip--automation,
.mvp-terminal-caret,
.mvp-distribution-photo-fallback,
.mvp-distribution-route-light,
.mvp-distribution-data-line span,
.mvp-distribution-globe,
.mvp-globe-grid{animation:none!important}
.mvp-terminal{transform:none!important}
} .mvp-distribution-video{z-index:2}
.mvp-distribution-video[hidden],.mvp-distribution-toggle[hidden]{display:none!important}
.mvp-distribution-toggle{position:absolute;right:5%;top:5%;z-index:35;border:1px solid rgba(143,161,177,.5);border-radius:999px;padding:7px 11px;background:rgba(2,11,20,.8);color:#e6edf4;font:600 10px/1.4 system-ui,sans-serif;cursor:pointer}
.mvp-distribution-toggle:hover{border-color:#EC268F;background:#061B31}
.mvp-distribution-toggle:focus-visible{outline:2px solid #F15BA8;outline-offset:3px} .mvp-solution-visual[data-visual="software"]{max-width:100%;contain:inline-size}
.mvp-software-scene{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;min-width:0;max-width:100%}
.mvp-terminal{width:100%;max-width:650px;min-width:0;flex:0 0 auto;contain:inline-size;transform:none}
.mvp-software-scene:hover .mvp-terminal{transform:translateY(-4px)}
.mvp-terminal-bar,.mvp-terminal-body,.mvp-terminal-output{width:100%;max-width:100%;min-width:0}
.mvp-terminal-output{box-sizing:border-box;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}
.mvp-terminal-dots,.mvp-terminal-live{flex-shrink:0} .mvp-solution-visual[data-visual="courier"]{max-width:100%;contain:inline-size}
.mvp-courier-scene{background:radial-gradient(ellipse at 70% 35%,#183851 0%,#081d30 40%,#020b14 85%)}
.mvp-courier-stage,.mvp-courier-poster{position:absolute;inset:0;width:100%;height:100%;display:block}
.mvp-courier-poster{object-fit:cover;object-position:center;opacity:.95}
.mvp-courier-stage{z-index:2;overflow:hidden}
.mvp-courier-stage canvas{display:block;width:100%;height:100%;outline:none}
.mvp-courier-scene.is-rendered .mvp-courier-poster{visibility:hidden}
.mvp-courier-chip{top:24px;left:22px}
.mvp-courier-caption{position:absolute;left:24px;right:24px;bottom:32px;z-index:4;pointer-events:none;color:#e4ecf3;font-family:inherit}
.mvp-courier-kicker{display:block;font:700 9px/1.4 system-ui,sans-serif;letter-spacing:.2em;color:#F15BA8;margin-bottom:8px}
.mvp-courier-status{display:block;min-height:2.8em;font:600 14px/1.4 system-ui,sans-serif;max-width:260px}
.mvp-courier-progress{height:2px;margin-top:14px;background:#244a6a;overflow:hidden;border-radius:2px}
.mvp-courier-progress span{display:block;width:100%;height:100%;background:#ec268f;transform:scaleX(0);transform-origin:0 50%}
.mvp-courier-toggle{position:absolute;bottom:144px;left:24px;z-index:5;border:1px solid #36536b;border-radius:20px;padding:7px 11px;background:rgba(2,11,20,.8);color:#cbd9e5;font:600 10px/1.4 system-ui,sans-serif;cursor:pointer}
.mvp-courier-toggle[hidden]{display:none!important}
.mvp-courier-toggle:hover{border-color:#ec268f;color:#fff}
.mvp-courier-toggle:focus-visible{outline:2px solid #F15BA8;outline-offset:3px}
@media(max-width:767px){.mvp-courier-caption{bottom:24px;left:20px;right:20px}.mvp-courier-chip{top:20px;left:20px}.mvp-courier-toggle{left:20px;bottom:133px}}
@media(prefers-reduced-motion:reduce){.mvp-software-scene:hover .mvp-terminal{transform:none}} .mvp-solution-visual[data-visual="real-estate"]{max-width:100%;contain:inline-size}
.mvp-solution-visual .mvp-realestate-scene{
min-height:0;aspect-ratio:1182/1330;background:#0a2b4d;contain:paint;
}
.mvp-realestate-photo{
position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;
max-width:none;object-fit:cover;object-position:center;
transform:none!important;
animation:none!important;
transition:none!important;
}
.mvp-realestate-grade{
position:absolute;inset:0;z-index:10;pointer-events:none;
background:linear-gradient(180deg,rgba(2,11,20,.22),transparent 20%,transparent 74%,rgba(2,11,20,.4));
}
.mvp-realestate-chip{top:18px;left:18px;max-width:calc(100% - 36px);line-height:1.4}
.mvp-realestate-chip,.mvp-realestate-caption{
-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(2,11,20,.9);
}
.mvp-realestate-caption{
position:absolute;left:18px;bottom:18px;z-index:30;display:flex;flex-direction:column;
align-items:flex-start;max-width:calc(100% - 36px);padding:12px 14px;
border:1px solid rgba(83,112,134,.48);border-radius:12px;pointer-events:none;
}
.mvp-realestate-kicker{display:block;margin-bottom:5px;color:#F15BA8;font:800 9px/1.3 system-ui,sans-serif;letter-spacing:.13em}
.mvp-realestate-status{display:block;color:#edf3f7;font:700 13px/1.35 system-ui,sans-serif;letter-spacing:.01em}
.mvp-realestate-meta{display:flex;align-items:center;gap:8px;margin-top:7px;color:#aebdca;font:700 8px/1.3 system-ui,sans-serif;letter-spacing:.06em}
.mvp-realestate-meta span{display:block;width:28px;height:2px;border-radius:99px;background:#EC268F}
@media(max-width:767px){
.mvp-realestate-chip{top:12px;left:12px;font-size:8px;padding:8px;max-width:calc(100% - 24px)}
.mvp-realestate-caption{left:12px;bottom:12px;padding:10px 12px;max-width:calc(100% - 24px)}
.mvp-realestate-status{font-size:11px}
.mvp-realestate-kicker{font-size:8px}
.mvp-realestate-meta{font-size:7px}
} .mvp-solution-visual[data-visual="telecommunications"]{
max-width:100%;
contain:inline-size;
}
.mvp-telecom-scene{
min-height:690px;
background:#0b2230;
}
.mvp-telecom-art{
position:absolute;
inset:0;
z-index:1;
display:block;
width:100%;
height:100%;
}
.mvp-telecom-chip{
top:24px;
left:24px;
}
.mvp-telecom-toggle{
position:absolute;
top:24px;
right:24px;
z-index:35;
border:1px solid rgba(143,161,177,.5);
border-radius:999px;
padding:7px 11px;
background:rgba(2,11,20,.82);
color:#e6edf4;
font:600 10px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
cursor:pointer;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.mvp-telecom-toggle:hover{
border-color:#EC268F;
background:#061B31;
}
.mvp-telecom-toggle:focus-visible{
outline:2px solid #F15BA8;
outline-offset:3px;
}
.mvp-telecom-scene::after{
content:"";
position:absolute;
inset:0;
z-index:18;
pointer-events:none;
background:
linear-gradient(180deg,rgba(2,11,20,.02),transparent 52%,rgba(2,11,20,.18) 100%),
radial-gradient(circle at 50% 45%,transparent 44%,rgba(2,11,20,.025) 72%,rgba(2,11,20,.26) 100%);
box-shadow:inset 0 0 76px rgba(1,7,12,.20);
} .mvp-telecom-provider-glow{
transform-box:fill-box;
transform-origin:center;
animation:mvpTelecomProviderGlow 2.8s ease-in-out infinite;
}
.mvp-telecom-provider-bar,
.mvp-telecom-pbx-load,
.mvp-telecom-queue-load{
transform-box:fill-box;
transform-origin:left center;
animation:mvpTelecomLoadBar 3.1s ease-in-out infinite;
}
.mvp-telecom-rack{ }
.mvp-telecom-led{
animation:mvpTelecomLed 2s ease-in-out infinite;
}
.mvp-telecom-led--2{animation-delay:-.42s}
.mvp-telecom-led--3{animation-delay:-.88s}
.mvp-telecom-led--4{animation-delay:-1.31s}
.mvp-telecom-switch-ports rect:nth-child(4n+1){animation:mvpTelecomPort 2.2s ease-in-out infinite}
.mvp-telecom-switch-ports rect:nth-child(4n+2){animation:mvpTelecomPort 2.2s ease-in-out -.5s infinite}
.mvp-telecom-switch-ports rect:nth-child(4n+3){animation:mvpTelecomPort 2.2s ease-in-out -1s infinite}
.mvp-telecom-switch-ports rect:nth-child(4n){animation:mvpTelecomPort 2.2s ease-in-out -1.5s infinite}
.mvp-telecom-ivr-row{
transition:fill .25s ease,stroke .25s ease,filter .25s ease;
}
.mvp-solution-visual[data-telecom-phase="1"] .mvp-telecom-ivr-row--1,
.mvp-solution-visual[data-telecom-phase="2"] .mvp-telecom-ivr-row--2,
.mvp-solution-visual[data-telecom-phase="4"] .mvp-telecom-ivr-row--3{
fill:#5E103B;
stroke:#EC268F;
filter:drop-shadow(0 0 6px rgba(236,38,143,.38));
}
.mvp-solution-visual[data-telecom-phase="4"] .mvp-telecom-queue{
filter:drop-shadow(0 0 11px rgba(236,38,143,.22));
} .mvp-telecom-path-base{
fill:none;
stroke:rgba(143,169,188,.24);
stroke-width:4;
stroke-linecap:round;
stroke-dasharray:6 11;
}
.mvp-telecom-path-live{
fill:none;
opacity:.14;
transition:opacity .25s ease;
stroke:#EC268F;
stroke-width:4;
stroke-linecap:round;
stroke-dasharray:28 118;
filter:drop-shadow(0 0 5px rgba(236,38,143,.62));
animation:mvpTelecomLink 2.8s linear infinite;
}
.mvp-telecom-path-live--ext1{
animation-duration:3.6s;
animation-delay:-1.15s;
}
.mvp-telecom-path-live--ext2{
animation-duration:3.35s;
animation-delay:-.72s;
}
.mvp-solution-visual[data-telecom-phase="0"] .mvp-telecom-path-live--incoming,
.mvp-solution-visual[data-telecom-phase="1"] .mvp-telecom-path-live--incoming,
.mvp-solution-visual[data-telecom-phase="2"] .mvp-telecom-path-live--ext2,
.mvp-solution-visual[data-telecom-phase="3"] .mvp-telecom-path-live--ext2,
.mvp-solution-visual[data-telecom-phase="4"] .mvp-telecom-path-live--ext1,
.mvp-solution-visual[data-telecom-phase="4"] .mvp-telecom-path-live--ext2{
opacity:1;
}
.mvp-telecom-packet{
opacity:0;
transition:opacity .25s ease;
filter:drop-shadow(0 0 7px rgba(236,38,143,.78));
}
.mvp-solution-visual[data-telecom-phase="0"] .mvp-telecom-packet--incoming,
.mvp-solution-visual[data-telecom-phase="1"] .mvp-telecom-packet--incoming,
.mvp-solution-visual[data-telecom-phase="2"] .mvp-telecom-packet--ext2,
.mvp-solution-visual[data-telecom-phase="3"] .mvp-telecom-packet--ext2,
.mvp-solution-visual[data-telecom-phase="4"] .mvp-telecom-packet--ext1,
.mvp-solution-visual[data-telecom-phase="4"] .mvp-telecom-packet--ext2{
opacity:1;
} .mvp-telecom-endpoint{ }
.mvp-telecom-ring{
transform-box:fill-box;
transform-origin:center;
animation:mvpTelecomRing 1.55s ease-out infinite;
}
.mvp-telecom-ring--2{
animation-delay:-.78s;
}
.mvp-telecom-ring{
opacity:0!important;
}
.mvp-solution-visual[data-telecom-phase="2"] .mvp-telecom-endpoint--203 .mvp-telecom-ring{
opacity:.72!important;
}
.mvp-telecom-waveform{
opacity:.24;
transition:opacity .25s ease;
}
.mvp-telecom-waveform rect{
transform-box:fill-box;
transform-origin:center;
animation:mvpTelecomWaveform 1.35s ease-in-out infinite;
}
.mvp-telecom-waveform rect:nth-child(2n){animation-delay:-.21s}
.mvp-telecom-waveform rect:nth-child(3n){animation-delay:-.44s}
.mvp-telecom-waveform rect:nth-child(5n){animation-delay:-.74s}
.mvp-solution-visual[data-telecom-phase="3"] .mvp-telecom-waveform,
.mvp-solution-visual[data-telecom-phase="4"] .mvp-telecom-waveform{
opacity:1;
}
.mvp-telecom-phone-state{
transition:fill .25s ease,opacity .25s ease;
}
.mvp-telecom-phone-state{
opacity:.72;
fill:#7EC4D6;
}
.mvp-solution-visual[data-telecom-phase="2"] .mvp-telecom-phone-state--203{
opacity:1;
fill:#F15BA8;
}
.mvp-solution-visual[data-telecom-phase="3"] .mvp-telecom-phone-state--203{
opacity:1;
fill:#73DDB0;
}
.mvp-solution-visual[data-telecom-phase="4"] .mvp-telecom-phone-state--201,
.mvp-solution-visual[data-telecom-phase="4"] .mvp-telecom-phone-state--203{
opacity:1;
fill:#F15BA8;
}
.mvp-telecom-mic{
animation:mvpTelecomMic 1.55s ease-in-out infinite;
} .mvp-telecom-caption{
position:absolute;
left:50%;
bottom:19px;
z-index:30;
display:flex;
flex-direction:column;
align-items:flex-start;
width:min(340px,54%);
padding:12px 14px 11px;
transform:translateX(-50%);
border:1px solid rgba(83,112,134,.48);
border-radius:13px;
background:rgba(2,11,20,.78);
box-shadow:0 14px 35px rgba(0,0,0,.25);
-webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px);
pointer-events:none;
}
.mvp-telecom-kicker{
display:block;
margin-bottom:5px;
color:#F15BA8;
font:800 8px/1.3 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
letter-spacing:.13em;
}
.mvp-telecom-status{
display:block;
min-height:1.42em;
color:#EDF3F7;
font:700 13px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
letter-spacing:.01em;
}
.mvp-telecom-progress{
width:100%;
height:2px;
margin-top:9px;
overflow:hidden;
border-radius:999px;
background:#244A6A;
}
.mvp-telecom-progress span{
display:block;
width:100%;
height:100%;
background:#EC268F;
transform:scaleX(0);
transform-origin:left center;
box-shadow:0 0 9px rgba(236,38,143,.45);
}
.mvp-telecom-tags{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:8px;
}
.mvp-telecom-tags span{
padding:3px 6px;
border:1px solid rgba(80,111,134,.48);
border-radius:999px;
color:#AEBECA;
font:800 6.5px/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
letter-spacing:.07em;
} .mvp-solution-visual[data-visual="telecommunications"].is-user-paused .mvp-telecom-provider-glow,
.mvp-solution-visual[data-visual="telecommunications"].is-user-paused .mvp-telecom-provider-bar,
.mvp-solution-visual[data-visual="telecommunications"].is-user-paused .mvp-telecom-led,
.mvp-solution-visual[data-visual="telecommunications"].is-user-paused .mvp-telecom-channel,
.mvp-solution-visual[data-visual="telecommunications"].is-user-paused .mvp-telecom-pbx-load,
.mvp-solution-visual[data-visual="telecommunications"].is-user-paused .mvp-telecom-switch-ports rect,
.mvp-solution-visual[data-visual="telecommunications"].is-user-paused .mvp-telecom-queue-load,
.mvp-solution-visual[data-visual="telecommunications"].is-user-paused .mvp-telecom-path-live,
.mvp-solution-visual[data-visual="telecommunications"].is-user-paused .mvp-telecom-ring,
.mvp-solution-visual[data-visual="telecommunications"].is-user-paused .mvp-telecom-waveform rect,
.mvp-solution-visual[data-visual="telecommunications"].is-user-paused .mvp-telecom-mic,
.mvp-solution-visual:not(.is-active)[data-visual="telecommunications"] .mvp-telecom-provider-glow,
.mvp-solution-visual:not(.is-active)[data-visual="telecommunications"] .mvp-telecom-provider-bar,
.mvp-solution-visual:not(.is-active)[data-visual="telecommunications"] .mvp-telecom-led,
.mvp-solution-visual:not(.is-active)[data-visual="telecommunications"] .mvp-telecom-channel,
.mvp-solution-visual:not(.is-active)[data-visual="telecommunications"] .mvp-telecom-pbx-load,
.mvp-solution-visual:not(.is-active)[data-visual="telecommunications"] .mvp-telecom-switch-ports rect,
.mvp-solution-visual:not(.is-active)[data-visual="telecommunications"] .mvp-telecom-queue-load,
.mvp-solution-visual:not(.is-active)[data-visual="telecommunications"] .mvp-telecom-path-live,
.mvp-solution-visual:not(.is-active)[data-visual="telecommunications"] .mvp-telecom-ring,
.mvp-solution-visual:not(.is-active)[data-visual="telecommunications"] .mvp-telecom-waveform rect,
.mvp-solution-visual:not(.is-active)[data-visual="telecommunications"] .mvp-telecom-mic{
animation-play-state:paused;
}
@keyframes mvpTelecomProviderGlow{
0%,100%{transform:scale(.88);opacity:.36}
50%{transform:scale(1.06);opacity:.78}
}
@keyframes mvpTelecomLoadBar{
0%,100%{transform:scaleX(.58);opacity:.66}
50%{transform:scaleX(1);opacity:1}
}
@keyframes mvpTelecomRackBreath{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-2px)}
}
@keyframes mvpTelecomLed{
0%,100%{opacity:.34}
50%{opacity:1}
}
@keyframes mvpTelecomPort{
0%,100%{fill:#263942}
50%{fill:#43C78C}
}
@keyframes mvpTelecomLink{
to{stroke-dashoffset:-146}
}
@keyframes mvpTelecomEndpoint{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-2px)}
}
@keyframes mvpTelecomRing{
0%{transform:scale(.78);opacity:0}
25%{opacity:.76}
100%{transform:scale(1.12);opacity:0}
}
@keyframes mvpTelecomWaveform{
0%,100%{transform:scaleY(.42)}
50%{transform:scaleY(1.12)}
}
@keyframes mvpTelecomMic{
0%,100%{opacity:.46}
50%{opacity:1;filter:drop-shadow(0 0 7px rgba(236,38,143,.8))}
}
@media(max-width:767px){
.mvp-telecom-scene{min-height:500px}
.mvp-telecom-chip{top:17px;left:17px}
.mvp-telecom-toggle{top:17px;right:17px;font-size:8px;padding:6px 8px}
.mvp-telecom-caption{bottom:14px;width:min(300px,74%);padding:9px 10px 8px}
.mvp-telecom-status{font-size:11px}
.mvp-telecom-kicker{font-size:7px}
.mvp-telecom-tags{gap:4px;margin-top:6px}
.mvp-telecom-tags span{font-size:5.8px;padding:3px 5px}
}
@media(prefers-reduced-motion:reduce){
.mvp-telecom-provider-glow,
.mvp-telecom-provider-bar,
.mvp-telecom-led,
.mvp-telecom-channel,
.mvp-telecom-pbx-load,
.mvp-telecom-switch-ports rect,
.mvp-telecom-queue-load,
.mvp-telecom-path-live,
.mvp-telecom-ring,
.mvp-telecom-waveform rect,
.mvp-telecom-mic{
animation:none!important;
}
}