.navbar{position:fixed;top:0;width:100%;background:#1e3a8af2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px 0;z-index:10000;border-bottom:3px solid var(--hkbp-gold);opacity:0;transform:translateY(-100%);transition:opacity .5s,transform .5s;box-shadow:0 2px 10px #0000001a}.navbar.visible{opacity:1;transform:translateY(0)}.nav-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 40px}.logo{font-size:24px;font-weight:700;color:var(--hkbp-white);text-shadow:0 2px 4px rgba(0,0,0,.3)}.nav-links{display:flex;gap:40px}.hamburger{display:none;flex-direction:column;gap:5px;width:30px;height:24px;cursor:pointer;background:none;border:none}.hamburger span{display:block;height:3px;background:var(--hkbp-white);border-radius:2px;transition:transform .3s,opacity .3s}.hamburger.is-active span:nth-child(1){transform:translateY(9px) rotate(45deg)}.hamburger.is-active span:nth-child(2){opacity:0}.hamburger.is-active span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}.nav-links a{color:#fff;font-weight:700;text-decoration:none;font-size:16px;transition:color .3s;position:relative}.nav-links a:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;background:var(--hkbp-gold);transition:width .3s}.nav-links a:hover{color:var(--hkbp-gold)}.nav-links a:hover:after{width:100%}.nav-links a:focus,.hamburger:focus{outline:3px solid var(--hkbp-gold);outline-offset:3px}@media (max-width: 568px){.nav-content{padding:0 20px}.nav-links{position:fixed;top:72px;right:20px;background:var(--hkbp-blue);flex-direction:column;gap:12px;padding:16px;border-radius:10px;box-shadow:0 10px 30px #00000080;border:2px solid var(--hkbp-sky);transform:translateY(-10px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease,transform .25s ease;z-index:1000}.nav-links.open{opacity:1;visibility:visible;transform:translateY(0)}.hamburger{display:flex}.nav-links a{font-size:18px}.logo{font-size:20px}}.hero-section{position:relative;width:100%;height:100vh;overflow:hidden;background:transparent;display:flex;justify-content:center;align-items:center}.hero-container{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center}.snow-text{position:absolute;font-size:100px;font-weight:700;color:var(--hkbp-white);text-shadow:0 0 30px rgba(255,255,255,.5),0 4px 8px rgba(0,0,0,.3);animation:fadeOut 4s ease-in-out forwards;z-index:10;letter-spacing:2px}@keyframes fadeOut{0%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(1.5)}}.snowflake{position:absolute;color:#fff;font-size:20px;animation:fall linear infinite;opacity:0}@keyframes fall{0%{top:-10%;opacity:0}10%{opacity:1}90%{opacity:1}to{top:110%;opacity:0}}.church{position:absolute;opacity:0;animation:buildChurch 3s ease-out 4s forwards;transform-origin:bottom center}@keyframes buildChurch{0%{opacity:0;transform:scale(.3) translateY(100px)}50%{opacity:.5}to{opacity:1;transform:scale(1) translateY(0)}}.church-container{position:relative;width:400px;height:600px;filter:drop-shadow(0 0 40px rgba(255,255,255,.3))}.main-body{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:280px;height:320px;background:linear-gradient(135deg,var(--hkbp-cream) 0%,#F5E6D3 50%,#E8D7C3 100%);border:3px solid var(--hkbp-gold);border-radius:10px 10px 0 0}.roof{position:absolute;bottom:320px;left:50%;transform:translate(-50%);width:0;height:0;border-left:160px solid transparent;border-right:160px solid transparent;border-bottom:100px solid var(--hkbp-blue);filter:brightness(1.1)}.tower{position:absolute;bottom:320px;left:50%;transform:translate(-50%);width:100px;height:140px;background:linear-gradient(135deg,var(--hkbp-cream) 0%,#E8D7C3 100%);border:3px solid var(--hkbp-gold)}.tower-roof{position:absolute;bottom:460px;left:50%;transform:translate(-50%);width:0;height:0;border-left:70px solid transparent;border-right:70px solid transparent;border-bottom:80px solid var(--hkbp-blue)}.cross{position:absolute;bottom:530px;left:50%;transform:translate(-50%);width:10px;height:50px;background:linear-gradient(to bottom,var(--hkbp-gold),#D4A017);box-shadow:0 0 20px #b8860bcc,0 0 30px #b8860b66;border-radius:2px;z-index:100}.cross:before{content:"";position:absolute;top:12px;left:50%;transform:translate(-50%);width:35px;height:10px;background:linear-gradient(to right,var(--hkbp-gold),#D4A017);box-shadow:0 0 20px #b8860bcc,0 0 30px #b8860b66;border-radius:2px;z-index:100}.roof-cross{position:absolute;bottom:390px;left:50%;transform:translate(-50%);width:8px;height:35px;background:linear-gradient(to bottom,var(--hkbp-gold),#D4A017);box-shadow:0 0 15px #b8860bcc,0 0 25px #b8860b66;border-radius:2px;z-index:100}.roof-cross:before{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:25px;height:8px;background:linear-gradient(to right,var(--hkbp-gold),#D4A017);box-shadow:0 0 15px #b8860bcc,0 0 25px #b8860b66;border-radius:2px;z-index:100}.window{position:absolute;width:50px;height:80px;background:linear-gradient(to bottom,#60a5fa,#93c5fd);border:2px solid var(--hkbp-blue);border-radius:25px 25px 0 0;box-shadow:inset 0 0 20px #ffffff4d}.window1{bottom:80px;left:40px}.window2{bottom:80px;right:40px}.window3{bottom:180px;left:90px}.window4{bottom:180px;right:90px}.door{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:70px;height:120px;background:linear-gradient(to right,#5d4037,#6d4c41);border:3px solid var(--hkbp-blue);border-radius:35px 35px 0 0}.side-tower{position:absolute;bottom:0;width:60px;height:200px;background:linear-gradient(135deg,var(--hkbp-cream) 0%,#E8D7C3 100%);border:3px solid var(--hkbp-gold)}.side-tower.left{left:20px}.side-tower.right{right:20px}.side-tower-roof{position:absolute;width:0;height:0;border-left:40px solid transparent;border-right:40px solid transparent;border-bottom:50px solid var(--hkbp-blue);bottom:200px;left:50%;transform:translate(-50%)}.ornament{position:absolute;width:20px;height:20px;background:var(--hkbp-gold);border-radius:50%;box-shadow:0 0 10px #b8860b99;animation:glow 2s ease-in-out infinite}@keyframes glow{0%,to{box-shadow:0 0 10px #b8860b99}50%{box-shadow:0 0 20px #b8860be6}}.ornament1{top:100px;left:30px}.ornament2{top:100px;right:30px}.ornament3{bottom:250px;left:50px}.ornament4{bottom:250px;right:50px}.sparkle{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;animation:sparkle 1.5s ease-in-out infinite;opacity:0}@keyframes sparkle{0%,to{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1)}}.scroll-indicator{position:absolute;bottom:30px;left:50%;transform:translate(-50%);animation:bounce 2s infinite 7s;z-index:20}.scroll-indicator span{display:block;width:30px;height:50px;border:2px solid var(--hkbp-white);border-radius:25px;position:relative}.scroll-indicator span:before{content:"";position:absolute;top:10px;left:50%;transform:translate(-50%);width:6px;height:10px;background:var(--hkbp-white);border-radius:3px;animation:scroll 2s infinite}@keyframes scroll{0%{top:10px;opacity:1}to{top:30px;opacity:0}}@keyframes bounce{0%,20%,50%,80%,to{transform:translate(-50%) translateY(0)}40%{transform:translate(-50%) translateY(-20px)}60%{transform:translate(-50%) translateY(-10px)}}@media (max-width: 768px){.snow-text{font-size:50px}.church-container{transform:scale(.7)}}@media (max-width: 568px){.snow-text{font-size:30px;text-align:center}.church-container{transform:scale(.6)}}.cards-section{min-height:100vh;background:transparent;padding:100px 40px;perspective:1000px;position:relative}.cards-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;position:relative;z-index:10}.card-3d{background:#1e3a8a26;border:2px solid rgba(184,134,11,.4);border-radius:20px;padding:40px;transform-style:preserve-3d;transition:all .4s ease;cursor:pointer;position:relative;overflow:hidden;box-shadow:0 8px 24px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.card-3d:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(30,58,138,.05) 0%,transparent 70%);transform:translateZ(-10px);opacity:0;transition:opacity .6s}.card-3d:hover{transform:translateY(-10px);box-shadow:0 20px 40px #b8860b80;border-color:var(--hkbp-gold);background:#1e3a8a40}.card-3d:hover:before{opacity:1}.card-3d:focus{outline:3px solid var(--hkbp-gold);outline-offset:3px}.card-icon{font-size:64px;text-align:center;margin-bottom:20px;transform:translateZ(30px)}.card-title{font-size:28px;color:var(--hkbp-white);text-align:center;margin-bottom:15px;transform:translateZ(20px);font-weight:600;transition:color .3s ease}.card-description{color:#ffffffe6;text-align:center;line-height:1.8;font-size:16px;transform:translateZ(10px);transition:color .3s ease}.schedule-section{min-height:100vh;background:transparent;padding:100px 40px;position:relative}.schedule-container{max-width:1200px;margin:0 auto;position:relative;z-index:10}.schedule-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}.schedule-box,.announcement-box{background:#1e3a8a26;border:2px solid rgba(184,134,11,.4);border-radius:20px;padding:40px;box-shadow:0 8px 24px #0000004d;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.schedule-box:hover,.announcement-box:hover{transform:translateY(-5px);box-shadow:0 15px 40px #b8860b80;background:#1e3a8a40}.box-title{font-size:32px;color:var(--hkbp-white);margin-bottom:30px;display:flex;align-items:center;gap:15px;font-weight:700;transition:color .3s ease}.box-title-icon{font-size:40px}.schedule-item{background:#ffffff1a;border-left:4px solid var(--hkbp-gold);padding:20px;margin-bottom:20px;border-radius:8px;transition:all .3s ease}.schedule-item:hover{background:#fff3;border-left-width:6px;padding-left:25px}.schedule-day{font-size:20px;font-weight:700;color:var(--hkbp-white);margin-bottom:8px;transition:color .3s ease}.schedule-time{font-size:16px;color:#ffffffe6;margin-bottom:5px;display:flex;align-items:center;gap:10px}.schedule-desc{font-size:14px;color:#fffc;margin-top:5px}.announcement-item{background:#ffffff1a;border:2px solid rgba(184,134,11,.3);padding:20px;margin-bottom:20px;border-radius:12px;transition:all .3s ease;position:relative;overflow:hidden}.announcement-item:before{content:"";position:absolute;left:0;top:0;width:5px;height:100%;background:var(--hkbp-gold);transition:width .3s ease}.announcement-item:hover:before{width:10px}.announcement-item:hover{border-color:var(--hkbp-gold);box-shadow:0 4px 12px #0003;background:#fff3}.announcement-date{font-size:14px;color:var(--hkbp-gold);font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}.announcement-title{font-size:18px;font-weight:700;color:var(--hkbp-white);margin-bottom:8px}.announcement-content{font-size:15px;color:#ffffffd9;line-height:1.6}.announcement-badge{display:inline-block;background:var(--hkbp-blue);color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;margin-top:10px}.announcement-badge.urgent{background:#ef4444;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 768px){.schedule-grid{grid-template-columns:1fr;gap:30px}.schedule-box,.announcement-box{padding:30px 20px}.box-title{font-size:26px}}.timeline-section{min-height:100vh;background:transparent;padding:100px 40px;position:relative}.timeline-container{max-width:1000px;margin:0 auto;position:relative;z-index:10}.timeline-line{position:absolute;left:50%;top:0;bottom:0;width:4px;background:linear-gradient(to bottom,var(--hkbp-gold),rgba(184,134,11,.5));transform:translate(-50%)}.timeline-item{margin-bottom:60px;position:relative;opacity:0;transform:translate(-50px);transition:opacity .8s,transform .8s}.timeline-item.visible{opacity:1;transform:translate(0)}.timeline-item:nth-child(2n){transform:translate(50px)}.timeline-item:nth-child(2n).visible{transform:translate(0)}.timeline-content{width:45%;padding:30px;background:#1e3a8a26;border:2px solid rgba(184,134,11,.4);border-radius:15px;position:relative;box-shadow:0 8px 24px #0000004d;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.timeline-item:nth-child(odd) .timeline-content{margin-left:0}.timeline-item:nth-child(2n) .timeline-content{margin-left:55%}.timeline-dot{position:absolute;left:50%;top:30px;transform:translate(-50%);width:24px;height:24px;background:var(--hkbp-gold);border:4px solid var(--hkbp-white);border-radius:50%;box-shadow:0 0 0 4px #b8860b4d;z-index:10}.timeline-year{font-size:24px;color:var(--hkbp-gold);font-weight:700;margin-bottom:10px;transition:color .3s ease}.timeline-text{color:#ffffffe6;line-height:1.6;transition:color .3s ease}@media (max-width: 768px){.timeline-line{left:20px}.timeline-content{width:calc(100% - 60px);margin-left:60px!important}.timeline-dot{left:20px}}.gallery-3d-section{min-height:100vh;background:transparent;padding:100px 40px;perspective:1500px;position:relative}.gallery-3d-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;position:relative;z-index:10}.gallery-3d-item{aspect-ratio:1;background:#1e3a8a26;border:2px solid rgba(184,134,11,.4);border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:72px;transform-style:preserve-3d;transition:all .4s ease;cursor:pointer;box-shadow:0 8px 24px #0000004d;overflow:hidden;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.gallery-3d-item:hover{transform:translateY(-10px);box-shadow:0 15px 35px #b8860b80;border-color:var(--hkbp-gold);background:#1e3a8a40}.gallery-3d-item:after{content:"✨";position:absolute;backface-visibility:hidden;transform:rotateY(180deg);font-size:72px}.gallery-image{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.gallery-3d-item:hover .gallery-image{transform:scale(1.1)}.gallery-caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);color:#fff;padding:20px 15px 15px;font-size:16px;font-weight:600;text-align:center;transform:translateY(100%);transition:transform .4s ease}.gallery-3d-item:hover .gallery-caption{transform:translateY(0)}.gallery-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--hkbp-blue) 0%,var(--hkbp-blue-dark) 100%);color:#fff;font-size:72px;position:relative;overflow:hidden}.gallery-placeholder .gallery-image{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.gallery-3d-item:hover .gallery-placeholder .gallery-image{transform:scale(1.05)}.contact-section{min-height:100vh;background:transparent;padding:100px 40px;display:flex;align-items:center;justify-content:center;position:relative}.contact-container{max-width:800px;text-align:center;position:relative;z-index:10;width:100%}.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px;margin-top:60px}.contact-card{background:#1e3a8a26;padding:40px 30px;border-radius:15px;border:2px solid rgba(184,134,11,.4);transition:all .3s ease;box-shadow:0 8px 24px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.contact-card:hover{transform:translateY(-10px);box-shadow:0 15px 40px #b8860b80;border-color:var(--hkbp-gold);color:var(--hkbp-gold);background:#1e3a8a40}.contact-icon{font-size:48px;margin-bottom:20px}.contact-label{font-size:18px;margin-bottom:10px;font-weight:700;transition:color .3s ease;color:#ffffffe6}.contact-info{color:#ffffffe6;font-size:16px;transition:color .3s ease}.contact-info a{color:#ffffffe6;text-decoration:none;transition:color .3s}.contact-info a:hover{color:var(--hkbp-gold)}.contact-info a:focus{outline:3px solid var(--hkbp-gold);outline-offset:3px}.contact-form{background:#1e3a8a26;border:2px solid rgba(184,134,11,.4);border-radius:15px;padding:40px;margin-top:40px;box-shadow:0 8px 24px #0000004d;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left}.form-group{margin-bottom:25px}.form-group label{display:block;color:var(--hkbp-white);font-size:16px;font-weight:700;margin-bottom:8px;transition:color .3s ease}.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 16px;background:#ffffff26;border:2px solid rgba(184,134,11,.3);border-radius:8px;color:var(--hkbp-blue-dark);font-size:16px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;transition:all .3s ease}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--hkbp-gold);background:#ffffff40;box-shadow:0 0 0 3px #b8860b33}.form-group textarea{resize:vertical;min-height:120px}.form-group input::placeholder,.form-group textarea::placeholder{color:#ffffff80}.submit-btn{background:var(--hkbp-blue);color:var(--hkbp-white);border:none;padding:15px 40px;font-size:18px;font-weight:700;border-radius:8px;cursor:pointer;transition:transform .3s,box-shadow .3s,background .3s;width:100%}.submit-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #1e3a8a66;background:var(--hkbp-blue-dark);color:var(--hkbp-gold)}.submit-btn:active{transform:translateY(0)}.submit-btn:focus{outline:3px solid var(--hkbp-gold);outline-offset:3px}.form-error{color:#ff6b6b;font-size:14px;margin-top:15px;padding:12px;background:#ff6b6b1a;border-radius:8px;border:1px solid rgba(255,107,107,.3);display:none}.form-success{background:#4caf5033;border:2px solid rgba(76,175,80,.5);color:#4caf50;padding:15px;border-radius:8px;margin-top:20px;display:none}.map-container{margin-top:40px;border-radius:15px;overflow:hidden;border:2px solid rgba(184,134,11,.4);height:400px;box-shadow:0 8px 24px #0000004d;transition:all .3s ease}.map-container iframe{width:100%;height:100%;border:none}@media (max-width: 768px){.contact-form{padding:30px 20px}.map-container{height:300px}}.footer{background:var(--hkbp-blue);padding:40px;text-align:center;color:#ffffffe6;border-top:4px solid var(--hkbp-gold)}.footer-text{font-size:14px}.footer-gold{color:var(--hkbp-gold);font-weight:700}.footer-contact-info{color:#ffffffe6;transition:color .3s ease}.footer-contact-info a{color:#ffffffe6;text-decoration:none;transition:color .3s;border-radius:15px;padding:10px;font-size:26px}.footer-contact-info a:hover{color:var(--hkbp-gold)}.footer-contact-info a:focus{outline:3px solid var(--hkbp-gold);outline-offset:3px}.body-snowflake{position:fixed;color:#fff;font-size:20px;opacity:.8;pointer-events:none;z-index:5;animation:bodySnowfall 15s linear infinite}@keyframes bodySnowfall{0%{top:-10%;opacity:0}10%{opacity:.8}90%{opacity:.8}to{top:110%;opacity:0}}*{margin:0;padding:0;box-sizing:border-box}:root{--hkbp-blue: #1E3A8A;--hkbp-blue-dark: #1E40AF;--hkbp-blue-light: #3B82F6;--hkbp-sky: #0EA5E9;--hkbp-white: #FFFFFF;--hkbp-cream: #F8FAFC;--hkbp-gray-light: #F1F5F9;--hkbp-gray: #E2E8F0;--hkbp-gray-dark: #475569;--hkbp-navy: #0F172A;--hkbp-gold: #B8860B}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow-x:hidden;scroll-behavior:smooth;background:linear-gradient(135deg,var(--hkbp-blue) 0%,var(--hkbp-blue-dark) 50%,var(--hkbp-navy) 100%);background-attachment:fixed;color:var(--hkbp-white);position:relative}.skip-to-content{position:absolute;top:-40px;left:0;background:var(--hkbp-blue);color:var(--hkbp-white);padding:8px 16px;text-decoration:none;font-weight:700;z-index:10000}.skip-to-content:focus{top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.snowflake,.sparkle{will-change:transform,opacity;backface-visibility:hidden;transform:translateZ(0)}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.snowflake,.sparkle{display:none}}.section-title{text-align:center;font-size:48px;color:var(--hkbp-white);text-shadow:0 0 20px rgba(255,255,255,.3),0 2px 4px rgba(0,0,0,.3);margin-bottom:60px;opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s;font-weight:700;position:relative;z-index:1}.section-title.visible{opacity:1;transform:translateY(0)}@media (max-width: 768px){.section-title{font-size:36px}}
