/* ===== 單頁捲動的版面 ===== */

/* 頂端捲動進度線 */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 1.5px;
  background: var(--accent-warm);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 200;
  opacity: .75;
  pointer-events: none;
}

/* ---------- 進場揭露 ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .95s cubic-bezier(.22,1,.36,1),
              transform .95s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 橫向釘住 ---------- */
.pin {
  position: relative;
}
.pin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;          /* 橫向溢出由 track 位移處理，不產生捲軸 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pin-head {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--measure);
  margin: 0 auto 44px;
  padding-top: 104px;       /* 讓開膠囊導覽列的高度與上方留白 */
}
.pin-head h2 { margin: 0; }
/* 背景巨型字：比陳列慢三倍，做出景深。純裝飾，不參與閱讀 */
.lane-ghost {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  gap: 6vw;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.lane-ghost span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(180px, 30vw, 460px);
  font-weight: 300;
  line-height: .8;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(240, 228, 196, .07);
}

.lane {
  position: relative;
  z-index: 1;
  perspective: 1400px;
  display: flex;
  align-items: stretch;
  gap: clamp(40px, 5vw, 96px);
  height: 100%;
  padding-left: max(var(--gutter), calc((100vw - var(--measure)) / 2));
  padding-right: 34vw;   /* 尾段留白：最後一項要能走到畫面中央 */
  will-change: transform;
}

/* 錯落陳列：尺寸與垂直位置都不一致，整齊排列會失去節奏 */
.lane-item {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-self: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: filter .5s ease;
}
/* 位於畫面中心的那一杯被打亮，兩側沉入暗處 */
.lane-item, .shot, .scene-panel { filter: brightness(calc(.88 + var(--focus, 0) * .12)); }
.lane-xl { width: clamp(280px, 23vw, 360px); }
.lane-lg { width: clamp(235px, 19vw, 300px); }
.lane-md { width: clamp(200px, 16vw, 254px); }
.lane-sm { width: clamp(172px, 13.5vw, 214px); }

/* 垂直錯開，讓視線在捲動時上下起伏 */
.lane-top { align-self: flex-start; margin-top: 4vh; }
.lane-mid { align-self: center; }
.lane-bot { align-self: flex-end; margin-bottom: 5vh; }

.lane-cap {
  margin-bottom: 14px;
  min-height: 34px;
}
.lane-cap b {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--text);
}
.lane-cap span {
  display: block;
  font-size: 10.5px;
  letter-spacing: .6px;
  color: var(--text-dim);
  margin-top: 5px;
}
.lane-plate {
  position: relative;
  box-shadow: 0 0 calc(var(--focus, 0) * 60px) rgba(240, 228, 196, calc(var(--focus, 0) * .1));
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .014);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 8% 14% 10%;
  overflow: hidden;
  transition: border-color .7s cubic-bezier(.22,1,.36,1);
}
/* 杯子撐滿盤面。原本只佔中間一小塊，四周全空，才會顯得空洞 */
.lane-plate svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.lane-item:hover .lane-plate { border-color: rgba(240, 228, 196, .34); }

/* 杯型線條與液體 */
.gl-line { fill: none; stroke: rgba(240, 236, 226, .72); stroke-width: 2.2; stroke-linejoin: round; }
.gl-fill {
  opacity: calc(.55 + var(--focus, 0) * .45);
  filter: drop-shadow(0 0 calc(var(--focus, 0) * 26px) rgba(255, 170, 120, calc(var(--focus, 0) * .5)));
}

/* 引言：打斷陳列的節奏，跟參考站一樣 */
.lane-quote {
  width: clamp(240px, 22vw, 340px);
  justify-content: center;
}
.lane-quote blockquote {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
  font-size: clamp(21px, 2.1vw, 31px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--text);
  margin: 0 0 20px;
}
.lane-quote-mark {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-gold);
}

