/* 春水堂 案例頁 */

/* 標註點：設計稿為 27px 半透明白圈＋5px 紅點 */
.leadDot{position:absolute;z-index:6;width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.5);transform:translate(-50%,-50%)}
.leadDot::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#96252c}
.leadDot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(150,37,44,.5);animation:leadPulse 2.4s var(--ease) infinite}
@keyframes leadPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.7);opacity:0}}

/* 開場：依設計稿 1920 寬比例（左說明｜中直式 logo｜右英文） */
.caseBannerArea{position:relative;padding:max(4vw,56px) 0 4.74vw}
.caseBannerArea .wrap,.cstHeroArea .wrap{position:relative;z-index:1;max-width:calc(1693px + 11.88vw);padding-left:5.94vw;padding-right:5.94vw}
.caseBannerArea .bannerHead{max-width:calc((100vh - 140px) * 1693 / 864);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;column-gap:40px}
.caseBannerArea .logoBox{grid-column:2;grid-row:1;justify-self:center}
.caseBannerArea .logoV{height:clamp(150px,11.6vw,223px);width:auto}
.caseBannerArea .leftItem{grid-column:1;grid-row:1;margin-top:clamp(28px,2.19vw,42px);display:flex;align-items:flex-start;max-width:520px}
.caseBannerArea .leftItem .label{writing-mode:vertical-rl;font-family:var(--en);font-size:14px;line-height:1;letter-spacing:.02em;padding-top:4px;margin-right:5px;white-space:nowrap}
.caseBannerArea .leftItem .txt{border-left:1px solid #d9d9d9;padding-left:clamp(28px,2.08vw,40px);padding-top:4px;min-height:134px}
.caseBannerArea .leftItem .subTitle{margin-top:-4px;font-size:clamp(14px,.83vw,16px);line-height:1.45;letter-spacing:.04em}
.caseBannerArea .leftItem .text{margin-top:clamp(20px,1.6vw,30px);font-size:clamp(16px,1.04vw,20px);line-height:1.45;letter-spacing:.04em;max-width:432px}
.caseBannerArea .bigEn{grid-column:3;grid-row:1;justify-self:end;margin-top:clamp(30px,2.5vw,48px);max-width:400px;font-family:var(--en);font-size:clamp(22px,1.82vw,35px);line-height:1.23;color:var(--gray);text-align:right;text-transform:uppercase}
/* 平板：logo 置中在上，下方左說明｜右英文 */
@media(max-width:1024px){
  .caseBannerArea .bannerHead{grid-template-columns:1fr auto;column-gap:32px;row-gap:40px}
  .caseBannerArea .logoBox{grid-column:1 / -1;grid-row:1}
  .caseBannerArea .leftItem{grid-column:1;grid-row:2;margin-top:0}
  .caseBannerArea .bigEn{grid-column:2;grid-row:2;margin-top:4px;max-width:300px;font-size:22px}
}
/* 手機：單欄 */
@media(max-width:768px){
  .caseBannerArea{padding:64px 0 40px}
  .caseBannerArea .bannerHead{grid-template-columns:1fr;row-gap:32px}
  .caseBannerArea .logoV{height:120px}
  .caseBannerArea .leftItem .txt{padding-left:20px}
  .caseBannerArea .bigEn{grid-column:1;grid-row:3;justify-self:start;text-align:left;max-width:none;margin-top:0}
}

/* ① 首頁主視覺 */
.cstHeroArea{position:relative;z-index:2}
.heroStage{position:relative;width:100%;max-width:calc((100vh - 140px) * 1693 / 864);margin:0 auto;aspect-ratio:1693/864;container-type:inline-size}
.heroStage .heroShot{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.heroMask{position:absolute;top:0;bottom:0;background:rgba(10,8,6,.62);opacity:0;pointer-events:none}
.heroMask--nav{left:0;width:6.38%;border-radius:var(--radius) 0 0 var(--radius)}
.heroMask--content{left:6.38%;right:0;border-radius:0 var(--radius) var(--radius) 0}
.heroStage .noteCard{--n:max(calc(100cqw / 1693),.8px);opacity:0}
.noteCard--nav{left:8.98%;top:33%}
.noteCard--brand{left:44.83%;top:24.88%}
/* 引線座標取自設計稿 Vector 1/2（109x61 折線） */
.noteLead--nav{left:3.13%;top:40.28%;width:6.44%;height:7.06%}
.leadDot--nav{left:3.13%;top:47.34%}
.noteLead--brand{left:38.39%;top:31.94%;width:6.44%;height:7.06%}
.leadDot--brand{left:38.39%;top:39%}
.heroStage .leadDot{width:max(1.6cqw,20px);height:max(1.6cqw,20px)}
.heroStage .noteLead,.heroStage .leadDot{opacity:0}
@media(max-width:768px){
  .cstHeroArea{min-height:0;padding:40px 0 60px}
  .heroStage{max-width:none}
  .heroStage .noteCard{--n:1px;position:relative;left:auto;top:auto;width:auto;opacity:1;margin-top:16px}
  .heroStage .noteLead,.heroStage .leadDot,.heroMask{display:none}
}

/* ② 春水故事 */
.cstStoryArea{position:relative;padding:160px 0 180px}
.storyStage{position:relative;width:100%;max-width:min(1300px,calc((100vw - 48px) / 1.2784));margin:80px auto 0;aspect-ratio:1300/760;container-type:inline-size}
.storyStage .storyPaper{position:absolute;inset:0;background:#fff;border-radius:var(--radius);box-shadow:0 30px 80px rgba(60,40,20,.08)}
.storyStage .storyShot{position:absolute;left:3.08%;top:7.9%;width:93.85%;height:auto}
.storyBlockList{position:absolute;inset:0;pointer-events:none;border-radius:var(--radius);overflow:hidden}
.storyBlock{position:absolute;top:0;height:100%;width:17.4%;background:var(--red-soft);transform-origin:top}
.storyBlock:nth-child(1){left:0}
.storyBlock:nth-child(2){left:20.69%}
.storyBlock:nth-child(3){left:41.38%}
.storyBlock:nth-child(4){left:62.08%}
.storyBlock:nth-child(5){left:82.62%}
.storyStage .noteCard{--n:max(calc(100cqw / 1300),.8px)}
.storyStage .noteCard--left{width:calc(301 * var(--n))}
.storyStage .leadDot{width:max(2.08cqw,20px);height:max(2.08cqw,20px)}
.noteCard--left{left:-13.92%;top:48.68%}
.noteCard--right{left:73.6%;top:10.3%}
/* 引線座標取自設計稿 Vector 3/4 */
.noteLead--left{left:9.23%;top:51.32%;width:3.41%;height:10.99%}
.leadDot--left{left:12.64%;top:51.32%}
.noteLead--right{left:73.62%;top:30.53%;width:3.29%;height:10%}
.leadDot--right{left:73.62%;top:40.53%}
@media(max-width:1180px){
  .storyStage{max-width:none;aspect-ratio:auto;padding-top:calc(58.46% + 24px);display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .storyStage .storyPaper,.storyBlockList{bottom:auto;aspect-ratio:1300/760}
  .storyStage .noteLead,.storyStage .leadDot{display:none}
  .storyStage .noteCard{--n:1px;position:relative;top:auto;left:auto;width:auto}
}
@media(max-width:640px){
  .cstStoryArea{padding:100px 0 80px}
  .storyStage{grid-template-columns:1fr;margin-top:48px}
}

/* ③ 專屬風格元件 */
.cstCardsArea{position:relative;padding:40px 0 60px}
.cstCardsArea .wrap{position:relative;z-index:1}
.cstCardsArea .stamp{width:41px;margin:0 auto 24px}
.decoList{display:flex;justify-content:center;align-items:flex-end;gap:clamp(16px,3vw,52px);margin-top:60px}
.decoList li{height:clamp(56px,7vw,124px)}
.decoList img{height:100%;width:auto;mix-blend-mode:multiply}
/* 錯落卡牌：座標以 1920x1080 為基準，--u 為 1 單位的實際長度 */
.cardsPin{position:relative;z-index:1;padding:20px 0}
.cardsStage{position:relative;width:min(100% * 1920 / 2080,1920px,calc((100vh - 40px) * 1920 / 940));margin:0 auto;aspect-ratio:16/9;container-type:inline-size;--u:calc(100cqw / 1920)}
.cardField{position:absolute;left:50%;top:50%;width:calc(1920 * var(--u));height:calc(1080 * var(--u));margin:calc(-540 * var(--u)) 0 0 calc(-960 * var(--u));transform-origin:50% 50%}
@media(max-width:768px){
  /* 手機改方形舞台；終點版面在 JS 內向中央收攏、上下拉開，確保全部可見 */
  .cardsStage{width:100%;aspect-ratio:1/1;--u:calc(100cqw / 1920 * 1.5)}
}
.cardItem{position:absolute;left:0;top:0;width:calc(var(--bw) * var(--u));aspect-ratio:var(--ar);background:#fff;visibility:hidden;will-change:transform,filter;
  transform:translate(calc(var(--x, 960) * var(--u) - 50%),calc(var(--y, 540) * var(--u) - 50%)) scale(calc(var(--w, 300) / var(--bw)));
  filter:blur(calc(var(--b, 0) * var(--u) / (var(--w, 300) / var(--bw))));box-shadow:0 calc(5 * var(--u)) calc(24 * var(--u)) rgba(60,55,50,.14)}
.cardItem > img{width:100%;height:100%;object-fit:cover}
/* 產品卡：版面依卡片寬 540 單位排版 */
.cardItem--card{container-type:inline-size}
.cardFace{position:absolute;inset:0;--c:calc(100cqw / 540);color:#282422;font-family:var(--serif)}
.cardFace p{position:absolute;left:calc(46 * var(--c));right:calc(46 * var(--c));white-space:nowrap}
.cardFace .cardEn{top:calc(48 * var(--c));font-family:'Cormorant',var(--en);font-weight:500;font-size:calc(27 * var(--c));line-height:calc(28 * var(--c));color:#787470;letter-spacing:.02em}
.cardFace .cardNo{left:auto;top:calc(32 * var(--c));height:calc(58 * var(--c));padding:0 0 0 calc(6 * var(--c));border-top:calc(2 * var(--c)) solid #cdcac6;border-bottom:calc(2 * var(--c)) solid #cdcac6;font-family:'Cormorant',var(--en);font-weight:500;font-size:calc(30 * var(--c));line-height:calc(54 * var(--c))}
.cardFace .cardImg{position:absolute;left:50%;top:calc(302 * var(--c));height:calc(340 * var(--c));width:auto;transform:translate(-50%,-50%)}
.cardFace--food .cardImg{top:calc(304 * var(--c));width:62%;height:auto}
.cardFace .cardTag{top:calc(503 * var(--c));padding-left:calc(24 * var(--c));font-size:calc(24 * var(--c));line-height:calc(28 * var(--c));overflow:hidden;text-overflow:ellipsis}
.cardFace .cardTag::before{content:"";position:absolute;left:0;top:calc(9 * var(--c));width:calc(10 * var(--c));height:calc(10 * var(--c));background:#961e23}
.cardFace .cardName{top:calc(557 * var(--c));padding-top:calc(24 * var(--c));border-top:calc(2 * var(--c)) solid #cdcac6;font-weight:500;font-size:calc(36 * var(--c));line-height:calc(44 * var(--c))}
.cardFace .cardSize{position:absolute;right:0;font-family:'Cormorant',var(--en);font-weight:500;font-size:calc(40 * var(--c))}
.cardFace .cardDesc{top:calc(644 * var(--c));padding-top:calc(20 * var(--c));border-top:calc(2 * var(--c)) solid #cdcac6;white-space:normal;font-size:calc(28 * var(--c));line-height:calc(50 * var(--c));color:#46423e;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:768px){.decoList{flex-wrap:wrap;gap:14px 22px}.decoList li{height:52px}}

/* ④ 菜單互動 */
.cstFeatureArea{position:relative;padding:120px 0 160px}
.featList{display:grid;grid-template-columns:repeat(2,1fr);gap:80px 28px;max-width:1546px;margin:80px auto 0}
.featCard .cardVideo{position:relative;aspect-ratio:1850/1040;background:#fff;overflow:hidden;border-radius:var(--radius);box-shadow:0 20px 60px rgba(60,40,20,.12)}
/* 影片只負責解碼（幾乎透明，藏在 canvas 下），畫面由 canvas 顯示，避免硬體影片層在捲動時露出黑邊 */
.featCard .cardVideo{background:#fff center/cover no-repeat}
.featCard video{position:absolute;inset:0;width:100%;height:100%;opacity:.01;pointer-events:none}
.featCard .cardCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.featCard .cardName{display:flex;align-items:center;gap:14px;margin-top:36px;font-size:17px;letter-spacing:.1em}
.featCard .cardName::after{content:"";flex:1;height:1px;background:rgba(0,0,0,.12)}
@media(max-width:768px){
  .cstFeatureArea{padding:80px 0 100px}
  .featList{grid-template-columns:1fr;margin-top:48px}
}

/* ⑤ 客製化內頁 */
.cstPageArea{position:relative;padding:60px 0 140px}
.pageSwiper{margin-top:80px;padding:20px 0 50px;overflow:visible}
.pageSwiper .pageItem{width:clamp(280px,46vw,759px);aspect-ratio:759/486;user-select:none}
.pageSwiper .pageItem img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);box-shadow:0 24px 60px rgba(60,40,20,.14);pointer-events:none;transform:scale(.9);transition:transform .8s var(--ease)}
.pageSwiper .swiper-slide-active img{transform:scale(1)}
.pageSwiper.is-grabbing .pageItem img{transform:scale(.86)}
@media(hover:hover) and (pointer:fine){.pageSwiper,.pageSwiper *{cursor:none}}
.pageProgress{max-width:320px;height:1px;margin:10px auto 0;background:rgba(0,0,0,.12)}
.pageProgress i{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(.1667)}
@media(max-width:768px){.pageSwiper{margin-top:48px}.pageSwiper .pageItem{width:80vw}}

/* 結尾 */
.caseEndArea{padding:60px 0 140px;text-align:center}
.caseEndArea .logo{margin:0 auto;width:250px;height:auto}
.caseEndArea .text{margin-top:28px;font-size:16px;letter-spacing:.2em;color:var(--black2)}
.caseEndArea .teamBox{max-width:640px;margin:72px auto 0;padding-top:48px;border-top:1px solid #d9d9d9;position:relative}
.caseEndArea .teamBox::before{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--red)}
.caseEndArea .teamEn{font-family:var(--en);font-style:italic;font-size:13px;letter-spacing:.08em;color:var(--red)}
.caseEndArea .teamTitle{margin-top:10px;font-size:20px;font-weight:500;letter-spacing:.3em;text-indent:.3em;color:var(--black)}
.caseEndArea .teamList{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px}
.caseEndArea .teamItem{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 12px}
.caseEndArea .teamItem + .teamItem{border-left:1px solid #d9d9d9}
.caseEndArea .teamItem .role{font-family:var(--en);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray2)}
.caseEndArea .teamItem .name{font-size:22px;font-weight:500;letter-spacing:.12em;text-indent:.12em;color:var(--black2)}
@media (max-width:600px){
  .caseEndArea .teamBox{margin-top:56px;padding-top:40px}
  .caseEndArea .teamList{grid-template-columns:1fr;gap:20px}
  .caseEndArea .teamItem + .teamItem{border-left:0;border-top:1px solid #d9d9d9;padding-top:20px}
}
.caseEndArea .btnBox{display:flex;justify-content:center;gap:16px;margin-top:44px;flex-wrap:wrap}

/* iPhone Safari：100vh 含隱藏網址列的高度，改用實際可見高度 svh */
@supports (height:100svh){
  .caseBannerArea .bannerHead,.heroStage{max-width:calc((100svh - 140px) * 1693 / 864)}
  .cardsStage{width:min(100% * 1920 / 2080,1920px,calc((100svh - 40px) * 1920 / 940))}
}
@media(max-width:768px){
  @supports (height:100svh){.cardsStage{width:100%}}
}