/* ========================================================================= luxco-motion.css — Initial states for scroll-triggered animations. -------------------------------------------------------------------------- Strategy: every animated element starts in its FINAL hidden state via CSS so there is no flash of unstyled content. luxco-motion.js then animates it to revealed and adds `.is-revealed`. If JS fails to load (CSP blocks, adblock, etc.), `:not(.js-motion-ready)` resets everything to visible so the site is never blank. ========================================================================= */ /* When the JS bootstraps, it adds .js-motion-ready to . Until that moment we ALSO keep elements visible — only AFTER ready we hide them and the script takes over. This avoids a flash for users on slow connections or `prefers-reduced-motion`. */ html:not(.js-motion-ready) [data-motion] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; } /* ── Page-load fade (Apple-style veil-removal) ───────────────────── Cuando el JS está listo, el body entra con un fade-in muy sutil (400ms) que asienta el primer paint. Si JS no carga, el body es visible inmediatamente. */ html.js-motion-ready body { animation: luxBodyFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes luxBodyFadeIn { from { opacity: 0.001; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html.js-motion-ready body { animation: none !important; opacity: 1 !important; } } @media (prefers-reduced-motion: reduce) { /* Honor user preference: skip all motion. CSS-only fallback. */ html [data-motion] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; transition: none !important; animation: none !important; } } /* ── Initial states ──────────────────────────────────────────────────── */ html.js-motion-ready [data-motion="reveal-up"] { opacity: 0; transform: translate3d(0, 40px, 0); } html.js-motion-ready [data-motion="reveal-up-sm"] { opacity: 0; transform: translate3d(0, 20px, 0); } html.js-motion-ready [data-motion="reveal-fade"] { opacity: 0; } html.js-motion-ready [data-motion="reveal-scale"] { opacity: 0; transform: scale(1.08); } html.js-motion-ready [data-motion="reveal-clip"] { opacity: 0; clip-path: inset(0 0 100% 0); } html.js-motion-ready [data-motion="hero-image"] { opacity: 0; transform: scale(1.1); } html.js-motion-ready [data-motion="stagger-child"] > * { opacity: 0; transform: translate3d(0, 24px, 0); } /* When a stat needs to count from 0 to its real value, we show it but the text content gets replaced. No initial hide needed. */ /* ── Scroll progress bar (fixed top) ─────────────────────────────────── */ .lux-scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999; pointer-events: none; background: transparent; } .lux-scroll-progress__fill { height: 100%; width: 0%; background: linear-gradient(90deg, #FF60EE 0%, #0279FF 100%); transform-origin: left center; transition: opacity .3s ease; } @media (prefers-reduced-motion: reduce) { .lux-scroll-progress { display: none; } } /* ── Back to top button ──────────────────────────────────────────────── */ .lux-back-top { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; background: #1B3531; color: #EEB84C; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 998; opacity: 0; transform: scale(0.7) translateY(8px); pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); transition: background 0.25s ease, color 0.25s ease; } .lux-back-top:hover { background: #264a44; } .lux-back-top.is-visible { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } .lux-back-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* ── Header shrink on scroll ────────────────────────────────────────── */ /* The shrink itself is JS-driven (adds .is-scrolled to the header). CSS only defines the transitions and the shrunk state. Selectors stay conservative — only target the Luxco shell header, never affect other tenants. */ .luxco-shell .lux-header, .luxco-shell header[data-luxco-header] { transition: padding 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease; will-change: padding, background-color; } .luxco-shell .lux-header.is-scrolled, .luxco-shell header[data-luxco-header].is-scrolled { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); } /* ── Cards (catalog) ─────────────────────────────────────────────────── */ /* Smooth lift on hover + más notable zoom de la imagen interior para que se aprecie la foto del yate. Cards mantienen su click = navegar al detalle (no abren lightbox, eso queda solo en la galería interna del yacht detail). */ [data-motion-hover="lift"] { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; overflow: hidden; /* clipea el zoom interior dentro del border-radius */ } [data-motion-hover="lift"]:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(15, 23, 42, 0.18); z-index: 2; } [data-motion-hover="lift"] img, [data-motion-hover="lift"] .img, [data-motion-hover="lift"] [style*="background-image"] { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } [data-motion-hover="lift"]:hover img, [data-motion-hover="lift"]:hover .img { transform: scale(1.12); /* zoom visible para apreciar la foto */ } /* ── Magnetic CTAs (the JS just sets translate; here we add easing) ──── */ [data-motion-magnetic] { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } /* ── Preloader (draw-a-path) ─────────────────────────────────────── Inspirado en https://demos.gsap.com/demo/draw-a-path/ Overlay fullscreen verde Luxco con el logo dibujándose stroke-by-stroke antes de revelar la página. Se muestra solo en la PRIMERA visita por sesión (sessionStorage flag) — en navegación interna se omite. */ .lux-preloader { position: fixed; inset: 0; z-index: 99998; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1B3531 0%, #264a44 100%); pointer-events: auto; will-change: opacity, transform; } .lux-preloader-content { display: flex; flex-direction: column; align-items: center; gap: 28px; } .lux-preloader svg { width: min(220px, 42vw); height: auto; display: block; overflow: visible; } .lux-preloader path { vector-effect: non-scaling-stroke; } .lux-preloader-slogan { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; font-size: 17px; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; line-height: 1.5; opacity: 0; transform: translateY(14px); will-change: opacity, transform; } .lux-preloader-slogan span { display: block; } .lux-preloader-slogan .sail { color: #FFFFFF; } /* Sail Simple — blanco */ .lux-preloader-slogan .luxe { color: #EEB84C; } /* Live Luxe — gold Luxco */ .lux-preloader-slogan.is-in { animation: luxSloganIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; } @keyframes luxSloganIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* Locked scroll mientras el preloader está activo */ html.lux-pre-locked, html.lux-pre-locked body { overflow: hidden !important; height: 100vh; } @media (prefers-reduced-motion: reduce) { .lux-preloader { display: none !important; } html.lux-pre-locked, html.lux-pre-locked body { overflow: visible !important; height: auto !important; } } /* ── Infinite marquee (yacht gallery slider) ──────────────────────── Reemplaza visualmente el Swiper de .yd-strip por un track horizontal que se desliza con loop infinito. Pausa al hover, drag con cursor. Cards mantienen su look y siguen siendo clickeables (lightbox). */ .lux-marquee { position: relative; overflow: hidden; cursor: grab; user-select: none; width: 100%; padding: 4px 0; } .lux-marquee:active { cursor: grabbing; } .lux-marquee__track { display: flex; gap: 16px; will-change: transform; /* prevent flex children from shrinking — preserves the visual */ } .lux-marquee__track > * { flex: 0 0 auto; width: 280px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #f3f4f6; pointer-events: auto; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .lux-marquee__track > *:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18); z-index: 2; } /* Spotlight mode: el JS maneja scale/opacity por frame para el efecto "card grande al centro · chica en los bordes". Sin transición CSS, el JS controla todo (incluyendo el delta cuando hover, que ahora va vía filter brightness en lugar de transform para no chocar). */ .lux-marquee--spotlight .lux-marquee__track > * { transition: filter 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .lux-marquee--spotlight .lux-marquee__track > *:hover { transform: none; /* let JS control scale */ filter: brightness(1.08); box-shadow: 0 18px 36px rgba(15, 23, 42, 0.24); } .lux-marquee__track img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; /* clicks pasan al slide para abrir lightbox */ } @media (max-width: 720px) { .lux-marquee__track > * { width: 220px; } } /* Fade-mask en los bordes para una entrada/salida elegante */ .lux-marquee--fade-edges { mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%); } @media (prefers-reduced-motion: reduce) { /* Pausamos el slider para usuarios que prefieren menos movimiento. El JS no llega a ejecutarse, pero por si acaso. */ .lux-marquee__track { animation-play-state: paused !important; } }