/* Reused from the owner's archived join.fun assets/styles-Bq9yyeEF.css.
   The original keyframes are retained; only the application selectors change. */
@keyframes coin-float{0%,to{transform:translateY(0)rotate(-4deg)}50%{transform:translateY(-10px)rotate(5deg)}}
@keyframes logo-float{0%,to{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-8px)rotate(2deg)}}
@keyframes phone-swap{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes story-card-in{0%{opacity:0;transform:translateY(18px)scale(.96)}to{opacity:1;transform:none}}
@keyframes fade-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes chrome-sweep{0%,30%{background-position:120% 0,0 0}70%,to{background-position:-20% 0,0 0}}
.hero-copy{animation:fade-up .8s var(--ease) both}.preview-stage{animation:story-card-in 1s .12s var(--ease) both}.floating-icon{animation:coin-float 6s ease-in-out infinite}.float-instagram{animation-delay:-2s;animation-duration:7s}.float-youtube{animation-delay:-4s;animation-duration:8s}.card-body.is-changing,.card-identity.is-changing{animation:phone-swap .35s var(--ease)}dialog[open]{animation:story-card-in .3s var(--ease)}details[open]>p{animation:fade-up .25s var(--ease)}
@keyframes ribbon-drift{0%,to{transform:translate3d(-16px,8px,0)}50%{transform:translate3d(16px,-8px,0)}}
.ribbon-back{animation:ribbon-drift 13s ease-in-out infinite}.ribbon-front{animation:ribbon-drift 17s -6s ease-in-out infinite}
/* Original reveal distance and timing. Readable by default without JavaScript. */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}.reveal-ready [data-reveal=shown]{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal-ready [data-reveal]{opacity:1;transform:none}}