/* 共振設計 Tune Studio 全站動效（site-fx） 1. 桌機導覽 hover：金→藍漸層底線由左滑入 2. Logo hover：波形輕輕上下浮動（呼應共振） 3. 捲動後 header 浮起陰影 4. fx-reveal：滾動觸發漸顯（移植自 scroll-morph demo 的 .reveal / IntersectionObserver 寫法） — 漸進增強：只有 JS 加上 後才隱藏初始狀態，無 JS 時內容完整可見 5. fx-brush：標題手繪感金色底線（稀缺使用，全站僅少數標題） 6. fx-aurora：極光流體背景（移植自 AuroraFlow，改品牌深藍→亮藍＋一絲金； 拿掉滑鼠磁吸/SVG 濾鏡/雜訊，只保留 blob 形變與漂浮，改純 CSS 動畫求效能） 7. fx-story：sticky 置中滾動段落（about 品牌故事用，移植 scroll-morph 的進度驅動寫法） prefers-reduced-motion 時全部停用動畫 */ @media (min-width: 768px) { header nav a { position: relative; } header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: linear-gradient(90deg, #F5B942, #19A7CE); border-radius: 1px; transition: right .28s ease; } header nav a:hover::after { right: 0; } } @keyframes fx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } header a[href="index.html"] img { will-change: transform; } header a[href="index.html"]:hover img { animation: fx-bob .9s ease-in-out infinite; } header { transition: box-shadow .3s ease; } header.fx-scrolled { box-shadow: 0 4px 24px rgba(11, 36, 71, .10); } /* ---------- 4. 滾動觸發漸顯（scroll-morph 移植） ---------- */ /* 初始隱藏只在 .js-fx（JS 已載入且非 reduced-motion）下生效 → 無 JS 時內容不會永遠隱藏 */ .js-fx .fx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s ease; transition-delay: calc(var(--fxd, 0) * 110ms); will-change: transform, opacity; } .js-fx .fx-reveal.fx-in { opacity: 1; transform: translateY(0); } /* ---------- 5. 手繪感金色底線（稀缺使用） ---------- */ .fx-brush { position: relative; } .fx-brush::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.16em; height: 0.22em; background: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%; pointer-events: none; } /* ---------- 6. 極光流體背景（AuroraFlow 移植，品牌配色版） ---------- */ .fx-aurora { position: relative; overflow: hidden; isolation: isolate; } .fx-aurora-blob { position: absolute; border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; mix-blend-mode: screen; filter: blur(64px) saturate(120%); pointer-events: none; will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; animation: fx-aurora-morph 18s ease-in-out infinite alternate, fx-aurora-float 26s ease-in-out infinite alternate; } @supports (mix-blend-mode: plus-lighter) { .fx-aurora-blob { mix-blend-mode: plus-lighter; } } /* 錨定角落，讓色霧從邊角暈染進來、中央留給內容（原 CORNER_ANCHORS 概念） */ .fx-aurora-blob.fxa-1 { left: -12%; top: -35%; width: 46%; padding-top: 46%; background: #145DA0; opacity: .55; } .fx-aurora-blob.fxa-2 { right: -14%; bottom: -40%; width: 52%; padding-top: 52%; background: #19A7CE; opacity: .38; animation-delay: -9s, -12s; } /* 一絲金（金色稀缺原則：小、淡） */ .fx-aurora-blob.fxa-3 { right: 8%; top: -22%; width: 22%; padding-top: 22%; background: #F5B942; opacity: .14; animation-delay: -5s, -20s; } @keyframes fx-aurora-morph { 0% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; } 50% { border-radius: 60% 40% 35% 65% / 55% 65% 35% 45%; } 100% { border-radius: 35% 65% 55% 45% / 40% 50% 50% 60%; } } @keyframes fx-aurora-float { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4%, 3%, 0) scale(1.06); } 100% { transform: translate3d(-3%, -2%, 0) scale(0.97); } } /* ---------- 7. sticky 置中滾動段落（about 品牌故事） ---------- */ /* 無 JS：一般段落、三行全顯。JS 加上 .fx-story-on 後才變 sticky 滾動舞台 */ .fx-story-on { height: 240vh; } .fx-story-on .fx-story-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; } .fx-story-on .fx-story-line { opacity: .18; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; } .fx-story-on .fx-story-line.fx-on { opacity: 1; transform: translateY(0); } /* ---------- 手機效能：縮小模糊、關掉金色 blob ---------- */ @media (max-width: 768px), (pointer: coarse) { .fx-aurora-blob { filter: blur(40px) saturate(115%); animation-duration: 30s, 34s; } .fx-aurora-blob.fxa-3 { display: none; } } /* ---------- reduced-motion：全部停用 ---------- */ @media (prefers-reduced-motion: reduce) { header nav a::after { transition: none; } header a[href="index.html"]:hover img { animation: none; } .js-fx .fx-reveal { opacity: 1; transform: none; transition: none; } .fx-aurora-blob { animation: none; } .fx-story-on { height: auto; } .fx-story-on .fx-story-stage { position: static; height: auto; } .fx-story-on .fx-story-line { opacity: 1; transform: none; transition: none; } }