/* custom.css */


.btn {
    width: 6.5em;
    height: 2.3em;
    margin: 0.5em;
    background: black;
    color: white;
    border: none;
    border-radius: 0.625em;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  
  .btn:hover {
    color: black;
  }
  
  .btn:after {
    content: "";
    background: white;
    position: absolute;
    z-index: -1;
    left: -20%;
    right: -20%;
    top: 0;
    bottom: 0;
    transform: skewX(-45deg) scale(0, 1);
    transition: all 0.5s;
  }
  
  .btn:hover:after {
    transform: skewX(-45deg) scale(1, 1);
  }

  .btn:active {
    transform: scale(0.95);
  }
  
/*smooth scroll*/

  

/*show*/
/* 自定义样式 custom.css */
.show-gif-section {
    /* background: linear-gradient(to right, #111, #222); */
    margin: 3vh;
    overflow: hidden;
    display: grid;
    place-items: center;
    height: auto;
  }
  
  .show-gif-section .container {
    margin: 1vh;
    display: flex;
    width: 100vw;
  }
  
  .show-gif-section .gif-item {
    position: relative;
    width: 40vw;
    height: 30vh;
    padding: 1vw;
    background: #00000083;
    transition: 0.7s linear all;
    cursor: pointer;
    overflow: hidden; /* 防止图片溢出 */
  }
  
  .show-gif-section .gif-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片比例不变形 */
    transition: transform 0.7s ease;
    display: block;
    border-radius: 6px;
  }
  
  .show-gif-section .gif-item:hover img {
    transform: scale(1.2); /* 放大到 1.2 倍 */
  }

  

