/* Motion layer — energetic but restrained. JS adds html.motion-ready only when the visitor has NOT asked for reduced motion (never hard-code it on , §9.85). Without it, every .reveal element is simply visible. */ html.motion-ready .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); } html.motion-ready .reveal.from-left { transform: translateX(-30px); } html.motion-ready .reveal.from-right { transform: translateX(30px); } html.motion-ready .reveal.zoom { transform: scale(.94); } html.motion-ready .reveal.in { opacity: 1; transform: none; } /* hero: slow Ken-Burns drift */ html.motion-ready .fp-hero__bg img { animation: kenburns 22s ease-in-out infinite alternate; } @keyframes kenburns { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } } /* live dot pulse + open-slot shimmer */ html.motion-ready .live-dot { animation: pulse 1.8s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200, 240, 60, .6); } 80%, 100% { box-shadow: 0 0 0 12px rgba(200, 240, 60, 0); } } html.motion-ready .slot:not([disabled]).fresh { animation: fresh 1.2s ease; } @keyframes fresh { 0% { background: var(--fp-volt-soft); } 100% { background: var(--fp-chalk); } } /* rolling ball divider */ .ball-divider { position: relative; height: 34px; margin: 0 auto; max-width: 720px; } .ball-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--fp-line); } .ball-divider svg { position: absolute; top: 3px; left: 0; width: 28px; height: 28px; } html.motion-ready .ball-divider.in svg { animation: roll 3.2s cubic-bezier(.35,.05,.25,1) forwards; } @keyframes roll { from { left: 0; transform: rotate(0); } to { left: calc(100% - 28px); transform: rotate(720deg); } } /* stamp pop */ html.motion-ready .stamp.on { animation: stampIn .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: var(--d, 0s); } @keyframes stampIn { from { transform: scale(.4) rotate(-40deg); opacity: 0; } to { transform: scale(1) rotate(-8deg); opacity: 1; } } /* scoreboard counter flicker on finish */ html.motion-ready .count.done { animation: flick .45s ease; } @keyframes flick { 0%, 100% { opacity: 1; } 40% { opacity: .55; } } /* button nudge */ html.motion-ready .btn-volt:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } }