/* OptiPath AI Marketing - Animations Stylesheet */ /* Progressive enhancement: everything visible by default, animations only when JS is ready */ /* ======================================== Hero Entrance Animations (CSS-only) ======================================== */ @keyframes heroClipIn { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0% 0); } } @keyframes heroSlideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes heroPopIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } } .hero-content .animate-fade-in-up { opacity: 0; } .hero-content .animate-fade-in-up:nth-child(1) { animation: heroPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards; } .hero-content .animate-fade-in-up:nth-child(2) { animation: heroClipIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards; } .hero-content .animate-fade-in-up:nth-child(3) { animation: heroSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards; } .hero-content .animate-fade-in-up:nth-child(4) { animation: heroSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards; } .hero-content .animate-fade-in-up:nth-child(5) { animation: heroSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; } /* ======================================== Scroll-Triggered Animations Only activate when JS adds .js-ready to ======================================== */ /* Default: everything visible (no JS fallback) */ .animate-on-scroll, .animate-on-scroll-left, .animate-on-scroll-right, .animate-on-scroll-scale, .process-step { opacity: 1; transform: none; } /* When JS is ready, set up initial hidden states */ .js-ready .animate-on-scroll { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .js-ready .animate-on-scroll-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .js-ready .animate-on-scroll-right { opacity: 0; transform: translateX(32px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .js-ready .animate-on-scroll-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .js-ready .process-step { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Stagger children inside grids */ .js-ready .stagger-children > * { opacity: 0; transform: translateY(32px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .js-ready .stagger-children > *:nth-child(1) { transition-delay: 0s; } .js-ready .stagger-children > *:nth-child(2) { transition-delay: 0.08s; } .js-ready .stagger-children > *:nth-child(3) { transition-delay: 0.16s; } .js-ready .stagger-children > *:nth-child(4) { transition-delay: 0.24s; } .js-ready .stagger-children > *:nth-child(5) { transition-delay: 0.32s; } .js-ready .stagger-children > *:nth-child(6) { transition-delay: 0.40s; } /* ======================================== Visible State (triggered by IntersectionObserver) ======================================== */ .js-ready .animate-on-scroll.is-visible, .js-ready .animate-on-scroll-left.is-visible, .js-ready .animate-on-scroll-right.is-visible, .js-ready .animate-on-scroll-scale.is-visible, .js-ready .process-step.is-visible { opacity: 1; transform: none; } .js-ready .stagger-children.is-visible > * { opacity: 1; transform: none; } /* ======================================== Button & Card Hover Effects ======================================== */ .btn { transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.2s ease; } .btn:hover { transform: translateY(-3px); } .btn:active { transform: translateY(-1px); } .btn-primary:hover { box-shadow: 0 10px 30px -10px rgba(26, 54, 93, 0.5); } .card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.12); } .card-icon svg { transition: transform 0.3s ease; } .card:hover .card-icon svg { transform: scale(1.1); } /* Infrastructure cards hover */ .infra-card { transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease; } .infra-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px -10px rgba(59, 130, 246, 0.15); } /* Process step hover */ .process-step { transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* Review card hover */ .review-card { transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease; } /* ======================================== FAQ Accordion ======================================== */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .faq-item.open .faq-answer { max-height: 500px; } .faq-question svg { transition: transform 0.3s ease; } .faq-item.open .faq-question svg { transform: rotate(180deg); } /* ======================================== Link & Image Effects ======================================== */ .card-link svg { transition: transform 0.3s ease; } .card-link:hover svg { transform: translateX(5px); } .image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.5s ease; } .image-zoom:hover img { transform: scale(1.05); } /* ======================================== Keyframe Animations ======================================== */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } } .hero-badge-dot { animation: pulse 2s ease-in-out infinite; } /* ======================================== Floating Gradient Orbs ======================================== */ @keyframes floatOrb1 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -40px) scale(1.05); } 50% { transform: translate(-20px, -60px) scale(0.95); } 75% { transform: translate(-40px, -20px) scale(1.02); } } @keyframes floatOrb2 { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(-30px, 30px) scale(0.95); } 50% { transform: translate(40px, 50px) scale(1.05); } 75% { transform: translate(20px, 20px) scale(0.98); } } .hero::before { animation: floatOrb1 20s ease-in-out infinite; } .hero::after { animation: floatOrb2 25s ease-in-out infinite; } /* ======================================== Background Gradient Shift ======================================== */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .hero { background-size: 200% 200%; animation: gradientShift 15s ease infinite; } .scanner-cta { background-size: 200% 200%; animation: gradientShift 15s ease infinite; } .cta-banner { background-size: 200% 200%; animation: gradientShift 15s ease infinite; } /* Disable floating orbs and gradient shift on mobile for performance */ @media (max-width: 767px) { .hero::before, .hero::after { animation: none; } .hero, .scanner-cta, .cta-banner { animation: none; background-size: 100% 100%; } } /* ======================================== SVG Icon Draw Animation ======================================== */ .svg-draw-ready path, .svg-draw-ready line, .svg-draw-ready polyline, .svg-draw-ready circle, .svg-draw-ready rect { transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* ======================================== Text Split/Reveal Animation ======================================== */ @keyframes splitRevealWord { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } [data-split-reveal] .split-word { display: inline-block; overflow: hidden; } [data-split-reveal] .split-word-inner { display: inline-block; opacity: 0; transform: translateY(100%); transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } [data-split-reveal].is-revealed .split-word-inner { opacity: 1; transform: translateY(0); } /* Preserve gradient text on split words */ [data-split-reveal] .split-word-inner { background: inherit; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Section header split words — black text */ .section-header [data-split-reveal] .split-word-inner { background: none; -webkit-background-clip: unset; -webkit-text-fill-color: var(--color-gray-900); background-clip: unset; } /* CTA banner gradient headings keep gradient */ .cta-banner [data-split-reveal] .split-word-inner { background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #ffffff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ======================================== Animated Gradient Border ======================================== */ @keyframes borderRotate { from { --border-angle: 0deg; } to { --border-angle: 360deg; } } @property --border-angle { syntax: ""; initial-value: 0deg; inherits: false; } .gradient-border-wrap { position: relative; border-radius: var(--radius-xl); padding: 2px; background: conic-gradient( from var(--border-angle), #3b82f6, #1a365d, #06b6d4, #3b82f6 ); animation: borderRotate 4s linear infinite; } .gradient-border-wrap > * { border-radius: calc(var(--radius-xl) - 2px); } /* Scanner CTA button gradient border */ .btn-scanner.gradient-border-btn { position: relative; border: none; background-clip: padding-box; } .btn-scanner.gradient-border-btn::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient( from var(--border-angle), #10b981, #3b82f6, #1a365d, #10b981 ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: borderRotate 3s linear infinite; pointer-events: none; } /* ======================================== Reduced Motion Support ======================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero-content .animate-fade-in-up { opacity: 1; animation: none; } /* Scanner — kill animations */ .scanner-pulse-ring { animation: none !important; } .js-ready .animate-on-scroll, .js-ready .animate-on-scroll-left, .js-ready .animate-on-scroll-right, .js-ready .animate-on-scroll-scale, .js-ready .process-step, .js-ready .stagger-children > * { opacity: 1; transform: none; transition: none; } /* Disable floating orbs and gradient shift */ .hero::before, .hero::after { animation: none !important; } .hero, .scanner-cta, .cta-banner { animation: none !important; background-size: 100% 100% !important; } /* Disable scroll progress */ .scroll-progress { display: none !important; } /* Text split reveal - show immediately */ [data-split-reveal] .split-word-inner { opacity: 1 !important; transform: none !important; transition: none !important; } /* Gradient border - stop rotation */ .gradient-border-wrap, .btn-scanner.gradient-border-btn::before { animation: none !important; } /* SVG draw - show immediately */ .svg-draw-ready path, .svg-draw-ready line, .svg-draw-ready polyline, .svg-draw-ready circle, .svg-draw-ready rect { stroke-dashoffset: 0 !important; transition: none !important; } /* Disable Lenis smooth scrolling */ html.lenis, html.lenis body { scroll-behavior: auto !important; } }