/* 浮起（上浮） */
@keyframes floatUpDown {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }
  
  /* 下沉→上浮 */
  @keyframes floatDownUp {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(15px);
    }
  }
  
  /* 搖擺從左起（左→右→左） */
  @keyframes swayLeftStart {
    0%, 100% {
      transform: rotate(0deg);
    }
    75% {
      transform: rotate(8deg);
    }
  }
  
  /* 搖擺從右起（右→左→右） */
  @keyframes swayRightStart {
    0%, 100% {
      transform: rotate(0deg);
    }

    75% {
      transform: rotate(-6deg);
    }
  }
  
  /* 上下浮動 */
  .animate-float-up {
    animation: floatUpDown 3.5s ease-in-out infinite;
  }
  
  .animate-float-down {
    animation: floatDownUp 3.5s ease-in-out infinite;
  }
  
  /* 左右搖擺 */
  .animate-sway-left {
    animation: swayLeftStart 5s ease-in-out infinite;
  }
  
  .animate-sway-right {
    animation: swayRightStart 5s ease-in-out infinite;
  }

  @media (max-width: 440px) {
    @keyframes swayLeftStart {
      0%, 100% {
        transform: rotate(0deg);
      }
      75% {
        transform: rotate(6deg);
      }
    }
    
    /* 搖擺從右起（右→左→右） */
    @keyframes swayRightStart {
      0%, 100% {
        transform: rotate(0deg);
      }
  
      75% {
        transform: rotate(-6deg);
      }
    }

    /* 上下浮動 */
    .animate-float-up {
      animation: floatUpDown 5s ease-in-out infinite;
    }
    
    .animate-float-down {
      animation: floatDownUp 5s ease-in-out infinite;
    }
  }
  

  /* coin效果 */
  @keyframes floatCoinCombo {
    0%, 100% {
      transform: translate(-50%, -46%) scale(1);
    }
    50% {
      transform: translate(-50%, -56%) scale(1); /* Y方向再上移一點 */
    }
  }
  
  .animate-float-coin-combo {
    animation: floatCoinCombo 5s ease-in-out infinite;
  }

  @keyframes popScale {
    0% {
      transform: translate(-50%, -66%) scale(0);
      opacity: 1;
    }
    50% {
      transform: translate(-50%, -66%) scale(1.15);
      opacity: 1;
    }
    75% {
      transform: translate(-50%, -66%) scale(0.95);
      opacity: 1;
    }
    100% {
      transform: translate(-50%, -66%) scale(1);
      opacity: 1;
    }
  }
  
  .animate-pop-in {
    animation: popScale 0.9s ease-out both;
  }

  /* subtitle */
  .subtitle-mask {
    position: absolute;
    bottom: 24%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    display: inline-block;
    overflow: hidden;
  }
  
  .shine-overlay {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    animation: pictureShine 3.5s ease-in-out infinite;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 1;
  }
  @keyframes pictureShine {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
  }

  @keyframes shine {
    0% {
        transform: translateX(-50%);
        background: linear-gradient(315deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%);
    }
    100% {
        transform: translateX(60%);
        background: linear-gradient(315deg, rgba(255,255,255,0) 40%, rgba(255, 255, 255, 0.7), rgba(255,255,255,0) 60%);
    }
}

.subtitle-mask {
    height: 141px; /* 圖高 */
    background: url("../images/banner/subtitle-pc.png") no-repeat center / contain;
    mask-image: url("../images/banner/subtitle-pc.png");
    -webkit-mask-image: url("../images/banner/subtitle-pc.png");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    position: relative;
    overflow: hidden;
  }
  
  /* RWD 手機圖 */
  @media (max-width: 768px) {
    .subtitle-mask {
      background-image: url("../images/banner/subtitle-pc.png");
      mask-image: url("../images/banner/subtitle-pc.png");
      -webkit-mask-image: url("../images/banner/subtitle-pc.png");
    }
  }
  
  /* Shine 光動畫 */
  .subtitle-mask::after {
    content: '';
    position: absolute;
    inset: -20%;
    background: linear-gradient(315deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.6), rgba(255,255,255,0) 60%);
    transform: translateX(-50%);
    animation: shine 4s infinite;
    pointer-events: none;
  }
  
  @keyframes shine {
    0% {
      transform: translateX(-50%);
    }
    100% {
      transform: translateX(60%);
    }
  }
  
/* flick */
@keyframes flickerOpacity {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  
  .animate-flicker {
    animation: flickerOpacity 3.5s ease-in-out infinite;
  }

  /* heartbeat */
  @keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14%      { transform: scale(1.17); }
    28%      { transform: scale(1); }
    42%      { transform: scale(1.08); }
    70%      { transform: scale(1); }
  }
  
  .heartbeat {
    animation: heartbeat 1.3s ease-in-out infinite;
  }

  #lottie-switch-mb svg {
    transform: scale(1.15);
    transform-origin: center;
  }