/* CSS GLOBAL */

.hero { background-size: cover; background-position: center;}

header {
    transition: all 0.3s ease-in-out;
  }

  header.header-scrolled {
    background-color: rgba(30, 58, 138, 0.5) !important;
    backdrop-filter: blur(4px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .floating-words {
    position: absolute;
    width: 20%;
    min-width: 20%;
    left: 68%;
    transform: translateX(-50%);
    z-index: 21;
    top: 10%;
    transform: translateY(-10%);
  }

  .coordinate-marker {
    position: absolute;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    top: 50%;
    left: 68%;
    transform: translate(-50%, -50%);
    z-index: 20;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    display: none;
  }

  .coordinate-marker::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 0%;
    width: 30px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.5);
  }

  .word {
    position: absolute;
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0;
    transform: scale(0.8);
    color: white;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    min-width: fit-content;
    left: 0;
  }

  .word::before {
    content: '';
    position: absolute;
    left: -30px;
    width: 30px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.5);
  }

  .word::after {
    content: '';
    position: absolute;
    left: -40px;
    top: 70%;
    width: 15px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.5);
    transform: rotate(-45deg);
    transform-origin: left center;
  }

  .word .circle {
    content: '';
    position: absolute;
    left: -43px;
    top: 77%;
    width: 14px;
    height: 14px;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .word .circle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .word-1 { animation: float1 4s ease-in-out 0s infinite; }
  .word-2 { animation: float2 4s ease-in-out 1s infinite; }
  .word-3 { animation: float3 4s ease-in-out 2s infinite; }
  .word-4 { animation: float4 4s ease-in-out 3s infinite; }
  .word-5 { animation: float5 4s ease-in-out 4s infinite; }

  @keyframes float1 {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    20% {
      opacity: 1;
      transform: scale(1);
    }
    80% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0.8);
    }
  }

  @keyframes float2 {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    20% {
      opacity: 1;
      transform: scale(1);
    }
    80% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0.8);
    }
  }

  @keyframes float3 {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    20% {
      opacity: 1;
      transform: scale(1);
    }
    80% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0.8);
    }
  }

  @keyframes float4 {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    20% {
      opacity: 1;
      transform: scale(1);
    }
    80% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0.8);
    }
  }

  @keyframes float5 {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    20% {
      opacity: 1;
      transform: scale(1);
    }
    80% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0.8);
    }
  }

  .wind-speed {
    font-family: monospace;
    font-weight: bold;
    margin-left: 0;
  }

  .login-button {
    background-color: #095ca3;
  }

  .login-button:hover {
    background-color: #074a82;
  }

  .subtitle {
    color: #3b9ae6 !important;
  }

  .wave-top, .wave-bottom {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
  }

  .wave-top {position: absolute; top: 0; left: 0;}

  .wave-bottom {
    transform: rotate(180deg);
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .wave-top svg, .wave-bottom svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 70px;
  }

  .wave-top path {
    fill: #fff;
  }

  .wave-bottom path {
    fill: #fff;
  }
  .cta {
    background-image: url("../dist/images/bg-cta.jpg");
    background-size: cover;
    background-position:  center top;
    background-attachment: fixed;
  }
  .cta h2 {
    color: #ffffff;
  }
  .solucao img {
    width: auto !important;
    display: block !important;
  }

  .sistema {
    background-image: url("../dist/images/bg-waves.jpg");
    background-size: cover;
    background-position:  center top;
    background-attachment: fixed;
  }
  .noc {
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
    animation: shadowPulse 3s infinite;
  }
  
/* Animações */
@keyframes shadowPulse {
  0% {
    filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 0.7));
  }
  100% {
    filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
  }
}

.pulsing-shadow-box {
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
  animation: shadowPulse 3s infinite;
}

/* Animação para box-shadow pulsante */
@keyframes boxShadowPulse {
  0% {
    box-shadow: 0 0 5px 0 rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 20px 0 rgba(59, 130, 246, 0.7);
  }
  100% {
    box-shadow: 0 0 5px 0 rgba(59, 130, 246, 0.3);
  }
}

.pulsing-box-shadow {
  animation: boxShadowPulse 3s infinite;
}
.hori-0 { 
        left: 41px;
        top: 31.5%;
        width: 93%;
}
.vert-1 {    transform: rotate(270deg);
    left: -5px;
    top: 63.5%;
}
.vert-2 {    transform: rotate(90deg);
    right: -5px;
    top: 63.5%;
}
.grid_solucao .dashed-box {
    width: 3%;
    transform: rotate(180deg);
}

.grid_solucao .box { width: 22%;}

