/* index.css — 首頁專屬樣式（Hero / 探索艾蕾露 / NIGHT・DAY / 商品） */

/* ---- Hero ---- */
.hero {
  position: relative;
}
.hero__img {
  display: block;
}
.hero__img img {
  width: 100%;
}

/* ---- 探索艾蕾露 ---- */
.intro__head {
  text-align: center;
}
.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.intro__text p {
  text-wrap: balance; /* 需要換行時平均分行，不留孤字 */
  font-size: var(--fs-text-sm);
}
.intro__text p + p {
  margin-top: 1.5em;
}

/* 標題光澤掃過動畫（3 秒一循環：靜止 0.9s → 掃過 1s → 靜止） */
.shine-title {
  position: relative;
  display: inline-block;
  font-weight: var(--fw-semibold);
}
.shine-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  white-space: pre-line;
  text-align: center;
  color: transparent;
  pointer-events: none;
  background: linear-gradient(
      100deg,
      transparent 44%,
      var(--color-bg) 50%,
      transparent 56%
    )
    100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: title-shine 3s ease-in-out infinite;
}
@keyframes title-shine {
  0%,
  30% {
    background-position: 100% 0;
  }
  63%,
  100% {
    background-position: 0 0;
  }
}

/* 捲動進場動畫（JS 加上 .js-reveal 後才生效；無 JS 或系統設定「減少動態」時直接顯示） */
/* 標題區：由下往上淡入 */
.js-reveal .intro__head {
  opacity: 0;
  transform: translateY(var(--space-lg));
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.js-reveal .intro__head.is-visible {
  opacity: 1;
  transform: none;
}
/* 圖片：原地漸漸出現；文字：從左邊淡入（手機改由下往上，見下方 @media） */
.js-reveal .intro__grid > img {
  opacity: 0;
  transition: opacity 1s ease;
}
.js-reveal .intro__text {
  opacity: 0;
  transform: translateX(calc(var(--space-xl) * -1));
  transition:
    opacity 0.9s ease 0.35s,
    transform 0.9s ease 0.35s;
}
.js-reveal .intro__grid.is-visible > img {
  opacity: 1;
}
.js-reveal .intro__grid.is-visible .intro__text {
  opacity: 1;
  transform: none;
}

/* ---- NIGHT / DAY ---- */
.routine {
  background: center / cover no-repeat var(--color-line);
}
.routine--night {
  color: var(--color-white);
  background-image: url(../images/index/night_bg.png);
}
.routine--night h2,
.routine--night h3 {
  color: var(--color-white);
}
.routine--night h3,
.routine--day h3 {
  font-family: var(--font-serif);
}
.routine--day {
  background-image: url(../images/index/day_bg.png);
}
.routine__en {
  font-family: var(--font-serifTC);
  font-weight: var(--fw-medium);
  color: var(--color-note);
}
.routine__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  row-gap: var(--space-md);
  align-items: center;
}
.routine__title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.routine--day .routine__text .sub-title {
  font-family: var(--font-serifTC);
  font-weight: var(--fw-medium);
  font-size: var(--fs-text-lg);
}
.routine__title img {
  width: 1.1em;
  height: auto;
}
.routine__photo {
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.routine__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.routine__banner {
  display: block;
  width: 75%;
}
.routine__banner img {
  width: 100%;
}
.routine__next {
  display: block;
  position: relative;
  margin-left: calc(
    5em + 5 * 0.06em
  ); /* 5 個全形字 + 5 個字距（h3 字距 0.06em） */
}
.routine__next::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5em;
  transform: translateY(-50%);
  background: currentColor; /* 顏色跟著文字（夜間為白色） */
  /* Font Awesome Free · arrow-right（CC BY 4.0，https://fontawesome.com/license/free） */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ---- NIGHT / DAY 釘住畫面的滑動效果（JS 啟用時） ----
   --p = 捲動進度 0→1，由 site.js 寫入 */
.js-routine .routine-stage {
  height: 500vh;
  position: relative;
} /* 越高，每個階段滑得越慢 */
.js-routine .routine-stage__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh; /* 手機網址列收合時畫面不跳動；不支援時退回 100vh */
  overflow: hidden;
}
.js-routine .routine-stage__sticky > .routine {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-block: var(--header-h) 0;
}

/* 第一組（上層）：內容淡出後，背景整層淡出，露出下面那組 */
.js-routine .routine-stage__sticky > .routine:first-child {
  z-index: 2;
  opacity: calc(1 - clamp(0, (var(--p) - 0.56) / 0.14, 1));
}