/* 進度計量：釘住期間顯示走到哪 */
.lane-meter {
  position: absolute;
  left: max(var(--gutter), calc((100vw - var(--measure)) / 2));
  bottom: 6vh;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.lane-meter i {
  display: block;
  width: 168px; height: 1px;
  background: var(--border);
  position: relative;
}
.lane-meter i b {
  position: absolute;
  /* inset 只釘三邊、又沒給寬度的話，元素寬度會是 0，
     transform-origin 也就永遠算成 0px —— 這條進度條原本根本沒顯示。 */
  inset: 0;
  background: var(--accent-warm);
  transform: scaleX(var(--pin-progress, 0));
  transform-origin: 0 50%;
}

/* 釘住區的進度計數：01 / 04 */
.pin-count {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  margin-top: 26px;
}

/* ---------- 跑馬燈 ---------- */
.marquee {
  overflow: hidden;
  /* 留白要跟著字級走。68px 的字配 82px 留白比例太緊，
     用 em 綁在字級上，之後改字級也不會再擠回去。 */
  padding: clamp(96px, 12vw, 190px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.marquee-row {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee-row:hover { animation-play-state: paused; }
.marquee-row span {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
  font-size: clamp(30px, 4.6vw, 68px);
  font-weight: 300;
  color: var(--text-dim);
  padding: 0 clamp(38px, 3.4vw, 62px);
  letter-spacing: .04em;
  line-height: 1.35;          /* 中文字身高，行高太緊會貼到上下邊界 */
  white-space: nowrap;
}
.marquee-row span em {
  font-style: italic;
  color: var(--accent-warm);
}
/* 內容複製一份，位移 -50% 剛好無縫接回 */
@keyframes marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* ---------- 捲動提示 ---------- */
.scroll-cue {
  position: absolute;
  bottom: 46px; left: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.scroll-cue i {
  display: block;
  width: 54px; height: 1px;
  background: linear-gradient(90deg, var(--accent-gold), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent-warm);
  animation: cueSlide 2.6s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes cueSlide {
  0%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-row, .scroll-cue i::after { animation: none; }
}

/* ===== 導讀：釘住一段文字，逐句點亮並畫底線 ===== */
.guide { position: relative; }
.guide-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
}
.guide-inner {
  width: calc(100% - var(--gutter) * 2);
  max-width: 880px;
  margin: 0 auto;
}
.guide-text {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
  font-size: clamp(22px, 3vw, 42px);
  font-weight: 300;
  line-height: 1.85;
  margin: 0;
}
.guide-text span {
  display: inline;
  position: relative;
  color: var(--text-faint);
  transition: color .6s cubic-bezier(.22,1,.36,1);
}
.guide-text span.lit { color: var(--text); }
/* 底線隨該句的閱讀進度長出來 */
.guide-text span::after {
  content: '';
  position: absolute;
  left: 0; bottom: -.14em;
  height: 1px;
  width: calc(var(--lit, 0) * 100%);
  background: linear-gradient(90deg, var(--accent-warm), rgba(220,203,166,.25));
  transition: width .35s linear;
}
@media (prefers-reduced-motion: reduce) {
  .guide { height: auto !important; }
  .guide-stage { position: static; height: auto; padding: 120px 0; }
  .guide-text span { color: var(--text); }
  .guide-text span::after { width: 0; }
}

/* ===== 產品實績畫面 ===== */
.shot { flex: 0 0 auto; margin: 0; display: flex; flex-direction: column; align-self: center;
        transform-style: preserve-3d; will-change: transform, opacity; }
.shot-tall { width: clamp(300px, 25vw, 400px); align-self: flex-start; margin-top: 3vh; }
.shot-wide { width: clamp(360px, 31vw, 500px); align-self: flex-end; margin-bottom: 4vh; }
.shot-cap { margin-bottom: 15px; }
.shot-cap b { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 2.6px;
              text-transform: uppercase; color: var(--accent-gold); }
.shot-cap span { display: block; font-size: 12px; color: #ADA79A; margin-top: 5px; }

/* 瀏覽器外框：讓截圖看起來是真的產品畫面 */
.shot-frame {
  /* 原本卡片底與頁面底的對比只有 1.01:1 —— 等於沒有邊界。
     區隔要靠提亮的底色、看得見的邊框、頂緣內光與落影一起做出來。 */
  border: 1px solid rgba(233, 228, 218, .14);
  border-radius: 7px;
  overflow: hidden;
  background: #15121B;
  box-shadow:
    0 34px 80px rgba(0, 0, 0, .72),
    0 2px 10px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
.shot-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(233, 228, 218, .1);
}
.shot-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.24); }
.shot-bar span { margin-left: 10px; font-size: 9.5px; letter-spacing: .6px; color: var(--text-dim); }
.shot-body { padding: 22px 20px 24px; }

.sh-eyebrow { font-size: 9.5px; letter-spacing: 2.4px; text-transform: uppercase;
              color: #A8A296; margin-bottom: 12px; }

/* 風味 DNA */
.sh-dna-name { font-family: 'Cormorant Garamond','Noto Serif TC',Georgia,serif;
               font-size: 30px; font-weight: 500; color: var(--accent-warm); margin-bottom: 12px; }
.sh-dna-text { font-size: 12.5px; line-height: 1.95; color: #B5AFA2; margin: 0 0 18px; }
.sh-traits { display: flex; flex-wrap: wrap; gap: 7px; }
.sh-traits span { font-size: 10.5px; padding: 5px 11px; border: 1px solid var(--border);
                  border-radius: 2px; color: var(--text); }

/* 推薦酒單 */
.sh-recs { display: flex; flex-direction: column; gap: 9px; }
.sh-rec { display: flex; align-items: center; gap: 12px; padding: 11px 12px;
          border: 1px solid var(--border); border-radius: 3px; }
.sh-rec i { width: 26px; height: 34px; border-radius: 2px; flex: none;
            background: linear-gradient(180deg, var(--c1), var(--c2)); }
.sh-rec div { flex: 1; min-width: 0; }
.sh-rec b { display: block; font-size: 12.5px; font-weight: 500; }
.sh-rec span { display: block; font-size: 10.5px; color: #A8A296; margin-top: 3px; }
.sh-rec em { font-family: 'Cormorant Garamond',Georgia,serif; font-style: normal;
             font-size: 19px; color: var(--accent-warm); font-variant-numeric: tabular-nums; }

/* 調酒成品 */
.sh-cock { display: flex; gap: 18px; align-items: center; }
.sh-cock-vis { flex: 0 0 34%; }
.sh-cock-vis svg { width: 100%; }
.sh-cock-name { font-family: 'Cormorant Garamond',Georgia,serif; font-size: 26px;
                font-weight: 500; color: var(--text); line-height: 1.15; }
.sh-cock-meta { font-size: 10.5px; color: #A8A296; margin: 6px 0 14px; }
.sh-bars { display: flex; flex-direction: column; gap: 8px; }
.sh-bars div { display: flex; align-items: center; gap: 9px; }
.sh-bars span { font-size: 10px; color: #A8A296; width: 32px; flex: none; }
.sh-bars i { flex: 1; height: 2px; background: rgba(255,255,255,.08); display: block; }
.sh-bars b { display: block; height: 100%; background: var(--accent-warm); }

/* 配方 */
.sh-recipe { display: grid; grid-template-columns: 1fr 1.15fr; gap: 22px; }
.sh-ing { list-style: none; padding: 0; margin: 0; }
.sh-ing li { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px;
             padding: 8px 0; border-bottom: 1px solid var(--border); }
.sh-ing em { font-style: normal; color: var(--accent-gold); font-variant-numeric: tabular-nums; }
.sh-steps { margin: 0; padding-left: 16px; }
.sh-steps li { font-size: 11.5px; line-height: 1.8; color: #B5AFA2; margin-bottom: 8px; }

/* 社群動態 */
.sh-feed { display: flex; flex-direction: column; gap: 11px; }
.sh-post { padding: 13px 14px; border: 1px solid var(--border); border-radius: 3px; }
.sh-post-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.sh-post-head i { width: 24px; height: 24px; border-radius: 50%; flex: none;
                  display: grid; place-items: center; font-style: normal; font-size: 11px;
                  background: linear-gradient(140deg, var(--accent-gold), #6E5B32); color: #14120C; }
.sh-post-head b { font-size: 12px; font-weight: 500; }
.sh-post-head span { font-size: 10px; color: #9A9488; margin-left: auto; }
.sh-post p { font-size: 11.5px; line-height: 1.8; color: #B5AFA2; margin: 0 0 10px; }
.sh-post-foot { display: flex; gap: 14px; font-size: 10.5px; color: #9A9488; }

/* 情境卡 */
.scene-panel {
  flex: 0 0 clamp(250px, 21vw, 330px);
  align-self: center;
  padding: 38px 32px;
  border: 1px solid rgba(233, 228, 218, .12);
  border-radius: 3px;
  background: #14111A;
  box-shadow: 0 26px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.scene-panel h3 { font-family: 'Cormorant Garamond','Noto Serif TC',Georgia,serif;
                  font-size: 25px; font-weight: 500; margin: 18px 0 12px; }
.scene-panel p { font-size: 12.5px; line-height: 2; color: #B5AFA2; margin: 0 0 18px; }
.scene-tag { font-size: 10.5px; letter-spacing: 1.4px; color: var(--accent-warm); }

.pin.pin-off .shot, .pin.pin-off .scene-panel {
  width: 100% !important; align-self: stretch !important; margin: 0 !important;
  transform: none !important; opacity: 1 !important; filter: none !important;
}

/* ===== 倒酒影片：捲動擦洗 ===== */
.pour { position: relative; }
.pour-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.pour-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 不再調亮度 —— 壓暗會削弱感知銳利度，看起來就像畫質變差。
     色調的融合交給下方的遮罩層處理。 */
  filter: none;
  /* 上下緣讓影片自己淡出，露出頁面背景，接縫就不存在。
     疊一層半透明色是蓋不掉的：只要不是全不透明，邊緣一定會透出來。 */
  /* 只處理最邊緣那條硬邊，不要吃到畫面內容。
     先前拉到 34%，在滿版高度下約 390px，等於把手和杯子一起壓暗了。 */
  --pour-fade: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,.55) 2.5%,
    rgba(0,0,0,.88) 4.5%,
    #000 7%,
    #000 94%,
    rgba(0,0,0,.7) 97%,
    transparent 100%);
  -webkit-mask-image: var(--pour-fade);
  mask-image: var(--pour-fade);
}
/* 上下壓暗，讓文字有落點；中段保持透明不擋畫面 */
.pour-shade {
  position: absolute;
  inset: 0;
  /* 只為了讓文字站得住，中段完全放行，不遮到倒酒本身 */
  /* 上緣收到與頁面完全相同的底色，中段全放行不擋畫面 */
  /* 上緣用頁面底色接住接縫即可，很快就放行，不壓到畫面 */
  background:
    linear-gradient(180deg,
      #09080D 0%, rgba(9,8,13,.55) 3%, rgba(9,8,13,.2) 7%,
      rgba(9,8,13,.05) 11%, transparent 15%,
      transparent 72%, rgba(9,8,13,.45) 90%, rgba(9,8,13,.85) 97%, #09080D 100%);
  pointer-events: none;
}
.pour-copy {
  position: relative;
  z-index: 1;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--measure);
  align-self: start;
  padding-top: 20vh;
  /* 隨擦洗進度淡出，讓畫面在後半段留給倒酒本身 */
  opacity: calc(1 - var(--scrub, 0) * 1.5);
  transition: opacity .2s linear;
}
.pour-copy h2 {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
  font-size: clamp(34px, 5vw, 74px);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 18px;
  color: var(--text);
}
.pour-copy p { font-size: 13px; letter-spacing: 1.4px; color: var(--text-dim); margin: 0; }

/* 進度條：知道自己滑到哪 */
.pour-track {
  position: absolute;
  left: max(var(--gutter), calc((100vw - var(--measure)) / 2));
  right: max(var(--gutter), calc((100vw - var(--measure)) / 2));
  bottom: 7vh;
  height: 1px;
  background: rgba(255,255,255,.12);
  z-index: 1;
}
.pour-track b {
  display: block;
  height: 100%;
  background: var(--accent-warm);
  transform: scaleX(var(--scrub, 0));
  transform-origin: 0 50%;
}

@media (max-width: 900px) {
  .pour-copy { padding-top: 16vh; }
}
@media (prefers-reduced-motion: reduce) {
  .pour { height: auto !important; }
  .pour-stage { position: static; height: 70vh; }
  .pour-copy { opacity: 1; }
}