/* ============================================================ VDS Smart Factory, Motion layer Scoped to so it ONLY affects the five Smart Factory subpages, never the other pages that share sf-subpage.css (FAQ, cases, Quick Scan, legal, 404, …). ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* ---------- 1. Hero entrance on page load ---------- */ .sf-motion .sub-hero .crumbs, .sf-motion .sub-hero .hero-eyebrow, .sf-motion .sub-hero h1, .sf-motion .sub-hero .lead, .sf-motion .sub-hero .hero-actions { opacity: 0; transform: translateY(24px); animation: sfHeroIn 0.85s cubic-bezier(0.16, 0.84, 0.28, 1) both; } .sf-motion .sub-hero .crumbs { animation-delay: 0.05s; } .sf-motion .sub-hero .hero-eyebrow { animation-delay: 0.16s; } .sf-motion .sub-hero h1 { animation-delay: 0.26s; } .sf-motion .sub-hero .lead { animation-delay: 0.40s; } .sf-motion .sub-hero .hero-actions { animation-delay: 0.54s; } /* Hero side visual: float up + settle */ .sf-motion .sub-hero .hero-photo { animation: sfHeroPhoto 1s cubic-bezier(0.16, 0.84, 0.28, 1) both; animation-delay: 0.34s; } @keyframes sfHeroIn { to { opacity: 1; transform: translateY(0); } } @keyframes sfHeroPhoto { from { opacity: 0; transform: translateY(34px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Soft drifting glow inside the hero for subtle life */ .sf-motion .sub-hero::before { animation: sfGlowDrift 16s ease-in-out infinite alternate; } @keyframes sfGlowDrift { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(2%, 1.5%, 0) scale(1.06); } } /* ---------- 2. Staggered reveal of grid items ---------- */ .sf-motion .sf-stag { opacity: 0; transform: translateY(22px); transition: opacity 0.6s cubic-bezier(0.16, 0.84, 0.28, 1) var(--sf-d, 0s), transform 0.6s cubic-bezier(0.16, 0.84, 0.28, 1) var(--sf-d, 0s); will-change: opacity, transform; } .sf-motion .sf-stag.sf-in { opacity: 1; transform: translateY(0); } /* A touch more travel on the base scroll-reveal blocks */ .sf-motion .reveal { transform: translateY(26px); } /* ---------- 3. Dashboard bars grow when in view ---------- */ .sf-motion .dash-preview .dbars span { transform: scaleY(0.04); transform-origin: bottom; transition: transform 0.7s cubic-bezier(0.16, 0.84, 0.28, 1) var(--sf-d, 0s); } .sf-motion .dash-preview.sf-bars-in .dbars span { transform: scaleY(1); } } /* ---------- 4. Hover interactions (always on) ---------- */ .sf-motion .sol-card, .sf-motion .kpi, .sf-motion .ai-card, .sf-motion .pain { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease; } .sf-motion .sol-card:hover { transform: translateY(-5px); border-color: var(--accent-2); box-shadow: 0 22px 40px -22px rgba(15, 25, 72, 0.30); } .sf-motion .sol-card .sol-icon { transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease; } .sf-motion .sol-card:hover .sol-icon { transform: translateY(-2px) scale(1.06); background: var(--accent-2); color: #fff; } .sf-motion .kpi:hover { transform: translateY(-5px); border-color: var(--accent-2); box-shadow: 0 22px 40px -22px rgba(15, 25, 72, 0.30); } .sf-motion .kpi .kpi-value { transition: transform 0.22s ease; } .sf-motion .kpi:hover .kpi-value { transform: scale(1.05); } .sf-motion .pain:hover { transform: translateX(4px); border-left-width: 5px; box-shadow: 0 16px 30px -22px rgba(15, 25, 72, 0.28); } .sf-motion .ai-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.09); border-color: rgba(109, 148, 226, 0.55); } .sf-motion .dash-preview { transition: transform 0.3s ease, box-shadow 0.3s ease; } .sf-motion .dash-preview:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -30px rgba(15, 25, 72, 0.5); }