/* ============================================================
   首頁專用的樣式(首頁改版,D-128)
   ------------------------------------------------------------
   ⭐ 只有首頁載入這一支,其他頁面一個字都不受影響。
   ⚠️⚠️ 商品卡片(.product-card)的樣式【不可以寫在這裡】——
      經營者拍板卡片的樣式與大小要跟原本完全一樣(D-128 第八節),
      一律沿用 components.css 那一份。
   ⚠️ 顏色一律用 tokens.css 的變數;草稿裡另外調的幾個深一階的色,
      在下面 :root 補成首頁自己的變數,集中在一處好改。
   ============================================================ */
:root{
  --home-oval:   #F3E6CE;   /* 開頭的大橢圓(= --cream-deep) */
  --home-sage-l: #DCE3D2;   /* 右下的淡抹茶圓 */
  --home-coral-t:#C9705A;   /* 「每天」那兩個字(比 --coral-deep 深一階,字才讀得清楚) */
  --home-script: #7E9170;   /* a little, every day */
  --home-gold:   #C8A15A;   /* 小星星 */
  --home-frame:  #2F2924;   /* 平板的外框 */
  --font-serif-zh: 'Noto Serif TC', 'Noto Serif CJK TC', serif;
  --font-script:   'Cormorant Garamond', 'Times New Roman', serif;
}

/* ---------- ① 開頭 ---------- */
.hero.hero--home{
  position:relative; overflow:hidden; text-align:left;
  padding-block:var(--sp-7) var(--sp-8);
}
/* 背後的大橢圓與淡抹茶圓:純裝飾,不吃滑鼠 */
.hero-home__oval,
.hero-home__dot{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.hero-home__oval{ left:-60px; top:0; width:510px; height:680px; background:var(--home-oval); }
.hero-home__dot{ right:-40px; top:420px; width:200px; height:200px; background:var(--home-sage-l); opacity:.8; }

.hero-home__inner{ position:relative; z-index:1; }
.hero-home__text{ padding-top:var(--sp-6); }
.hero-home__script{
  font-family:var(--font-script); font-style:italic; font-weight:500;
  font-size:1.375rem; color:var(--home-script); margin:0;
}
.hero.hero--home .hero__title{
  font-family:var(--font-serif-zh); font-weight:700;
  font-size:2rem; line-height:1.45; margin:var(--sp-2) 0 0;
}
.hero-home__line{ display:block; }
/* 「每天」:珊瑚色 + 手畫的圈圈 */
.hero-home__mark{ position:relative; display:inline-block; padding:0 6px; color:var(--home-coral-t); }
/* 圈圈用百分比跟著字的大小走:字型晚到、手機電腦字級不同,圈圈都還是圈在「每天」上 */
.hero-home__mark svg{ position:absolute; left:-14%; top:-30%; width:130%; height:162%; overflow:visible; }
.hero.hero--home .hero__sub{
  font-size:var(--fs-base); font-weight:400; color:var(--ink-soft);
  line-height:1.8; margin:var(--sp-4) 0 0; max-width:none;
}
/* 經營者拍板:按鈕置中、標題維持靠左(D-128 第八節) */
.hero.hero--home .hero__actions{ justify-content:center; margin-top:var(--sp-5); }
.hero-home__btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.hero-home__btn-outline:hover{ background:var(--glass); color:var(--ink); }

/* 平板與小插圖 */
.hero-home__visual{ position:relative; height:330px; margin-top:var(--sp-6); }
.hero-home__tablet{
  position:absolute; left:50%; top:0; width:220px; margin-left:-110px;
  padding:8px; border-radius:22px; background:var(--home-frame);
  box-shadow:0 18px 38px rgba(74,64,56,.25);
  transform:rotate(5deg);
}
.hero-home__tablet img{
  display:block; width:100%; height:286px; object-fit:cover; object-position:top;
  border-radius:14px;
}
.hero-home__doodle{ position:absolute; pointer-events:none; }
.hero-home__doodle--star { left:12%;  top:40px; }
.hero-home__doodle--plus { right:12%; top:14px; }
.hero-home__doodle--wave { right:4%;  bottom:0; }

/* ---------- 電腦版:左文字、右平板 ---------- */
@media (min-width:900px){
  .hero.hero--home{ padding-block:var(--sp-8) var(--sp-9); }
  .hero-home__oval{ left:-120px; top:-40px; width:820px; height:640px; }
  .hero-home__dot { right:4%; top:auto; bottom:40px; width:260px; height:260px; }
  .hero-home__inner{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--sp-8); align-items:center; }
  .hero-home__text{ padding-top:0; }
  .hero.hero--home .hero__title{ font-size:var(--fs-4xl); }
  .hero.hero--home .hero__sub{ font-size:var(--fs-lg); }
  .hero-home__visual{ height:440px; margin-top:0; }
  .hero-home__tablet{ width:300px; margin-left:-150px; top:10px; }
  .hero-home__tablet img{ height:390px; }
}