.pyramid-container {
    position: relative;
    overflow: hidden;
  }

  .pyramid-image {
    position: relative;
    transition: all 0.3s ease;
  }

  .pyramid-image:hover {
    filter: drop-shadow(0 0 15px #3b82f6);
  }

  .energy-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, #1e40af, transparent);
    opacity: 0.7;
    width: 100%;
  }

  .energy-line-1 {
    top: 5%;
    left: -100%;
    animation: energyFlow 3s infinite;
  }

  .energy-line-2 {
    top: 40%;
    left: -100%;
    animation: energyFlow 3s infinite 0.75s;
  }

  .energy-line-3 {
    top: 60%;
    left: -100%;
    animation: energyFlow 3s infinite 1.5s;
  }

  .energy-line-4 {
    top: 80%;
    left: -100%;
    animation: energyFlow 3s infinite 2.25s;
  }

  @keyframes energyFlow {
    0% {
      left: -100%;
      opacity: 0;
    }
    50% {
      opacity: 0.7;
    }
    100% {
      left: 100%;
      opacity: 0;
    }
  }

  .pyramid-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    animation: containerGlow 4s infinite;
    pointer-events: none;
  }

  @keyframes containerGlow {
    0%, 100% {
      opacity: 0.1;
    }
    50% {
      opacity: 0.3;
    }
  }
    @keyframes dash-animation {
      from {
        stroke-dashoffset: 0;
      }
      to {
        stroke-dashoffset: -12;
      }
    }

    .animated-border {
      animation: dash-animation 1s linear infinite;
    }

    @keyframes dash-animation-reverse {
      from {
        stroke-dashoffset: 0;
      }
      to {
        stroke-dashoffset: 12; /* Positivo para mover para a esquerda */
      }
    }

    .animated-line-reverse {
      animation: dash-animation-reverse 1s linear infinite;
    }
    .interface-container {
      position: relative;
      overflow: hidden;
    }

    .interface-glow {
      background: radial-gradient(circle at center, rgba(147, 197, 253, 0.15) 0%, transparent 70%);
      animation: interfaceGlow 4s infinite;
      pointer-events: none;
      transform: translateY(10%);
    }

    .wave-bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 1;
    }

    .wave {
      position: absolute;
      width: 200px;
      height: 200px;
      border: 2px solid rgba(147, 197, 253, 0.1);
      border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
      animation: wave-animation 8s linear infinite;
    }

    .wave:nth-child(2) {
      top: 30%;
      left: 60%;
      animation-delay: -2s;
      border-color: rgba(147, 197, 253, 0.15);
      animation-duration: 10s;
    }

    .wave:nth-child(3) {
      top: 60%;
      left: 30%;
      animation-delay: -4s;
      border-color: rgba(147, 197, 253, 0.1);
      animation-duration: 12s;
    }

    .wave:nth-child(4) {
      top: 20%;
      left: 20%;
      animation-delay: -6s;
      border-color: rgba(147, 197, 253, 0.05);
      animation-duration: 14s;
    }

    @keyframes wave-animation {
      0% {
        transform: rotate(0deg) scale(1);
      }
      50% {
        transform: rotate(180deg) scale(1.2);
      }
      100% {
        transform: rotate(360deg) scale(1);
      }
    }

    @keyframes interfaceGlow {
      0%, 100% {
        opacity: 0.3;
      }
      50% {
        opacity: 0.6;
      }
    }
    footer {
      background-color: #0a2d5b;
    }


    @media screen and (max-width: 768px) {
        .hero {
            height: 768px;
        }
        .hero video {
            }

            .desktop-video {
                display: none !important;
            }
            .mobile-video {
                display: block !important;
                object-position: left;
            }
            .floating-words {
                left:38% !important;
                transform: translateX(-50%);
                top: 39% !important;
            }
            .word-1 {
                top: 20% !important;
            }
            .word-2 {
                top: 29% !important;
            }
            .word-3 {
                top: 38% !important;
            }
            .word-4 {
                top: 45% !important;
            }       
            .word-5 {
                top: 52% !important;
            }
            .grid_solucao {gap: 0 !important;}

            .grid_solucao .box {
                width: 100% !important;
                margin-top: -46px;
            }
            .grid_solucao .dashed-box {
              width: 20%;
              transform: rotate(90deg);
              margin-top: -46px;
          }
          .noc-container {
            margin-bottom: 100px !important;
          }
          .hori-0 {
            display: none !important;
          }
          .vert-1 {
            top: 80%;
            left: 42%;
            width: 61px;
          }
          .vert-2 {
            display: none !important;
          }
    }