.page-progress { position: fixed; inset: 0 auto auto 0; width: 100%; height: 3px; background: rgba(199, 255, 36, .12); z-index: 30; pointer-events: none; }
.page-progress span { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 18px var(--lime); }
.hero-image { will-change: transform; }
.hero-shade { opacity: calc(1 - var(--fade, 0) * .28); }
.hero-orb { position: absolute; z-index: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #efffb5 0 5%, var(--lime) 22%, rgba(125, 235, 0, .18) 48%, transparent 70%); filter: blur(.2px); opacity: .8; box-shadow: 0 0 60px rgba(199, 255, 36, .32); animation: drift 8s ease-in-out infinite; }
.orb-one { width: 42px; height: 42px; right: 25%; top: 26%; }
.orb-two { width: 18px; height: 18px; right: 14%; top: 48%; animation-delay: -4s; }
.gallery { height: calc(100vh + 680px); padding: 0; overflow: hidden; }
.gallery-sticky { height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; }
.gallery-head { width: min(1240px, calc(100% - 64px)); margin: 0 auto 55px; }
.gallery-track { will-change: transform; }
.gallery-card { transform: translateY(var(--card-y, 42px)) rotate(var(--card-r, 0deg)); transition: transform .08s linear, filter .45s ease; filter: saturate(.8) brightness(.76); }
.gallery-card:hover { filter: saturate(1.1) brightness(1); }
.gallery-card img { transform: scale(1.08); transition: transform .8s cubic-bezier(.2, .7, .1, 1); }
.gallery-card:hover img { transform: scale(1.14); }
.signal-image { box-shadow: 0 20px 50px rgba(35, 70, 0, .23); }
@keyframes drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-18px, 25px, 0) scale(1.18); } }
@media (max-width: 760px) { .gallery { height: auto; padding: 85px 0; } .gallery-sticky { height: auto; position: relative; display: block; } .gallery-head { width: calc(100% - 40px); margin-bottom: 35px; } .gallery-track { transform: none !important; overflow-x: auto; width: 100%; padding-bottom: 12px; } .gallery-card { transform: none !important; filter: none; } .hero-orb { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .gallery { height: auto; padding: 100px 0; } .gallery-sticky { height: auto; position: relative; display: block; } .gallery-track { transform: none !important; overflow-x: auto; } .gallery-card { transform: none !important; } }