/* ============================================================= DriveLux — Motion Design System Premium motion layer on top of style.css. Uses only transform + opacity for GPU compositing. All animations respect prefers-reduced-motion. ============================================================= */ /* ───────────────────────────────────────────────────────────── 1. MOTION TOKENS ───────────────────────────────────────────────────────────── */ :root { /* Durations */ --dur-micro: 140ms; --dur-hover: 200ms; --dur-reveal: 520ms; --dur-hero: 820ms; --dur-page: 300ms; --dur-drawer: 340ms; /* Easings */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1); /* Composite transitions */ --t-hover: var(--dur-hover) var(--ease-smooth); --t-reveal: var(--dur-reveal) var(--ease-out); --t-luxury: var(--dur-hero) var(--ease-luxury); } /* ───────────────────────────────────────────────────────────── 2. REDUCED MOTION ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ───────────────────────────────────────────────────────────── 3. SCROLL REVEAL SYSTEM Progressive enhancement: .js-ready added to by motion.js ───────────────────────────────────────────────────────────── */ .js-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--t-reveal), transform var(--t-reveal); will-change: transform, opacity; } .js-ready .reveal--fade { transform: none; } .js-ready .reveal--left { transform: translateX(-22px); } .js-ready .reveal--right { transform: translateX(22px); } .js-ready .reveal--scale { transform: scale(0.96); } /* Stagger delays for grouped items */ .js-ready .reveal[data-delay="1"] { transition-delay: 80ms; } .js-ready .reveal[data-delay="2"] { transition-delay: 160ms; } .js-ready .reveal[data-delay="3"] { transition-delay: 240ms; } .js-ready .reveal[data-delay="4"] { transition-delay: 320ms; } .js-ready .reveal[data-delay="5"] { transition-delay: 400ms; } .js-ready .reveal[data-delay="6"] { transition-delay: 480ms; } /* Visible state — added by IntersectionObserver in motion.js */ .reveal.is-visible { opacity: 1 !important; transform: none !important; } /* ───────────────────────────────────────────────────────────── 4. PAGE FADE-IN ───────────────────────────────────────────────────────────── */ main { animation: pageFadeIn var(--dur-page) var(--ease-smooth) both; } @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ───────────────────────────────────────────────────────────── 5. HERO ENTRANCE SEQUENCE .js-init is added by inline script before first paint. .hero-entered is added by motion.js on DOMContentLoaded. ───────────────────────────────────────────────────────────── */ /* Hide hero elements before first paint (js-init added in ) */ .js-init .hero-v2__title, .js-init .hero-v2__subtitle, .js-init .hero-v2__cta-row { opacity: 0; transform: translateY(26px); } /* Tabs and card body animate separately — card is never opacity:0 at parent level */ .js-init .hbc__tabs { opacity: 0; transform: translateY(22px); } .js-init .hbc__body { opacity: 0; transform: translateY(22px); } /* Animate hero elements in once hero-entered is added */ .hero-v2__text.hero-entered .hero-v2__title, .hero-v2__text.hero-entered .hero-v2__subtitle, .hero-v2__text.hero-entered .hero-v2__cta-row { animation: heroSlideUp var(--dur-hero) var(--ease-luxury) both; } .hero-v2__text.hero-entered .hero-v2__title { animation-delay: 0ms; } .hero-v2__text.hero-entered .hero-v2__subtitle { animation-delay: 180ms; } .hero-v2__text.hero-entered .hero-v2__cta-row { animation-delay: 340ms; } /* Tabs slide up first, then the white card */ .hbc.hero-entered .hbc__tabs { animation: heroSlideUp var(--dur-hero) var(--ease-luxury) 340ms both; } .hbc.hero-entered .hbc__body { animation: heroSlideUp var(--dur-hero) var(--ease-luxury) 480ms both; } @keyframes heroSlideUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } /* ───────────────────────────────────────────────────────────── 6. NAVIGATION ENHANCEMENTS ───────────────────────────────────────────────────────────── */ /* Enhanced scroll shadow */ .nav--scrolled { box-shadow: 0 2px 24px rgba(0, 0, 0, 0.22); } /* Smooth transition for all nav state changes */ .nav { transition: background 280ms var(--ease-smooth), border-color 280ms var(--ease-smooth), box-shadow 280ms var(--ease-smooth) !important; } /* Nav link underline: slide from center outward */ .nav__link::after { transform-origin: center; transition: transform 240ms var(--ease-luxury) !important; } .nav__link:hover::after { transform: scaleX(0.6); } .nav__link--active::after { transform: scaleX(1) !important; } /* ───────────────────────────────────────────────────────────── 7. BUTTON ENHANCEMENTS ───────────────────────────────────────────────────────────── */ /* Active press feedback — all buttons */ .btn:active:not(:disabled) { transform: scale(0.97) !important; transition-duration: var(--dur-micro) !important; } /* Primary — richer hover shadow */ .btn--primary:hover { box-shadow: 0 12px 32px rgba(225, 255, 81, 0.42) !important; transform: translateY(-2px); } /* Outline gold — smooth fill */ .btn--outline-gold { transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover); } /* Loading state */ .btn--loading { pointer-events: none; position: relative; color: transparent !important; } .btn--loading::after { content: ''; position: absolute; inset: 50% auto auto 50%; width: 18px; height: 18px; margin: -9px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; color: var(--color-dark); animation: motionSpin 0.65s linear infinite; } .btn--primary.btn--loading::after { color: var(--color-dark); } .btn--dark.btn--loading::after { color: var(--color-white); } /* Focus ring — accessible and branded */ .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; } /* ───────────────────────────────────────────────────────────── 8. INPUT FOCUS ENHANCEMENTS ───────────────────────────────────────────────────────────── */ .form-control { transition: border-color var(--t-hover), box-shadow var(--t-hover) !important; } .form-control:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(225, 255, 81, 0.18) !important; outline: none; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Error shake — fires once via .is-error class */ @keyframes motionShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } /* ───────────────────────────────────────────────────────────── 9. CAR CARD HOVER — PREMIUM ───────────────────────────────────────────────────────────── */ .car-card { transition: transform var(--t-hover), box-shadow var(--t-hover), border-color var(--t-hover) !important; will-change: transform; } .car-card:hover { transform: translateY(-6px) !important; box-shadow: 0 22px 52px rgba(15, 23, 42, 0.16) !important; } /* Image zoom on hover */ .car-card__img { transition: transform 480ms var(--ease-out) !important; will-change: transform; } .car-card:hover .car-card__img { transform: scale(1.06) !important; } /* ───────────────────────────────────────────────────────────── 10. HBC TAB TRANSITIONS (via JS in motion.js) CSS stays as is (display:none/block) — JS handles fade ───────────────────────────────────────────────────────────── */ .hbc__tab { transition: background var(--t-hover), color var(--t-hover) !important; } /* ───────────────────────────────────────────────────────────── 11. MOBILE DRAWER — STAGGER LINKS ───────────────────────────────────────────────────────────── */ .nav__mobile { transition: transform var(--dur-drawer) var(--ease-luxury), visibility 0s linear var(--dur-drawer) !important; } .nav__mobile.is-open { transition: transform var(--dur-drawer) var(--ease-luxury), visibility 0s linear 0s !important; } /* Stagger link entrance on open */ .nav__mobile.is-open .nav__mobile-link { animation: drawerLinkIn 360ms var(--ease-luxury) both; } .nav__mobile.is-open .nav__mobile-link:nth-child(1) { animation-delay: 55ms; } .nav__mobile.is-open .nav__mobile-link:nth-child(2) { animation-delay: 95ms; } .nav__mobile.is-open .nav__mobile-link:nth-child(3) { animation-delay: 135ms; } .nav__mobile.is-open .nav__mobile-link:nth-child(4) { animation-delay: 175ms; } .nav__mobile.is-open .nav__mobile-link:nth-child(5) { animation-delay: 215ms; } .nav__mobile.is-open .nav__mobile-link:nth-child(6) { animation-delay: 255ms; } .nav__mobile.is-open .nav__mobile-link:nth-child(7) { animation-delay: 295ms; } .nav__mobile.is-open .nav__mobile-link:nth-child(8) { animation-delay: 335ms; } @keyframes drawerLinkIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ───────────────────────────────────────────────────────────── 12. SKELETON LOADER ───────────────────────────────────────────────────────────── */ .skeleton, .skeleton-line { background: var(--color-surface-2); border-radius: var(--radius-sm); overflow: hidden; position: relative; } .skeleton::after, .skeleton-line::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,.52) 50%, transparent 100% ); background-size: 200% 100%; animation: motionShimmer 1.7s ease-in-out infinite; } @keyframes motionShimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } /* ───────────────────────────────────────────────────────────── 13. TOAST / ALERT NOTIFICATIONS ───────────────────────────────────────────────────────────── */ .alert--toast { animation: toastSlideIn 380ms var(--ease-luxury) both; } @keyframes toastSlideIn { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: none; } } /* ───────────────────────────────────────────────────────────── 14. MODAL ENTRANCE ───────────────────────────────────────────────────────────── */ .modal-backdrop { transition: opacity 240ms var(--ease-smooth) !important; } .modal-backdrop:not(.is-open) { opacity: 0 !important; pointer-events: none !important; } .modal-backdrop.is-open { opacity: 1 !important; } .modal-backdrop .modal { transition: transform 340ms var(--ease-luxury), opacity 280ms var(--ease-smooth) !important; will-change: transform; } .modal-backdrop:not(.is-open) .modal { transform: translateY(24px) scale(0.97) !important; opacity: 0 !important; } .modal-backdrop.is-open .modal { transform: none !important; opacity: 1 !important; } /* ───────────────────────────────────────────────────────────── 15. FAQ ACCORDION ───────────────────────────────────────────────────────────── */ .faq__answer { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 400ms var(--ease-luxury), opacity 260ms var(--ease-smooth); } .faq__item.is-open .faq__answer { max-height: 900px; opacity: 1; } .faq__icon { transition: transform 260ms var(--ease-smooth); flex-shrink: 0; } .faq__item.is-open .faq__icon { transform: rotate(45deg); } /* ───────────────────────────────────────────────────────────── 16. BOOKING SUCCESS CHECK SVG ───────────────────────────────────────────────────────────── */ .success-check__circle { stroke-dasharray: 252; stroke-dashoffset: 252; animation: drawCircle 600ms var(--ease-out) 200ms both; } .success-check__mark { stroke-dasharray: 52; stroke-dashoffset: 52; animation: drawMark 420ms var(--ease-out) 760ms both; } @keyframes drawCircle { to { stroke-dashoffset: 0; } } @keyframes drawMark { to { stroke-dashoffset: 0; } } /* Success card entrance */ .booking-confirmed__card { animation: heroSlideUp 560ms var(--ease-luxury) 100ms both; } /* ───────────────────────────────────────────────────────────── 17. COUPON SLIDE-DOWN ───────────────────────────────────────────────────────────── */ .coupon-discount-row { animation: slideDown 300ms var(--ease-luxury) both; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } /* ───────────────────────────────────────────────────────────── 18. GALLERY FADE (car detail) ───────────────────────────────────────────────────────────── */ .car-gallery__main { transition: opacity 200ms var(--ease-smooth), transform 200ms var(--ease-smooth) !important; } /* ───────────────────────────────────────────────────────────── 19. ADMIN STAT CARDS ───────────────────────────────────────────────────────────── */ .stat-card { transition: transform var(--t-hover), box-shadow var(--t-hover); } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } /* Admin table row hover */ .data-table tbody tr { transition: background var(--dur-micro) var(--ease-smooth); } /* ───────────────────────────────────────────────────────────── 20. MOBILE STICKY BOOKING CTA (appears on car detail pages after scroll) ───────────────────────────────────────────────────────────── */ .mobile-sticky-cta { position: fixed; bottom: 0; inset-inline: 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--color-white); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 28px rgba(15, 23, 42, 0.10); display: flex; align-items: center; gap: 14px; z-index: 890; transform: translateY(100%); transition: transform 320ms var(--ease-luxury); will-change: transform; } .mobile-sticky-cta.is-visible { transform: none; } .mobile-sticky-cta__info { flex: 1; min-width: 0; } .mobile-sticky-cta__price { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 800; color: var(--color-dark); line-height: 1.2; } .mobile-sticky-cta__label { font-size: .75rem; color: var(--color-muted); font-weight: 400; } .mobile-sticky-cta .btn { flex-shrink: 0; } /* Only show on mobile */ @media (min-width: 769px) { .mobile-sticky-cta { display: none !important; } } /* ───────────────────────────────────────────────────────────── 21. NOTIFICATION BADGE ───────────────────────────────────────────────────────────── */ .nav__mobile-notif-badge { animation: badgePop 0.4s var(--ease-luxury) both; } @keyframes badgePop { from { transform: scale(0); } to { transform: scale(1); } } /* ───────────────────────────────────────────────────────────── 22. WHY / FEATURE CARDS HOVER ───────────────────────────────────────────────────────────── */ .why-card { transition: transform var(--t-hover), box-shadow var(--t-hover); } .why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); } .why-card__icon { transition: transform 280ms var(--ease-spring, var(--ease-luxury)); } .why-card:hover .why-card__icon { transform: scale(1.12) rotate(-4deg); } @keyframes motionSpring { 0% { transform: scale(1); } 40% { transform: scale(1.15) rotate(-5deg); } 70% { transform: scale(1.05) rotate(2deg); } 100% { transform: scale(1.12) rotate(-4deg); } } /* ───────────────────────────────────────────────────────────── 23. TRUST / HERO STATS BAR ───────────────────────────────────────────────────────────── */ .trust-bar__item { transition: transform var(--t-hover); } .trust-bar__item:hover { transform: translateY(-2px); } /* ───────────────────────────────────────────────────────────── 24. NUMBER COUNT-UP ───────────────────────────────────────────────────────────── */ [data-count] { font-variant-numeric: tabular-nums; } /* ───────────────────────────────────────────────────────────── 25. GLOBAL SPINNERS (reuse existing) ───────────────────────────────────────────────────────────── */ @keyframes motionSpin { to { transform: rotate(360deg); } } /* ───────────────────────────────────────────────────────────── 26. BOOKING STEP TRANSITION Steps animate from side — JS adds classes ───────────────────────────────────────────────────────────── */ .booking-step-enter { animation: stepEnterRight 320ms var(--ease-luxury) both; } .booking-step-exit { animation: stepExitLeft 220ms var(--ease-smooth) both; } @keyframes stepEnterRight { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } } @keyframes stepExitLeft { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-18px); } } [dir="rtl"] .booking-step-enter { animation-name: stepEnterLeft; } [dir="rtl"] .booking-step-exit { animation-name: stepExitRight; } @keyframes stepEnterLeft { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } } @keyframes stepExitRight { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(18px); } } /* ───────────────────────────────────────────────────────────── 27. ADMIN SIDEBAR SVG ICON INTERACTIONS ───────────────────────────────────────────────────────────── */ .admin-nav-item { transition: background var(--t-hover), color var(--t-hover) !important; } .admin-nav-item__icon { transition: transform var(--t-hover), opacity var(--t-hover) !important; } .admin-nav-item:hover .admin-nav-item__icon { transform: scale(1.12); opacity: 1; } .admin-nav-item.active .admin-nav-item__icon { transform: scale(1.08); opacity: 1; } /* Active indicator slides in */ .admin-nav-item::before { transition: height var(--t-hover) !important; } /* Admin header action buttons */ .admin-header__action { transition: background var(--t-hover), transform var(--t-hover); } .admin-header__action:hover { transform: translateY(-1px); } /* ───────────────────────────────────────────────────────────── 28. ADMIN CONTENT AREA PAGE REVEAL ───────────────────────────────────────────────────────────── */ .admin-content { animation: pageFadeIn var(--dur-page) var(--ease-smooth) both; } /* ───────────────────────────────────────────────────────────── 29. FORM ACTION BUTTON LOADING (admin forms) ───────────────────────────────────────────────────────────── */ form .btn[type="submit"] { transition: all var(--t-hover); } /* ───────────────────────────────────────────────────────────── 30. STATUS BADGE TRANSITIONS ───────────────────────────────────────────────────────────── */ .badge, .status-badge, [class*="status--"] { transition: opacity var(--dur-micro) var(--ease-smooth); } /* ───────────────────────────────────────────────────────────── 31. SERVICES GRID HOVER (homepage) Reduced-motion is handled by the global rule at the top. ───────────────────────────────────────────────────────────── */ /* Card lift */ .svc-card { transition: transform 250ms cubic-bezier(0.4,0,0.2,1), box-shadow 250ms cubic-bezier(0.4,0,0.2,1); will-change: transform; } .svc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.34); } /* Background image/gradient zoom */ .svc-card:hover .svc-card__bg { transform: scale(1.04); } /* Arrow transition */ .svc-card__arrow { transition: transform 250ms cubic-bezier(0.4,0,0.2,1); } /* Arrow nudge — LTR: slides right */ .svc-card:hover .svc-card__arrow { transform: translateX(4px); } /* Arrow nudge — RTL: slides left */ [dir="rtl"] .svc-card:hover .svc-card__arrow { transform: translateX(-4px); }