/*-- Base Styles --*/
@font-face {
  font-family: 'utm'; /* 給這個字型取名字 */
  src: url('../utm-sharnay-italic-font/UTM-Sharnay-Italic.ttf') format('truetype');
  /*  font-weight: normal;
  font-style: normal;*/
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
/*--  <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name--*/
#sign {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* === 初始狀態：先隱藏並位移，避免先閃現 === */
.preL {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateX(-28px);
  transform: translateX(-28px);
  will-change: transform, opacity;
}
.preR {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateX(28px);
  transform: translateX(28px);
  will-change: transform, opacity;
}
svg.knockout {
  width: 100%;
  height: auto;
}
/*-----------------------for PC-----------------------*/
@media screen and (min-width:801px) {
  /*-- Sign Styles --*/
  #sign h1 {
    font-size: 6rem;
    text-align: center;
    line-height: 1;
    color: #fff;
    /*animation: neon .08s ease-in-out infinite alternate;*/
    font-family: 'utm', sans-serif; /* 使用自訂字型，後備是 sans-serif */
    padding: 10px 0px;
    letter-spacing: 3px
  }
  #sign h2 {
    color: #fff;
    /*animation: neon .08s ease-in-out infinite alternate;*/
    font-size: 4.5rem;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: bold;
    padding: 10px 0px;
    /*  font-style: italic*/
  }
  #sign h2 img {
    width: 15%;
  }
  #sign h2 span {
    line-height: 1.15;
  }
  #sign h2 span + span {
    color: #fff;
    animation: neon2 .08s ease-in-out infinite alternate;
    font-size: 4rem;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: bold;
    padding: 10px;
    /*  border: 1px solid #FFFFFF;*/
    font-style: normal
  }
  /*-- Animation Keyframes --*/
  .banner {
    position: relative;
    width: min(930px, 88vw);
    margin: 24px auto;
  }
  .knockout {
    display: block;
    width: 100%;
    height: 120px; /* 依需求調整高度 */
  }
}
/*--animation--*/
@keyframes neon {
  from {
    text-shadow:
      0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(30, 132, 242, 0.52), 0 0 21px rgba(30, 132, 242, 0.92), 0 0 34px rgba(30, 132, 242, 0.78), 0 0 54px rgba(30, 132, 242, 0.92);
  }
  to {
    text-shadow:
      0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(30, 132, 242, 0.58), 0 0 22px rgba(30, 132, 242, 0.84), 0 0 38px rgba(30, 132, 242, 0.88), 0 0 60px rgba(30, 132, 242, 1);
  }
}
@keyframes neon2 {
  from {
    text-shadow:
      0 0 6px rgba(255, 17, 119, 0.92), 0 0 30px rgba(255, 17, 119, 0.34), 0 0 12px rgba(255, 17, 119, 0.52), 0 0 21px rgba(255, 17, 119, 0.92), 0 0 34px rgba(255, 17, 119, 0.78), 0 0 54px rgba(255, 17, 119, 0.92);
  }
  to {
    text-shadow:
      0 0 6px rgba(255, 17, 119, 0.98), 0 0 30px rgba(255, 17, 119, 0.42), 0 0 12px rgba(255, 17, 119, 0.58), 0 0 22px rgba(255, 17, 119, 0.84), 0 0 38px rgba(255, 17, 119, 0.88), 0 0 60px rgba(255, 17, 119, 1);
  }
}
/*------------------for mobile------------------------*/
@media screen and (max-width:800px) {
  #sign h1 {
    font-size: 4rem;
    text-align: center;
    line-height: 1;
    color: #fff;
    /* animation: neon 3s ease-in-out infinite;*/ /* 3s節奏，呼吸感 */
    font-family: 'utm', sans-serif; /* 使用自訂字型，後備是 sans-serif */
    /*padding: 0px 10px 0px 10px;*/
    letter-spacing: 3px;
     
  }
  #sign h2 {
    color: #fff;
    /*animation: neon 3s ease-in-out infinite;*/ /* 3s節奏，呼吸感 */
    font-size: 2rem;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: bold;
      margin-top: -10px
 
    /*  font-style: italic*/
  }
     #sign h2 span {
    line-height: 1;
  }
  #sign h2 span img {
    width: 20%;
  }
   
  #sign h2 span + span {
    color: #fff;
    animation: neon2 3s ease-in-out infinite; /* 3s節奏，呼吸感 */
    font-size: 2rem;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: bold;
    /*  border: 1px solid #FFFFFF;*/
    font-style: normal;
    display: block; /* 變成區塊就能吃到垂直間距 */
    margin-top: 10px; /* 與上一段的距離（跟字級等比） */
    line-height:1.4;/* 這一行自己的行高 */
  }
  /*-- Animation Keyframes --*/
  .banner {
    position: relative;
    width: min(, 88vw);
    margin: 12px auto;
  }
  .knockout {
    display: block;
    width: auto;
    height: 50px; /* 依需求調整高度 */
  }
}
/*--animation--*/
@keyframes neon {
  0% {
    text-shadow:
      0 0 3px rgba(202, 228, 225, 0.7), 0 0 6px rgba(30, 132, 242, 0.3), 0 0 12px rgba(30, 132, 242, 0.4), 0 0 20px rgba(30, 132, 242, 0.5);
  }
  50% {
    text-shadow:
      0 0 4px rgba(202, 228, 225, 0.8), 0 0 8px rgba(30, 132, 242, 0.35), 0 0 14px rgba(30, 132, 242, 0.45), 0 0 22px rgba(30, 132, 242, 0.55);
  }
  100% {
    text-shadow:
      0 0 3px rgba(202, 228, 225, 0.7), 0 0 6px rgba(30, 132, 242, 0.3), 0 0 12px rgba(30, 132, 242, 0.4), 0 0 20px rgba(30, 132, 242, 0.5);
  }
}
@keyframes neon2 {
  from {
    text-shadow:
      0 0 6px rgba(255, 17, 119, 0.92), 0 0 30px rgba(255, 17, 119, 0.34), 0 0 12px rgba(255, 17, 119, 0.52), 0 0 21px rgba(255, 17, 119, 0.92), 0 0 34px rgba(255, 17, 119, 0.78), 0 0 54px rgba(255, 17, 119, 0.92);
  }
  to {
    text-shadow:
      0 0 6px rgba(255, 17, 119, 0.98), 0 0 30px rgba(255, 17, 119, 0.42), 0 0 12px rgba(255, 17, 119, 0.58), 0 0 22px rgba(255, 17, 119, 0.84), 0 0 38px rgba(255, 17, 119, 0.88), 0 0 60px rgba(255, 17, 119, 1);
  }
}