/* =========================================================
   MELOPOD — HOME FEED AESTHETIC LAYER
   Additive polish for index.php only. Nothing here renames
   or removes existing classes/IDs — it only enhances them,
   so all existing JS hooks keep working untouched.
   ========================================================= */

:root{
    --mp-glow-purple: rgba(115, 88, 255, .45);
    --mp-glow-pink: rgba(255, 77, 116, .40);
    --mp-glow-lime: rgba(217, 255, 79, .35);
    --mp-gradient: linear-gradient(120deg, var(--purple, #7358ff), var(--pink, #ff4d74) 55%, var(--lime, #d9ff4f));
}

@media (prefers-reduced-motion: reduce){
    *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- stacking context so ambience sits behind everything ---------- */
.app-shell{ position: relative; z-index: 1; }

/* ---------- ambient background: drifting aurora + floating notes ---------- */
.melopod-ambience{
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.melopod-ambience .mp-blob{
    position: absolute;
    width: 46vw;
    height: 46vw;
    max-width: 640px;
    max-height: 640px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .28;
    animation: mpDrift 26s ease-in-out infinite;
}

.melopod-ambience .mp-blob:nth-child(1){
    top: -14%;
    left: -10%;
    background: var(--purple, #7358ff);
    animation-delay: 0s;
}

.melopod-ambience .mp-blob:nth-child(2){
    bottom: -18%;
    right: -8%;
    background: var(--pink, #ff4d74);
    animation-delay: -9s;
}

.melopod-ambience .mp-blob:nth-child(3){
    top: 40%;
    left: 55%;
    width: 30vw;
    height: 30vw;
    background: var(--lime, #d9ff4f);
    opacity: .18;
    animation-delay: -17s;
}

.theme-dark .melopod-ambience .mp-blob{ opacity: .22; }

@keyframes mpDrift{
    0%, 100%{ transform: translate(0, 0) scale(1); }
    33%{ transform: translate(4%, 6%) scale(1.08); }
    66%{ transform: translate(-5%, -3%) scale(.96); }
}

.melopod-ambience .mp-note{
    position: absolute;
    bottom: -40px;
    font-size: 22px;
    color: var(--purple, #7358ff);
    opacity: 0;
    animation: mpFloatNote 13s linear infinite;
    will-change: transform, opacity;
}

@keyframes mpFloatNote{
    0%{ transform: translateY(0) rotate(0deg); opacity: 0; }
    8%{ opacity: .55; }
    90%{ opacity: .35; }
    100%{ transform: translateY(-112vh) rotate(28deg); opacity: 0; }
}

/* ---------- brand / logo: gentle glow + vinyl spin accent ---------- */
.app-brand{
    position: relative;
    transition: filter .25s ease;
}

.app-brand span{
    background: var(--mp-gradient);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: mpGradientShift 6s ease infinite;
}

@keyframes mpGradientShift{
    0%, 100%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
}

.app-brand .site-logo{
    filter: drop-shadow(0 2px 10px var(--mp-glow-purple));
    transition: transform .5s cubic-bezier(.2,.9,.3,1.3);
}

.app-brand:hover .site-logo{
    transform: rotate(18deg) scale(1.06);
}

/* ---------- stories: glowing, breathing ring ---------- */
.story-shelf{
    border-radius: 18px;
    transition: box-shadow .2s ease;
}

.story-ring{
    background-size: 220% 220%;
    animation: mpGradientShift 5s ease infinite;
    box-shadow: 0 0 0 0 var(--mp-glow-purple);
}

.story-item:not(.viewed):hover .story-ring{
    animation: mpGradientShift 2.2s ease infinite, mpRingPulse 1.4s ease infinite;
}

@keyframes mpRingPulse{
    0%, 100%{ box-shadow: 0 0 0 0 var(--mp-glow-purple); }
    50%{ box-shadow: 0 0 0 6px transparent; }
}

.story-item{ transition: transform .18s ease; }
.story-item:active{ transform: scale(.94); }

/* ---------- explore banner: shimmer sweep + spinning note icon ---------- */
.explore-melopod-button{
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.explore-melopod-button::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
    background-size: 220% 100%;
    background-position: 130% 0;
    transition: background-position .9s ease;
    pointer-events: none;
}

.explore-melopod-button:hover::before{
    background-position: -30% 0;
}

.explore-melopod-button > *{ position: relative; z-index: 1; }

.explore-melopod-icon{
    transition: transform .6s cubic-bezier(.3,.9,.2,1.4);
}

.explore-melopod-button:hover .explore-melopod-icon{
    transform: rotate(-14deg) scale(1.08);
}

.explore-melopod-arrow{
    transition: transform .25s ease;
}

.explore-melopod-button:hover .explore-melopod-arrow{
    transform: translateX(6px);
}

/* ---------- fun fact strip: little live equalizer next to the note ---------- */
.fun-facts{
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.fun-facts .mp-eq{
    display: flex;
    align-items: flex-end;
    gap: 3px;
    flex: 0 0 auto;
    height: 20px;
    margin-top: 2px;
}

.fun-facts .mp-eq i{
    display: block;
    width: 4px;
    border-radius: 2px;
    background: #111;
    animation: mpEq 1.1s ease-in-out infinite;
}

.fun-facts .mp-eq i:nth-child(1){ animation-delay: -1.1s; }
.fun-facts .mp-eq i:nth-child(2){ animation-delay: -.7s; }
.fun-facts .mp-eq i:nth-child(3){ animation-delay: -.3s; }
.fun-facts .mp-eq i:nth-child(4){ animation-delay: -.9s; }

@keyframes mpEq{
    0%, 100%{ height: 5px; }
    50%{ height: 20px; }
}

/* ---------- composer: glassy focus glow ---------- */
.composer{
    transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
}

.composer:hover{
    border-color: var(--purple, #7358ff);
    box-shadow: 0 6px 22px var(--mp-glow-purple);
    transform: translateY(-1px);
}

/* ---------- primary / create CTAs: gradient + shimmer ---------- */
.primary,
.create-button,
#emptyCreate,
#emptyShortCreate{
    position: relative;
    overflow: hidden;
    background: var(--mp-gradient) !important;
    background-size: 220% 220% !important;
    color: #fff !important;
    border: 0 !important;
    animation: mpGradientShift 6s ease infinite;
    transition: transform .18s ease, box-shadow .18s ease;
}

.primary:hover,
.create-button:hover,
#emptyCreate:hover,
#emptyShortCreate:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 26px var(--mp-glow-purple);
}

.primary:active,
.create-button:active{
    transform: translateY(0) scale(.98);
}

/* ---------- feed cards: soft lift + glow on hover ---------- */
.video-card,
.text-post-grid-card,
.post{
    transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}

.video-card:hover,
.text-post-grid-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,.14);
}

/* like button: extra pop beyond the existing note-burst */
.post-card-actions [data-card-action="like"]{
    transition: transform .18s cubic-bezier(.4,1.8,.4,1.6);
}

.post-card-actions [data-card-action="like"].active{
    transform: scale(1.12);
}

.post-card-actions [data-card-action="like"].active .action-icon{
    animation: mpHeartPop .4s ease;
}

@keyframes mpHeartPop{
    0%{ transform: scale(1); }
    35%{ transform: scale(1.45); }
    100%{ transform: scale(1); }
}

/* ---------- feed-empty state: friendlier, on-brand ---------- */
.feed-empty{
    background: linear-gradient(180deg, #fafafa, #f3f0ff) !important;
    border: 2px dashed var(--purple, #7358ff) !important;
}

.theme-dark .feed-empty{
    background: linear-gradient(180deg, #181818, #1c1730) !important;
}

/* ---------- custom scrollbar (webkit) ---------- */
.content::-webkit-scrollbar,
.messages-panel ::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

html{ scrollbar-width: thin; scrollbar-color: var(--purple, #7358ff) transparent; }

body::-webkit-scrollbar{ width: 10px; }
body::-webkit-scrollbar-thumb{
    background: var(--mp-gradient);
    border-radius: 8px;
}
body::-webkit-scrollbar-track{ background: transparent; }