/* Cinematic login screen — DA.MOTORS calculator. Layer stack (back to front): .hero-stage fixed full-bleed container .hero-media-slot swappable background (HeroMedia mounts here; empty today) .hero-fx smoke / volumetric light / body-sweep — generic atmosphere, designed to sit over whatever real photo/video is mounted .hero-overlay flat dimming layer, strength set from config (imageOverlayOpacity) — the safety margin for text contrast against a photo we haven't seen yet .hero-scrim left→right darkening gradient (desktop) so the form stays readable no matter what the photo looks like .login-panel in-flow content (logo, title, benefits, Telegram button) Effect layers (smoke / light rays / body-shine / Ken Burns / parallax) are toggled by JS via classes on (see login.js: applyQualityMode()) — one function decides the quality mode (desktopFull / tabletReduced / mobileLite / reducedMotion) and one config decides which effects the author wants at all (hero-media-config.js). CSS below only reacts to the resulting classes; it does not decide anything on its own except the hard prefers-reduced-motion override at the bottom, which stays CSS-only on purpose so it can never depend on JS having run. */ html, body { height: 100%; } body.login-page { margin: 0; min-height: 100dvh; overflow-x: hidden; background-color: var(--color-bg); /* shows instantly, before any media loads */ font-family: var(--font-sans); color: var(--color-text); } /* ---------- Hero stage (background) ---------- */ .hero-stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background-color: var(--color-bg); } .hero-media-slot { position: absolute; inset: 0; } /* Placeholder state: no real photo/video yet. This is a plain, honest dark gradient — not an illustrated showroom or a stand-in car. It exists so the atmosphere system (smoke/light/sweep below) has something to sit on top of. TODO(DA.MOTORS): once real showroom/car photography or video is supplied, it mounts INSIDE this element via hero-media.js — nothing here needs to change. */ .hero-media { position: absolute; inset: 0; background: radial-gradient(120% 100% at 68% 32%, var(--color-surface) 0%, var(--color-bg) 55%, var(--color-bg-deep) 100%); } .hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Mobile-first position; desktop override below. Both custom properties are set from hero-media-config.js (imagePositionMobile/Desktop) — no CSS edit needed to reframe a photo. */ object-position: var(--hero-pos-mobile, 50% 30%); } @media (min-width: 1024px) { .hero-media img, .hero-media video { object-position: var(--hero-pos-desktop, 68% 40%); } } /* Photos fade in once loaded instead of popping in; the placeholder gradient (or poster, for video) shows underneath in the meantime. A well-exposed photo (like the current BMW mockup) needs only a light cinematic grade here, not a brightness rescue — the car should already read clearly straight out of the source image. */ .hero-media img { opacity: 0; filter: brightness(1.03) contrast(1.04) saturate(0.98); transition: opacity 0.6s var(--ease-standard); } .hero-media img.is-loaded { opacity: 1; } .hero-media--kenburns img, .hero-media--kenburns video { animation: kenburns 34s ease-in-out infinite alternate; transform-origin: 62% 38%; } @keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.045) translate3d(-1%, -1%, 0); } } /* ---------- Atmosphere (smoke / light / body sweep) ---------- */ .hero-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* Real smoke, filmed on solid black, composited with mix-blend-mode:screen — black contributes nothing to a screen blend, so the black background disappears on its own and only the bright smoke shows through. One clip: dense ground fog at the bottom of the frame. (A second, higher/backlit layer was tried and removed — Pavel found it added nothing, and its container's bottom edge showed as a hard horizontal seam across the whole frame while the video was still loading, before screen-blend evened it out. Don't re-add a second full-bleed-height smoke layer without solving that load-time seam first.) IMPORTANT: opacity/mask/filter must live on the