/* 商品圖與文字：淡入 + 上浮；第一組另有淡出 */
.js-routine .routine__photo,
.js-routine .routine__text {
  --in: clamp(0, (var(--p) - var(--in-s)) / var(--in-d), 1);
  --out: clamp(0, (var(--p) - var(--out-s, 2)) / 0.08, 1);
  opacity: calc(var(--in) * (1 - var(--out)));
  transform: translateY(calc((1 - var(--in)) * 24px));
}
/* 時間軸：in-s 開始、in-d 長度、out-s 淡出開始（皆為 0–1 的捲動進度） */
.js-routine .routine:first-child .routine__photo {
  --in-s: 0;
  --in-d: 0.12;
  --out-s: 0.8;
}
.js-routine .routine:first-child .routine__text {
  --in-s: 0.2;
  --in-d: 0.22;
  --out-s: 0.8;
}
.js-routine .routine:last-child .routine__photo {
  --in-s: 0.66;
  --in-d: 0.1;
}
.js-routine .routine:last-child .routine__text {
  --in-s: 0.86;
  --in-d: 0.1;
}

/* ---- 商品 ----
   桌機：[資訊][精華瓶] [面霜瓶][資訊]，兩瓶底部對齊、資訊欄垂直置中。
   尺寸以 cqw 換算（容器寬 1200px = 100cqw），對照 1920 示意圖；可調整下面四個變數 */
.product-list {
  --info-w: 20.5cqw; /* 平板的資訊欄寬（1280px 以上依文字寬度） */
  --bottle-a-w: 14.25cqw; /* 精華瓶寬 */
  --bottle-b-w: 16.6cqw; /* 面霜瓶寬 */
  --badge-size: 7.2cqw; /* momo / POYA logo 寬 */
  --product-gap: 6.5cqw; /* 資訊與瓶身、瓶身與瓶身的間距 */
  container-type: inline-size;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.product {
  display: grid;
  column-gap: var(--product-gap);
  grid-template-columns: minmax(0, var(--info-w)) auto;
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". img" "badges img" "info img" ". img";
}
.product:nth-child(2) {
  grid-template-columns: auto minmax(0, var(--info-w));
  grid-template-areas: "img ." "img badges" "img info" "img .";
}
.product + .product {
  margin-left: var(--product-gap);
}
.product__badges {
  grid-area: badges;
  display: flex;
  justify-content: space-between;
}
.product__badges img {
  width: var(--badge-size);
  height: auto;
}
.product__info {
  grid-area: info;
  text-align: center;
  margin-top: var(--space-xs);
}
.product__info p {
  text-wrap: balance;
}
.product__img {
  grid-area: img;
  display: block;
  align-self: end; /* 兩瓶底部對齊 */
  transition: all 0.25s;
  cursor: pointer;
}
.product__img:hover {
  transform: translateY(-2px) scale(1.05);
}
.product__img img {
  width: 100%;
  height: auto;
}
.product:nth-child(1) .product__img {
  width: var(--bottle-a-w);
}
.product:nth-child(2) .product__img {
  width: var(--bottle-b-w);
}
.product__name {
  font-size: var(--fs-product-title);
  color: var(--color-orange);
  font-weight: var(--fw-semibold);
}
#products {
  overflow-x: hidden;
}

/* 商品進場動畫（.js-reveal 啟用後才生效）
   每個商品：瓶身由下往上淡入 → 資訊（logo / 名稱 / 說明 / 按鈕）淡入
   精華資訊由左至右、面霜資訊由右至左；桌機依序進行：精華瓶身 → 精華資訊 → 面霜瓶身 → 面霜資訊
   --d：每個步驟的時間；--img-delay / --info-delay：該步驟開始的時間 */
.js-reveal .product {
  --d: 0.9s;
  --img-delay: 0s;
  --info-delay: 0.9s;
}
.js-reveal .product:nth-child(2) {
  --img-delay: 1.8s; /* 等精華資訊結束 */
  --info-delay: 2.7s;
}
.js-reveal .product__img img {
  opacity: 0;
  transform: translateY(var(--space-lg));
  transition:
    opacity var(--d) ease,
    transform var(--d) ease;
  transition-delay: var(--img-delay);
}
.js-reveal .product__badges,
.js-reveal .product__info {
  opacity: 0;
  transform: translateX(calc(var(--space-lg) * -1));
  transition:
    opacity var(--d) ease,
    transform var(--d) ease;
  transition-delay: var(--info-delay);
}
.js-reveal .product:nth-child(2) .product__badges,
.js-reveal .product:nth-child(2) .product__info {
  transform: translateX(var(--space-lg));
}
.js-reveal .product.is-visible .product__img img,
.js-reveal .product.is-visible .product__badges,
.js-reveal .product.is-visible .product__info {
  opacity: 1;
  transform: none;
}

