/** * WS Fleet — Animations * Three styles, applied via body classes: * .ws-anim-elegant Elegant Fade & Lift * .ws-anim-cinematic Cinematic Zoom & Glow * .ws-anim-slide Luxury Slide & Shine * Reveals only activate once JS adds .ws-anim-ready to , * so content is never hidden if JavaScript fails to load. */ /* ---------- Reveal base ---------- */ body.ws-anim-ready .ws-reveal { opacity: 0; transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--ws-anim-delay, 0s); will-change: transform, opacity; } body.ws-anim-ready .ws-reveal.ws-inview { opacity: 1; } /* Reveal transforms per style (only while not yet revealed, so hover transforms take over cleanly after the reveal completes) */ body.ws-anim-elegant.ws-anim-ready .ws-reveal:not(.ws-inview) { transform: translateY(30px); } body.ws-anim-cinematic.ws-anim-ready .ws-reveal:not(.ws-inview) { transform: scale(0.92) translateY(14px); } body.ws-anim-slide.ws-anim-ready .ws-reveal:not(.ws-inview) { transform: translateX(var(--ws-slide-x, -44px)); } /* ---------- Shared hover foundations ---------- */ body.ws-anim .ws-car-card, body.ws-anim .ws-service-card, body.ws-anim .ws-brand-card { transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } body.ws-anim .ws-car-media { overflow: hidden; display: block; } body.ws-anim .ws-car-media img, body.ws-anim .ws-service-card > img, body.ws-anim .ws-split-image { transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.6s ease; } body.ws-anim .ws-btn, body.ws-anim .ws-btn-wa, body.ws-anim .ws-btn-wa-sm, body.ws-anim .ws-filter-btn, body.ws-anim .ws-sort-btn { transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; } body.ws-anim .ws-social a { transition: transform 0.3s, color 0.3s, border-color 0.3s, background 0.3s; } body.ws-anim .ws-floating-wa { transition: transform 0.3s, box-shadow 0.3s; } body.ws-anim .ws-floating-wa:hover { transform: scale(1.1); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45); } body.ws-anim .ws-footer-list a, body.ws-anim .ws-nav-list a { transition: color 0.25s, background 0.25s, transform 0.25s; } /* Nav underline grow (desktop links) */ body.ws-anim .ws-nav-list > li > a { background-image: linear-gradient(var(--ws-accent), var(--ws-accent)); background-repeat: no-repeat; background-position: center calc(100% - 4px); background-size: 0 1.5px; transition: background-size 0.35s ease, color 0.25s, background-color 0.25s; } body.ws-anim .ws-nav-list > li > a:hover { background-size: calc(100% - 24px) 1.5px; } /* ========================================================== STYLE 1 — ELEGANT FADE & LIFT ========================================================== */ body.ws-anim-elegant .ws-car-card:hover, body.ws-anim-elegant .ws-service-card:hover { transform: translateY(-8px); border-color: color-mix(in srgb, var(--ws-accent) 55%, var(--ws-border)); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); } body.ws-anim-elegant .ws-brand-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--ws-accent) 55%, var(--ws-border)); } body.ws-anim-elegant .ws-car-card:hover .ws-car-media img, body.ws-anim-elegant .ws-service-card:hover > img { transform: scale(1.06); } body.ws-anim-elegant .ws-split-image:hover { transform: scale(1.02); } body.ws-anim-elegant .ws-btn:hover, body.ws-anim-elegant .ws-btn-wa:hover { transform: translateY(-2px); } body.ws-anim-elegant .ws-social a:hover { transform: translateY(-3px); } body.ws-anim-elegant .ws-footer-list a:hover { transform: translateX(4px); display: inline-block; } /* ========================================================== STYLE 2 — CINEMATIC ZOOM & GLOW ========================================================== */ body.ws-anim-cinematic .ws-car-card:hover, body.ws-anim-cinematic .ws-service-card:hover { transform: scale(1.025); border-color: color-mix(in srgb, var(--ws-accent) 70%, var(--ws-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ws-accent) 35%, transparent), 0 14px 44px color-mix(in srgb, var(--ws-accent) 18%, rgba(0, 0, 0, 0.45)); } body.ws-anim-cinematic .ws-brand-card:hover { transform: scale(1.03); box-shadow: 0 0 30px color-mix(in srgb, var(--ws-accent) 16%, transparent); border-color: color-mix(in srgb, var(--ws-accent) 70%, var(--ws-border)); } body.ws-anim-cinematic .ws-car-card:hover .ws-car-media img, body.ws-anim-cinematic .ws-service-card:hover > img { transform: scale(1.12); filter: brightness(1.08); } body.ws-anim-cinematic .ws-split-image:hover { transform: scale(1.03); filter: brightness(1.06); } body.ws-anim-cinematic .ws-btn:hover, body.ws-anim-cinematic .ws-btn-wa:hover { box-shadow: 0 0 24px color-mix(in srgb, var(--ws-btn-bg, var(--ws-accent)) 45%, transparent); } body.ws-anim-cinematic .ws-social a:hover { transform: scale(1.15); } body.ws-anim-cinematic .ws-hero-title { text-shadow: 0 0 0 transparent; transition: text-shadow 0.4s ease; } body.ws-anim-cinematic .ws-hero-title:hover { text-shadow: 0 0 34px color-mix(in srgb, var(--ws-accent) 45%, transparent); } /* ========================================================== STYLE 3 — LUXURY SLIDE & SHINE ========================================================== */ body.ws-anim-slide .ws-car-card, body.ws-anim-slide .ws-service-card { position: relative; } body.ws-anim-slide .ws-car-card:hover, body.ws-anim-slide .ws-service-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--ws-accent) 55%, var(--ws-border)); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35); } body.ws-anim-slide .ws-brand-card { border-left: 2px solid transparent; transition: transform 0.3s, border-color 0.3s, background 0.3s; } body.ws-anim-slide .ws-brand-card:hover { border-left-color: var(--ws-accent); transform: translateX(6px); } body.ws-anim-slide .ws-car-card:hover .ws-car-media img { transform: scale(1.07); } body.ws-anim-slide .ws-service-card > img { filter: grayscale(25%); } body.ws-anim-slide .ws-service-card:hover > img { filter: grayscale(0%); transform: scale(1.05); } /* Shine sweep across buttons */ body.ws-anim-slide .ws-btn::after, body.ws-anim-slide .ws-btn-wa::after, body.ws-anim-slide .ws-filter-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.22), transparent); transform: skewX(-20deg); transition: left 0.55s ease; pointer-events: none; } body.ws-anim-slide .ws-btn:hover::after, body.ws-anim-slide .ws-btn-wa:hover::after, body.ws-anim-slide .ws-filter-btn:hover::after { left: 130%; } body.ws-anim-slide .ws-social a:hover { transform: rotate(-8deg) scale(1.1); } body.ws-anim-slide .ws-footer-list a:hover { transform: translateX(6px); display: inline-block; color: var(--ws-accent); } /* ---------- FAQ open indicator polish (all styles) ---------- */ body.ws-anim .ws-faq-question .ws-icon { transition: transform 0.3s ease; } body.ws-anim .ws-faq-item.open .ws-faq-question .ws-faq-minus .ws-icon { transform: rotate(180deg); } /* ---------- Accessibility: honor Reduce Motion ---------- */ @media (prefers-reduced-motion: reduce) { body.ws-anim-ready .ws-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } body.ws-anim *, body.ws-anim *::before, body.ws-anim *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } body.ws-anim .ws-car-card:hover, body.ws-anim .ws-service-card:hover, body.ws-anim .ws-brand-card:hover, body.ws-anim .ws-btn:hover, body.ws-anim .ws-social a:hover { transform: none !important; } }