.cta{background:linear-gradient(115deg,#ffe0e9 0%,#ffc3d5 56%,#f6b5ce 100%)}
.cta:hover{background:linear-gradient(115deg,#ffeaf0 0%,#ffd1e0 56%,#fac4d9 100%)}
.secondary{background:linear-gradient(135deg,#ffffff09,#ffffff02)}
/* Gentle color drift; no moving text, scale changes or flashes. */
.cta,.chat-invite-link{background:linear-gradient(110deg,#fff0f5 0%,#ffd2e2 18%,#ed9fc7 38%,#ffc5db 56%,#fff0f5 75%,#efafd0 100%);background-size:320% 220%;animation:button-gradient-drift 4.8s ease-in-out infinite}
.cta:hover,.chat-invite-link:hover{background:linear-gradient(110deg,#fff7fa 0%,#ffd8e7 18%,#f2add0 38%,#ffd2e4 56%,#fff7fa 75%,#f4bad8 100%);background-size:320% 220%;animation-duration:3.8s;animation-play-state:running}
.reel-toggle,.secondary,.filters button{background:linear-gradient(120deg,#ffffff04,#ffffff12,#ffffff04);background-size:220% 180%;animation:button-gradient-drift 16s ease-in-out infinite}
@keyframes button-gradient-drift{0%,100%{background-position:0% 30%}50%{background-position:100% 70%}}
@media(prefers-reduced-motion:reduce){html:not([data-motion-opt-in="true"]) :is(.cta,.chat-invite-link,.reel-toggle,.secondary,.filters button){animation:none!important}}
html[data-effects="off"] :is(.cta,.chat-invite-link,.reel-toggle,.secondary,.filters button){animation:none!important}

html[data-effects='on'] .hero .cta,html[data-effects='on'] .invitation .cta{animation:button-gradient-drift 4.8s ease-in-out infinite}
html[data-effects='on'] .hero .cta:hover,html[data-effects='on'] .invitation .cta:hover{animation-duration:3.8s}