/* ====================================================================================
   全頁設定
==================================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
min-height: 100vh;
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
}

/* 每頁最底部留白*/
.bottom-safe {
  padding-bottom: 80px;
}

/* 各頁背景圖*/
.page01-bg {background-image: url("./images/p01-bg.webp");}
.page02-bg {background-image: url("./images/p02-bg.webp");}
.page03-bg {background-image: url("./images/p03-bg.webp");}

.page {
  width: 90%;
  max-width: 458px;
  margin: 0 auto;
}

.page img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.logo {
  width: 30%;
  margin-top: 20px;
}

/* 呼吸按鈕效果 */
@keyframes breathe {
  0% { opacity: 1; }
  50% { opacity: 0.1; }
  100% { opacity: 1; }
}


/* ====================================================================================
   Page-01
==================================================================================== */

.page-01 .title-img {
  width: 65%;
  margin-top: 20px;
}

.page-01 .player-img {
  width: 66%;
  margin-top: 18px;
}

/* ====================================================================================
   Page-01 上方PLAY播放鍵 開始
==================================================================================== */

/* 播放器圖片外層 */
.page-01 .player-visual {
  position: relative;
  width: 66%;
  margin: 18px auto 0;
  overflow: visible;
}

/* 播放器圖片 */
.page-01 .player-visual .player-img {
  width: 100%;
  margin-top: 0;
}

/* 中央播放鍵 */
.main-play-btn {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);

  width: 20%;
  min-width: 0;
  max-width: none;
  aspect-ratio: 1 / 1;

  padding: 0;
  border: 0;
  border-radius: 50%;

  appearance: none;
  -webkit-appearance: none;

  background:
    radial-gradient(
      circle at 28% 24%,
      #f0c66d 0%,
      #dea247 28%,
      transparent 52%
    ),
    linear-gradient(
      135deg,
      #d99b3c 0%,
      #c9822d 42%,
      #af6720 72%,
      #8f4d17 100%
    );

  box-shadow: none;
  overflow: visible;

  cursor: pointer;
  z-index: 5;
  line-height: 0;

  overflow: visible;
  isolation: isolate;
}


/* 播放鍵周圍金色呼吸光暈 */
.main-play-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;

  background: transparent;
  border: 0;

  box-shadow: 0 0 20px 0 rgba(243, 184, 55, 0.75);

  opacity: 0.45;

  animation: playGoldHaloBreath 4s ease-in-out infinite;
}

@keyframes playGoldHaloBreath {
  0% {
    opacity: 0.25;
    box-shadow: 0 0 10px 0 rgba(243, 184, 55, 0.35);
  }

  50% {
    opacity: 0.95;
    box-shadow: 0 0 26px 0 rgba(243, 184, 55, 1);
  }

  100% {
    opacity: 0.25;
    box-shadow: 0 0 10px 0 rgba(243, 184, 55, 0.35);
  }
}


/* 白色播放三角形 */
.play-icon {
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 34%;
  height: 38%;

  background: rgba(255, 255, 255, 1);

  clip-path: polygon(10% 3%, 10% 97%, 96% 50%);

  filter: none;
}

/* ====================================================================================
   Page-01 上方PLAY播放鍵 手勢提示 開始
==================================================================================== */

/* 手勢外層 */
.tap-hint {
  position: absolute;
  right: -27%;
  bottom: -39%;
  width: 62%;
  aspect-ratio: 75 / 85;

  pointer-events: none;
  z-index: 6;

  animation: tapHandPress 2.5s ease-in-out infinite;
}

/* 手勢 SVG */
.tap-hand {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;

  transform: rotate(-10deg);
  transform-origin: center;
}

/* 手內部白色 */
.tap-hand-fill {
  fill: rgba(255, 255, 255, 0.85); /* 這裡調白色透明度 */
}

/* 手外框金色 */
.tap-hand-stroke {
  fill: none;
  stroke: rgba(198, 139, 48, 0.95); /* 這裡調金色外框 */
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 手勢輕點動畫 */
@keyframes tapHandPress {
  0%,
  68%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.9;
  }

  8% {
    transform: translate(-3px, 3px) scale(0.94);
    opacity: 1;
  }

  16% {
    transform: translate(0, 0) scale(1);
    opacity: 0.9;
  }
}

/* ====================================================================================
   Page-01 上方PLAY播放鍵 手勢提示 結束
==================================================================================== */

/* ====================================================================================
   Page-01 上方PLAY播放鍵 結束
==================================================================================== */