/* ==========================================
   Media Queries (媒體查詢樣式)
   ========================================== */

/* 桌機（1280px 以上）：文字欄依最長句決定寬度，每句不換行，圖片取剩餘寬度 */
@media (min-width: 1280px) {
  .intro__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-md);
  }
  .intro__text p {
    white-space: nowrap;
  }
  
  .product,
  .product:nth-child(2) {
    grid-template-columns: auto auto;
  }
  .product__info p {
    white-space: nowrap;
  } /* 說明文字每句一行，不掉孤字 */
}

/* 手機（768px 以下）：同樣釘住畫面。為了在一個螢幕內看到完整內容，
   商品圖依「螢幕高度 − 文字高度」的剩餘空間等比例縮小（object-fit: contain，不裁切）
   及其他手機版樣式 */
@media (max-width: 768px) {
  .intro__grid {
    grid-template-columns: 1fr;
    place-items: center;
  }
  .js-reveal .intro__text {
    transform: translateY(var(--space-lg)); /* 手機：內容改由下往上淡入 */
  }

  .routine__grid {
    grid-template-columns: 1fr;
    padding-inline: var(--space-xl); /* 對照示意圖：480px 時左右各留約 62px，商品圖與文字同寬 */
  }
  .routine__photo {
    order: -1;
  }
  /* 建議搭配與說明文字字級約 3.4vw（390px ≈ 13px、480px ≈ 16px）；
     文字欄比商品圖／裝飾圖寬約 6vw，讓每句說明不必多換一行 */
  .routine__text {
    margin-right: -6vw;
  }
  .routine__text h3,
  .routine__text .text-sm {
    font-size: clamp(0.8125rem, 3.4vw, 1.0625rem);
  }
  .routine__banner {
    width: calc(100% - 7vw);
  }

  .js-routine .routine-stage__sticky > .routine {
    padding-block: var(--header-h) var(--space-sm);
  }
  .js-routine .routine__grid {
    height: 100%;
    align-self: stretch;
    align-items: stretch;
    grid-template-rows: minmax(8rem, var(--space-xs)fr) minmax(8rem, 1fr);
    row-gap: var(--space-xs);
  }
  .js-routine .routine__photo {
    aspect-ratio: auto;
    height: 90%;
    min-height: 0;
    margin-top: var(--space-sm);
  }
  .js-routine .routine__photo img {
    object-fit: contain; /* 依比例縮小、不裁切，並置中 */
  }
  .js-routine .routine__text {
    align-self: end;
    height: 100%;
    width: fit-content;
    margin: auto;
  }

  /* 手機：logo 直排在瓶身左上，瓶身置中，資訊在下；尺寸以 vw 隨螢幕縮放（對照 390px 示意圖） */
  .product-list {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--space-2xl);
  }
  .product,
  .product:nth-child(2) {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "stage" "info";
    column-gap: 0;
  }
  .product + .product {
    margin-left: 0;
  }
  .product__badges {
    grid-area: stage;
    align-self: start;
    justify-self: start;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.75rem, 3.8vw, 1.25rem);
    margin-left: 15vw;
    position: relative;
    z-index: 1;
  }
  .product__badges img {
    width: clamp(
      2.5rem,
      12.3vw,
      4.5rem
    ); /* 390px 時約 48px；高度依比例，不變形 */
    height: auto;
  }
  .product__img {
    grid-area: stage;
    justify-self: center;
    align-self: start;
  }
  .product:nth-child(1) .product__img {
    width: 21vw;
  }
  .product:nth-child(2) .product__img {
    width: 24vw;
  }
  .product__info {
    margin-top: var(--space-md);
  }
  .product__name br {
    display: none;
  } /* 手機名稱單行 */
  .js-reveal .product:nth-child(2) {
    --img-delay: 0s; /* 手機：上下排列，各自滑到時才進場 */
    --info-delay: 0.9s;
  }
}