/* css/style.css - 2026 Unified Version */

/* 1. Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600;700;900&family=Noto+Sans+TC:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');

/* 2. Base Settings */
body {
    font-family: 'Noto Sans TC', sans-serif;
    background-color: #F9F7F2;
    color: #4A5568; /* 統一文字深灰藍 */
    overflow-x: hidden;
    background-image: 
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.8) 0%, rgba(249,247,242,0) 70%),
        url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.04%22/%3E%3C/svg%3E');
}

h1, h2, h3, h4, h5, h6, .font-serif { font-family: 'Noto Serif TC', serif; }
.font-eng { font-family: 'Cinzel', serif; }
.font-script { font-family: 'Pinyon Script', cursive; }
html { scroll-behavior: smooth; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

/* 3. Global Animations */
/* Scroll Reveal */
.reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Float (Floating Buttons) */
@keyframes float { 
    0% { transform: translateY(0px); } 
    50% { transform: translateY(-8px); } 
    100% { transform: translateY(0px); } 
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* Blob (Hero Background) */
@keyframes blob { 
    0% { transform: translate(0,0) scale(1); opacity:0.4; } 
    33% { transform: translate(30px,-50px) scale(1.1); opacity:0.6; } 
    66% { transform: translate(-20px,20px) scale(0.9); opacity:0.4; } 
    100% { transform: translate(0,0) scale(1); opacity:0.4; } 
}
.animate-blob { animation: blob 12s infinite; }

/* Breathe (About Page Background) */
@keyframes breathe {
    0% { transform: translate(0px, 0px) scale(1); opacity: 0.3; }
    50% { transform: translate(15px, -15px) scale(1.05); opacity: 0.5; }
    100% { transform: translate(0px, 0px) scale(1); opacity: 0.3; }
}
.animate-breathe { animation: breathe 8s ease-in-out infinite; }
.animate-breathe-slow { animation: breathe 12s ease-in-out infinite reverse; }

/* Spotlight (Custom Cake Page) */
@keyframes spotlight {
    0% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
    100% { opacity: 0.5; transform: scale(1); }
}
.spotlight-effect {
    background: radial-gradient(circle at center, rgba(74, 103, 133, 0.1) 0%, rgba(255,255,255,0) 70%); /* 使用統一色系 */
    animation: spotlight 6s ease-in-out infinite;
}

/* Gold Dust (Festive Page) */
@keyframes goldDust {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(100px) rotate(360deg); opacity: 0; }
}
.gold-dust {
    position: absolute;
    width: 4px; height: 4px;
    background: #C5A059;
    border-radius: 50%;
    animation: goldDust 10s linear infinite;
}

/* 4. Components & Cards */
.service-card { transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }
.service-card:hover { transform: translateY(-8px); }
.service-card .img-bg { transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.service-card:hover .img-bg { transform: scale(1.1); }
.service-card .overlay { 
    /* 統一遮罩色為 #4A6785 */
    background: linear-gradient(to top, rgba(74, 103, 133, 0.95) 0%, rgba(74, 103, 133, 0.3) 60%, transparent 100%); 
    transition: opacity 0.5s ease; 
}

.icon-badge { position: relative; overflow: hidden; transition: all 0.3s ease; }
.icon-badge::after { 
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; 
    background: linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); 
    transform: rotate(45deg) translateY(-100%); transition: transform 0.6s; 
}
.service-card:hover .icon-badge::after { transform: rotate(45deg) translateY(100%); }

/* Button Shine Effect */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { 
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; 
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); 
    transform: skewX(-25deg); transition: 0.7s; 
}
.btn-shine:hover::after { left: 150%; }

/* 5. Special Layouts & Utilities */
/* Text Highlight (About/Cake) */
.text-highlight { position: relative; display: inline-block; }
.text-highlight::after { 
    content: ''; position: absolute; bottom: 2px; left: 0; width: 100%; height: 8px; 
    background-color: rgba(197, 160, 89, 0.2); z-index: -1; transform: skewX(-15deg); 
}

/* Image Masking (About Page) */
.mask-arch-right { border-radius: 20px 20px 20px 150px; }
.mask-arch-left { border-radius: 20px 20px 150px 20px; }

/* Masonry Grid (Catering Page) */
.masonry-grid { column-count: 1; column-gap: 1.5rem; }
@media (min-width: 640px) { .masonry-grid { column-count: 2; } }
@media (min-width: 1024px) { .masonry-grid { column-count: 3; } }
.masonry-item { break-inside: avoid; margin-bottom: 1.5rem; }

/* Festive Colors */
.bg-festive-red { background-color: #7A1F1F; }
.text-festive-red { color: #7A1F1F; }

/* Custom Scrollbar - Unified Color */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F9F7F2; }
::-webkit-scrollbar-thumb { background: #4A6785; border-radius: 4px; }