/* ============================================================================= Ratiom CRO — Premium Animations Loaded only when the WordPress admin setting "Enable Premium Animations" is on. All styles are scoped to .premium-animations-enabled on . Motion respects prefers-reduced-motion throughout. Performant properties only: opacity, transform. Easing guide: --expo-out cubic-bezier(0.16, 1, 0.3, 1) hero load-in, cinematic reveals --soft-out cubic-bezier(0.22, 1, 0.36, 1) scroll reveals, nav underline --spring cubic-bezier(0.34, 1.56, 0.64, 1) primary button hover settle ============================================================================= */ /* ── Keyframes ─────────────────────────────────────────────────────────────── */ @keyframes ratiom-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes ratiom-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Used on founder/hero images — confident, established presence */ @keyframes ratiom-scale-fade-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ============================================================================= HERO SEQUENCES Desktop only. Fires once on page load. Staggered cascade. All use cubic-bezier(0.16, 1, 0.3, 1) — expo-out — for that confident feel. ============================================================================= */ /* ── Homepage hero ─────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) and (min-width: 768px) { .premium-animations-enabled .ratiom-hero-rebuild .ratiom-label { animation: ratiom-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.05s; } .premium-animations-enabled .ratiom-hero-rebuild-headline { animation: ratiom-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.15s; } .premium-animations-enabled .ratiom-hero-rebuild-subheadline { animation: ratiom-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.30s; } .premium-animations-enabled .ratiom-hero-bullets { animation: ratiom-fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.42s; } .premium-animations-enabled .ratiom-hero-rebuild-actions { animation: ratiom-fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.54s; } .premium-animations-enabled .ratiom-hero-trust-bar { animation: ratiom-fade-in 0.4s ease both; animation-delay: 0.66s; } /* Founder image: scale-in creates confident, present feeling */ .premium-animations-enabled .ratiom-hero-founder-image { animation: ratiom-scale-fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.08s; } } /* ── About page hero ───────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) and (min-width: 768px) { .premium-animations-enabled .ab-hero .ab-pill { animation: ratiom-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.05s; } .premium-animations-enabled .ab-hero .ab-hero-left-top { animation: ratiom-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.16s; } .premium-animations-enabled .ab-hero .ab-hero-left-bottom { animation: ratiom-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.30s; } /* Founder image: scale-in */ .premium-animations-enabled .ab-hero .ab-hero-right { animation: ratiom-scale-fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.08s; } } /* ── Services page hero ────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) and (min-width: 768px) { .premium-animations-enabled .sv-hero .sv-pill { animation: ratiom-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.05s; } .premium-animations-enabled .sv-hero .sv-h1 { animation: ratiom-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.16s; } .premium-animations-enabled .sv-hero .sv-hero-sub { animation: ratiom-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.30s; } .premium-animations-enabled .sv-hero .sv-hero-btns { animation: ratiom-fade-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.44s; } /* Right column: scale-in */ .premium-animations-enabled .sv-hero .sv-hero-right { animation: ratiom-scale-fade-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 0.08s; } } /* ============================================================================= SCROLL REVEAL SYSTEM JS adds .anim-reveal (and optional modifier classes) to target elements. IntersectionObserver adds .is-visible once on viewport entry. Desktop only — JS skips adding the class on mobile. ============================================================================= */ .premium-animations-enabled .anim-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .premium-animations-enabled .anim-reveal.is-visible { opacity: 1; transform: translateY(0); } /* ── Directional variants ───────────────────────────────────────────────────── */ /* Two-column sections: left column slides from left */ .premium-animations-enabled .anim-reveal.anim-reveal--from-left { transform: translateX(-24px); } .premium-animations-enabled .anim-reveal.anim-reveal--from-left.is-visible { transform: translateX(0); } /* Two-column sections: right column slides from right */ .premium-animations-enabled .anim-reveal.anim-reveal--from-right { transform: translateX(24px); } .premium-animations-enabled .anim-reveal.anim-reveal--from-right.is-visible { transform: translateX(0); } /* Portfolio and example work cards: scale-in on entry */ .premium-animations-enabled .anim-reveal.anim-reveal--scale { transform: translateY(14px) scale(0.97); } .premium-animations-enabled .anim-reveal.anim-reveal--scale.is-visible { transform: translateY(0) scale(1); } /* ── Card stagger delays ────────────────────────────────────────────────────── */ .premium-animations-enabled .anim-stagger-1 { transition-delay: 0.07s; } .premium-animations-enabled .anim-stagger-2 { transition-delay: 0.14s; } .premium-animations-enabled .anim-stagger-3 { transition-delay: 0.21s; } .premium-animations-enabled .anim-stagger-4 { transition-delay: 0.28s; } /* ── Section header cascade delays ─────────────────────────────────────────── */ /* JS assigns these to: eyebrow → heading → supporting text */ .premium-animations-enabled .anim-hdr-1 { transition-delay: 0s; } /* eyebrow label */ .premium-animations-enabled .anim-hdr-2 { transition-delay: 0.10s; } /* h2 heading */ .premium-animations-enabled .anim-hdr-3 { transition-delay: 0.20s; } /* sub copy */ .premium-animations-enabled .anim-cta-btn { transition-delay: 0.30s; } /* CTA button */ /* ============================================================================= BUTTONS Primary CTA uses spring easing (cubic-bezier(0.34, 1.56, 0.64, 1)) — creates a subtle settle on hover. Fires once per hover interaction. ============================================================================= */ .premium-animations-enabled .ratiom-btn-primary { transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .premium-animations-enabled .ratiom-btn-primary:hover { transform: translateY(-2px); } .premium-animations-enabled .ratiom-btn-primary:active { transform: translateY(0); transition-duration: 0.08s; } .premium-animations-enabled .ratiom-btn-secondary { transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .premium-animations-enabled .ratiom-btn-secondary:hover { transform: translateY(-1px); } /* Services page primary buttons */ .premium-animations-enabled .sv-btn { transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .premium-animations-enabled .sv-btn:hover { transform: translateY(-2px); } /* ============================================================================= NAVIGATION Underline grows left-to-right using soft-out easing. ============================================================================= */ @media (min-width: 768px) { .premium-animations-enabled .ratiom-nav-link { position: relative; } .premium-animations-enabled .ratiom-nav-link::after { content: ''; position: absolute; bottom: 5px; left: 12px; right: 12px; height: 1px; background: var(--ratiom-primary); transform: scaleX(0); transform-origin: left center; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .premium-animations-enabled .ratiom-nav-link:hover::after { transform: scaleX(1); } .premium-animations-enabled .ratiom-nav-link.is-current::after, .premium-animations-enabled .ratiom-nav-link[aria-current='page']::after { transform: scaleX(1); } /* Nav CTA lift */ .premium-animations-enabled .ratiom-nav-cta { transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .premium-animations-enabled .ratiom-nav-cta:hover { transform: translateY(-1px); } } /* ============================================================================= SERVICE / FEATURE CARDS ============================================================================= */ .premium-animations-enabled .ratiom-included-card { transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, transform 0.22s ease; } .premium-animations-enabled .ratiom-included-card:hover { transform: translateY(-4px); } .premium-animations-enabled .ratiom-card { transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } .premium-animations-enabled .ratiom-card:hover { transform: translateY(-4px); } /* Trustworthy / problem-framing cards */ .premium-animations-enabled .ratiom-trustworthy-card { transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, transform 0.22s ease; } .premium-animations-enabled .ratiom-trustworthy-card:hover { transform: translateY(-4px); } /* Services page service list items */ .premium-animations-enabled .sv-service-item { transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease; } .premium-animations-enabled .sv-service-item:hover { transform: translateY(-3px); } /* About page bullet cards */ .premium-animations-enabled .ab-bullet-card { transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease; } .premium-animations-enabled .ab-bullet-card:hover { transform: translateY(-3px); } /* ============================================================================= PRICING ============================================================================= */ .premium-animations-enabled .ratiom-pricing-main-card { transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } .premium-animations-enabled .ratiom-pricing-main-card:hover { transform: translateY(-4px); } .premium-animations-enabled .ratiom-addon-card { transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease; } .premium-animations-enabled .ratiom-addon-card:hover { transform: translateY(-3px); } /* ============================================================================= PORTFOLIO / EXAMPLE WORK CARDS Soft-out easing matches the scale-in entry reveal. ============================================================================= */ .premium-animations-enabled .port-card { transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } .premium-animations-enabled .port-card:hover { transform: translateY(-5px); } /* ============================================================================= BLOG POST CARDS ============================================================================= */ .premium-animations-enabled .ratiom-post-card { transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; } .premium-animations-enabled .ratiom-post-card:hover { transform: translateY(-4px); } /* Mobile nav links: no opacity animation — the overlay's own transition handles the entire menu show/hide. Nav links stay at full opacity. */ /* ============================================================================= FAQ JS takes over the open/close to animate height smoothly. The overflow:hidden here is the anchor for the Web Animations API. ============================================================================= */ .premium-animations-enabled .ratiom-faq-answer { overflow: hidden; } /* ============================================================================= REDUCED MOTION OVERRIDE Immediately reveal everything the reveal system would have hidden. Strip all delays. Hero animations are inside their own no-preference block so they never fire when reduced motion is preferred. ============================================================================= */ @media (prefers-reduced-motion: reduce) { .premium-animations-enabled .anim-reveal, .premium-animations-enabled .anim-reveal.anim-reveal--from-left, .premium-animations-enabled .anim-reveal.anim-reveal--from-right, .premium-animations-enabled .anim-reveal.anim-reveal--scale { opacity: 1; transform: none; transition: none; } .premium-animations-enabled .anim-stagger-1, .premium-animations-enabled .anim-stagger-2, .premium-animations-enabled .anim-stagger-3, .premium-animations-enabled .anim-stagger-4, .premium-animations-enabled .anim-hdr-1, .premium-animations-enabled .anim-hdr-2, .premium-animations-enabled .anim-hdr-3, .premium-animations-enabled .anim-cta-btn { transition-delay: 0s; } }