@import url("https://fonts.cdnfonts.com/css/satoshi"); html, body { background: #0a0a0a; font-family: "Satoshi", sans-serif; font-weight: 900; margin: 0; overflow-x: hidden; } .creative-svg { width: 100%; height: 100vh; display: block; } /* Section wrapper */ .glass-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 6vw; } /* Glass panel */ .glass-panel { position: relative; width: 100%; max-width: 1400px; height: 85vh; background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border-radius: 32px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.04); overflow: hidden; } /* =========================== REMOVE GLASS FROM CREATIVE SVG =========================== */ .glass-panel:has(.creative-svg) { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; } /* Text rendering */ text { letter-spacing: -0.02em; dominant-baseline: middle; } .glass-bg { position: relative; border-radius: 20px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); overflow: hidden; /* 🔑 REQUIRED for blend modes */ isolation: isolate; } .glass-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.12) 35%, rgba(255, 255, 255, 0.04) 60%, rgba(0, 0, 0, 0.18) 100%); opacity: 0.6; } .flash-dot { position: absolute; width: 120px; height: 120px; pointer-events: none; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.35) 30%, rgba(255, 255, 255, 0) 65%); filter: blur(8px); opacity: 0; mix-blend-mode: screen; animation: camera-flash 6.5s ease-in-out infinite; } .flash-1 { top: 8%; left: 10%; animation-delay: 0s; } .flash-2 { top: 18%; right: 8%; width: 150px; height: 150px; animation-delay: 1.2s; } .flash-3 { bottom: 16%; left: 24%; width: 100px; height: 100px; animation-delay: 2.6s; } .flash-4 { bottom: 10%; right: 18%; width: 140px; height: 140px; animation-delay: 3.8s; } .flash-fast { position: absolute; width: 80px; height: 80px; pointer-events: none; background: radial-gradient(circle at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0) 70%); filter: blur(6px); opacity: 0; mix-blend-mode: screen; animation: quick-flash 3s ease-in-out infinite; } .flash-5 { top: 5%; left: 40%; animation-delay: 0.8s; } .flash-6 { bottom: 20%; right: 40%; animation-delay: 1.7s; } @keyframes camera-flash { 0% { opacity: 0; transform: scale(0.9); } 6% { opacity: 0.55; transform: scale(1.05); } 10% { opacity: 0.18; transform: scale(1); } 14% { opacity: 0; transform: scale(0.95); } 100% { opacity: 0; } } @keyframes quick-flash { 0% { opacity: 0; transform: scale(0.8); } 3% { opacity: 0.9; transform: scale(1.1); } 6% { opacity: 0.4; transform: scale(1); } 10% { opacity: 0; } 100% { opacity: 0; } }