:root{--page-width:960px;--header-h:80px;--dark:#171717;--red:#d8322d;--accent:#895200}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#111}
body{margin:0;background:#3e494f;color:#fff;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;overflow-x:hidden}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site-header{position:sticky;z-index:1000;top:0;left:0;width:100%;max-width: 960px;margin: auto; height:var(--header-h);background:linear-gradient(90deg,#151515,#222,#151515);box-shadow:0 1px 0 rgba(255,255,255,.12)}
.header-inner{width:min(100%,var(--page-width));height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 36px}
.brand{width:88px;height:58px;display:flex;align-items:center}
.brand img{max-height:56px;margin:auto}
.header-actions{display:flex;align-items:center;gap:20px}
.round-link{width:50px;height:50px;padding:13px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;transition:transform .25s ease,background .25s ease}
.round-link:hover{transform:translateY(-3px) scale(1.05);background:#ed443d}
.round-link img{max-height:100%;max-width:100%;object-fit:contain}
.brand-circle img{width:31px;height:auto}
.menu-toggle{width:54px;height:50px;padding:8px 4px;border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;justify-content:space-around}
.menu-toggle span{width:40px;height:4px;background:#fff;display:block;transition:.3s}
.menu-overlay{position:fixed;z-index:9999;inset:0;padding-top:0;visibility:hidden;opacity:0;transition:opacity .35s ease,visibility .35s ease}
.menu-overlay.is-open{visibility:visible;opacity:1}
.menu-shade{position:absolute;inset:0;background:rgba(0,0,0,.33);}
.menu-panel{position:relative;width:min(100%,var(--page-width));min-height:100vh;margin:auto;padding:40px 5% 70px;background:rgba(4,4,4,.9);display:flex;flex-direction:column;justify-content:center}
.menu-panel a{display:block;text-align:center;padding:23px 10px;border-bottom:1px dashed rgba(255,255,255,.25);font-size:30px;font-weight:900;letter-spacing:1px;color:#fff;text-shadow:-2px -2px 0 var(--accent),2px -2px 0 var(--accent),-2px 2px 0 var(--accent),2px 2px 0 var(--accent);transition:transform .2s,color .2s}
.menu-panel a:hover{transform:scale(1.035);color:#fff7e9}
.menu-close{position:absolute;right:34px;top:22px;width:54px;height:54px;border:0;background:transparent;cursor:pointer}
.menu-close span{position:absolute;left:7px;top:25px;width:42px;height:4px;background:#fff}
.menu-close span:first-child{transform:rotate(45deg)}
.menu-close span:last-child{transform:rotate(-45deg)}
.page-shell{width:min(100%,var(--page-width));margin:0 auto 0;background:#eee;overflow:hidden}
.hero-section{position:relative;width:100%;overflow:hidden;background:#e9ddc4}
.hero-canvas{position:relative;width:100%;padding-top:100%;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.layer{position:absolute;z-index:2;will-change:transform,opacity}
.layer img{width:100%;height:auto}
.title-layer{left:-.8%;top:2.5%;width:101.8%;z-index:3}
.slogan-layer{left:9.6%;top:24.1%;width:53.9%;z-index:4}
.product-beige{    left: 12%;
    top: 43%;
    width: 35.5%;
    z-index: 5;}
.product-gray{    left: 38.6%;
    top: 43%;
    width: 32%;
    z-index: 6;}
.product-green{right: 3.0%;
    top: 25%;
    width: 31%;
    z-index: 5;}
.footer-label{left:2.1%;bottom:1.6%;width:95.8%;z-index:8}
.motion-item{opacity:0}
.motion-item.animated{opacity:1}
.float-slow img{animation:floatY 4.6s ease-in-out 1.1s infinite alternate}
.float-mid img{animation:floatY 3.8s ease-in-out 1.4s infinite alternate-reverse}
.float-fast img{animation:floatYSmall 3.2s ease-in-out 1.7s infinite alternate}
@keyframes floatY{from{transform:translateY(0)}to{transform:translateY(-13px)}}
@keyframes floatYSmall{from{transform:translateY(0) rotate(-.15deg)}to{transform:translateY(-10px) rotate(.2deg)}}
.future-anchor{height:0;scroll-margin-top:var(--header-h)}
.back-top{position:fixed;z-index:900;right:24px;bottom:24px;width:48px;height:48px;border:0;border-radius:50%;background:rgba(27,43,42,.9);color:#fff;font-size:25px;cursor:pointer;opacity:0;pointer-events:none;transition:.25s}
.back-top.show{opacity:1;pointer-events:auto}
@media(max-width:700px){
 :root{--header-h:60px}
 .header-inner{padding:0 14px}
 .brand{width:65px;height:45px}.brand img{max-height:42px}
 .header-actions{gap:9px}.round-link{width:38px;height:38px;padding:9px}.brand-circle img{width:24px}
 .menu-toggle{width:43px;height:42px}.menu-toggle span{width:34px;height:3px}
 .menu-panel{padding:45px 8% 30px;justify-content:flex-start}
 .menu-panel a{font-size:19px;padding:17px 4px;text-shadow:-1px -1px 0 var(--accent),1px -1px 0 var(--accent),-1px 1px 0 var(--accent),1px 1px 0 var(--accent)}
 .menu-close{right:12px;top:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.float-slow img,.float-mid img,.float-fast img{animation:none!important}.animated{animation:none!important}}

/* 加強版 WOW 動態：比一般淡入更明顯，帶遠距離飛入、回彈與超越定位 */
.motion-item.animated{
  animation-duration:1.15s;
  animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.215,.61,.355,1);
}
.hero-bg.animated{animation-duration:1.4s}

@keyframes bounceInRight{
  0%{opacity:0;transform:translate3d(125%,0,0) scale(.72) rotate(5deg)}
  58%{opacity:1;transform:translate3d(-7%,0,0) scale(1.055) rotate(-1.2deg)}
  76%{transform:translate3d(3%,0,0) scale(.985) rotate(.4deg)}
  90%{transform:translate3d(-1.2%,0,0) scale(1.012)}
  100%{opacity:1;transform:none}
}
@keyframes bounceInLeft{
  0%{opacity:0;transform:translate3d(-125%,0,0) scale(.72) rotate(-5deg)}
  58%{opacity:1;transform:translate3d(7%,0,0) scale(1.055) rotate(1.2deg)}
  76%{transform:translate3d(-3%,0,0) scale(.985) rotate(-.4deg)}
  90%{transform:translate3d(1.2%,0,0) scale(1.012)}
  100%{opacity:1;transform:none}
}
@keyframes bounceInUp{
  0%{opacity:0;transform:translate3d(0,110%,0) scale(.76)}
  58%{opacity:1;transform:translate3d(0,-8%,0) scale(1.06)}
  76%{transform:translate3d(0,3.5%,0) scale(.985)}
  90%{transform:translate3d(0,-1.3%,0) scale(1.012)}
  100%{opacity:1;transform:none}
}
@keyframes bounceInDown{
  0%{opacity:0;transform:translate3d(0,-115%,0) scale(.78)}
  58%{opacity:1;transform:translate3d(0,8%,0) scale(1.045)}
  76%{transform:translate3d(0,-3%,0) scale(.99)}
  90%{transform:translate3d(0,1.1%,0) scale(1.01)}
  100%{opacity:1;transform:none}
}
@keyframes bounceOutRight{
  20%{opacity:1;transform:translate3d(-4%,0,0) scale(1.03)}
  100%{opacity:0;transform:translate3d(130%,0,0) scale(.72) rotate(5deg)}
}
@keyframes bounceOutLeft{
  20%{opacity:1;transform:translate3d(4%,0,0) scale(1.03)}
  100%{opacity:0;transform:translate3d(-130%,0,0) scale(.72) rotate(-5deg)}
}
@keyframes bounceOutDown{
  20%{opacity:1;transform:translate3d(0,-4%,0) scale(1.03)}
  100%{opacity:0;transform:translate3d(0,120%,0) scale(.72)}
}
@keyframes bounceOutUp{
  20%{opacity:1;transform:translate3d(0,4%,0) scale(1.03)}
  100%{opacity:0;transform:translate3d(0,-120%,0) scale(.72)}
}

/* 第二區 ------------------------------------------------------------ */
.section02{position:relative;width:100%;overflow:hidden;background:#cdb89a;scroll-margin-top:var(--header-h)}
.section02-canvas{position:relative;width:100%;padding-top:100%;overflow:hidden;background:#cdb89a}
.section02-bg{position:absolute;z-index:1;left:0;top:0;width:100%;height:73.9%;object-fit:cover}
.z2-layer{position:absolute;will-change:transform,opacity}
.z2-layer img{display:block;width:100%;height:auto}
/* 背景上方先放人物 */
.z2-man{z-index:10;left:-10%;top:-.8%;width:85.1%}
/* 上半部文字在人物上方 */
.z2-title{z-index:5;right:2.8%;top:2.9%;width:54.8%}
.z2-copy{z-index:22;right:4.6%;top:42.4%;width:52.1%}
/* 咖啡色色塊覆蓋人物下半部 */
.z2-brown{z-index:30;left:0;bottom:-2%;width:100%}
/* 小文字與小產品位於咖啡色色塊最上層 */
.z2-bottom-copy{    z-index: 40;
    left: 3%;
    bottom: 7%;
    width: 66%;}
.z2-products{z-index:42;right:5%;bottom:2.0%;width:23.2%}
.pulse-after img{animation:pulseEnergy 1.55s ease-in-out 1.7s infinite alternate}
@keyframes pulseEnergy{0%{transform:scale(1) rotate(-.2deg)}100%{transform:scale(1.045) rotate(.25deg)}}


/* 第三區 ------------------------------------------------------------ */
.section03{position:relative;width:100%;overflow:hidden;background:#eee5d6;scroll-margin-top:var(--header-h)}
.section03-canvas{position:relative;width:100%;padding-top:101.05%;overflow:hidden;background:#eee5d6}
.section03-bg{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover}
.z3-layer{position:absolute;will-change:transform,opacity}
.z3-layer img{display:block;width:100%;height:auto}
.z3-title{z-index:12;left:4.8%;top:5.1%;width:90.2%}
.z3-products{z-index:16;left:25.1%;top:27.5%;width:50.1%}
.z3-callout{z-index:22}
.z3-callout-left{left:4.2%;top:25.8%;width:33.7%}
.z3-callout-right{right:3.9%;top:20.7%;width:34%}
.z3-callout-bottom{right:4.4%;top:61.2%;width:29.9%}
.z3-callout-leftd{left:4.2%;top:83%;width:40%}
.z3-note{z-index:24;right:4.7%;bottom:3.8%;width:23.7%}
.section03 .z3-products img{animation:floatY 4.1s ease-in-out 1.5s infinite alternate}
.section03 .z3-callout-left img{animation:calloutDriftLeft 3.4s ease-in-out 1.9s infinite alternate}
.section03 .z3-callout-right img{animation:calloutDriftRight 3.1s ease-in-out 2.1s infinite alternate}
.section03 .z3-callout-leftd img{animation:calloutDriftRight 3.1s ease-in-out 2.1s infinite alternate}
@keyframes calloutDriftLeft{from{transform:translateX(0)}to{transform:translateX(-8px)}}
@keyframes calloutDriftRight{from{transform:translateX(0)}to{transform:translateX(8px)}}
@media(max-width:700px){
 .z3-title{top:4.7%}
 .z3-products{top:27.8%}
}

/* 第四區 ------------------------------------------------------------ */
.section04{position:relative;width:100%;overflow:hidden;background:#bfeef0;scroll-margin-top:var(--header-h)}
.section04-canvas{position:relative;width:100%;padding-top:100%;overflow:hidden;background:linear-gradient(#bfeef0 0 52%,#4b555d 52%)}
.section04-canvas>div{position:absolute;will-change:transform,opacity}
.section04 img{width:100%;height:auto;display:block}
.s4-title{z-index:12;left:8.5%;top:6.4%;width:39.5%}
.s4-tags{z-index:16;left:8.4%;top:56.0%;width:40.5%}
.s4-product{z-index:20;right:5.0%;top:7.8%;width:38%}
.s4-note{z-index:24;right:2.5%;bottom:2.5%;width:24.5%}
.s4-product img{animation:floating 3s ease-in-out 1.8s infinite}
@keyframes floating{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

@media (min-width:960px){
  .container{width:960px;padding-left:0;padding-right:0;margin-left:auto;margin-right:auto}
}
@media (max-width:959px){
  .container{width:100%;padding-left:0;padding-right:0;margin-left:auto;margin-right:auto}
}

/* 第五區 ------------------------------------------------------------ */
.section05{position:relative;width:100%;overflow:hidden;background:#f8e2a2;scroll-margin-top:var(--header-h)}
.section05-canvas{position:relative;width:100%;padding-top:100%;overflow:hidden;background:linear-gradient(#f8e2a2 0 52%,#987a6d 52%)}
.section05-canvas>div{position:absolute;will-change:transform,opacity}
.section05 img{width:100%;height:auto;display:block}
.s5-title{z-index:12;left:8.6%;top:6.3%;width:40.5%}
.s5-tags{z-index:16;left:8.3%;top:55.9%;width:40.5%}
.s5-product{z-index:20;right:5.3%;top:7.8%;width:38%}
.section05 .s5-product img{animation:floatY 4s ease-in-out 1.7s infinite alternate}

/* 第六區 ------------------------------------------------------------ */
.section06{position:relative;width:100%;overflow:hidden;background:#d3e1bb;scroll-margin-top:var(--header-h)}
.section06-canvas{position:relative;width:100%;padding-top:100%;overflow:hidden;background:linear-gradient(#d3e1bb 0 51%,#3e6f5f 51%)}
.section06-canvas>div{position:absolute;will-change:transform,opacity}
.section06 img{width:100%;height:auto;display:block}
.s6-title{z-index:12;left:5.2%;top:5.6%;width:41.2%}
.s6-tags{z-index:16;left:4.7%;top:56.0%;width:53.8%}
.s6-product{z-index:20;right:14%;top:6.9%;width:27%}
.s6-note{z-index:24;right:2.6%;bottom:2.5%;width:23.8%}
.section06 .s6-product img{animation:floatYSmall 3.5s ease-in-out 1.8s infinite alternate}

/* 第七區 ------------------------------------------------------------ */
.section07{position:relative;width:100%;overflow:hidden;background:#efe3cf;scroll-margin-top:var(--header-h)}
.section07-canvas{position:relative;width:100%;padding-top:100%;overflow:hidden;background:#efe3cf}
.section07-bg{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center center}
.s7-layer{position:absolute;will-change:transform,opacity}
.s7-layer img{display:block;width:100%;height:auto}
.s7-title{z-index:12;left:2.8%;top:5.4%;width:94.3%}
.s7-block-left{z-index:8;left:5.2%;top:52.2%;width:53.7%}
.s7-block-right{z-index:8;right:4.6%;top:52.1%;width:34.3%}
.s7-product{z-index:20}
.s7-product-gray{left:7.6%;top:34.5%;width:37%}
.s7-product-green{left:32.8%;top:26.6%;width:35.9%}
.s7-product-beige{right: 2%;
    top: 33%;
    width: 33%;}
.s7-caption-left{z-index:26;left:5.6%;bottom:6.0%;width:51.0%}
.s7-caption-right{z-index:26;right:4.8%;bottom:6.2%;width:30.9%}

/* 第七區持續動態：產品錯峰漂浮、輕微傾斜、背景呼吸、標題微漂 */
.section07.is-active .section07-bg{animation:s7BgBreath 7s ease-in-out 1.4s infinite alternate}
.section07.is-active .s7-title img{animation:s7TitleDrift 4.6s ease-in-out 1.6s infinite alternate}
.section07.is-active .s7-block-left img{animation:s7BlockLeft 5.2s ease-in-out 1.9s infinite alternate}
.section07.is-active .s7-block-right img{animation:s7BlockRight 5.2s ease-in-out 2.1s infinite alternate}
.section07.is-active .s7-product-gray img{animation:s7FloatGray 3.4s ease-in-out 1.7s infinite alternate}
.section07.is-active .s7-product-green img{animation:s7FloatGreen 3.0s ease-in-out 1.9s infinite alternate}
.section07.is-active .s7-product-beige img{animation:s7FloatBeige 3.7s ease-in-out 2.1s infinite alternate}
.section07.is-active .s7-caption-left img{animation:s7CaptionLeft 3.8s ease-in-out 2.2s infinite alternate}
.section07.is-active .s7-caption-right img{animation:s7CaptionRight 3.8s ease-in-out 2.35s infinite alternate}
@keyframes s7BgBreath{from{transform:scale(1)}to{transform:scale(1.035)}}
@keyframes s7TitleDrift{from{transform:translateY(0)}to{transform:translateY(-7px)}}
@keyframes s7BlockLeft{from{transform:translateX(0)}to{transform:translateX(-10px)}}
@keyframes s7BlockRight{from{transform:translateX(0)}to{transform:translateX(10px)}}
@keyframes s7FloatGray{from{transform:translateY(0) rotate(-.8deg)}to{transform:translateY(-15px) rotate(.8deg)}}
@keyframes s7FloatGreen{from{transform:translateY(4px) scale(1)}to{transform:translateY(-17px) scale(1.018)}}
@keyframes s7FloatBeige{from{transform:translateY(0) rotate(.8deg)}to{transform:translateY(-13px) rotate(-.8deg)}}
@keyframes s7CaptionLeft{from{transform:translateX(0)}to{transform:translateX(8px)}}
@keyframes s7CaptionRight{from{transform:translateX(0)}to{transform:translateX(-8px)}}
@media(max-width:600px){
  .s7-caption-left{bottom:6.3%}
  .s7-caption-right{bottom:6.5%}
}