/* Section 06 — artwork coordinates follow sec06_layout.png.
   Each desktop frame is a 1553 × 746 canvas; cards retain 657 × 584. */
#section06 {
  position: relative;
  width: 100%;
  padding: 0rem 0 4rem;
  text-align: center;
}
#section06 *,
#section06 *::before,
#section06 *::after {
  box-sizing: border-box;
}
#section06 .sec06-content {
  width: min(1100px, 92%);
  margin: 0 auto;
}
#section06 img {
  display: block;
  width: 100%;
  height: auto;
}
#section06 .sec06-heading {
  width: 60%;
  margin: 0 auto 10px;
  padding: 0;
}
#section06 .sec06-tier {
  position: relative;
  width: 1200px;
  max-width: 100%;
  margin: auto;
  padding: 0;
  aspect-ratio: 1553 / 746;
  background: url("../images/sec06_bg_big.png") center / 100% 100% no-repeat;
}
#section06 .sec06-tier + .sec06-tier {
  margin-top: 4rem;
}
#section06 .sec06-tier-title {
  position: absolute;
  z-index: 2;
  width: 56%;
  left: 22%;
  top: -9.8%;
  margin: 0;
  padding: 0;
}
#section06 .sec06-rewards {
  position: absolute;
  inset: 10.5% 6.55% 10.5%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5%;
}
#section06 .sec06-reward {
  position: relative;
  min-width: 0;
  background: url("../images/sec06_bg_small.png") center / 100% 100% no-repeat;
}
#section06 .sec06-role {
  position: absolute;
  z-index: 1;
  top: 4.7%;
  left: 25%;
  width: 50%;
  margin: 0;
  padding: 0;
}
#section06 .sec06-gift {
  position: absolute;
  object-fit: contain;
}
#section06 .sec06-gift {
  position: absolute;
  width: 90%;
  height: auto;
  left: 5%;
  top: 7%;
  object-fit: contain;

  animation:
    sec06GiftFloat 4.8s ease-in-out infinite,
    sec06GiftGlow 3.6s ease-in-out infinite;
}
/* 第一檔獎勵：電腦/平板用一般圖，600px 以下（手機排版）換成 _xs 圖 */
#section06 .sec06-gift-xs {
  display: none;
}
@media (max-width: 600px) {
  #section06 .sec06-gift-pc {
    display: none;
  }
  #section06 .sec06-gift-xs {
    display: block;
  }
}
@media (min-width: 1600px) {
  #section06 {
    padding-top: 55px;
  }
}
@media (min-width: 601px) and (max-width: 1024px) {
  #section06 {
    padding-top: 35px;
    padding-bottom: 90px;
  }
  #section06 .sec06-tier + .sec06-tier {
    margin-top: 8%;
  }
}
@media (max-width: 600px) {
  #section06 {
    padding: 28px 0 60px;
  }
  #section06 .sec06-content {
    width: 96%;
  }
  #section06 .sec06-heading {
    width: 100%;
    margin-bottom: 30px;
  }
  #section06 .sec06-tier {
    aspect-ratio: auto;
    /* Reserve space for the overlapping season title at every phone width. */
    padding: clamp(58px, 20vw, 120px) 6% 26px;
    background-size: 100% 100%;
    background-image: url("../images/sec06_bg_big_mobile.png");
  }
  #section06 .sec06-tier + .sec06-tier {
    margin-top: 50px;
  }
  #section06 .sec06-tier-title {
    width: 102%;
    left: -1%;
    top: -24px;
  }
  #section06 .sec06-rewards {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  #section06 .sec06-reward {
    aspect-ratio: 657 / 584;
    width: 94%;
    margin: auto;
  }
}

/* Match the existing section content/title widths at the same breakpoints. */
@media (max-width: 992px) {
  #section06 .sec06-content {
    width: 96%;
  }
  #section06 .sec06-heading {
    width: 75%;
  }
}
@media (max-width: 768px) {
  #section06 .sec06-heading {
    width: 100%;
  }
}
/* Animate only the gift artwork, independently of each card's entrance. */
#section06 .sec06-gift {
  animation:
    sec06GiftFloat 4.8s ease-in-out infinite,
    sec06GiftGlow 3.6s ease-in-out infinite;
}
#section06 .sec06-reward:nth-child(2) .sec06-gift {
  animation-delay:
    -2.4s,
    -1.8s;
}
#section06 .sec06-tier:nth-of-type(2) .sec06-gift {
  animation-delay:
    -1.2s,
    -0.9s;
}
@keyframes sec06GiftFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes sec06GiftGlow {
  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 2px rgba(255, 207, 104, 0.12));
  }
  50% {
    filter: brightness(1.08) drop-shadow(0 0 10px rgba(255, 207, 104, 0.42));
  }
}
@media (max-width: 600px) {
  @keyframes sec06GiftFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3px);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  #section06 .sec06-gift {
    animation: none;
    filter: none;
    transform: none;
  }
}

/* Keep the overlapping reward title from extending the page sideways on phones. */
@media (max-width: 600px) {
  #section06 {
    max-width: 100%;
    overflow-x: clip;
  }
  #section06 .sec06-tier {
    min-width: 0;
  }
}