/*============================================================================ itens declarations =============================================================================*/

/*========================================== BTTN CTA==========================================================*/
.shiny-button {
    width: 350px;
    height: 60px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txt-color--white-primary);
    background: var(--bg-purple--bttn--cta); 
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    cursor: pointer;
    overflow: hidden;
    transition: all 1s ease-in-out;
    will-change: transform;
    
    box-shadow: 0 0 15px 5px #A9FFFF; 
    animation: pulseShadow 2s infinite ease-in-out;
  }
  .shiny-button:hover {
    transform: scale(1.1);
    animation: none;
    box-shadow: 0 0 20px 2px #B39DFB70; 
  }
  .shiny-button:active {
    transform: scale(0.9);
  }
  /*========================================== HR AND SEPARATION ==========================================================*/
  .separation-hr_gradient--primary {
    width: 100vw;
    height: 2px;
    background: var(--linear-gradient--hr-primary);
    border: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 6;
  }
  .separation-hr_gradient--primary::after {
    content: "";
    width: 28px;
    height: 50px;
    position: absolute;
    z-index: 7;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("../../src/img/svg/svg-arrow-down.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0px 10px 30px #020617);
  }
  .separation-hr_gradient--secondary {
    width: 100vw;
    height: 2px;
    background: var(--linear-gradient--hr-secondary);
    border: none;
    margin: 0;
    padding: 0;
  }
  /*======================== scroll carousel ===========================*/
  .slider, 
  .slider2{
    width: 100%;
    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 10% 90%,
        transparent
    );
  }
  .slider .list, 
  .slider2 .list{
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;
  }
  .slider .list .item,
  .slider2 .list .item{
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    animation: autoRun 40s linear infinite;
    transition: filter 0.5s;
    animation-delay: calc( (40s / var(--quantity)) * (var(--position) - 1) - 40s)!important;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease-in-out;
    z-index: 1;
  }
  .slider .list .item img,
  .slider2 .list .item img{
    width: 100%;
  }
  .slider[reverse="true"] .item,
  .slider2[reverse="true"] .item{
    animation: reversePlay 40s linear infinite;
    transition: all 0.5s ease-in-out;
  }
  .slider[reverse="true"]:hover .item{
  animation-play-state: paused!important;
  filter: blur(1px) grayscale(1);
  }
  .slider[reverse="true"] .item:hover {
  filter:  grayscale(0);
  transition: all 0.5s ease-in-out;
  }
  .slider[reverse="true"] .item:hover{
  border-radius: 30px;
  transform: scale(1.1);
  transition: all 2s cubic-bezier(0,.75,.15,.93);
  }
  /*----------------------- itens carousel ---------------------*/
  .slider .list .item .img-carousel--archives-images,
  .slider2 .list .item .img-carousel--archives-images {
    width: clamp(106.25px, 9.152vw, 178px)!important;
    height: clamp(150px, 12.853vw, 250px)!important;
    border: 3px solid #CFD5E8;
    border-radius: 20px;
    transition: all 0.5s ease-in-out;
  }
  .slider .list .item .img-carousel--testimonials{
    width: clamp(200px, 14.396vw, 280px)!important;
    height: clamp(320px, 21.08vw, 410px)!important;
    border: 3px solid #CFD5E830;
    border-radius: 20px;
    transition: all 2s cubic-bezier(0,.75,.15,.93);
  }
  .img-carousel--members-carousel {
    width: 70px!important;
    height: 70px!important;
    border: 3px solid #CFD5E830;
    border-radius: 50%;
    transition: all 0.3s ease-in-out !important;
  }
  .slider .list .item .img-carousel--members{
    width: 75px!important;
    height: 75px!important;
    border: 3px solid #CFD5E830;
    border-radius: 50%;
    transition: all 0.3s ease-in-out !important;
  }
  .slider .item:hover .img-carousel--members, 
  .slider .list .item:hover .img-carousel--testimonials, 
  .slider .list .item:hover .img-carousel--archives-images,
  .slider .list .item:hover .img-carousel--members-carousel,
  .slider2 .list .item:hover .img-carousel--archives-images{
    border-color: #B39DFB;
  }
  /*----------------------- finals ---------------------*/
  /*======================== finals scroll carousel ===========================*/
  
  /*=========== INITIALS SCRAMBLE ==================*/
  .text-scramble-animation{ 
    color: var(--txt-color--purple-secondary);
  }
  .scramble{
    color: var(--txt-color--primary);
  }
  /*=========== FINALS SCRAMBLE ==================*/

  .dashed-style {
    display: flex;
    justify-content: space-evenly;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    opacity: 0.5;
  }
  .dashed {
    width: 1px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.2) 5px,
        transparent 5px,
        transparent
    );
    background-size: 100% 10px;
    position: relative;
  }

  /*======================== CIRCLE ANIMATION DECLARATIONS =================================*/
  .circle-background{
    width: clamp(1000px, 71.979vw, 1400px); 
    height: clamp(500px, 41.131vw, 800px); 
    border-radius: 50%;
    position: absolute; 
    background: radial-gradient(
        rgba(46, 76, 166, 1) 0%, 
        rgba(46, 76, 166, 0.8) 30%, 
        rgba(46, 76, 166, 0.6) 50%, 
        rgba(46, 76, 166, 0.4) 70%, 
        rgba(46, 76, 166, 0.0) 100%
    );
    filter: blur(140px); 
    animation: pulsar 15s ease-in-out infinite;
  }

  /*======================== light text hover mouse =================================*/
  .lightb{
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), #6F799D 20%, #6f799d1a 30%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: default;
  
  }
  
  /*======================== animation of entry and exit of elements =================================*/
  .botaodesativo{
    transition: 0.5s;
    transform: translatey(85px);
    opacity: 0;
    pointer-events: none;
  }
  
  .botaoativo{
    transition: 0.5s;
    transform: translatey(0px);
    opacity: 1;
    pointer-events: auto;
  }
  
  /*======================== faixa animada =================================*/
  .range-animation{
    display: flex;
    height: 50px;
    width: 120vw;
    align-items: center;
    background: var(--linear-gradient--hr-secondary);
    position: relative;
    z-index: 2;  
  }
  .range-animation .cont-range-animation{
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    background-color: var(--bg-color-gray--primary);
  }
  .range-animation .moove .div-range-animation{
    -webkit-animation: moove var(--speed) linear infinite;
    -moz-animation: moove var(--speed) linear infinite;
    -o-animation: moove var(--speed) linear infinite;
    animation: moove var(--speed) linear infinite;
  }
  .range-animation .div-range-animation ul{
    width: 100%;
    height: 100%;
    display: flex;
    gap: 20px;
    margin-left: 20px;
  }
  .range-animation .div-range-animation ul li{
    display: flex;
    width: auto;
    height: auto;
    gap: 20px;
  }
  .range-animation .div-range-animation ul li p{
    text-transform: uppercase;
    color: var(--txt-color--white-primary);
  }
  
  @keyframe moove{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
  }
  @-webkit-keyframes moove {
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
  }
  @-moz-keyframes moove {
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
  }
  @-o-keyframes moove {
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
  }
  @keyframes moove {
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
  }
  
/*============================================================================ itens declarations =============================================================================*/