:root{--bg-dark:#1a1012;--bg-gradient:linear-gradient(135deg, #1a1012 0%, #2a1f21 100%);--brand-blue:#0072bc;--brand-blue-glow:#0072bc73;--brand-blue-light:#3fa9f5;--accent-gold:#f7931e;--accent-gold-glow:#f7931e4d;--text-white:#f8fafc;--text-muted:#94a3b8;--glass-bg:#2a1f218c;--glass-border:#f78da71a;--glass-glow:0 8px 32px 0 #00000080;--font-sans:"Poppins", sans-serif;--font-title:"Playfair Display", serif;--primary:#f78da7;--primary-glow:#f78da773}*{box-sizing:border-box}html,body{background-color:var(--bg-dark);color:var(--text-white);font-family:var(--font-sans);scroll-behavior:smooth;overflow-x:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}#app{width:100%;min-height:100vh;position:relative}#animation-canvas{z-index:1;object-fit:cover;pointer-events:none;width:100vw;height:100vh;display:block;position:fixed;top:0;left:0}#progress-bar{background:linear-gradient(90deg, var(--primary) 0%, #f472b6 50%, var(--primary) 100%);z-index:50;width:0%;height:4px;box-shadow:0 0 10px var(--primary-glow);transition:width .1s ease-out;position:fixed;top:0;left:0}#preloader{background-color:var(--bg-dark);background-image:var(--bg-gradient);z-index:100;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .8s cubic-bezier(.25,1,.5,1),visibility .8s;display:flex;position:fixed;top:0;left:0}#preloader.fade-out{opacity:0;visibility:hidden}.loader-content{text-align:center}.loader-circle-wrapper{justify-content:center;align-items:center;width:130px;height:130px;margin:0 auto 24px;display:flex;position:relative}.loader-svg{width:100%;height:100%;position:absolute;top:0;left:0;transform:rotate(-90deg)}.loader-bg{fill:none;stroke:#ffffff0d;stroke-width:4px}.loader-progress{fill:none;stroke:var(--primary);stroke-width:4px;stroke-linecap:round;stroke-dasharray:276.46;stroke-dashoffset:276.46px;transition:stroke-dashoffset .1s ease-out}#load-percentage{font-family:var(--font-title);color:var(--text-white);text-shadow:0 0 15px var(--primary-glow);font-size:28px;font-weight:700}.loader-title{font-family:var(--font-title);letter-spacing:4px;background:linear-gradient(135deg, #fff 40%, var(--primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:8px;font-size:32px;font-weight:800}.loader-subtitle{color:var(--text-muted);letter-spacing:1px;font-size:14px}#scroll-container{z-index:2;width:100%;position:relative}.scroll-section{pointer-events:none;align-items:center;width:100%;min-height:100vh;padding:0 10%;display:flex;position:relative}.story-card{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(18px);max-width:460px;box-shadow:var(--glass-glow), inset 0 1px 1px #ffffff1a;pointer-events:all;opacity:0;border-radius:20px;padding:35px;transition:opacity .8s cubic-bezier(.25,1,.5,1),transform .8s cubic-bezier(.25,1,.5,1);transform:translateY(40px)}.story-card.visible,.scroll-section.active .story-card{opacity:1;transform:translateY(0)}.text-left{margin-right:auto}.text-right{margin-left:auto}.center{text-align:center;max-width:520px;margin:0 auto}.badge{letter-spacing:1.5px;text-transform:uppercase;color:var(--primary);background:#f78da71f;border:1px solid #f78da74d;border-radius:50px;margin-bottom:18px;padding:6px 12px;font-size:11px;font-weight:700;display:inline-block}.story-card h2{font-family:var(--font-title);background:linear-gradient(135deg, #fff 60%, var(--primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:14px;font-size:36px;font-weight:700;line-height:1.2}.story-card p{color:var(--text-muted);font-size:15px;line-height:1.6}.glass{-webkit-backdrop-filter:blur(16px);background:#ffffff26;border:1px solid #fff3}.dark .glass{background:#2a1f2166;border:1px solid #f78da71a}.reveal{opacity:0;transition:all .8s ease-out;transform:translateY(30px)}.reveal.active{opacity:1;transform:translateY(0)}.hotspot{z-index:30;width:32px;height:32px;position:absolute}.hotspot-icon{border:1.5px solid var(--primary);width:32px;height:32px;box-shadow:0 0 15px var(--primary-glow);background:#1a1012e6;border-radius:50%;justify-content:center;align-items:center;font-size:20px;transition:transform .2s,background-color .2s,color .2s;display:flex}.hotspot:hover .hotspot-icon{background-color:var(--primary);transform:scale(1.2);color:#fff!important}.hotspot-ping{background:var(--primary);opacity:.85;z-index:-1;border-radius:50%;width:100%;height:100%;animation:2s ease-out infinite hotspotPingAnimation;position:absolute;top:0;left:0}@keyframes hotspotPingAnimation{0%{opacity:.85;transform:scale(.9)}to{opacity:0;transform:scale(2.4)}}.hotspot-card{opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(.25,1,.5,1),transform .3s cubic-bezier(.25,1,.5,1),visibility .3s;transform:translateY(10px)scale(.95)}.hotspot:hover .hotspot-card{opacity:1;visibility:visible;transform:translateY(0)scale(1)}.flavor-dot.active{border:2px solid #fff;transform:scale(1.15);box-shadow:0 0 10px #ffffff80}@media (width<=768px){.scroll-section{justify-content:center;padding:0 20px}.story-card{max-width:100%;padding:24px}.story-card h2{font-size:28px}#hotspots-overlay{display:none!important}}