@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500&family=Noto+Serif+TC:wght@200;300;400;700&display=swap');
:root { --main-light-color: #f2f6f9; --main-dark-color: #314d60; --accent-color: #719cb0; --border-color: #ccd6dd; --text-dark: #2a2a2a; --text-light: #ffffff; --global-padding: 8vw; --mobile-padding: clamp(25px, 6vw, 60px); }

body { 
    margin: 0; 
    padding: 0; 
    background: linear-gradient(135deg, #eaf1f7 0%, #f3f7fa 50%, #ffffff 100%); 
    color: var(--text-dark); 
    font-family: 'Noto Sans TC', sans-serif; 
    overflow-x: hidden; 
    -webkit-user-select: none; 
    user-select: none; 
    -webkit-touch-callout: none; 
    position: relative;
}

body::before {
    content: "";
    position: fixed; 
    inset: 0;
    opacity: 0.045;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperNoise)'/%3E%3C/svg%3E");
}

.fade-up { opacity: 0; transform: translateY(20px); }
.splash-done .fade-up { animation: fadeUpAnim 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.splash-done .delay-1 { animation-delay: 0.3s; }
@keyframes fadeUpAnim { to { opacity: 1; transform: translateY(0); } }

.reveal-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal-on-scroll.visible { opacity: 1; transform: translateY(0); }