/* ---------- 動畫 ---------- */
@keyframes home-fu  { from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes home-draw{ from{ stroke-dashoffset:400; } to{ stroke-dashoffset:0; } }
@keyframes home-pop { 0%{ opacity:0; transform:scale(.4) rotate(-20deg); } 70%{ transform:scale(1.15); } 100%{ opacity:1; transform:none; } }
@keyframes home-sway{ 0%,100%{ transform:rotate(5deg); } 50%{ transform:rotate(2deg) translateY(-5px); } }
.home-fu{ animation:home-fu .9s cubic-bezier(.2,.7,.2,1) both; }
.home-d1{ animation-delay:.2s; } .home-d2{ animation-delay:.4s; }
.home-d3{ animation-delay:.6s; } .home-d4{ animation-delay:.8s; }
.hero-home__mark path{ stroke-dasharray:400; animation:home-draw 1.3s 1s ease-in-out both; }
.hero-home__doodle{ animation:home-pop .6s 1.8s both; }
.hero-home__doodle--plus, .hero-home__doodle--wave{ animation-delay:2s; }
.hero-home__tablet{ animation:home-sway 6s ease-in-out infinite; }

/* ⚠️ 客人的裝置開了「減少動態效果」→ 全部停掉,直接顯示最後的樣子 */
@media (prefers-reduced-motion: reduce){
  .home-fu, .hero-home__doodle, .hero-home__tablet, .hero-home__mark path{ animation:none; }
  .hero-home__mark path{ stroke-dasharray:none; }
}

/* ---------- ② 精選商品:橫向輪播(首-2,D-128) ----------
   ⚠️⚠️ 這裡只改「排法」,不碰 .product-card(卡片樣式與大小經營者拍板不動)。
   每張卡的寬度刻意算成跟原本 components.css 的格子一欄一樣寬:
     手機(≤640px)原本是兩欄、間距 --sp-3 → 一張 = (寬 - 間距) / 2
     電腦原本是 auto-fill minmax(260px,1fr)、間距 --sp-5 →
       內容寬 < 828px 排得下 2 欄,≥ 828px 排得下 3 欄(container 最寬 1120 扣掉左右留白,到不了 4 欄)
   用 container query 量的是「外框實際的寬」,跟原本格子算欄數用的是同一個寬度。
   tests-ui/test-home2-rail 會在三種螢幕寬度實際量「輪播裡的卡」與「原本格子裡的卡」一樣大 */
.home-rail-wrap{ container-type:inline-size; }
.product-grid.home-rail{
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:calc((100cqw - var(--sp-5)) / 2);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none;
  /* 卡片有陰影、滑鼠移上去會往上浮 4px —— 留一點上下空間,不然會被切掉 */
  padding-block:8px 16px; margin-block:-8px -16px;
}
.product-grid.home-rail::-webkit-scrollbar{ display:none; }
.product-grid.home-rail > *{ scroll-snap-align:start; }
.product-grid.home-rail:focus-visible{ outline:2px solid var(--coral-deep); outline-offset:4px; border-radius:var(--r-lg); }
@container (min-width:828px){
  .product-grid.home-rail{ grid-auto-columns:calc((100cqw - 2 * var(--sp-5)) / 3); }
}
@media (max-width:640px){
  .product-grid.home-rail{ grid-auto-columns:calc((100cqw - var(--sp-3)) / 2); }
}
@media (prefers-reduced-motion: reduce){
  .product-grid.home-rail{ scroll-behavior:auto; }
}

.home-rail__arrows{ display:flex; gap:var(--sp-2); }
.home-rail__arrows[hidden]{ display:none; }
.home-rail__arrow{
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--glass-strong); border:1px solid var(--line); color:var(--ink);
  cursor:pointer; transition:background var(--dur) var(--ease);
}
.home-rail__arrow:hover:not(:disabled){ background:#fff; }
.home-rail__arrow:disabled{ opacity:.35; cursor:default; }

.home-rail__more{ display:flex; justify-content:center; margin-top:var(--sp-6); }
.home-rail__all{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  background:transparent; color:var(--ink); border:1.5px solid var(--ink);
}
.home-rail__all:hover{ background:var(--glass); color:var(--ink); }

/* ---------- 「還有下一頁」的提示(D-128,經營者選 A + B) ----------
   ⚠️ 兩個都【不碰卡片大小】:淡出是蓋在上面的一層,圓點在這排下面 */
.home-rail-wrap{ position:relative; }
/* A:右緣淡出。只有「右邊還有東西」時才出現(JS 加 home-rail-wrap--more) */
.home-rail-wrap::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:56px;
  background:linear-gradient(to right, rgba(253,250,243,0), var(--cream-warm) 85%);
  pointer-events:none; opacity:0; transition:opacity var(--dur) var(--ease);
}
.home-rail-wrap.home-rail-wrap--more::after{ opacity:1; }
@media (max-width:640px){ .home-rail-wrap::after{ width:36px; } }

