/* From Uiverse.io by Cobp */
 .container-cards-ticket-passagem {
     perspective: 1000px;
 }

 .card-ticket-passagem {
     position: relative;
     height: 300px;
     width: 600px;
     display: flex;
     color: #2d2d2d;
     background-color: #ffffff;
     border-radius: 1rem;
     transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.25);
     z-index: 10;
     gap: 1rem;
     animation: animation-card-passagem 10s infinite;
     overflow: hidden;

     &:hover {
         animation-play-state: paused;
         transform: translateY(-30px);

         & .content-ticket-passagem::after,
         & .content-ticket-passagem::before,
         & .container-icons-passsagem {
             animation-play-state: paused;
         }
     }
 }

 .separator-passagem {
     position: absolute;
     top: 0;
     left: 50px;
     width: 16px;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     z-index: 10;

     & .span-lines {
         position: relative;
         display: flex;
         height: 100%;
         border-left: 2px dashed #e8e8e8;

         &::after {
             content: "";
             position: absolute;
             top: -8px;
             left: 50%;
             transform: translateX(-50%);
             width: 16px;
             height: 16px;
             border-radius: 16px;
             background-color: #e8e8e8;
         }

         &::before {
             content: "";
             position: absolute;
             bottom: -8px;
             left: 50%;
             transform: translateX(-50%);
             width: 16px;
             height: 16px;
             border-radius: 1rem;
             background-color: #e8e8e8;
         }
     }
 }

 .content-ticket-passagem {
     position: relative;
     justify-content: space-between;
     width: 100%;
     display: flex;

     &::after {
         content: "";
         position: absolute;
         top: 0;
         right: 0;
         background-image: linear-gradient(90deg,
                 rgba(0, 0, 0, 0),
                 rgba(0, 0, 0, 0.8));
         transform: translateX(200px) scale(1.5);
         filter: blur(10px);
         width: 200px;
         height: 100%;
         animation: shadow-card-passagem 10s infinite;
     }

     &::before {
         content: "";
         position: absolute;
         top: 0;
         left: -100px;
         background-image: linear-gradient(90deg,
                 rgba(0, 0, 0, 0),
                 #ffffff,
                 rgba(0, 0, 0, 0));
         transform: translateX(-100px) scale(1.5) rotate(20deg);
         width: 80px;
         height: 100%;
         animation: light-card-passagem 10s infinite;
     }
 }

 .content-data-passagem {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     width: 100%;
     padding: 0.625rem 0.75rem;
     gap: 0.25rem;

     & .data-flex,
     & .data-flex-col {
         width: 100%;
         display: flex;
         justify-content: space-between;
         gap: 0.25rem;
     }

     & .data-flex-col {
         padding-bottom: 0.25rem;
         flex-direction: column;
     }
 }

 .data-passagem {
     font-size: 10px;
     line-height: 12px;

     & .title {
         color: #aeaeae;
     }

     & .subtitle {
         font-weight: 500;
         color: #212121;
     }
 }

 .destination-passagem {
     display: flex;
     align-items: center;
     justify-content: space-between;

     & .dest {
         display: flex;
         flex-direction: column;

         & .country {
             font-size: 16px;
             line-height: 1;
             color: #aeaeae;
         }

         & .acronym {
             font-weight: 700;
             color: #2d2d2d;
             font-size: 1.8rem;
         }

         & .hour {
             font-size: 14px;
             line-height: 10px;
             display: flex;
             align-items: center;
             gap: 4px;
             color: #2d2d2d;
         }
     }
 }

 .container-icons-passsagem {
     width: fit-content;
     padding: 0.625rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     animation: color-card-passagem 10s infinite;
     z-index: -1;

     & .icon {
         color: #ffffff;
     }
 }

 @keyframes animation-card-passagem {
     0% {
         transform: translateZ(0px);
     }

     25% {
         transform: translateX(-10px) rotateY(-20deg);
     }

     75% {
         transform: translateX(10px) rotateY(20deg);
     }

     100% {
         transform: translateZ(0px);
     }
 }

 @keyframes light-card-passagem {
     25% {
         transform: translateX(450px) scale(1.5) rotate(25deg);
     }

     50% {
         transform: translateX(-100px) scale(1.5) rotate(25deg);
     }
 }

 @keyframes shadow-card-passagem {
     35% {
         transform: translateX(200px) scale(1.5);
     }

     75% {
         transform: translateX(0px) scale(1.5);
     }
 }

 @keyframes color-card-passagem {
     0% {
         background-color: #ffbd44;
     }

     10% {
         background-color: #fb6902;
     }

     15%,
     25% {
         background-color: #ff4141;
     }

     35% {
         background-color: #fb6902;
     }

     40% {
         background-color: #ffbd44;
     }

     50% {
         background-color: #fb6902;
     }

     55%,
     75% {
         background-color: #ff4141;
     }

     75% {
         background-color: #fb6902;
     }

     100% {
         background-color: #ffbd44;
     }
 }