/* ============================================================ ZION CARE — Shared Motion Layer Animation states are gated by .js-enabled on . Without JS the class is never added, so all content is fully visible at all times. prefers-reduced-motion disables every transform/transition. Only opacity and transform are animated — no layout shifts. ============================================================ */ /* ── 1. Scroll-reveal base states ──────────────────────────── Applied only when JS has confirmed the environment. */ .js-enabled [data-rv] { opacity: 0; transform: translateY(22px); transition: opacity 660ms ease-out, transform 660ms ease-out; will-change: opacity, transform; } .js-enabled [data-rv].rv-done { opacity: 1; transform: none; will-change: auto; } /* Step-number circles: scale from 0.55 instead of translate */ .js-enabled .step-number[data-rv] { transform: scale(0.55) !important; } .js-enabled .step-number[data-rv].rv-done { transform: scale(1) !important; transition: opacity 420ms ease-out, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1) !important; } /* ── 2. Hero entrance ─────────────────────────────────────── */ .js-enabled .hero-content > *, .js-enabled .page-hero-inner > *, .js-enabled .recovery-hero-inner > * { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease-out, transform 600ms ease-out; } .js-enabled .hero-content.hz-run > *, .js-enabled .page-hero-inner.hz-run > *, .js-enabled .recovery-hero-inner.hz-run > * { opacity: 1; transform: none; } /* Stagger each child */ .js-enabled .hz-run > *:nth-child(1) { transition-delay: 0ms; } .js-enabled .hz-run > *:nth-child(2) { transition-delay: 120ms; } .js-enabled .hz-run > *:nth-child(3) { transition-delay: 240ms; } .js-enabled .hz-run > *:nth-child(4) { transition-delay: 360ms; } .js-enabled .hz-run > *:nth-child(5) { transition-delay: 480ms; } /* Hero image: fade + very slight scale */ .js-enabled .hero-image img { opacity: 0; transform: scale(1.03); transition: opacity 700ms ease-out, transform 700ms ease-out; transition-delay: 200ms; } .js-enabled .hero-loaded .hero-image img { opacity: 1; transform: scale(1); } /* ── 3. Sticky header ─────────────────────────────────────── */ .site-header { transition: box-shadow 280ms ease; } .hdr-scrolled { box-shadow: 0 2px 20px rgba(42, 56, 84, 0.13) !important; } /* ── 4. Card hover — 200ms, lift 4px ─────────────────────── */ .program-card, .testimonial-card, .step-card, .why-card, .benefit-card, .spec-card, .partner-col, .card { transition: box-shadow 200ms ease, transform 200ms ease !important; } .program-card:hover, .testimonial-card:hover, .step-card:hover, .why-card:hover, .benefit-card:hover, .spec-card:hover, .partner-col:hover, .card:hover { transform: translateY(-4px) !important; box-shadow: 0 10px 32px rgba(42, 56, 84, 0.14) !important; } /* ── 5. CTA button hover — darken + lift 2px ─────────────── */ .btn-primary { transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease !important; } .btn-primary:hover { background-color: #d35b26 !important; transform: translateY(-2px) !important; box-shadow: 0 4px 18px rgba(238, 112, 70, 0.40) !important; } .btn-primary:active { transform: translateY(0) !important; box-shadow: none !important; } /* ── 6. Hero background — slow breathing gradient ────────── */ @keyframes heroBreathe { 0% { opacity: 0.45; } 50% { opacity: 0.75; } 100% { opacity: 0.45; } } .hero::before { animation: heroBreathe 9s ease-in-out infinite; } /* ── 7. Promise-band icon gentle pulse on load ───────────── */ @keyframes iconPop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .promise-icon { animation: iconPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .promise-item:nth-child(2) .promise-icon { animation-delay: 0.65s; } .promise-item:nth-child(3) .promise-icon { animation-delay: 1.30s; } /* ── 8. Section label bar — colour pulse on first reveal ─── */ @keyframes labelBarIn { 0% { transform: translateY(-50%) scaleY(0); } 60% { transform: translateY(-50%) scaleY(1.15); } 100% { transform: translateY(-50%) scaleY(1); } } .rv-done .section-label::before, .hz-run > * .section-label::before, .page-hero-inner .section-label::before { animation: labelBarIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } /* ── 9. prefers-reduced-motion — zero transforms everywhere */ @media (prefers-reduced-motion: reduce) { .site-header { transition: none !important; } .js-enabled [data-rv], .js-enabled .step-number[data-rv], .js-enabled .hero-content > *, .js-enabled .page-hero-inner > *, .js-enabled .recovery-hero-inner > *, .js-enabled .hero-image img { opacity: 1 !important; transform: none !important; transition: none !important; } .program-card, .testimonial-card, .step-card, .why-card, .benefit-card, .spec-card, .partner-col, .card, .btn-primary { transition: none !important; } .program-card:hover, .testimonial-card:hover, .step-card:hover, .why-card:hover, .benefit-card:hover, .spec-card:hover, .partner-col:hover, .card:hover, .btn-primary:hover { transform: none !important; box-shadow: inherit !important; } }