/**
 * Octopus CyberSecurity — Background System
 * Grid, network, ghost icons, hex, radar. Enterprise SOC/NOC aesthetic.
 */

@keyframes octopus-bg-shift{
  0%{background-position:0% 50%;}
  25%{background-position:100% 20%;}
  50%{background-position:80% 100%;}
  75%{background-position:20% 0%;}
  100%{background-position:0% 50%;}
}

/* Seções azuis escuras — base compartilhada */
.octopus-blue-bg{
  position:relative;
  overflow:hidden;
}
.octopus-blue-bg.octopus-blue-bg--shift{
  background:linear-gradient(125deg,#020616 0%,#06102e 25%,#0d1f5c 50%,#06102e 75%,#020616 100%);
  background-size:300% 300%;
  animation:octopus-bg-shift 12s ease infinite;
}
.octopus-blue-bg.octopus-blue-bg--alt{
  background:linear-gradient(135deg,#0a0f2e 0%,#0d1f5c 50%,#06102e 100%);
}
.octopus-blue-bg.octopus-blue-bg--deep{
  background:linear-gradient(160deg,#02041e 0%,#06092e 60%,#090d40 100%);
}
.octopus-blue-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:30px 30px;
  pointer-events:none;
  z-index:2;
}
.octopus-blue-bg > :not(.hero-fx){
  position:relative;
  z-index:3;
}

/* Camada FX */
.hero-fx{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  isolation:isolate;
}
.hero-fx .hero-bg-orb{z-index:0;}

.hero-title-glow{
  position:absolute;
  top:38%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(720px,90vw);
  height:min(420px,50vh);
  background:radial-gradient(ellipse at center,rgba(63,240,255,.09) 0%,rgba(55,48,224,.06) 40%,transparent 70%);
  z-index:1;
  pointer-events:none;
}
.hero-grid-bg{
  position:absolute;
  inset:0;
  z-index:2;
  background-image:
    linear-gradient(rgba(63,240,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,240,255,.045) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 75% at 50% 40%,#000 8%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 40%,#000 8%,transparent 78%);
}
.hero-network-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
}
.hero-scan{
  position:absolute;
  left:0;
  right:0;
  height:1px;
  top:32%;
  z-index:7;
  background:linear-gradient(90deg,transparent,rgba(63,240,255,.28),transparent);
  box-shadow:0 0 28px rgba(63,240,255,.15);
  animation:hero-scan-move 9s ease-in-out infinite;
  opacity:.5;
}
@keyframes hero-scan-move{
  0%,100%{transform:translateY(-100px);opacity:0;}
  12%{opacity:.45;}
  55%{transform:translateY(320px);opacity:.3;}
  88%{opacity:0;}
}
.hero-radar{
  position:absolute;
  border-radius:50%;
  z-index:5;
  border:1px solid rgba(63,240,255,.12);
}
.hero-radar--bl{bottom:6%;left:1%;width:min(300px,38vw);height:min(300px,38vw);}
.hero-radar--tr{top:10%;right:2%;width:min(180px,24vw);height:min(180px,24vw);}
.hero-radar::before,.hero-radar::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(63,240,255,.18);
  animation:radar-ping 4.5s ease-out infinite;
}
.hero-radar::after{animation-delay:2.25s;}
@keyframes radar-ping{
  0%{transform:scale(.3);opacity:.55;}
  100%{transform:scale(1.12);opacity:0;}
}
.hero-hex--center{
  position:absolute;
  width:min(500px,68vw);
  height:min(500px,68vw);
  z-index:4;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  opacity:.45;
  animation:hex-drift 22s ease-in-out infinite;
}
@keyframes hex-drift{
  0%,100%{transform:translate(-50%,-50%) rotate(0deg);}
  50%{transform:translate(-50%,-50%) rotate(6deg);}
}
.hero-ghost-icons{position:absolute;inset:0;z-index:6;}
.ghost-icon{
  position:absolute;
  color:rgba(63,240,255,1);
  opacity:.1;
  stroke-width:1.2;
  will-change:transform;
}
.ghost-icon svg{width:100%;height:100%;}
.gi-1{top:12%;left:5%;width:clamp(52px,7vw,88px);height:clamp(52px,7vw,88px);animation:ghost-drift-a 7s ease-in-out infinite;}
.gi-2{top:16%;right:6%;width:clamp(60px,8vw,96px);height:clamp(60px,8vw,96px);animation:ghost-drift-b 8.5s ease-in-out infinite;animation-delay:-2s;}
.gi-3{bottom:30%;left:3%;width:clamp(68px,9vw,100px);height:clamp(68px,9vw,100px);animation:ghost-drift-c 9s ease-in-out infinite;animation-delay:-4s;}
.gi-4{bottom:24%;right:4%;width:clamp(56px,7.5vw,90px);height:clamp(56px,7.5vw,90px);animation:ghost-drift-d 7.5s ease-in-out infinite;animation-delay:-1s;}
.gi-5{top:40%;left:1.5%;width:48px;height:48px;opacity:.05;animation:ghost-drift-b 8s ease-in-out infinite;animation-delay:-3s;}
.gi-6{top:46%;right:2%;width:44px;height:44px;opacity:.06;animation:ghost-drift-a 9.5s ease-in-out infinite;animation-delay:-5s;}
.gi-7{top:26%;left:16%;width:40px;height:40px;opacity:.05;animation:ghost-drift-d 8.2s ease-in-out infinite;animation-delay:-2.5s;}
.gi-8{bottom:38%;right:14%;width:42px;height:42px;opacity:.06;animation:ghost-drift-c 7.8s ease-in-out infinite;animation-delay:-1.5s;}
.gi-9{top:8%;left:22%;width:36px;height:36px;opacity:.05;animation:ghost-drift-a 10s ease-in-out infinite;animation-delay:-3.5s;}
.gi-10{bottom:18%;right:20%;width:38px;height:38px;opacity:.05;animation:ghost-drift-b 8.8s ease-in-out infinite;animation-delay:-4.5s;}
@keyframes ghost-drift-a{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  25%{transform:translate(22px,-28px) rotate(5deg);}
  50%{transform:translate(-16px,-42px) rotate(-4deg);}
  75%{transform:translate(-24px,-12px) rotate(3deg);}
}
@keyframes ghost-drift-b{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1);}
  33%{transform:translate(-28px,20px) rotate(-6deg) scale(1.05);}
  66%{transform:translate(20px,-34px) rotate(5deg) scale(.97);}
}
@keyframes ghost-drift-c{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  20%{transform:translate(14px,26px) rotate(4deg);}
  45%{transform:translate(-22px,10px) rotate(-5deg);}
  70%{transform:translate(18px,-30px) rotate(3deg);}
}
@keyframes ghost-drift-d{
  0%,100%{transform:translate(0,0) rotate(0deg);}
  30%{transform:translate(-20px,-24px) rotate(-4deg);}
  60%{transform:translate(26px,-18px) rotate(6deg);}
  85%{transform:translate(10px,22px) rotate(-3deg);}
}
.hero-bg-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;}
.orb1{width:640px;height:640px;background:rgba(55,48,224,.28);top:-180px;left:-180px;}
.orb2{width:480px;height:480px;background:rgba(55,48,224,.14);bottom:-120px;right:-120px;}
.orb3{width:360px;height:360px;background:rgba(63,240,255,.055);top:30%;left:8%;}

/* Variante compacta — CTAs, seções menores */
.hero-fx--compact .hero-scan{display:none;}
.hero-fx--compact .hero-radar--tr{display:none;}
.hero-fx--compact .hero-hex--center{width:min(320px,55vw);height:min(320px,55vw);opacity:.3;}
.hero-fx--compact .ghost-icon{opacity:.07;}
.hero-fx--compact .gi-5,.hero-fx--compact .gi-6,.hero-fx--compact .gi-7,
.hero-fx--compact .gi-8,.hero-fx--compact .gi-9,.hero-fx--compact .gi-10{display:none;}
.hero-fx--compact .orb1{width:420px;height:420px;}
.hero-fx--compact .orb2{width:320px;height:320px;}
.hero-fx--compact .orb3{display:none;}

/* Variante sutil — sobre imagem de fundo */
.hero-fx--subtle{opacity:.55;}
.hero-fx--subtle .hero-scan{display:none;}

@media (prefers-reduced-motion:reduce){
  .octopus-blue-bg.octopus-blue-bg--shift{animation:none;}
  .hero-scan,.hero-radar::before,.hero-radar::after,.hero-hex--center,.ghost-icon{display:none;}
}