/* Why FacePe Wins — choreographed scroll story (cards + checklist reveal) */ #why-facepe-wins-section [data-why-wins-card] { opacity: 0; will-change: opacity, transform; transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } #why-facepe-wins-section [data-why-wins-card="0"] { transform: translate3d(-40px, 28px, 0) rotate(-1.5deg); } #why-facepe-wins-section [data-why-wins-card="1"] { transform: translate3d(0, 36px, 0) scale(0.94); } #why-facepe-wins-section [data-why-wins-card="2"] { transform: translate3d(40px, 28px, 0) rotate(1.5deg); } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card] { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="0"] { transition-delay: 0ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="1"] { transition-delay: 140ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="2"] { transition-delay: 280ms; } /* Inner content — reads top to bottom after card lands */ #why-facepe-wins-section .why-wins-card__icon, #why-facepe-wins-section .why-wins-card__copy, #why-facepe-wins-section .why-wins-card__rule, #why-facepe-wins-section .why-wins-card__benefits, #why-facepe-wins-section .why-wins-card__benefits li { opacity: 0; transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } #why-facepe-wins-section .why-wins-card__icon { transform: scale(0.75); } #why-facepe-wins-section .why-wins-card__copy, #why-facepe-wins-section .why-wins-card__benefits li { transform: translate3d(0, 14px, 0); } #why-facepe-wins-section .why-wins-card__rule { transform: scaleX(0); transform-origin: left center; } #why-facepe-wins-section .why-wins-card__benefits { transform: translate3d(0, 18px, 0); } #why-facepe-wins-section.is-why-wins-active .why-wins-card__icon, #why-facepe-wins-section.is-why-wins-active .why-wins-card__copy, #why-facepe-wins-section.is-why-wins-active .why-wins-card__rule, #why-facepe-wins-section.is-why-wins-active .why-wins-card__benefits, #why-facepe-wins-section.is-why-wins-active .why-wins-card__benefits li { opacity: 1; transform: none; } /* Per-card content timing (after shell) */ #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="0"] .why-wins-card__icon { transition-delay: 320ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="0"] .why-wins-card__copy { transition-delay: 420ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="0"] .why-wins-card__rule { transition-delay: 520ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="0"] .why-wins-card__benefits { transition-delay: 600ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="0"] .why-wins-card__benefits li:nth-child(1) { transition-delay: 680ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="0"] .why-wins-card__benefits li:nth-child(2) { transition-delay: 760ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="1"] .why-wins-card__icon { transition-delay: 460ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="1"] .why-wins-card__copy { transition-delay: 560ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="1"] .why-wins-card__rule { transition-delay: 660ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="1"] .why-wins-card__benefits { transition-delay: 740ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="1"] .why-wins-card__benefits li:nth-child(1) { transition-delay: 820ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="1"] .why-wins-card__benefits li:nth-child(2) { transition-delay: 900ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="2"] .why-wins-card__icon { transition-delay: 600ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="2"] .why-wins-card__copy { transition-delay: 700ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="2"] .why-wins-card__rule { transition-delay: 800ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="2"] .why-wins-card__benefits { transition-delay: 880ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="2"] .why-wins-card__benefits li:nth-child(1) { transition-delay: 960ms; } #why-facepe-wins-section.is-why-wins-active [data-why-wins-card="2"] .why-wins-card__benefits li:nth-child(2) { transition-delay: 1040ms; } /* Featured center card — subtle lift (no heavy bottom glow) */ #why-facepe-wins-section.is-why-wins-active .why-wins-card--featured { box-shadow: 0 4px 12px rgba(95, 21, 238, 0.1), 0 1px 3px rgba(15, 17, 23, 0.06); } @keyframes why-wins-featured-pulse { 0%, 100% { box-shadow: 0 4px 12px rgba(95, 21, 238, 0.1), 0 1px 3px rgba(15, 17, 23, 0.06); } 50% { box-shadow: 0 6px 16px rgba(95, 21, 238, 0.14), 0 2px 4px rgba(15, 17, 23, 0.06); } } #why-facepe-wins-section.is-why-wins-active .why-wins-card--featured.is-why-wins-glow { animation: why-wins-featured-pulse 3.5s ease-in-out infinite; } @media (hover: hover) and (pointer: fine) { #why-facepe-wins-section.is-why-wins-active [data-why-wins-card]:hover { transform: translate3d(0, -3px, 0); } #why-facepe-wins-section.is-why-wins-active .why-wins-card--featured:hover { box-shadow: 0 8px 20px rgba(95, 21, 238, 0.12), 0 2px 6px rgba(15, 17, 23, 0.06); } } @media (prefers-reduced-motion: reduce) { #why-facepe-wins-section [data-why-wins-card], #why-facepe-wins-section .why-wins-card__icon, #why-facepe-wins-section .why-wins-card__copy, #why-facepe-wins-section .why-wins-card__rule, #why-facepe-wins-section .why-wins-card__benefits, #why-facepe-wins-section .why-wins-card__benefits li { opacity: 1; transform: none; transition: none; will-change: auto; } #why-facepe-wins-section.is-why-wins-active .why-wins-card--featured.is-why-wins-glow { animation: none; } }