/* Shared quiz transition styles (ripple, checkmark swap, cascade dismiss, zoom/blur page exit). Paired with brand/quiz-fx.js. Used by quiz.html, step2.html and step3.html so every step of the funnel feels the same. */ .si-quiz-option { position: relative; overflow: hidden; } .si-quiz-option.si-selected { background: rgba(163, 255, 102, 0.16); border-color: var(--color-lime); box-shadow: 0 0 0 1px rgba(163, 255, 102, 0.25), 0 0 24px rgba(163, 255, 102, 0.35); transform: scale(1.015); transition: background 0.2s, border-color 0.2s, box-shadow 0.3s, transform 0.25s cubic-bezier(.34, 1.56, .64, 1); } .si-quiz-option.si-selected span { color: var(--color-lime); } .si-quiz-option.si-selected svg { color: var(--color-lime); } .si-check-swap { animation: si-check-pop 0.45s cubic-bezier(.34, 1.56, .64, 1); } @keyframes si-check-pop { 0% { transform: scale(0.3) rotate(-45deg); opacity: 0; } 55% { transform: scale(1.35) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } .si-ripple { position: absolute; border-radius: 999px; background: radial-gradient(circle, rgba(163, 255, 102, 0.55) 0%, rgba(163, 255, 102, 0) 70%); transform: scale(0); pointer-events: none; animation: si-ripple-out 0.6s ease-out forwards; } @keyframes si-ripple-out { 0% { transform: scale(0); opacity: 0.9; } 100% { transform: scale(1); opacity: 0; } } .si-quiz-option.si-dismiss { opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 0.3s ease, transform 0.3s ease; transition-delay: var(--si-dismiss-delay, 0s); } .si-quiz-pill.si-dismiss { opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; } .si-progress-fill { transition: width 0.5s cubic-bezier(.4, 0, .2, 1); } .si-wrap { transition: opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease; transform-origin: 50% 40%; } .si-wrap.si-leaving { opacity: 0; transform: scale(1.06); filter: blur(10px); } .si-continue-btn, .si-done-cta { position: relative; overflow: hidden; } /* Applied to while the zoom-out exit plays, so the scaled-up page never triggers scrollbars regardless of how tall a given step's content is. */ .si-scroll-lock, .si-scroll-lock body { overflow: hidden !important; }