/* ---- BOUNCER FOR SPINNER ---- */
/* NOT WORKING AS DESIRED. I THINK ITS DUE TO DIV CONTAINMENT*/
@keyframes bounce {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: translateY(-20px) rotate(-15deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: translateY(-20px) rotate(15deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.bouncer {
    animation: bounce 1.75s infinite ease-in-out;
}

/* ---- END BOUNCER ---- */

/* ---- NEON FLICKER ---- */
@keyframes neonFlicker {
    0%, 100% {
        text-shadow: none;
        filter: brightness(1);
    }
    50% {
       text-shadow: 0 0 5px var(--hover-color), 0 0 10px var(--hover-color), 0 0 15px var(--hover-color), 0 0 20px var(--hover-color);
       filter: brightness(calc(var(--hover-brightness) * 1.5));
    }
}




.neon-flicker {
    animation: neonFlicker 6s infinite alternate;
}

/* ---- END NEON FLICKER ---- */

/* NEON EFFECT ON HOVER */

.neon-hover:hover {
    color: var(--stw-gray-5) !important;
    text-shadow: 0 0 5px var(--hover-color), 0 0 10px var(--hover-color), 0 0 15px var(--hover-color), 0 0 20px var(--hover-color) !important;
    filter: brightness(1) !important;
}

.neon-effect {
    color: var(--stw-gray-5) !important;
    text-shadow: 0 0 5px var(--hover-color), 0 0 10px var(--hover-color), 0 0 15px var(--hover-color), 0 0 20px var(--hover-color) !important;
    filter: brightness(1) !important;
}

/* END NEON HOVER EFFECT */


/* NEON EFFECT ON TEXT */

.neon-red {
    color: var(--stw-grey-color);
    text-shadow: 0 0 5px var(--stw-red-color), 0 0 10px var(--stw-red-color), 0 0 15px var(--stw-red-color), 0 0 20px var(--stw-red-color);
    filter: brightness(1);
}



.neon-border-b {
    border-bottom-width: 2px;
    box-shadow: 0 0 5px, 0 0 10px, 0 0 15px, 0 0 20px;
    filter: brightness(1);
}

.neon-green {
    color: var(--stw-grey-color);
    text-shadow: 0 0 5px var(--stw-green-color), 0 0 10px var(--stw-green-color), 0 0 15px var(--stw-green-color), 0 0 20px var(--stw-green-color);
    filter: brightness(1);
}



.neon-orange {
    color: var(--stw-orange-color);
    text-shadow: 0 0 5px var(--stw-orange-color), 0 0 10px var(--stw-orange-color), 0 0 15px var(--stw-orange-color), 0 0 20px var(--stw-orange-color);
    filter: brightness(1);
}

.neon-yellow {
    color: var(--stw-yellow-color);
    text-shadow: 0 0 5px var(--stw-yellow-color), 0 0 10px var(--stw-yellow-color), 0 0 15px var(--stw-yellow-color), 0 0 20px var(--stw-yellow-color);
    filter: brightness(1);
}

.neon-grey {
    color: var(--stw-grey-color);
    text-shadow: 0 0 5px var(--stw-grey-color), 0 0 10px var(--stw-grey-color), 0 0 15px var(--stw-grey-color), 0 0 20px var(--stw-grey-color);
    filter: brightness(1);
}


.neon-purple {
    color: var(--stw-grey-color);
    text-shadow: 0 0 5px var(--stw-purple-color), 0 0 10px var(--stw-purple-color), 0 0 15px var(--stw-purple-color), 0 0 20px var(--stw-purple-color);
    filter: brightness(1);
}

.neon-blue-border {
    border: 2px solid var(--stw-medium-light-blue-color);
    box-shadow: 0 0 5px var(--stw-medium-light-blue-color), 
                0 0 10px var(--stw-medium-light-blue-color), 
                0 0 15px var(--stw-medium-light-blue-color), 
                0 0 20px var(--stw-medium-light-blue-color);
}

.neon-border-red {
    border: 2px solid var(--stw-red-color);
    box-shadow: 0 0 5px var(--stw-red-color), 
                0 0 10px var(--stw-red-color), 
                0 0 15px var(--stw-red-color), 
                0 0 20px var(--stw-red-color);
}
.neon-gray {
    color: var(--stw-gray-2);
    text-shadow: 0 0 5px var(--stw-white-color), 0 0 10px var(--stw-white-color), 0 0 15px var(--stw-white-color), 0 0 20px var(--stw-white-color);
    filter: brightness(1);
}


.neon-border-green {
    border: 2px solid var(--stw-green-color);
    box-shadow: 0 0 5px var(--stw-green-color), 
                0 0 10px var(--stw-green-color), 
                0 0 15px var(--stw-green-color), 
                0 0 20px var(--stw-green-color);
}

/* NEON HOVERS */

.neon-red-hover {
    color: var(--stw-gray-3) !important;
}



.neon-red-hover:hover,
.neon-red-hover[aria-selected="true"] {
    color: var(--stw-gray-4);
    text-shadow: 0 0 5px var(--stw-red-color), 0 0 10px var(--stw-red-color), 0 0 15px var(--stw-red-color), 0 0 20px var(--stw-red-color);
    filter: brightness(1);
}








/* END NEON EFFECT */



/* BLINKER TEXT */

.blinker {
  position: relative;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 3px;
  z-index: 1;
  text-align: center;
  display: inline-block;
}

.blinker:before,
.blinker:after {
  display: block;
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0.8;
  text-align: center; /* Centrar el texto */
}

.blinker:before {
  animation: glitch-it 6s cubic-bezier(0.05, 0.46, 0.45, 0.94) both infinite;
  z-index: -1;
}

.blinker:after {
  animation: glitch-it 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
  color: var(--stw-purple-color);
  z-index: -2;
}



@keyframes glitch-it {
  0% {
    transform: translate(0);
  }
  5% {
    transform: translate(-1.5px, 1.5px);
  }
  10% {
    transform: translate(-1.5px, -1.5px);
  }
  15% {
    transform: translate(1.5px, 1.5px);
  }
  20% {
    transform: translate(1.5px, -1.5px);
  }
  to {
    transform: translate(0);
  }
}



.blinker-delay-1s:before,
.blinker-delay-1s:after {
  animation-delay: 1.75s;
}

.blinker-delay-2s:before,
.blinker-delay-2s:after {
  animation-delay: 3s;
}

.delay-2s:before,
.delay-2s:after {
  animation-delay: 2s;
}

.delay-4s:before,
.delay-4s:after {
  animation-delay: 4s;
}


/* NIGHT CLUB LIGHTS */

:root {
    --main-color: hsl(230, 40%, 80%);
    --shadow-color1: hsla(320, 100%, 50%, 0.2);
    --shadow-color2: hsla(320, 100%, 60%, 0.3);
    --shadow-color3: hsla(40, 100%, 60%, 0);
    --shadow-color4: hsla(200, 100%, 60%, 0);
}

.blue-lights {
  --main-color: hsl(196, 95%, 30%);
  --shadow-color1: hsla(210, 95%, 30%, 0.2);
  --shadow-color2: hsla(210, 95%, 40%, 0.3);
  --shadow-color3: hsla(210, 95%, 50%, 0);
  --shadow-color4: hsla(210, 95%, 60%, 0);
}

@keyframes night-lights {
  0% {
    color: var(--main-color);
    text-shadow:
      0 0 1em var(--shadow-color1),
      0 0 0.125em var(--shadow-color2),
      -1em -0.125em 0.5em var(--shadow-color3),
      1em 0.125em 0.5em var(--shadow-color4);
  }

  30% {
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em var(--shadow-color1),
      0 0 0.125em var(--shadow-color2),
      -0.5em -0.125em 0.25em var(--shadow-color3),
      0.5em 0.125em 0.25em var(--shadow-color4);
  }

  40% {
    color: hsl(230, 100%, 95%);
    text-shadow:
      0 0 1em var(--shadow-color1),
      0 0 0.125em hsla(320, 100%, 90%, 0.5),
      -0.25em -0.125em 0.125em var(--shadow-color3),
      0.25em 0.125em 0.125em var(--shadow-color4);
  }

  70% {
    color: hsl(230, 80%, 90%);
    text-shadow:
      0 0 1em var(--shadow-color1),
      0 0 0.125em var(--shadow-color2),
      0.5em -0.125em 0.25em var(--shadow-color3),
      -0.5em 0.125em 0.25em var(--shadow-color4);
  }

  100% {
    color: var(--main-color);
    text-shadow:
      0 0 1em var(--shadow-color1),
      0 0 0.125em var(--shadow-color2),
      1em -0.125em 0.5em var(--shadow-color3),
      -1em 0.125em 0.5em var(--shadow-color4);
  }
}


/* NIGHT LIGHTS END */



/* DIV BACKGROUND GRADIENT */

.gradient-background {
    backdrop-filter: blur(5px);
}

.cool-frame {

    border-radius: 5px;
    border: 1px solid rgb(30, 30, 30); !important;
}

.dropdown-frame {
    --frame-color: var(--stw-dark-grey-color);
    border-radius: 5px;
    box-shadow: 0 0 1px 1px var(--frame-color),
              0 0 10px var(--frame-color),
              inset 0 0 1px 1px var(--frame-color),
              inset 0 0 10px var(--frame-color);
    transition: box-shadow 0.1s ease-in-out;
}



/* Variantes de color para la clase cool-frame */

.cool-frame.blue {
    --frame-color: var(--stw-medium-light-blue-color);
}

.cool-frame.green {
    --frame-color: var(--stw-green-color);
}

.cool-frame.red {
    --frame-color: var(--stw-red-color);
}

.cool-frame.purple {
    --frame-color: var(--stw-purple-color);
}

.cool-frame.grey {
    --frame-color: var(--stw-grey-color);
}

/* END BLINKER EFFECT */

.dropdown-transition {
    transition: max-height 0.5s ease, opacity 0.5s ease;g
}


/* T-HEAD SECUENCIAL LIGHTING (FOR CALENDAR MONTHS) */

@keyframes lightUp {
    15% {
        color: var(--stw-grey-color);
        text-shadow: 0 0 5px var(--stw-dark-grey-color), 0 0 10px var(--stw-dark-grey-color), 0 0 15px var(--stw-dark-grey-color), 0 0 20px var(--stw-dark-grey-color);
        filter: brightness(0.75);
    }
}


.animated-header th:nth-child(1) {
    animation: lightUp 7s infinite;
}

.animated-header th:nth-child(2) {
    animation: lightUp 7s infinite 1s;
}

.animated-header th:nth-child(3) {
    animation: lightUp 7s infinite 2s;
}

.animated-header th:nth-child(4) {
    animation: lightUp 7s infinite 3s;
}

.animated-header th:nth-child(5) {
    animation: lightUp 7s infinite 4s;
}

.animated-header th:nth-child(6) {
    animation: lightUp 7s infinite 5s;
}

.animated-header th:nth-child(7) {
    animation: lightUp 7s infinite 6s;
}