/* Background com gradiente */
body {
    background: linear-gradient(175.75deg, #0C2AA0 22.42%, #0D1A32 101.3%);
    background-size: 100% 100%;
    background-attachment: fixed;
    position: relative;
    overflow-x: hidden;
  }
  
  /* Classes personalizadas para larguras maiores */
  .max-w-8xl {
    max-width: 88rem; /* 1408px */
  }
  
  .max-w-10xl {
    max-width: 112rem; /* 1792px */
  }
  
  /* Container para animação das estrelas */
  .stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    pointer-events: none;
    overflow: hidden;
  }
  
  /* Animação das estrelas */
  .stars-animation {
    position: relative;
    width: 100%;
    height: 100%;
    background: url('./images/stars_animation.svg') repeat-y;
    background-size: 50% cover;
    background-position: bottom 100%;
    animation: moveStars var(--animation-duration, 8s) linear infinite;
  }
  
  /* Pseudo-elemento para criar continuidade */
  .stars-animation::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background: url('./images/stars_animation.svg') repeat-y;
    background-size: 50% cover;
    background-position: bottom 100%;
  }
  
  /* Keyframes para animação infinita contínua */
  @keyframes moveStars {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0%);
    }
  }
  
  /* Animação de flutuação do astronauta */
  .float-animation {
    animation: float 3s ease-in-out infinite;
  }
  
  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-20px);
    }
  }
  
  /* Estilos para os cards com blur mais consistente */
  .card-blur {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8.9px);
    -webkit-backdrop-filter: blur(8.9px);
    will-change: backdrop-filter;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Força a aceleração de hardware */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Previne que o blur suma durante resize */
    isolation: isolate;
  }
  
  /* Fallback para navegadores que não suportam backdrop-filter */
  @supports not (backdrop-filter: blur(8.9px)) {
    .card-blur {
      background: rgba(0, 0, 0, 0.4);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
  
  /* ondas do rodapé com imagem */
  .waves:before{
    content:"";
    position:absolute; 
    inset:auto 0 0 0; 
    height: calc(100% + 50%);
    background: url('./images/bottom.svg') repeat-x;
    background-size: auto 100%;
    background-position: bottom center;
    background-repeat: repeat-x;
    z-index: -1;
    /* Suavizar as bordas da repetição */
    mask: linear-gradient(to right, black 0%, black 100%);
    -webkit-mask: linear-gradient(to right, black 0%, black 100%);
  }