/*wrapper*/
/* From Uiverse.io by Shoh2008 */ 
.checkbox-wrapper-25 input[type="checkbox"] {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
                        -webkit-linear-gradient(left, #f66 50%, #6cf 50%);
    background-size: 100% 100%, 200% 100%;
    background-position: 0 0, 15px 0;
    border-radius: 25px;
    box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
                  inset 0 0 10px hsla(0,0%,0%,.5),
                  0 0 0 1px hsla(0,0%,0%,.1),
                  0 -1px 2px 2px hsla(0,0%,0%,.25),
                  0 2px 2px 2px hsla(0,0%,100%,.75);
    cursor: pointer;
    height: 25px;
    padding-right: 25px;
    width: 75px;
    -webkit-appearance: none;
    -webkit-transition: .25s;
  }
  
  .checkbox-wrapper-25 input[type="checkbox"]:after {
    background-color: #eee;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    border-radius: 25px;
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
                  inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
                  0 1px 3px 1px hsla(0,0%,0%,.5),
                  0 0 2px hsla(0,0%,0%,.25);
    content: '';
    display: block;
    height: 25px;
    width: 50px;
  }
  
  .checkbox-wrapper-25 input[type="checkbox"]:checked {
    background-position: 0 0, 35px 0;
    padding-left: 25px;
    padding-right: 0;
  }

/*modal*/



/* 命名空间前缀：custom-card- */

/* 独立命名空间，避免与 Bulma 冲突 */
.custom-card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 2rem;
  }
  
  .custom-card-wrap {
    /* margin: 10px; */
    transform: perspective(800px);
    transform-style: preserve-3d;
    cursor: pointer;
  }
  
  .custom-card {
    position: relative;
    /* flex: 0 0 240px; */
    width: 200px;
    height: 200px;
    background-size: cover;
    background-color: #ffffff00;
    overflow: hidden;
    border-radius: 10px;
    transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    box-shadow:
      rgba(64, 64, 64, 0.66) 0 30px 60px 0,
      inset #333 0 0 0 5px,
      inset rgba(255, 255, 255, 0.5) 0 0 0 6px;
  }
  
  .custom-card-bg {
    opacity: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 100px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: 
      1s cubic-bezier(0.445, 0.05, 0.55, 0.95), 
      opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    pointer-events: none;
  }
  
  .custom-card-info {
    padding: 20px;
    position: absolute;
    bottom: 0;
    color: #000000;
    transform: translateY(40%);
    transition: 0.1s 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  .custom-card-info p {
    opacity: 0;
    text-shadow: rgb(255, 255, 255) 0 2px 3px;
    transition: 0.1s 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  
  .custom-card-info h1 {
    font-family: "Playfair Display", serif;
    font-size: 36px;
    font-weight: 700;
    text-shadow: rgba(255, 255, 255, 0.5) 0 10px 10px;
  }
  
  .custom-card-info::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, transparent 0%, #ffffff00 100%);
    background-blend-mode: overlay;
    opacity: 0;
    transform: translateY(100%);
    transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  
  .custom-card-wrap:hover .custom-card-info {
    transform: translateY(0);
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }
  
  .custom-card-wrap:hover .custom-card-info p {
    opacity: 1;
  }
  
  .custom-card-wrap:hover .custom-card-info::after {
    opacity: 1;
    transform: translateY(0);
  }
  
  .custom-card-wrap:hover .custom-card-bg {
    opacity: 0.8;
    transform: scale(1.03);
    filter: brightness(1.1);
  }
  
  .custom-card-wrap:hover .custom-card {
    box-shadow:
      rgba(255, 255, 255, 0.2) 0 0 40px 5px,
      rgba(255, 255, 255, 1) 0 0 0 1px,
      rgba(0, 0, 0, 0.66) 0 30px 60px 0,
      inset #333 0 0 0 5px,
      inset white 0 0 0 6px;
    transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
  }



  .high-light-card {
    box-shadow: 1.5em 1em -1.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
    width: 300px;
    height: 100px;
    background: #07182E;
    position: relative;
    display: flex;
    place-content: center;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    margin: 0 auto;
  }
  
  .high-light-card p {
    z-index: 1;
    color: rgb(255, 255, 255);
    font-size: 1em;
  }

  .high-light-card h2 {
    z-index: 1;
    color: rgb(255, 255, 255);
    font-size: 1.2em;
  }
  
  .high-light-card::before {
    content: '';
    position: absolute;
    width: 45px;
    background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
    height: 1000px;
    animation: rotBGimg 3s linear infinite;
    transition: all 0.2s linear;
  }
  
  .high-light-card::after {
    content: '';
    position: absolute;
    background: #07182e;
    inset: 5px;
    border-radius: 20px;
    /* z-index: 1; */
  }  

  @keyframes rotBGimg {
    from {
      transform: rotate(0deg);
    }
  
    to {
      transform: rotate(360deg);
    }
  }
  /* .card:hover:before {
    background-image: linear-gradient(180deg, rgb(81, 255, 0), purple);
    animation: rotBGimg 3.5s linear infinite;
  } */

/*Video Card*/
/* From Uiverse.io by gharsh11032000 */ 

.video-container {
  display: flex;
  gap: 20px; /* 两个视频之间的间距 */
  justify-content: center; 
  align-items: center; 
  flex-wrap: wrap; 
}

.my-video-card {
  position: relative;
  width: 480px;
  height: 270px;
  background-color: #291f80ca;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 10px;
  gap: 12px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  /* margin: 0 auto; */
  /* cursor: pointer; */
}

.my-video-card::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -5px;
  margin: auto;
  width: 490px;
  height: 280px;
  border-radius: 10px;
  background: linear-gradient(-45deg, #33bdfb, #2b86fc, #2828ba);
  z-index: -10;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.my-video-card::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #33bdfb, #2b86fc, #2828ba);
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

.heading {
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 700;
}

.my-video-card p:not(.heading) {
  font-size: 14px;
}

.my-video-card p:last-child {
  color: #e81cff;
  font-weight: 600;
}

.my-video-card:hover::after {
  filter: blur(30px);
}

.my-video-card:hover::before {
  transform: rotate(-180deg) scaleX(1) scaleY(1);
}


.my-video-card2 {
  position: relative;
  width: 480px;
  height: 270px;
  background-color: #d3a826c5;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 10px;
  gap: 12px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  /* margin: 0 auto; */
  /* cursor: pointer; */
}

.my-video-card2::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -5px;
  margin: auto;
  width: 490px;
  height: 280px;
  border-radius: 10px;
  background: linear-gradient(-45deg, #fe737d, #fe236d, #6c0c65);
  z-index: -10;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.my-video-card2::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #fe737d, #fe236d, #6c0c65);
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

.heading {
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 700;
}

.my-video-card2 p:not(.heading) {
  font-size: 14px;
}

.my-video-card2 p:last-child {
  color: #e81cff;
  font-weight: 600;
}

.my-video-card2:hover::after {
  filter: blur(30px);
}

.my-video-card2:hover::before {
  transform: rotate(-180deg) scaleX(1) scaleY(1);
}



/*progress bar*/
/* From Uiverse.io by JkHuger */ 
.section-center {
  position: relative;
  top: 50%;
  left: 0;
  z-index: 10;
  transform: translateY(60%);
  width: 100%;
  margin: 0 auto;
  text-align: center;
  -webkit-transition: all 500ms linear;
  transition: all 500ms linear;
}

.section-path {
  position: relative;
  width: 1250px;
  height: 46px;
  border-radius: 35px;
  margin: 0 auto;
  text-align: center;
  background-color: #e6e6e6;
  box-shadow: inset -2px 20px 10px 0 rgba(0,0,0,.06),
		inset -2px 30px 10px 0 rgba(0,0,0,.04);
  border: 3px groove rgba(225,225,225,0.07);
  overflow: hidden;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.globe {

  cursor: grab;
  position: relative;
  width: 40px;
  height: 40px;
  overflow: hidden;
  /* margin-top: 2px;
  margin-left: 2px; */
  border-radius: 50%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.65);
  /* animation: rotateBall 4s ease infinite; */
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

@keyframes rotateBall {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(162px);
  }

  100% {
    transform: translateX(0);
  }
}

.globe:after {
  position: absolute;
  width: 5px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  content: '';
  left: 40px;
  top: 15px;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 14px 7px rgba(255, 255, 255, 0.1);
}

.globe:before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  left: 0;
  top: 0;
  border-radius: 50%;
  z-index: 1;
  box-shadow: inset 0 0 15px #1a252f;
  opacity: 0.4;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.globe .wrapper {
  animation: none;
  position: absolute;
  width: 528px;
  height: 528px;
  top: 0;
  left: -462px;
  /* animation: moveBall 4s ease infinite; */
}

@keyframes moveBall {
  0% {
    left: -462px;
  }

  50% {
    left: 0;
  }

  100% {
    left: -462px;
  }
}

.globe .wrapper span {
  position: absolute;
  width: 33px;
  height: 528px;
  top: 0;
  left: 0;
  /* background-color: #876eafad; */
  background: linear-gradient(-45deg, #06a3a5, #036c5edd);
  box-shadow: inset 0 0 25px #74dbb5;
}

.globe .wrapper span:nth-child(2) {
  left: 33px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(3) {
  left: 66px;
}

.globe .wrapper span:nth-child(4) {
  left: 99px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(5) {
  left: 132px;
}

.globe .wrapper span:nth-child(6) {
  left: 165px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(7) {
  left: 198px;
}

.globe .wrapper span:nth-child(8) {
  left: 231px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(9) {
  left: 264px;
}

.globe .wrapper span:nth-child(10) {
  left: 297px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(11) {
  left: 330px;
}

.globe .wrapper span:nth-child(12) {
  left: 363px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(13) {
  left: 396px;
}

.globe .wrapper span:nth-child(14) {
  left: 429px;
  background-color: #503e6d;
}

.globe .wrapper span:nth-child(15) {
  left: 462px;
}

.globe .wrapper span:nth-child(16) {
  left: 495px;
  background-color: #503e6d;
}

#switch,
#circle {
  cursor: pointer;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

#switch {
  width: 70px;
  height: 8px;
  margin: 0 auto;
  text-align: center;
  border: 2px solid #8167a9;
  border-radius: 27px;
  background: #000;
  position: relative;
  display: inline-block;
  margin-top: 40px;
  margin-bottom: 20px;
}

#circle {
  position: absolute;
  top: -11px;
  left: 5px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 0 4px 4px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,53,71,0.07);
  background: #000;
}

.switched {
  border-color: #000 !important;
  background: #8167a9 !important;
}

.switched #circle {
  left: 35px;
  background: #fff;
}

.section-center p span {
  position: relative;
  padding: 4px 10px;
  margin: 0 5px;
}

.section-center p span:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: #8167a9;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.section-center p span:after {
  position: absolute;
  content: '';
  width: calc(100% - 10px);
  height: 2px;
  border-radius: 4px;
  background-color: #fff;
  left: 5px;
  top: 50%;
  z-index: 1;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear;
}

.section-center p span:nth-child(2):after {
  opacity: 0;
}

/*/* From Uiverse.io by Peary74 */ 
.switch {
  font-family: inherit;
  font-size: 20px;
  background: #212121;
  color: white;
  fill: rgb(155, 153, 153);
  padding: 0.7em 1em;
  padding-left: 0.9em;
  display: flex;
  align-items: center;
  cursor: pointer;
  border: none;
  border-radius: 35px;
  font-weight: 1000;
  height: 60px;
}

.switch span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

.switch svg {
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

.switch:hover {
  background: #000;
}

.switch:hover .svg-wrapper {
  transform: scale(1.25);
  transition: 0.5s linear;
}

.switch:hover svg {
  transform: translateX(1.05em) scale(1.1);
  fill: #fff;
}

.switch:hover span {
  opacity: 0;
  transition: 0.5s linear;
}

.switch:active {
  transform: scale(0.95);
}