/* ======================================== Habanero Media — Motion Layer styles Active only when has .motion-on ======================================== */ /* Lenis recommended base */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* Lenis owns scrolling; disable native smooth scroll when motion is on */ .motion-on { scroll-behavior: auto; } /* Filter buttons: smoother gold-leaning transitions (motion only) */ .motion-on .filter-btn { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.25s ease; } .motion-on .filter-btn.active { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(74, 25, 66, 0.25); } .motion-on .filter-btn:not(.active):hover { transform: translateY(-1px); } /* Hero decorative gold glow (motion only) */ .hero-glow { position: absolute; top: 30%; right: 20%; width: 60vw; max-width: 700px; height: 60vw; max-height: 700px; transform: translate(50%, -50%); background: radial-gradient(circle, rgba(201, 168, 76, 0.18) 0%, transparent 60%); filter: blur(20px); z-index: 1; pointer-events: none; } /* Lightbox: blur backdrop + eased content (motion only) */ .motion-on .modal-overlay { backdrop-filter: blur(0px); transition: opacity 0.3s ease, visibility 0.3s ease, backdrop-filter 0.3s ease; } .motion-on .modal-overlay.open { backdrop-filter: blur(6px); } .motion-on .modal-content { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* Carousel: gentler slide ease (motion only) */ .motion-on .testimonial-slide { transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } /* Logos marquee (motion only): pause on hover, grayscale -> color */ .motion-on .logos-marquee:hover .logos-track { animation-play-state: paused; } .motion-on .logo-item img { filter: grayscale(1); opacity: 0.65; transition: filter 0.4s ease, opacity 0.4s ease; } .motion-on .logo-item img:hover { filter: grayscale(0); opacity: 1; }