/* KALIFORNIA UX ENHANCEMENTS v1.0 — Adapted from Veltena */
/* Colors: Kalifornia pink (#e43b9b / #c62f85) instead of Veltena gold (#CEAE62) */

/* ── SCROLL REVEAL ───────────────────────────────────── */
.ux-reveal{opacity:0;transform:translateY(20px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
.ux-reveal.ux-visible{opacity:1;transform:translateY(0)}
.ux-reveal[data-ux-delay="1"]{transition-delay:.05s}
.ux-reveal[data-ux-delay="2"]{transition-delay:.1s}
.ux-reveal[data-ux-delay="3"]{transition-delay:.15s}
.ux-reveal[data-ux-delay="4"]{transition-delay:.2s}
.ux-reveal[data-ux-delay="5"]{transition-delay:.25s}
.ux-reveal[data-ux-delay="6"]{transition-delay:.3s}
.ux-reveal[data-ux-delay="7"]{transition-delay:.35s}

@media(prefers-reduced-motion:reduce){
    .ux-reveal{opacity:1;transform:none;transition:none}
}

/* ── VOTE PARTICLES ──────────────────────────────────── */
.ux-particle{
    position:fixed;
    border-radius:50%;
    pointer-events:none;
    z-index:9999;
    animation:uxPF .6s cubic-bezier(.22,1,.36,1) forwards
}
@keyframes uxPF{
    0%{transform:translate(0,0) scale(1);opacity:1}
    100%{transform:translate(var(--ux-px),var(--ux-py)) scale(0);opacity:0}
}

/* ── VOTE BUTTON POP ─────────────────────────────────── */
.vote-btn{transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .2s,box-shadow .2s!important}
.vote-btn.ux-pop{transform:scale(1.2)!important}
.vote-btn.ux-voted{
    background:linear-gradient(135deg,#4a9d5b,#3a8a4a)!important;
    color:#fff!important;
    pointer-events:none;
}

/* ── SONG ITEM HOVER ─────────────────────────────────── */
.song-item{
    transition:transform .2s,box-shadow .2s,background .2s!important
}
.song-item:hover{
    transform:translateX(4px);
    background:rgba(228,59,155,0.03);
}
.song-item:active{
    transform:scale(0.98);
}

/* ── SECTION HEADER LINE ─────────────────────────────── */
.section-header{position:relative}
.section-header::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:0;height:2px;
    background:linear-gradient(90deg,rgba(228,59,155,0.5),transparent);
    transition:width .8s cubic-bezier(.22,1,.36,1)
}
.section-header.ux-visible::after{width:100%}

/* ── TOP3 BAR GLOW ───────────────────────────────────── */
.top3-bar{
    transition:box-shadow .3s!important;
    animation:uxTop3Entrance .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes uxTop3Entrance{
    0%{opacity:0;transform:translateY(-10px)}
    100%{opacity:1;transform:translateY(0)}
}
.top3-item{
    transition:background .2s,transform .2s!important;
}
.top3-item:hover{
    background:rgba(228,59,155,0.05);
    transform:translateX(2px);
}

/* ── STAT COUNTER ANIMATION ──────────────────────────── */
.stat-value.ux-counted{
    animation:uxStatPop .6s ease;
}
@keyframes uxStatPop{
    0%{color:var(--text-primary);transform:scale(.9)}
    40%{color:#e43b9b;transform:scale(1.08)}
    100%{color:var(--text-primary);transform:scale(1)}
}

/* ── EVENT CARD ENTRANCE ─────────────────────────────── */
.event-card{
    transition:transform .2s,box-shadow .2s!important;
}
.event-card:hover{
    transform:translateY(-2px);
    box-shadow:0 4px 16px rgba(228,59,155,0.08);
}
.event-card.current{
    animation:uxLivePulse 3s ease-in-out infinite;
}
@keyframes uxLivePulse{
    0%,100%{box-shadow:0 0 0 0 rgba(228,59,155,0.15)}
    50%{box-shadow:0 0 0 4px rgba(228,59,155,0.05)}
}

/* ── PRODUCT CARD HOVER ──────────────────────────────── */
.product-card{
    transition:transform .25s,box-shadow .25s!important;
}
.product-card:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 24px rgba(0,0,0,0.08),0 0 0 1px rgba(228,59,155,0.1);
}
.product-add-btn{
    transition:transform .15s,background .2s,box-shadow .2s!important;
}
.product-add-btn:active{
    transform:scale(0.95);
}

/* ── TOAST NOTIFICATIONS ─────────────────────────────── */
#ux-toasts{
    position:fixed;
    bottom:calc(80px + env(safe-area-inset-bottom,0px));
    left:50%;
    transform:translateX(-50%);
    z-index:9998;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:center;
    pointer-events:none;
    width:90%;
    max-width:360px;
}
.ux-toast{
    pointer-events:auto;
    padding:12px 20px;
    border-radius:12px;
    font-size:.85rem;
    font-weight:600;
    font-family:'Inter',-apple-system,sans-serif;
    white-space:nowrap;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .3s,transform .3s;
    text-align:center;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:0 8px 32px rgba(0,0,0,0.12);
}
.ux-toast.show{
    opacity:1;
    transform:translateY(0);
}
.ux-toast.hide{
    opacity:0;
    transform:translateY(-10px);
}
.ux-toast--success{
    background:rgba(74,157,91,0.95);
    color:#fff;
}
.ux-toast--error{
    background:rgba(212,85,85,0.95);
    color:#fff;
}
.ux-toast--info{
    background:rgba(228,59,155,0.95);
    color:#fff;
}

/* ── PAGE TRANSITIONS ────────────────────────────────── */
.page{
    transition:opacity .25s ease,transform .25s ease;
}
.page:not(.active){
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
}
.page.active{
    opacity:1;
    transform:translateY(0);
}

/* ── NAV ITEM ACTIVE DOT ─────────────────────────────── */
.nav-item{position:relative}
.nav-item.active::after{
    content:'';
    position:absolute;
    top:-4px;
    left:50%;
    transform:translateX(-50%);
    width:16px;
    height:2px;
    background:var(--accent,#e43b9b);
    border-radius:1px;
    animation:uxNavDot .3s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes uxNavDot{
    0%{transform:translateX(-50%) scaleX(0)}
    100%{transform:translateX(-50%) scaleX(1)}
}

/* ── SKELETON LOADING ────────────────────────────────── */
.ux-skeleton{
    background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
    background-size:600px 100%;
    animation:uxShimmer 1.8s ease-in-out infinite;
    border-radius:8px;
}
@keyframes uxShimmer{
    0%{background-position:-300px 0}
    100%{background-position:300px 0}
}
.ux-skeleton-song{
    height:64px;
    margin-bottom:8px;
    border-radius:12px;
}
.ux-skeleton-top3{
    height:32px;
    margin-bottom:6px;
}

/* ── BRAND HERO ANIMATION ────────────────────────────── */
.brand-hero{
    animation:uxBrandEntrance .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes uxBrandEntrance{
    0%{opacity:0;transform:translateY(15px) scale(0.97)}
    100%{opacity:1;transform:translateY(0) scale(1)}
}
.brand-hero-logo{
    animation:uxLogoFloat 3s ease-in-out infinite alternate;
}
@keyframes uxLogoFloat{
    0%{transform:translateY(0)}
    100%{transform:translateY(-4px)}
}

/* ── PROFILE CARD ENTRANCE ───────────────────────────── */
.profile-card{
    animation:uxProfileEntrance .6s cubic-bezier(.22,1,.36,1) .1s both;
}
@keyframes uxProfileEntrance{
    0%{opacity:0;transform:scale(0.95)}
    100%{opacity:1;transform:scale(1)}
}
.progress-card{
    animation:uxProfileEntrance .6s cubic-bezier(.22,1,.36,1) .2s both;
}

/* ── EVENT STATUS BADGE ──────────────────────────────── */
.event-status:not(.closed){
    animation:uxLiveStatus 2s ease-in-out infinite;
}
@keyframes uxLiveStatus{
    0%,100%{box-shadow:0 0 0 0 rgba(74,157,91,0.3)}
    50%{box-shadow:0 0 0 6px rgba(74,157,91,0)}
}
.event-status-dot{
    animation:uxDotBlink 1.5s ease-in-out infinite;
}
@keyframes uxDotBlink{
    0%,100%{opacity:1}
    50%{opacity:0.4}
}

/* ── MODAL TRANSITIONS ───────────────────────────────── */
.modal-overlay{
    transition:opacity .25s ease;
}
.modal-overlay.active .modal{
    animation:uxModalEntrance .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes uxModalEntrance{
    0%{opacity:0;transform:translateY(20px) scale(0.97)}
    100%{opacity:1;transform:translateY(0) scale(1)}
}

/* ── ALERT SHAKE ─────────────────────────────────────── */
.alert-error{
    animation:uxShakeError .5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes uxShakeError{
    10%,90%{transform:translateX(-1px)}
    20%,80%{transform:translateX(2px)}
    30%,50%,70%{transform:translateX(-3px)}
    40%,60%{transform:translateX(3px)}
}

/* ── LOGIN PAGE PREMIUM BG ───────────────────────────── */
body.auth-page{
    position:relative;
    overflow:hidden;
}
body.auth-page::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(ellipse 600px 400px at 20% 30%, rgba(228,59,155,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 80% 70%, rgba(198,47,133,0.03) 0%, transparent 70%),
        radial-gradient(ellipse 300px 300px at 50% 50%, rgba(228,59,155,0.02) 0%, transparent 70%);
    animation:uxAmbientDrift 12s ease-in-out infinite alternate;
}
body.auth-page::after{
    content:'';
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:
        radial-gradient(1px 1px at 15% 25%, rgba(228,59,155,0.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 65%, rgba(228,59,155,0.2) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 75% 35%, rgba(198,47,133,0.15) 0%, transparent 100%),
        radial-gradient(1px 1px at 85% 80%, rgba(228,59,155,0.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 85%, rgba(198,47,133,0.15) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(228,59,155,0.2) 0%, transparent 100%);
    animation:uxDustFloat 20s linear infinite;
}
@keyframes uxAmbientDrift{
    0%{transform:translate(0,0) scale(1)}
    50%{transform:translate(-15px,8px) scale(1.04)}
    100%{transform:translate(12px,-12px) scale(1)}
}
@keyframes uxDustFloat{
    0%{transform:translateY(0)}
    100%{transform:translateY(-25px)}
}
body.auth-page .container{
    position:relative;
    z-index:1;
    animation:uxCardEntrance .7s cubic-bezier(.22,1,.36,1) both;
}
@keyframes uxCardEntrance{
    0%{opacity:0;transform:translateY(25px) scale(0.97)}
    100%{opacity:1;transform:translateY(0) scale(1)}
}
body.auth-page .logo-img{
    animation:uxAuthLogo .8s cubic-bezier(.22,1,.36,1) .2s both;
}
@keyframes uxAuthLogo{
    0%{opacity:0;transform:translateY(-8px)}
    100%{opacity:1;transform:translateY(0)}
}
body.auth-page .form-group{
    animation:uxFormStagger .5s cubic-bezier(.22,1,.36,1) both;
}
body.auth-page .form-group:nth-child(1){animation-delay:.3s}
body.auth-page .form-group:nth-child(2){animation-delay:.35s}
body.auth-page .form-group:nth-child(3){animation-delay:.4s}
body.auth-page .form-group:nth-child(4){animation-delay:.45s}
@keyframes uxFormStagger{
    0%{opacity:0;transform:translateY(8px)}
    100%{opacity:1;transform:translateY(0)}
}
body.auth-page .btn{
    background-size:250% 100%!important;
    animation:uxPinkShimmer 4s linear infinite;
}
@keyframes uxPinkShimmer{
    0%{background-position:150% center}
    100%{background-position:-150% center}
}
body.auth-page .form-input{
    transition:border-color .3s ease,box-shadow .3s ease!important;
}
body.auth-page .form-input:focus{
    box-shadow:0 0 0 3px rgba(228,59,155,0.12),0 0 16px rgba(228,59,155,0.04)!important;
}

/* ── VOTE COUNTER BADGE ──────────────────────────────── */
.vote-counter{
    animation:uxFadeSlideIn .4s ease both;
}
.vote-counter.pulse{
    animation:uxCounterPulse .5s ease;
}
@keyframes uxCounterPulse{
    0%{transform:scale(1)}
    50%{transform:scale(1.05)}
    100%{transform:scale(1)}
}
@keyframes uxFadeSlideIn{
    0%{opacity:0;transform:translateY(8px)}
    100%{opacity:1;transform:translateY(0)}
}

/* ── EMPTY STATE ─────────────────────────────────────── */
.not-registered-card{
    animation:uxFadeSlideIn .6s cubic-bezier(.22,1,.36,1) .1s both;
}
.not-registered-card svg{
    animation:uxFloatGentle 3s ease-in-out infinite alternate;
}
@keyframes uxFloatGentle{
    0%{transform:translateY(0)}
    100%{transform:translateY(-5px)}
}