/* B:小圓點(≤ 8 頁)/ 細長進度條(> 8 頁) */
.home-rail__dots{ display:flex; justify-content:center; align-items:center; gap:2px; margin-top:var(--sp-4); }
.home-rail__dots[hidden]{ display:none; }
.home-rail__dot{
  /* 按的範圍 28×28,看得到的圓點只有中間那一顆 */
  width:28px; height:28px; padding:0; border:0; background:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.home-rail__dot::before{
  content:""; width:7px; height:7px; border-radius:999px; background:var(--line);
  transition:width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.home-rail__dot.is-on::before{ width:20px; background:var(--coral-deep); }
.home-rail__bar{ display:block; width:min(160px, 50%); height:4px; border-radius:999px; background:var(--line); overflow:hidden; }
.home-rail__bar > span{ display:block; height:100%; width:0; border-radius:999px; background:var(--coral-deep); transition:width .2s var(--ease); }

/* ============================================================
   首-3(D-128):跑馬燈 → 讀寫聽 → 抹茶區塊
   ============================================================ */
:root{
  --home-band:     #4A4038;   /* 跑馬燈的深咖啡底(= --ink) */
  --home-mq-1:     #FBF6EC;   /* 第一句:奶油 */
  --home-mq-2:     #F2BFAC;   /* 第二句:淡珊瑚 */
  --home-mq-3:     #CFE0BF;   /* 第三句:淡抹茶 */
  --home-matcha:   #5F7052;   /* 抹茶色區塊(白字對比 5.3:1) */
  --home-matcha-t: #EEF0E6;   /* 抹茶區塊裡的說明字 */
  --home-matcha-hl:#F3D3C6;   /* 抹茶區塊裡強調的那幾個字 */
}

/* ---------- ④ 跑馬燈 ---------- */
.home-marquee{ background:var(--home-band); padding:15px 0; overflow:hidden; }
.home-marquee__track{ display:flex; width:max-content; animation:home-marquee 32s linear infinite; }
.home-marquee:hover .home-marquee__track{ animation-play-state:paused; }   /* 滑鼠移上去先停住,讓人看完 */
.home-marquee__group{ display:flex; align-items:center; gap:24px; padding-right:24px; flex:none; }
.home-marquee__text{
  font-family:var(--font-serif-zh); font-weight:700; font-size:15px; white-space:nowrap;
  animation:home-glow 3.2s ease-in-out infinite;
}
.home-marquee__text--1{ color:var(--home-mq-1); text-shadow:0 0 6px rgba(255,246,230,.55), 0 0 14px rgba(255,246,230,.55); }
.home-marquee__text--2{ color:var(--home-mq-2); text-shadow:0 0 6px rgba(242,191,172,.55), 0 0 14px rgba(242,191,172,.55); }
.home-marquee__text--3{ color:var(--home-mq-3); text-shadow:0 0 6px rgba(207,224,191,.55), 0 0 14px rgba(207,224,191,.55); }
.home-marquee__dot{ flex:none; width:5px; height:5px; border-radius:50%; background:var(--home-mq-1); opacity:.45; }
@keyframes home-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes home-glow{ 0%,100%{ opacity:.88; } 50%{ opacity:1; } }

/* ---------- ⑤ 讀・寫・聽 ---------- */
.home-rwl{ text-align:center; }
.home-rwl__script{ font-family:var(--font-script); font-style:italic; font-weight:500; font-size:1.375rem; color:#D0836A; margin:0; }
.home-rwl__title{ font-family:var(--font-serif-zh); font-weight:700; font-size:var(--fs-xl); margin:var(--sp-2) 0 var(--sp-6); }
.home-rwl__cards{ list-style:none; margin:0 auto; padding:0; max-width:720px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-3); }
.home-rwl__card{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:26px 6px 20px; border-radius:60px 60px 16px 16px; background:#fff;
  box-shadow:var(--sh-sm);
}
.home-rwl__icon--coral{ color:#D0836A; } .home-rwl__icon--sage{ color:#7E9170; } .home-rwl__icon--gold{ color:var(--home-gold); }
.home-rwl__name{ font-size:var(--fs-base); font-weight:700; margin:0; }
.home-rwl__desc{ font-size:var(--fs-xs); line-height:1.6; color:var(--ink-soft); margin:0; }
@media (min-width:641px){
  .home-rwl__cards{ gap:var(--sp-5); }
  .home-rwl__card{ padding:34px 12px 26px; border-radius:90px 90px 20px 20px; }
  .home-rwl__name{ font-size:var(--fs-lg); }
  .home-rwl__desc{ font-size:var(--fs-sm); }
}

/* ---------- ⑥ 抹茶色區塊 ---------- */
.home-matcha{
  background:var(--home-matcha); color:var(--cream);
  padding:var(--sp-8) 0; border-radius:0 120px 0 0;
}
.home-matcha__count{ display:flex; align-items:baseline; gap:10px; margin:0; }
.home-matcha__num{ font-family:var(--font-script); font-style:italic; font-weight:500; font-size:76px; line-height:1; }
.home-matcha__unit{ font-family:var(--font-serif-zh); font-weight:700; font-size:var(--fs-xl); }
.home-matcha__lead{ margin:var(--sp-3) 0 0; font-size:var(--fs-base); line-height:1.9; color:var(--home-matcha-t); }
.home-matcha__hl{ color:var(--home-matcha-hl); font-weight:500; }
.home-fit__title{
  display:table; margin:var(--sp-7) auto var(--sp-5);
  padding:10px 26px; border-radius:999px; background:var(--cream); color:var(--ink);
  font-size:var(--fs-base); font-weight:700;
}
.home-fit{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 12px; }
.home-fit__item{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.home-fit__icon{ width:72px; height:72px; border-radius:50%; background:var(--cream); color:var(--home-matcha); display:flex; align-items:center; justify-content:center; }
.home-fit__text{ font-size:var(--fs-sm); line-height:1.6; }
@media (min-width:900px){
  .home-matcha{ border-radius:0 200px 0 0; }
  .home-fit{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px 24px; max-width:860px; margin:0 auto; }
  .home-fit__text{ font-size:var(--fs-base); }
}

/* ---------- ⑦ 試讀 ---------- */
.home-trial{
  max-width:560px; margin:0 auto; padding:30px 22px 32px; text-align:center;
  border-radius:140px 140px 24px 24px; background:#F3E6CE;
}
.home-trial__eyebrow{ margin:0; font-family:var(--font-en); font-size:11px; letter-spacing:.3em; color:#7E6440; }
.home-trial__title{ margin:8px 0 0; font-family:var(--font-serif-zh); font-weight:700; font-size:var(--fs-xl); line-height:1.6; }
.home-trial__hl{ color:#B4604A; }   /* 對 #F3E6CE 約 4:1,大字夠 */
.home-trial__desc{ margin:10px 0 20px; font-size:var(--fs-sm); line-height:1.8; color:#6F655B; }
.home-trial__btn{
  display:inline-flex; align-items:center; min-height:48px; padding:0 28px; border-radius:999px;
  background:var(--ink); color:var(--cream); text-decoration:none; font-weight:500;
}
.home-trial__btn:hover{ background:#2F2924; color:var(--cream); }
.home-trial__btn:focus-visible{ outline:3px solid var(--coral-deep); outline-offset:3px; }

/* ---------- ⑧ 購買流程(五步驟) ---------- */
.home-steps-wrap{ padding-top:0; }
.home-steps__eyebrow{ margin:0; text-align:center; font-family:var(--font-en); font-weight:600; font-size:var(--fs-lg); letter-spacing:.06em; }
.home-steps__title{ margin:6px 0 26px; text-align:center; font-family:var(--font-serif-zh); font-weight:700; font-size:var(--fs-xl); }
.home-steps{ position:relative; list-style:none; margin:0 auto; padding:0; max-width:560px; display:flex; flex-direction:column; gap:14px; }
.home-steps::before{   /* 串起五個圓圈的虛線 */
  content:''; position:absolute; left:21px; top:22px; bottom:22px; border-left:2px dashed var(--coral);
  pointer-events:none;
}
.home-steps__item{ position:relative; display:flex; gap:14px; align-items:center; }
.home-steps__num{
  flex:none; width:44px; height:44px; border-radius:50%; background:var(--coral); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-en); font-weight:600;
}
.home-steps__text{ flex:1; padding:12px 18px; border-radius:22px; background:#FBF1D9; font-size:var(--fs-sm); line-height:1.6; }
.home-steps__item--last .home-steps__num{ background:var(--home-matcha); color:var(--cream); }
.home-steps__item--last .home-steps__text{ background:#DCE3D2; }

/* ---------- 捲動到才出現(支援的瀏覽器才有;不支援的直接顯示,內容不會少) ---------- */
@supports (animation-timeline: view()){
  .home-rv{ animation:home-fu linear both; animation-timeline:view(); animation-range:entry 0% cover 25%; }
}

/* ⚠️ 減少動態效果:跑馬燈停下來、改成三句直接排出來;不發光、不浮上來 */
@media (prefers-reduced-motion: reduce){
  .home-marquee__track{ animation:none; width:100%; justify-content:center; }
  .home-marquee__group{ flex:1 1 auto; min-width:0; flex-wrap:wrap; justify-content:center; padding:0 var(--sp-4); row-gap:6px; }
  .home-marquee__group[aria-hidden="true"]{ display:none; }
  .home-marquee__text{ animation:none; white-space:normal; text-align:center; }
  .home-rv{ animation:none; }
}