/* Zenvia Technologies — homepage tech motion */

/* ---- Live network canvas ---- */
.zv-hero>.zv-net,.zv-cta-panel>.zv-net{position:absolute!important;inset:0;width:100%;height:100%;z-index:0!important;pointer-events:none;display:block}

/* ---- Hero: drifting grid + scanning beam ---- */
html .zv-hero::before{animation:zvGrid 14s linear infinite}
@keyframes zvGrid{to{background-position:56px 56px,56px 56px}}
.zv-hero::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;pointer-events:none;z-index:0;background:linear-gradient(180deg,transparent 0%,rgba(45,212,191,.07) 50%,transparent 100%);animation:zvScan 9s linear infinite}
@keyframes zvScan{from{transform:translateY(0)}to{transform:translateY(440%)}}

/* ---- Hero: entrance ---- */
.zv-hero .zv-pill,.zv-hero h1,.zv-hero .zv-hero-sub,.zv-hero .zv-lead,.zv-hero .wp-block-buttons{animation:zvRise .8s cubic-bezier(.2,.7,.2,1) both}
.zv-hero .zv-pill{animation-delay:.05s}
.zv-hero h1{animation-delay:.15s}
.zv-hero .zv-hero-sub{animation-delay:.3s}
.zv-hero .zv-lead{animation-delay:.4s}
.zv-hero .wp-block-buttons{animation-delay:.5s}
@keyframes zvRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Shimmer across "Secured. Managed. Evolving." */
html .zv-hero h1 mark{background-color:transparent!important;background-image:linear-gradient(100deg,#2DD4BF 0%,#2DD4BF 38%,#E6FAF7 50%,#2DD4BF 62%,#2DD4BF 100%)!important;background-size:260% 100%!important;background-repeat:no-repeat!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:#2DD4BF;-webkit-text-fill-color:transparent;animation:zvShine 5.5s ease-in-out 1.2s infinite}
@keyframes zvShine{0%{background-position:100% 0}55%,100%{background-position:0 0}}

/* ---- Hero visual: orbits, radar, ripples, chips ---- */
.zv-hero-visual{animation:zvZoom 1.1s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes zvZoom{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
html .zv-hero-visual.zv-has-orbits::before{display:none}
html .zv-hero-visual::after{z-index:1;animation:zvBreath 5s ease-in-out infinite}
@keyframes zvBreath{0%,100%{box-shadow:0 0 80px rgba(45,212,191,.30),inset 0 0 0 6px rgba(45,212,191,.25)}50%{box-shadow:0 0 130px rgba(45,212,191,.55),inset 0 0 0 6px rgba(45,212,191,.45)}}
html .zv-hero-visual .wp-block-image{animation:zvFloat 6s ease-in-out infinite}
@keyframes zvFloat{0%,100%{transform:translateY(4px)}50%{transform:translateY(-4px)}}
/* The shield artwork sits 33.5px left of centre inside its 512px PNG; nudge it so it is optically centred in the disc */
html .zv-hero-visual img{transform:translateX(6.55%)}

.zv-orbits{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}
.zv-o{transform-box:view-box;transform-origin:50% 50%;animation:zvSpin 44s linear infinite}
.zv-o2{animation-duration:28s;animation-direction:reverse}
.zv-o3{animation-duration:18s}
@keyframes zvSpin{to{transform:rotate(360deg)}}
.zv-ring{fill:none;stroke:rgba(45,212,191,.45);stroke-width:1.4}
.zv-o2 .zv-ring{stroke:rgba(45,212,191,.6);stroke-width:2}
.zv-o3 .zv-ring{stroke:rgba(230,250,247,.35)}
.zv-sat{fill:#E6FAF7}
.zv-sat-glow{fill:rgba(45,212,191,.28)}
.zv-ripple{fill:none;stroke:rgba(45,212,191,.55);stroke-width:1.5;transform-box:view-box;transform-origin:50% 50%;opacity:0;animation:zvRipple 4.5s cubic-bezier(.2,.6,.3,1) infinite}
.zv-ripple1{animation-delay:1.5s}
.zv-ripple2{animation-delay:3s}
@keyframes zvRipple{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.6);opacity:0}}
.zv-radar{position:absolute;inset:3%;border-radius:50%;z-index:0;pointer-events:none;background:conic-gradient(from 0deg,transparent 0deg,transparent 290deg,rgba(45,212,191,.05) 320deg,rgba(45,212,191,.32) 360deg);-webkit-mask-image:radial-gradient(circle,transparent 60%,#000 61%);mask-image:radial-gradient(circle,transparent 60%,#000 61%);animation:zvSpin 6s linear infinite}

.zv-chip-float{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:#fff;background:rgba(18,52,92,.78);border:1px solid rgba(45,212,191,.45);box-shadow:0 10px 30px -10px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;pointer-events:none;animation:zvBob 6s ease-in-out infinite}
.zv-chip-float::before{content:"";width:8px;height:8px;border-radius:50%;background:#2DD4BF;box-shadow:0 0 0 0 rgba(45,212,191,.7);animation:zvLive 2s ease-out infinite}
.zv-c1{top:8%;left:-6%}
.zv-c2{top:22%;right:-8%;animation-delay:-1.5s}
.zv-c3{bottom:20%;left:-10%;animation-delay:-3s}
.zv-c4{bottom:5%;right:-4%;animation-delay:-4.5s}
.zv-c2::before{animation-delay:.5s}.zv-c3::before{animation-delay:1s}.zv-c4::before{animation-delay:1.5s}
@keyframes zvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes zvLive{0%{box-shadow:0 0 0 0 rgba(45,212,191,.7)}100%{box-shadow:0 0 0 9px rgba(45,212,191,0)}}
@media(max-width:781px){.zv-chip-float{font-size:.68rem;padding:6px 10px}.zv-c1{left:-14%}.zv-c2{right:-18%}.zv-c3{left:-20%}.zv-c4{right:-14%}}
@media(max-width:480px){.zv-chip-float{display:none}}

/* ---- Navy bands: circuit traces ---- */
.zv-section.zv-navy{overflow:hidden}
.zv-section.zv-navy>*:not(.zv-circuit){position:relative;z-index:1}
.zv-circuit{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.4) 22%,transparent 40%,transparent 60%,rgba(0,0,0,.4) 78%,#000 100%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.4) 22%,transparent 40%,transparent 60%,rgba(0,0,0,.4) 78%,#000 100%)}
.zv-trace{fill:none;stroke:rgba(45,212,191,.18);stroke-width:1.5}
.zv-pad{fill:#0B1F3A;stroke:rgba(45,212,191,.55);stroke-width:1.5}
.zv-pulse{fill:none;stroke:#2DD4BF;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:9 100;stroke-dashoffset:109;animation:zvTrace 5s linear infinite;filter:drop-shadow(0 0 4px rgba(45,212,191,.9))}
@keyframes zvTrace{from{stroke-dashoffset:109}to{stroke-dashoffset:0}}

/* ---- How We Work: data flowing between steps, pulsing step numbers ---- */
html .zv-steps>.wp-block-column:not(:last-child)::after{background:linear-gradient(90deg,transparent,#E6FAF7,transparent) no-repeat,linear-gradient(90deg,rgba(45,212,191,.9),rgba(45,212,191,.15));background-size:30% 100%,100% 100%;animation:zvFlow 2.4s linear infinite}
@keyframes zvFlow{from{background-position:-60% 0,0 0}to{background-position:160% 0,0 0}}
html .zv-steps>.wp-block-column::before{animation:zvStep 3.2s ease-out infinite}
html .zv-steps>.wp-block-column:nth-child(2)::before{animation-delay:.8s}
html .zv-steps>.wp-block-column:nth-child(3)::before{animation-delay:1.6s}
html .zv-steps>.wp-block-column:nth-child(4)::before{animation-delay:2.4s}
@keyframes zvStep{0%{box-shadow:0 0 0 0 rgba(45,212,191,.6)}60%,100%{box-shadow:0 0 0 14px rgba(45,212,191,0)}}

/* ---- Cards: lift, teal edge, cursor spotlight, icon ping ---- */
.zv-card{position:relative;overflow:hidden}
.zv-card>*:not(.zv-glow){position:relative;z-index:1}
.zv-ico::before{position:relative;z-index:1;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.zv-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(45,212,191,.16),transparent 60%)}
.zv-card:hover .zv-glow{opacity:1}
html .zv-card:hover{transform:translateY(-5px);border-color:rgba(45,212,191,.6)}
.zv-card.zv-ico:hover::before{transform:translateY(-3px) rotate(-6deg)}
html .zv-bento .zv-card-navy::after{animation:zvRings 7s ease-in-out infinite}
@keyframes zvRings{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.1);opacity:1}}
.zv-rv.is-in.zv-ico::before,.zv-rv.is-in .zv-ico::before{animation:zvPing 1.4s ease-out .35s 1}
@keyframes zvPing{0%{box-shadow:0 0 0 0 rgba(45,212,191,.55)}100%{box-shadow:0 0 0 16px rgba(45,212,191,0)}}

/* ---- Scroll reveal (only active when JS adds .zv-motion) ---- */
html.zv-motion .zv-rv{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s}
html.zv-motion .zv-rv.is-in{opacity:1;transform:none}
html.zv-motion .zv-card.zv-rv.is-in:hover{transform:translateY(-5px);transition-delay:0s!important}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .zv-hero::after,.zv-radar,.zv-ripple{display:none}
  html.zv-motion .zv-rv{opacity:1;transform:none}
  html .zv-hero h1 mark{-webkit-text-fill-color:#2DD4BF}
}