/* 1920px 設計基準：100vw / 1920 * 16 = 0.8333vw = 16px；純線性無上下限 */
html {
  font-size: calc(100vw / 1920 * 16);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  overflow-x: clip;
}

body {
  background-image: url("../assets/light/bg_pc_light.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  background-attachment: scroll;
  background-color: #2a1608;
}

/* ===== hero ===== */
.hero {
  max-width: 90%;
  margin: -10rem auto;
  padding: 7.5rem 0 5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "left center right"
    "desc desc desc";
  gap: 1.5rem;
  align-items: stretch;
  zoom: 1.3;
}

.hero__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero__col--left {
  grid-area: left;
  align-items: flex-start;
  transform: translateX(-25%);
}

.hero__col--center {
  grid-area: center;
}

.hero__col--right {
  grid-area: right;
  align-items: flex-end;
  transform: translateX(25%);
}

.hero__img {
  max-width: 100%;
  height: auto;
  display: block;
}

.hero__img--title {
  width: 120%;
  max-width: 52.5rem;
  margin-top: -12.5rem;
}

.hero__img--left,
.hero__img--right {
  transform: translateY(15%);
  transform-origin: center;
}

.hero__desc {
  grid-area: desc;
  margin: -28rem auto 0;
  max-width: 40rem;
  color: #fff;
  font-size: 1rem;
  line-height: 1.9;
  text-align: center;
  letter-spacing: 0.04em;
}

.hero__desc p {
  margin: 0 0 0.625rem;
}

.hero__desc p:last-child {
  margin-bottom: 0;
}

/* ===== entrance ===== */
.entrance {
  max-width: 80%;
  margin: 30rem auto 0;
  padding: 2.5rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.entrance__title {
  max-width: 50%;
  height: auto;
  display: block;
}

.entrance__desc {
  margin-top: -2.5rem;
  color: #fff;
  font-size: clamp(21.6px, 1.5vw, 38.4px);
  line-height: 1.9;
  text-align: center;
  letter-spacing: 0.04em;
}

.entrance__desc p {
  margin: 0;
}

.entrance__row {
  margin-top: 2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  transform: translateX(5%);
}

.entrance__photo {
  flex: 0 0 auto;
  width: 80%;
  max-width: 80%;
  height: auto;
  max-height: none;
  display: block;
}

.entrance__character {
  flex: 0 1 25%;
  max-width: 25%;
  height: auto;
  display: block;
  margin-left: -10%;
  transform: translateY(-10%) scale(1.3);
  transform-origin: center;
}

/* ===== introduction ===== */
.introduction {
  max-width: 80%;
  margin: -6.25rem auto 0;
  padding: 8.75rem 0 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.introduction__title {
  max-width: 62.5%;
  height: auto;
  display: block;
}

.introduction__desc {
  margin-top: -2.5rem;
  color: #fff;
  font-size: clamp(21.6px, 1.5vw, 38.4px);
  line-height: 1.9;
  text-align: center;
  letter-spacing: 0.04em;
}

.introduction__desc p {
  margin: 0;
}

.introduction__row {
  margin-top: -4.375rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
}

.introduction__photo {
  flex: 0 0 auto;
  width: 80%;
  max-width: 80%;
  height: auto;
  max-height: none;
  display: block;
  position: relative;
  z-index: 1;
  transform: translateY(5rem);
}

.introduction__character {
  flex: 0 1 31.625%;
  max-width: 31.625%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  transform: translateY(10%) scale(1.2);
  transform-origin: center;
}

.introduction__character--left {
  margin-right: -12%;
}

.introduction__character--right {
  margin-left: -12%;
}

/* ===== needle ===== */
.needle {
  max-width: 80%;
  margin: -6.25rem auto 0;
  padding: 2.5rem 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.needle__img {
  max-width: 18%;
  height: auto;
  display: block;
  margin-left: -10%;
}

/* ===== chapter ===== */
.chapter {
  max-width: 80%;
  margin: -5rem auto 0;
  padding: 2.5rem 0;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 2.5rem;
  align-items: center;
}

.chapter--1 {
  margin-top: -3.125rem;
}

.chapter__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chapter__col--left {
  transform: translateY(-3.75rem);
}

.chapter__heading {
  display: flex;
  align-items: flex-end;
  gap: 2.5rem;
  color: #d9b44a;
}

.chapter__num {
  height: 4.5rem;
  width: auto;
  display: block;
}

.chapter__label {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #d9b44a;
  line-height: 1;
}

.chapter__desc {
  margin-top: 1.25rem;
  color: #fff;
  font-size: clamp(21.6px, 1.5vw, 38.4px);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.chapter__desc p {
  margin: 0 0 clamp(11.9px, 3.73vw, 14px);
}

.chapter__desc p:last-child {
  margin-bottom: 0;
}

.chapter__photo {
  width: 112.5%;
  height: auto;
  display: block;
}

/* ===== chapter-stack ===== */
.chapter-stack {
  max-width: 80%;
  margin: -3.75rem auto 0;
  padding: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  align-items: flex-start;
  text-align: left;
}

.chapter-stack__item {
  width: 100%;
}

/* ===== kid-hat ===== */
.kid-hat {
  max-width: 80%;
  margin: -7.5rem auto 0;
  padding: 2.5rem 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.kid-hat__img {
  max-width: 20%;
  height: auto;
  display: block;
  margin-left: -10%;
}

/* ===== special ===== */
.special {
  max-width: 80%;
  margin: -5rem auto 0;
  padding: 2.5rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.special__title {
  max-width: 83%;
  height: auto;
  display: block;
}

.special__row {
  margin-top: -7.5rem;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.special__col {
  display: flex;
  flex-direction: column;
}

.special__col:nth-child(2) {
  transform: translateY(0.625rem);
}

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

.special__text {
  margin-top: 1rem;
}

.special__text--left {
  transform: translate(0, 0.3125rem);
}

.special__text--right {
  transform: translate(0, -0.75rem);
}

.special__heading {
  margin: 0 0 0.5rem;
  color: #d9b44a;
  font-size: clamp(21.6px, 1.5vw, 38.4px);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.special__desc {
  margin: 0;
  color: #fff;
  font-size: clamp(21.6px, 1.5vw, 38.4px);
  line-height: 1.85;
  letter-spacing: 0.04em;
}

/* ===== next-hint ===== */
.next-hint {
  max-width: 80%;
  margin: -5rem auto 0;
  padding: 2.5rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.next-hint__title {
  max-width: 60%;
  height: auto;
  display: block;
  margin-top: 5rem;
}

.next-hint__row {
  margin-top: -5rem;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2rem;
  align-items: center;
}

.next-hint__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.next-hint__character {
  max-width: 100%;
  height: auto;
  display: block;
  transform: scale(1.5) translateY(20%);
  transform-origin: center;
}

.next-hint__col--left .next-hint__character {
  transform: scale(1.5) translate(15%, 20%);
}

.next-hint__col--right .next-hint__character {
  transform: scale(1.5) translate(-15%, 20%);
}

.next-hint__desc {
  margin: 0;
  color: #fff;
  font-size: clamp(21.6px, 1.5vw, 38.4px);
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ===== 斷點（source order：1024 → 768 → 450 → 375 → 320） ===== */

@media (max-width: 1024px) {
  .hero__desc {
    font-size: clamp(12px, 1vw, 15px);
  }
  /* hero 有 zoom:1.3，其他 desc 無；放大 1.3 倍補償以對齊視覺 */
  .entrance__desc,
  .introduction__desc,
  .chapter__desc,
  .next-hint__desc,
  .special__desc {
    font-size: clamp(15.6px, 1.3vw, 19.5px);
  }
  .entrance {
    margin-top: 30rem;
  }
}

@media (max-width: 768px) {
  body {
    background-image: url("../assets/light/bg_sp_light.jpg");
  }

  .hero {
    max-width: 96%;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-areas:
      "left center right"
      "desc desc desc";
    padding: 5rem 0 1.25rem;
    gap: 0.25rem;
    row-gap: 1rem;
    align-items: center;
    margin-top: 5rem;
  }
  .hero__col--left {
    align-items: flex-start;
    transform: translate(-8%, 0.1875rem);
  }
  .hero__col--center {
    transform: translateY(1.25rem);
  }
  .hero__col--right {
    align-items: flex-end;
    transform: translate(8%, 0.1875rem);
  }
  .hero__col--left .hero__img,
  .hero__col--right .hero__img {
    max-width: 100%;
  }
  .hero__img--title {
    justify-self: center;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }
  .hero__desc {
    font-size: clamp(10.24px, 3.2vw, 11px);
    line-height: 1.8;
    width: 80%;
    max-width: none;
    margin: -2.5rem auto 0;
  }

  .chapter-stack {
    max-width: 85%;
    margin: -1.25rem auto 0;
    padding: 0 0 1.875rem;
    gap: 1.875rem;
  }

  .chapter {
    max-width: 85%;
    margin: 0 auto;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem 0;
  }
  .chapter__col--left {
    transform: none;
  }
  .chapter__heading {
    gap: 1.25rem;
  }
  .chapter__num {
    height: 3rem;
  }
  .chapter__label {
    font-size: clamp(20.4px, 6.4vw, 24px);
  }
  .chapter__desc {
    font-size: clamp(8.5pt, 3.55vw, 10pt);
    line-height: 1.8;
    margin-top: 0.75rem;
  }
  .chapter__photo {
    width: 100%;
  }
  .chapter--1 .chapter__photo {
    width: 100%;
  }
  .chapter--1 .chapter__desc p br {
    display: none;
  }
  .chapter--1 .chapter__desc p {
    margin-bottom: 0;
  }
  .chapter--5 .chapter__col--right {
    margin-top: -1.875rem;
  }

  .next-hint {
    max-width: 92%;
    margin-top: -1.25rem;
    margin-bottom: -4.6875rem;
    padding: 1.25rem 0 0;
  }
  .next-hint__title {
    max-width: 100%;
    margin-top: 1.25rem;
  }
  .next-hint__row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "text text"
      "left right";
    gap: 1rem;
    margin-top: 0.5rem;
  }
  .next-hint__col--center {
    grid-area: text;
  }
  .next-hint__col--left {
    grid-area: left;
    align-items: flex-end;
    transform: translateX(15%);
  }
  .next-hint__col--right {
    grid-area: right;
    align-items: flex-start;
    transform: translateX(-15%);
  }
  .next-hint__character {
    max-width: 80%;
    transform: scale(1) translateY(0);
  }
  .next-hint__col--left .next-hint__character,
  .next-hint__col--right .next-hint__character {
    transform: scale(1) translate(0, 0);
  }
  .next-hint__desc {
    font-size: clamp(8.5pt, 3.55vw, 10pt);
    line-height: 1.8;
    margin-top: -0.9375rem;
  }

  .special {
    max-width: 100%;
    padding: 0.3125rem 0;
  }
  .special__title {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .special__row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: -1.875rem;
  }
  .special__col:nth-child(2),
  .special__text--left,
  .special__text--right {
    transform: none;
  }
  .special__heading {
    font-size: clamp(15.3px, 4.8vw, 18px);
    max-width: 80%;
    margin: -1.875rem auto 0;
  }
  .special__desc {
    font-size: clamp(11.05px, 3.47vw, 13px);
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  .special__desc br {
    display: none;
  }
  .special__col--left .special__photo {
    transform: translate(-5%, -2.5rem);
  }
  .special__col--right {
    overflow: hidden;
  }
  .special__col--right .special__photo {
    transform: translate(calc(3% - 0.0625rem), -2.5rem);
  }
  .special__col--right .special__text {
    margin-top: -0.9375rem;
  }

  .kid-hat {
    max-width: 92%;
    margin: -3.75rem auto 0;
    padding: 1.25rem 0;
  }
  .kid-hat__img {
    max-width: 32%;
    margin-left: -4%;
  }

  .needle {
    max-width: 92%;
    padding: 1.25rem 0;
    margin-top: -1.875rem;
  }
  .needle__img {
    max-width: 28.8%;
    margin-left: -4%;
  }

  .introduction {
    max-width: 92%;
    padding: 2.5rem 0 1.25rem;
  }
  .introduction__title {
    max-width: 80%;
  }
  .introduction__desc {
    font-size: clamp(10.2px, 3.2vw, 12px);
    line-height: 1.8;
    margin-top: 1.25rem;
  }
  .introduction__row {
    margin-top: -1.875rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* 不能 overflow:hidden，否則角色腳會被裁；
       水平超出由 body overflow-x:clip 處理 */
    overflow: visible;
  }
  .introduction__photo {
    height: auto;
    width: 85%;
    max-width: 85%;
    max-height: none;
  }
  .introduction__character {
    flex-basis: 40%;
    max-width: 40%;
  }
  .introduction__character--left {
    margin-right: -22%;
  }
  .introduction__character--right {
    margin-left: -22%;
  }

  .entrance {
    max-width: 92%;
    padding: 5rem 0 1.25rem;
  }
  .entrance__desc {
    font-size: clamp(11.9px, 3.73vw, 14px);
    line-height: 1.8;
    margin-top: 0.625rem;
  }
  .entrance__row {
    margin-top: 1.25rem;
    gap: 0;
    transform: none;
    overflow: hidden;
  }
  .entrance__photo {
    height: auto;
    width: 79%;
    max-width: 79%;
    max-height: none;
    transform: translateX(15%);
  }
  .entrance__character {
    flex-basis: 31%;
    max-width: 31%;
    margin-left: -6%;
    transform: translate(-12%, 10%);
  }

  .hero__desc,
  .entrance__desc,
  .introduction__desc,
  .chapter__desc,
  .next-hint__desc,
  .special__desc {
    font-size: 14pt;
  }
  .hero__desc {
    margin-top: -3rem;
    font-size: clamp(8pt, 2.5vw, 10pt);
  }
  .hero__desc p {
    margin-bottom: 0.625rem;
  }
  .hero__col--left .hero__img,
  .hero__col--right .hero__img {
    max-width: 117%;
  }
  .hero__col--left {
    transform: translate(-18%, 3.75rem);
  }
  .hero__col--center {
    transform: translateY(5rem);
  }
  .hero__img--title {
    transform: translateY(2.5rem);
  }
  .hero__col--right {
    transform: translate(18%, 3.75rem);
  }
  .entrance {
    margin-top: 50rem;
  }
  .introduction {
    margin-top: -0.625rem;
  }
  .introduction__desc {
    margin-top: -2.5rem;
  }
  .introduction__photo {
    transform: translateY(-2.5rem);
  }
  .needle {
    margin-top: -1.875rem;
  }
  .special__row {
    margin-top: -5rem;
  }
  .next-hint {
    margin-top: 3.75rem;
  }
}

@media (max-width: 450px) {
  /* 450 起以 768 下的 rem 基準鎖定（6.4px），小螢幕不再線性縮小 */
  html {
    font-size: 6.4px;
  }
  .hero__img--title {
    transform: translateY(-2rem);
  }
  .hero__img--left,
  .hero__img--right {
    transform: translateY(-10%);
  }
  .hero__desc {
    font-size: clamp(6pt, 2vw, 8pt);
    margin-top: -6rem;
  }
  .entrance {
    margin-top: 20rem;
  }
  .entrance__desc {
    margin-top: -2rem;
  }
  .entrance__desc,
  .introduction__desc,
  .chapter__desc,
  .special__heading,
  .special__desc,
  .next-hint__desc {
    font-size: clamp(7.8pt, 2.6vw, 10.4pt);
  }
  .needle__img {
    max-width: 22%;
    margin-top: 4rem;
  }
}

@media (max-width: 360px) {
  .hero__desc {
    width: 69%;
    font-size: 1.1rem;
  }
  .entrance {
    margin-top: 20rem;
  }
  .entrance__desc,
  .introduction__desc,
  .chapter__desc,
  .next-hint__desc,
  .special__desc {
    font-size: 1.43rem;
  }
  .hero__desc p {
    margin-bottom: 0.0625rem;
  }
  .needle__img {
    max-width: 25%;
    margin-top: 3rem;
  }
}

@media (max-width: 320px) {
  .hero__desc {
    font-size: 1rem;
    margin-top: -9rem;
  }
  .entrance__desc,
  .introduction__desc,
  .chapter__desc,
  .next-hint__desc,
  .special__desc {
    font-size: 1.3rem;
  }
  .hero__img--title {
    transform: translateY(-6rem);
  }
  .hero__img--left,
  .hero__img--right {
    transform: translateY(-25%);
  }
  .entrance {
    margin-top: 14rem;
  }
}

/* ===== hero 進場動畫（以 CSS translate 屬性疊加，不覆寫既有 transform） ===== */
@media (prefers-reduced-motion: no-preference) {
  .js-fly {
    opacity: 0;
    will-change: translate, opacity;
    transition:
      translate 0.9s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.9s ease-out;
  }
  .js-fly--up {
    translate: 0 40%;
  }
  .js-fly--left {
    translate: -60% 0;
  }
  .js-fly--right {
    translate: 60% 0;
  }
  .js-fly.is-in-view {
    opacity: 1;
    translate: 0 0;
  }
  .hero__col--left.js-fly {
    transition-delay: 0s;
  }
  .hero__col--right.js-fly {
    transition-delay: 0.1s;
  }
  .hero__img--title.js-fly {
    transition-delay: 0.25s;
  }
  .hero__desc.js-fly {
    transition-delay: 0.5s;
  }
  .entrance__title.js-fly {
    transition-delay: 0s;
  }
  .entrance__desc.js-fly {
    transition-delay: 0.15s;
  }
  .entrance__photo.js-fly {
    transition-delay: 0s;
  }
  .entrance__character.js-fly {
    transition-delay: 0.15s;
  }
  .introduction__title.js-fly {
    transition-delay: 0s;
  }
  .introduction__desc.js-fly {
    transition-delay: 0.15s;
  }
  .introduction__character--left.js-fly {
    transition-delay: 0s;
  }
  .introduction__photo.js-fly {
    transition-delay: 0.1s;
  }
  .introduction__character--right.js-fly {
    transition-delay: 0.2s;
  }
  .chapter__col--left.js-fly {
    transition-delay: 0s;
  }
  .chapter__col--right.js-fly {
    transition-delay: 0.15s;
  }
  .special__title.js-fly {
    transition-delay: 0s;
  }
  .special__col--left .special__photo.js-fly {
    transition-delay: 0s;
  }
  .special__text--left.js-fly {
    transition-delay: 0.15s;
  }
  .special__col--right .special__photo.js-fly {
    transition-delay: 0.1s;
  }
  .special__text--right.js-fly {
    transition-delay: 0.25s;
  }
  .next-hint__title.js-fly {
    transition-delay: 0s;
  }
  .next-hint__col--left .next-hint__character.js-fly {
    transition-delay: 0.1s;
  }
  .next-hint__desc.js-fly {
    transition-delay: 0.2s;
  }
  .next-hint__col--right .next-hint__character.js-fly {
    transition-delay: 0.3s;
  }
}