/* PFBOX Homepage Animation Pack v1.1
   Additive only: no Go/CMS/database changes. */

.pf-hero{isolation:isolate;perspective:1200px}
.pf-hero .wrap,.pf-hero .hero-values{position:relative;z-index:5}

/* Dynamic canvas injected by animation.js */
#pf-network-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:.72;mix-blend-mode:screen}

/* Mouse-follow glow */
.pf-hero::after{content:"";position:absolute;z-index:2;width:520px;height:520px;border-radius:50%;left:var(--mouse-x,70%);top:var(--mouse-y,35%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(25,143,255,.19) 0,rgba(32,230,178,.09) 30%,transparent 68%);filter:blur(5px);pointer-events:none;transition:left .12s linear,top .12s linear}

/* Slow living grid */
.pf-hero .cyber-grid-bg{animation:pfGridDrift 18s linear infinite;will-change:transform;background-size:48px 48px}
@keyframes pfGridDrift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(48px,48px,0)}}

/* Extra scanning beam */
.pf-hero::before{content:"";position:absolute;z-index:3;left:-25%;top:0;width:28%;height:100%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(88,184,255,.04),rgba(32,230,178,.12),rgba(88,184,255,.04),transparent);transform:skewX(-16deg);animation:pfScanBeam 8.5s ease-in-out infinite}
@keyframes pfScanBeam{0%,12%{left:-35%;opacity:0}22%{opacity:.85}68%{opacity:.5}82%,100%{left:125%;opacity:0}}

/* Premium hero entrance */
.pf-copy>*{opacity:0;transform:translateY(18px);animation:pfHeroEnter .75s cubic-bezier(.2,.8,.2,1) forwards}
.pf-copy>*:nth-child(1){animation-delay:.05s}.pf-copy>*:nth-child(2){animation-delay:.13s}.pf-copy>*:nth-child(3){animation-delay:.21s}.pf-copy>*:nth-child(4){animation-delay:.29s}.pf-copy>*:nth-child(5){animation-delay:.37s}.pf-copy>*:nth-child(6){animation-delay:.45s}
@keyframes pfHeroEnter{to{opacity:1;transform:translateY(0)}}

/* Console floating/parallax layer */
.pf-console{transform:translate3d(var(--console-x,0),var(--console-y,0),0);transition:transform .18s ease-out;will-change:transform}
.network-console{animation:pfConsoleFloat 5.4s ease-in-out infinite}
@keyframes pfConsoleFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}

/* Rotating subtle halo rings */
.console-halo::before,.console-halo::after{content:"";position:absolute;inset:10%;border-radius:50%;border:1px solid rgba(41,177,255,.18);animation:pfHaloSpin 16s linear infinite}
.console-halo::after{inset:22%;border-style:dashed;border-color:rgba(32,230,178,.22);animation-duration:11s;animation-direction:reverse}
@keyframes pfHaloSpin{to{transform:rotate(360deg)}}

/* WAN lights breathe */
.wan-lines i,.console-top span i,.live-dot{animation:pfStatusPulse 1.8s ease-in-out infinite}
@keyframes pfStatusPulse{0%,100%{filter:brightness(1);opacity:1}50%{filter:brightness(1.55);opacity:.62}}

/* Animated shine on main buttons */
.cyber-primary{position:relative;overflow:hidden;isolation:isolate}
.cyber-primary::after{content:"";position:absolute;z-index:-1;top:-70%;left:-40%;width:26%;height:240%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:rotate(20deg);animation:pfButtonShine 4.8s ease-in-out infinite}
@keyframes pfButtonShine{0%,55%{left:-45%;opacity:0}65%{opacity:.75}82%,100%{left:130%;opacity:0}}

/* Packet stream variation */
.packet-stream::after{content:"";position:absolute;right:15%;top:-3px;width:7px;height:7px;border-radius:50%;background:#58c6ff;box-shadow:0 0 12px #32e6b2,0 0 25px rgba(31,148,255,.9);animation:pfPacketDot 3.8s linear infinite}
.stream-b::after{animation-delay:1.1s}
@keyframes pfPacketDot{0%{right:100%;opacity:0}12%{opacity:1}88%{opacity:1}100%{right:0;opacity:0}}

/* Hover energy for feature cards */
.pf-service-grid a,.pf-values a,.premium-card{transform-style:preserve-3d;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.pf-service-grid a:hover,.premium-card:hover{transform:translateY(-7px) scale(1.012)}
.pf-values a:hover{transform:translateY(-4px)}

/* JS reveal helper */
.pf-anim-reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.pf-anim-reveal.is-visible{opacity:1;transform:none}

/* Tiny animated data sweep in console graph */
.traffic-graph{position:relative}
.traffic-graph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(80,197,255,.08) 44%,rgba(32,230,178,.24) 50%,rgba(80,197,255,.08) 56%,transparent 100%);transform:translateX(-120%);animation:pfGraphSweep 4.2s linear infinite;pointer-events:none}
@keyframes pfGraphSweep{to{transform:translateX(120%)}}

@media (prefers-reduced-motion: reduce){
  #pf-network-canvas{display:none}
  .pf-hero::before,.pf-hero::after,.pf-hero .cyber-grid-bg,.network-console,.console-halo::before,.console-halo::after,.wan-lines i,.console-top span i,.live-dot,.cyber-primary::after,.packet-stream::after,.traffic-graph::after{animation:none!important;transition:none!important}
  .pf-copy>*{opacity:1;transform:none;animation:none!important}
  .pf-anim-reveal{opacity:1;transform:none;transition:none}
}

@media(max-width:860px){
  #pf-network-canvas{opacity:.42}
  .pf-hero::after{width:360px;height:360px}
}