/* Vincent Vegas — motion & atmosphere layer (dark "Dynasty Private Office" system) */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .fx .reveal-item { opacity: 1 !important; transform: none !important; } } /* Film grain overlay — premium texture over everything */ body::after { content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Scroll reveal (active only when JS adds .fx to ) */ .fx .reveal-item { opacity: 0; transform: translateY(30px); transition: opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1); transition-delay: var(--d, 0ms); will-change: opacity, transform; } .fx .reveal.in .reveal-item { opacity: 1; transform: none; } /* Hero load-in (above the fold — animation, never depends on scroll observer) */ .fx .hero-rise > * { animation: heroRise 1.1s cubic-bezier(.16,.84,.44,1) both; animation-delay: var(--d, 0ms); } @keyframes heroRise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } } /* Nav: condense on scroll */ nav { transition: background .5s ease, box-shadow .5s ease, border-color .5s ease; } nav.nav-scrolled { box-shadow: 0 10px 40px -16px rgba(0,0,0,.85); border-color: rgba(232,193,118,.35) !important; } /* Animated gold underline on nav menu links */ nav a.font-label-sm { position: relative; } nav a.font-label-sm::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 1px; width: 100%; background: #e8c176; transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s cubic-bezier(.16,.84,.44,1); } nav a.font-label-sm:hover::after { transform: scaleX(1); } /* Glass panels: lift + gold edge on hover */ .glass-panel { transition: transform .5s cubic-bezier(.16,.84,.44,1), border-color .5s, background .5s, box-shadow .5s; } .glass-panel:hover { border-color: rgba(232,193,118,.55); box-shadow: 0 24px 70px -28px rgba(0,0,0,.85), inset 0 1px 0 rgba(232,193,118,.18); } /* Buttons: weight + glow */ button, a.btn { transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s, filter .35s, background .35s; } button:hover, a.btn:hover { transform: translateY(-2px); } .bg-secondary:hover { box-shadow: 0 14px 36px -12px rgba(232,193,118,.5); } /* Hero image: gentle continuous breathing (parallax handled in JS) */ .fx section:first-of-type .absolute img { will-change: transform; } /* Section divider hairline shimmer (decorative) */ .vv-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(232,193,118,.5), transparent); border: 0; }