@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600&display=swap'); body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; } h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', serif; } .cursor-dot, .cursor-outline { pointer-events: none; position: fixed; border-radius: 50%; transform: translate(-50%, -50%); z-index: 9999; transition: transform 0.1s ease-out; } .cursor-dot { width: 8px; height: 8px; background-color: #D4AF37; transition: width 0.3s, height 0.3s; } .cursor-outline { width: 30px; height: 30px; border: 1px solid #D4AF37; transition: width 0.3s, height 0.3s; } .cursor-dot.hover, .cursor-outline.hover { transform: translate(-50%, -50%) scale(2); } /* Parallax effect */ .parallax-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; } .parallax-foreground { transform: translateZ(0); } .parallax-midground { transform: translateZ(-1px) scale(2); } .parallax-background { transform: translateZ(-2px) scale(3); } .parallax-container { perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: auto; } /* Button animations */ .btn-gold { background: linear-gradient(45deg, #D4AF37, #F8FAFC); color: #0F172A; transition: all 0.3s ease; position: relative; overflow: hidden; } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3); } .btn-gold:active { transform: translateY(0); } .btn-gold::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.5); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn-gold:focus:not(:active)::after { animation: ripple 1s ease-out; } @keyframes ripple { 0% { transform: scale(0, 0); opacity: 0.5; } 100% { transform: scale(50, 50); opacity: 0; } } /* Card hover effects */ .card-hover { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .card-hover:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(212, 175, 55, 0.2), 0 10px 10px -5px rgba(212, 175, 55, 0.1); border-color: #D4AF37; } /* Scroll progress bar */ .progress-bar { position: fixed; top: 0; left: 0; height: 4px; background: linear-gradient(to right, #D4AF37, #06b6d4); width: 0%; z-index: 10000; transition: width 0.1s ease; } /* Responsive fixes */ @media (max-width: 768px) { .hero-video { object-fit: cover; } .parallax-container { height: auto; perspective: none; } .parallax-layer { position: relative; transform: none !important; } }