.page-01 .txt-img {
  width: 70%;
  margin-top: 10px;
}

.page-01 .active-group {
  width: 80%;
  margin: 24px auto 0;
  margin-top: 25px;
}

.page-01 a.img-btn01,
.page-01 button.img-btn01 {
  display: block;
  margin-bottom: 10px;
  animation: breathe 6s ease-in-out infinite;
}

.page-01 .img-btn02 {
  display: block;
  animation: breathe 6s ease-in-out infinite;
  animation-delay: 2s;
}

/* 繼續聆聽 button reset */
.page-01 .listen-btn {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: transparent;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;
  line-height: 0;
  font: inherit;

  animation: breathe 6s ease-in-out infinite;
}

.page-01 .listen-btn img {
  display: block;
  width: 100%;
  height: auto;
}


/* =============================================================================================================
   Page-01 音樂播放器
============================================================================================================= */

.page-01 .mp3-player-bar {
  width: 74%;
  margin: 8px auto 0;
}

/* 時間文字 */
.player-time {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  color: #574229;
  letter-spacing: 0.5px;
}

/* 進度條外層 */
.progress-wrap {
  position: relative;
  width: 100%;
  height: 24px;
}

/* 視覺上的軌道 */
.progress-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: #ebdcd0;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.12),
    inset 0 -1px 1px rgba(255, 255, 255, 0.5);
}

/* 已播放進度 */
.progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: #cc5a67;
  box-shadow: inset 0 1px 1px rgba(120, 40, 45, 0.18);
}

/* 金色圓點 */
.progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 17px;
  height: 17px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 36% 34%,
      rgba(255, 230, 160, 0.55) 0%,
      rgba(232, 190, 95, 0.9) 36%,
      rgba(198, 140, 45, 1) 70%,
      rgba(166, 105, 28, 1) 100%
    );

  box-shadow:
    0 3px 5px rgba(95, 55, 20, 0.28),
    inset 1px 1px 2px rgba(255, 238, 180, 0.32),
    inset -1px -2px 3px rgba(120, 70, 20, 0.22);
}

/* 真正可拖曳的 range：變透明，只負責操作 */
.song-progress {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  opacity: 0;

  appearance: none;
  -webkit-appearance: none;

  background: transparent;
  cursor: pointer;
}

/* 手機 Safari / Chrome 需要保留可點擊區 */
.song-progress::-webkit-slider-runnable-track {
  height: 24px;
  background: transparent;
}

.song-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
}

.song-progress::-moz-range-track {
  height: 24px;
  background: transparent;
}

.song-progress::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
}

.song-progress:focus {
  outline: none;
}




/* ====================================================================================
   Page-02
==================================================================================== */

.page-02 .title-img {
  width: 80%;
  margin-top: 20px;
}

/* gift-full區 額外切出100%寬*/
.gift-full {
  width: 100%;
  margin: 10px auto 0;
}

.gift-full img{
  display: block;
  width: 100%;
  max-width: 458px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.page-02.active-btn {
  width: 70%;
  margin: 10px auto 0;
}

.page-02.active-btn .img-btn01 {
  display: block;
  width: 100%;
}

.page-02.active-btn .getfree-btn {
  display: block;
  width: 100%;
  height: auto;
  animation: breathe 6s ease-in-out infinite;
}

.page-02.txt-group {
  width: 50%;
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 5px;
}

/* ====================================================================================
   Page-03
==================================================================================== */

.page-03 .txt01 {
  width: 60%;
  margin-top: 30px;
}

.page-03 .title-img {
  width: 60%;
  margin-top: 40px;
}

.page-03 .txt02 {
  width: 30%;
  margin-top: 10px;
}

.page-03 .coupon {
  width: 80%;
  margin-top: 10px;
}

.page-03 .txt03 {
  width: 60%;
  margin-top: 20px;
}




/* 讓Line按鈕在account圖片上面進行定位與呼吸效果*/
.account {
  position: relative;
  width: 70%;
  margin: 20px auto 0;
  overflow: hidden; /* 確保裡面的東西不會超出 account 範圍 */
}

.ty100 {
  display: block;
  width: 100%;
  height: auto;
}

.line-btn {
  position: absolute;
  top: 20%; /* 往下移動就調這裡 */
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 40%;
  z-index: 10;
}

.line-btn img {
  display: block;
  width: 100%;
  height: auto;
  animation: breathe 6s ease-in-out infinite;
}