/* Custom CSS for gradient animation */
.gradient-button {
    background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab,#23d7ab);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}

.gradient-button-login {
    background: linear-gradient(90deg, #c2234b, #6c19f1, #23a6d5, #2335d5,#23d7ab);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}

/* .gradient-button-login:hover {
    background: linear-gradient(90deg, #2e23c2, #353499, #23a6d5, #2335d5,#23d7ab);
    background-size: 400% 400%;
    animation: gradient 30s ease infinite;
} */


/* .gradient-button-sel:hover {
    background: linear-gradient(45deg, #1856a8, #1b53eb, #2352d5, #287ef0,#2362d7);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
} */

.gradient-button-sel:hover {
    background: linear-gradient(45deg, rgb(30, 104, 189), #295deb, #124e75, #288ff0,#2362d7);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}

.gradient-button-sel-lighter:hover {
    background: linear-gradient(45deg, rgb(118, 198, 235), #2dcaf1, #ee2270, #edf028,#63ece1);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}

.gradient-button-v {
    background: linear-gradient(90deg, #ee7752, #e73e7c, #2336d5, #23d5bb,#2336d5);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}

.gradient-button-pros {
    background: linear-gradient(90deg,  #3d6ef5, #4eaaf5, #166ef1, #000000);
    background-size: 400% 400%;
    animation: gradient 20s ease infinite;
}




.gradient-button-hr {
    background: linear-gradient(30deg,  #3d6ef5, #67baff, #166ef1, #000000);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
}
/* 

.gradient-button-hr {
    background: linear-gradient(30deg, #1a80df, #75d7f5, #7aa9f0, #2385d5,#235bd5);
    background-size: 400% 400%;
    animation: gradient 20s ease infinite;
} */


@keyframes gradient {
    0% {
        background-position: 0% 100%;
    }

    40% {
        background-position: 70% 40%;
    }

    60% {
        background-position: 0% 75%;
    }
    80% {
        background-position: 100% 50%;
    }
    80% {
        background-position: 60% 20%;
    }
    100% {
        background-position: 0% 40%;
    }

}







/* Success Message Animation - keeping the gradient effect */
.gradient-success {
    background: linear-gradient(
        90deg,
        rgb(74, 222, 128),  /* green-400 */
        rgb(34, 197, 94),   /* green-500 */
        rgb(74, 222, 128)   /* green-400 */
    );
    background-size: 200% 100%;
    animation: gradientMove 5s ease 1;
    isolation: isolate;
    overflow: hidden;
}
.gradient-success::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: inherit;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.2) 0%,
        transparent 70%
    );
    animation: successBreathe 2s ease-in-out 1;
    pointer-events: none;
}

/* Error Message Animation - new pulsing effect */
.gradient-error {
    background-color: rgb(220, 38, 38); /* red-600 base color */
    animation: errorPulse 1.2s ease-in-out 3;
    isolation: isolate;
    overflow: hidden;
}

/* Warning Message Animation */
.gradient-warning {
    background: linear-gradient(
        90deg,
        rgb(251, 146, 60),  /* orange-400 */
        rgb(249, 115, 22),  /* orange-500 */
        rgb(251, 146, 60)   /* orange-400 */
    );
    background-size: 200% 100%;
    animation: gradientMove 3s ease 3;
    isolation: isolate;
    overflow: hidden;
}
.gradient-warning::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: inherit;
    background: radial-gradient(
        circle at center,
        rgba(255, 255, 255, 0.25) 0%,
        transparent 70%
    );
    animation: warningBreathe 2.5s ease-in-out 5;
    pointer-events: none;
}

/* Animations */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes errorPulse {
    0% { background-color: rgb(220, 38, 38); }  /* red-600 */
    50% { background-color: rgb(185, 28, 28); } /* red-700 */
    100% { background-color: rgb(220, 38, 38); }  /* red-600 */
}

@keyframes successBreathe {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes warningBreathe {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}




.animated-gradient-background {
    background: linear-gradient(
        90deg,
        rgb(99, 102, 241),    /* indigo-500 */
        rgb(129, 140, 248),   /* indigo-400 */
        rgb(168, 85, 247),    /* purple-500 */
        rgb(147, 51, 234),    /* purple-600 */
        rgb(99, 102, 241)     /* indigo-500 */
    );
    background-size: 200% 200%;
    animation: gradientMoveComplex 5s ease infinite;
}

@keyframes gradientMoveComplex {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    30% {
        background-position: 100% 50%;
    }
    /* Start vertical movement */
    35% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    55% {
        background-position: 100% 100%;
    }
    /* Back to horizontal */
    60% {
        background-position: 0% 100%;
    }
    85% {
        background-position: 100% 100%;
    }
    90% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Optional hover state animation pause */
button:hover .animated-gradient-background {
    animation-play-state: paused;
}

/* Optional active state */
button:active .animated-gradient-background {
    opacity: 0.9;
}

/* Optional focus styles */
button:focus {
    outline: none;
    ring-2 ring-offset-2 ring-indigo-500;
}

/* Disabled state */
button:disabled .animated-gradient-background {
    opacity: 0.7;
}




@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.animated-section {
    position: relative;
    padding: 2.5rem 0;
    margin: 1.5rem 0;
    overflow: hidden;
    text-align: center;
    color: white;
    background: fixed;
    background-size: cover;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    border-color: rgb(186 230 253);
    background: linear-gradient(to right, rgb(14 165 233), rgb(56 189 248), rgb(14 165 233));
    border-radius: 0.75rem;
}

.content-wrapper {
    position: relative;
    z-index: 10;
    max-width: 70rem;
    margin: 0 auto;
}

.background-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.out-top {
    animation: rotate 20s linear infinite;
    transform-origin: 13px 25px;
    fill: rgb(147 51 234);
}

.in-top {
    animation: rotate 10s linear infinite;
    transform-origin: 13px 25px;
    fill: rgb(219 39 119);
}

.out-bottom {
    animation: rotate 25s linear infinite;
    transform-origin: 84px 93px;
    fill: rgb(238, 28, 63);
    /* fill: rgb(238, 217, 28); */

}

.in-bottom {
    animation: rotate 15s linear infinite;
    transform-origin: 88px 90px;
    fill: rgb(25, 151, 224);
}


/* .out-bottom {
    animation: rotate 25s linear infinite;
    transform-origin: 84px 93px;
    fill: rgb(238, 217, 28);
}

.in-bottom {
    animation: rotate 15s linear infinite;
    transform-origin: 88px 88px;
    fill: rgb(25, 151, 224);
} *






body {
  width: 100cqw;
  min-height: 100cqh;
  display: flex;
  place-content: center;
  place-items: flex-start center;
  background: var(--bg);
  font-family: Inter, sans-serif;

  --stripe-color: #000;
  --bg: var(--stripe-color);
  --maincolor: var(--bg);
}

/*custom*/

@keyframes smoothBg {
    from {
      background-position: 50% 50%, 50% 50%;
    }
    to {
      background-position: 350% 50%, 350% 50%;
    }
  }
  
  .rays_wrapper_section {
    display: flex;
    place-content: center;
    place-items: flex-start center;
    background: var(--bg);
    --stripe-color: #000;
    --bg: var(--stripe-color);
    --maincolor: var(--bg);
    width: 100%;
    /* height: auto; */
    position: relative;
  
  }
  
  .rays_section {
    width: 100%;
    /* height: 100%; */
    /* min-height: 100vh; */
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    --stripes: repeating-linear-gradient(
      100deg,
      var(--stripe-color) 0%,
      var(--stripe-color) 7%,
      transparent 10%,
      transparent 12%,
      var(--stripe-color) 16%
    );
  
    --rainbow: repeating-linear-gradient(
      100deg,
      #60a5fa 10%,
      #e879f9 15%,
      #60a5fa 20%,
      #5eead4 25%,
      #60a5fa 30%
    );
    background-image: var(--stripes), var(--rainbow);
    background-size: 300%, 200%;
    background-position: 50% 50%, 50% 50%;
  
    filter: blur(10px) invert(100%);
  
    mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--stripes), var(--rainbow);
      background-size: 200%, 100%;
      animation: smoothBg 60s linear infinite;
      background-attachment: fixed;
      mix-blend-mode: difference;
    }
  }
  
  
  .rays_section,
  .rays_section::after {
    filter: blur(10px) opacity(50%) saturate(200%);
  }
  
  .rays_content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    place-content: center;
    place-items: center;
    flex-flow: column;
    gap: 4.5%;
    text-align: center;
    mix-blend-mode: difference;
    -webbkit-mix-blend-mode: difference;
    filter: invert(1);
  }
  
  .h1--scalingSize {
    font-size: calc(1rem - -5vw);
    position: relative;
  }