#main-header {
    position: fixed;
    top: 0;
    width: 100%;

    & .block {
        & > .glass-backdrop {
            background-color: transparent;
            backdrop-filter: none;
        }

        & .content {
            color: var(--wp--preset--color--base);
        }
    }
}

:is(.scroll-down,.scroll-up) {
    #main-header {
        & .block {
            & > .glass-backdrop {
                background-color: var(--wp--preset--color--contrast-alpha-50);
                backdrop-filter: blur(10px);
            }
        }
    }
}

.background-light {
  --mouse-x: 50%;
  --mouse-y: 50%;
  position: relative;
  overflow: hidden;
}

.background-light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(63, 185, 80, 0.25), transparent 60%);
  opacity: 0;
  transform: scale(1);
  transform-origin: center;
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* Activa opacidad y animación de pulso */
.background-light.active::before {
  opacity: 1;
  animation: pulse-light .5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Pulso suave con escala y opacidad */
@keyframes pulse-light {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.title-section {
  margin-bottom: 32px;
}