/* 前台動畫：進場、按壓回饋、案例前後對照。沒有 JS 或要求減少動態時，內容維持原樣 */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-reveal: 800ms;
  --t-open: 1200ms;
}
@keyframes m-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes m-settle { from { opacity: 0; scale: .95; } to { opacity: 1; scale: 1; } }
@keyframes m-open { from { opacity: 1; clip-path: inset(0 100% 0 0 round 16px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 16px); } }
@keyframes m-row { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes m-line { from { translate: 0 108%; } to { translate: 0 0; } }
@keyframes m-pop { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes m-flick { 0%, 12%, 22%, 50% { opacity: .15; } 8%, 18%, 34%, 60%, 100% { opacity: 1; } }

html.m-on:not(.m-rm) [data-m]:not(.m-in) { opacity: 0; }
.m-in { animation: var(--m-a, m-rise) var(--m-t, var(--t-reveal)) var(--ease-expo) var(--d, 0ms) backwards; }
[data-m="settle"] { --m-a: m-settle; }
[data-m="open"] { --m-a: m-open; --m-t: var(--t-open); --ease-expo: var(--ease-in-out); }
[data-m="row"] { --m-a: m-row; }
[data-m="flick"] { --m-a: m-flick; --m-t: 900ms; }
[data-m="pop"] { --m-a: m-pop; --m-t: 600ms; }

/* 首頁標題逐行升起：載入 1.2 秒內結束 */
.m-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.m-line > span { display: block; animation: m-line 900ms var(--ease-expo) var(--d, 0ms) backwards; }
.hero h1 .m-line, .hero h1 .m-line > span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
.hero h1 .m-line > span > span { display: inline; background: linear-gradient(90deg, #ffb35c, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.btn { transition: transform var(--t-hover), background var(--t-hover), color var(--t-hover), scale var(--t-press) var(--ease-out); }
.btn:active { scale: .96; }
.stat strong, .stat-cards strong { font-variant-numeric: tabular-nums; }
.p-img img, .c-img img { transition: transform .4s, scale .5s var(--ease-out); }
.p-card:hover .p-img img { scale: 1.04; }
.ba-arrow { animation: m-pop 500ms var(--ease-out) 700ms backwards; }

@media (prefers-reduced-motion: reduce) {
  .m-in, .m-line > span, .ba-arrow { animation: none; }
  .btn:active { scale: 1; }
  .p-card:hover .p-img img { scale: 1; }
}

/* 冷熱水管：冷水流進熱水器、熱水流出來，流程與捲動都用水管表現 */
.hero { overflow: hidden; }
.a-pipes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.a-pipes path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.a-shell { stroke: #061c33; stroke-width: 14; }
.a-cold { stroke: #4fb3e8; stroke-width: 9; }
.a-hot { stroke: #f08a24; stroke-width: 9; }
.a-shell, .a-cold, .a-hot { stroke-dasharray: 1; animation: a-draw 1300ms var(--ease-in-out) 150ms backwards; }
.a-flow { stroke: #fff; stroke-opacity: .75; stroke-width: 3; stroke-dasharray: 10 42; animation: a-flow 1.3s linear 1400ms infinite, a-fade .4s ease 1400ms backwards; }
.a-flow.out { animation-direction: reverse, normal; }
@keyframes a-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes a-flow { to { stroke-dashoffset: -52; } }
@keyframes a-fade { from { opacity: 0; } }
.a-valve { transform-box: fill-box; transform-origin: center; animation: a-turn 900ms var(--ease-out) 1100ms backwards; }
@keyframes a-turn { from { rotate: -200deg; opacity: 0; } to { rotate: 0deg; opacity: 1; } }
.a-label { fill: #fff; font-size: 13px; font-weight: 700; font-family: inherit; animation: a-fade .5s ease 1300ms backwards; }

.hero-wave { width: 200%; max-width: none; animation: a-wave 9s linear infinite; }
@keyframes a-wave { to { translate: -50% 0; } }
.m-pause, .m-pause * { animation-play-state: paused !important; }

.a-bar { position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; background: #d9e6f3; }
.a-bar i { display: block; height: 100%; background: #4fb3e8; transform-origin: left; transform: scaleX(0); }

.steps { position: relative; padding-top: 30px; }
.a-seg { position: absolute; left: -1px; right: -22px; top: -31px; height: 10px; background: rgba(255,255,255,.14); }
.steps li:last-child .a-seg { right: -1px; border-radius: 0 6px 6px 0; }
.a-seg i { display: block; height: 100%; background: #4fb3e8; transform-origin: left; transform: scaleX(0); }
.a-node { position: absolute; left: 22px; top: -38px; width: 24px; height: 24px; border-radius: 50%; background: #12385f; transition: background .3s, scale .3s var(--ease-out); z-index: 1; }
.a-node::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #5a7694; transition: background .3s; }
li.a-on .a-node { background: #f08a24; scale: 1.15; }
li.a-on .a-node::after { background: #fff; }

.btn-accent, .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-accent::after, .btn-primary::after { content: ""; position: absolute; inset: -2px; z-index: -1; background: rgba(255,255,255,.2); translate: 0 101%; transition: translate .4s var(--ease-out); }
.btn-accent:hover::after, .btn-primary:hover::after { translate: 0 0; }
.p-img { position: relative; overflow: hidden; }
.p-img::after { content: ""; position: absolute; inset: 0; background: rgba(79,179,232,.16); translate: 0 101%; transition: translate .5s var(--ease-out); pointer-events: none; }
.p-card:hover .p-img::after { translate: 0 0; }
.s-card:hover .s-ic { animation: a-drip .7s var(--ease-out); }
@keyframes a-drip { 40% { translate: 0 5px; } }

@media (prefers-reduced-motion: reduce) {
  .a-shell, .a-cold, .a-hot, .a-flow, .a-valve, .a-label, .hero-wave, .s-card:hover .s-ic { animation: none; }
  .hero-wave { width: 100%; }
  .a-flow { display: none; }
}