/* Motion layer for the public portal. The established index visual language stays intact. */
.community-index {
    --motion-cyan: #48dcf5;
    --motion-violet: #9b72ff;
    --motion-pink: #ff4f9a;
    --motion-ease: cubic-bezier(.16, 1, .3, 1);
}

.community-index .app-main {
    position: relative;
}

.community-index .app-main::before {
    content: "";
    position: fixed;
    z-index: 80;
    top: 0;
    left: 0;
    width: var(--page-progress, 0%);
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--motion-pink), var(--motion-violet), var(--motion-cyan));
    box-shadow: 0 0 18px color-mix(in srgb, var(--motion-cyan) 55%, transparent);
    transition: width .12s linear;
}

.community-index .home-feature-carousel {
    --pointer-x: 72%;
    --pointer-y: 24%;
    isolation: isolate;
}

.community-index .home-feature-carousel::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 1px;
    border-radius: 27px;
    pointer-events: none;
    opacity: .52;
    background: radial-gradient(460px circle at var(--pointer-x) var(--pointer-y), rgba(83, 224, 255, .16), transparent 54%);
    transition: opacity .3s ease;
}

.community-index .home-feature-carousel:not(:hover)::before { opacity: .22; }
.community-index .home-carousel-viewport { transition: border-color .35s ease, box-shadow .35s ease; }
.community-index .home-feature-carousel:hover .home-carousel-viewport {
    border-color: rgba(117, 219, 246, .22);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
}

.community-index .home-carousel-copy > * {
    opacity: 0;
    transform: translateY(22px);
}
.community-index .home-carousel-slide[aria-hidden="false"] .home-carousel-copy > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .58s var(--motion-ease), transform .72s var(--motion-ease);
}
.community-index .home-carousel-slide[aria-hidden="false"] .home-carousel-copy > :nth-child(2) { transition-delay: 70ms; }
.community-index .home-carousel-slide[aria-hidden="false"] .home-carousel-copy > :nth-child(3) { transition-delay: 130ms; }
.community-index .home-carousel-slide[aria-hidden="false"] .home-carousel-copy > :nth-child(4) { transition-delay: 190ms; }

.community-index .home-carousel-arrow {
    overflow: hidden;
    transition: background .22s ease, border-color .22s ease, transform .3s var(--motion-ease), box-shadow .3s ease;
}
.community-index .home-carousel-arrow:hover {
    border-color: rgba(255, 255, 255, .42);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .34);
}
.community-index .home-carousel-arrow:active { transform: translateY(-50%) scale(.94); }

.community-index [data-dom-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .62s var(--motion-ease), transform .72s var(--motion-ease);
    transition-delay: var(--dom-delay, 0ms);
}
.community-index [data-dom-reveal].is-dom-visible {
    opacity: 1;
    transform: none;
}

.community-index [data-dom-stagger] > .dom-motion-item {
    /* Listas vindas da API devem permanecer legiveis mesmo quando o navegador
       nao entrega IntersectionObserver para conteudo abaixo da dobra. */
    opacity: 1;
    transform: none;
    transition: opacity .5s var(--motion-ease), transform .62s var(--motion-ease), border-color .2s ease, box-shadow .2s ease;
    transition-delay: 0ms;
}
.community-index [data-dom-stagger].is-dom-visible > .dom-motion-item {
    opacity: 1;
    transform: none;
}

.community-index .news-card,
.community-index .event-card,
.community-index .album-card,
.community-index .song-card {
    transform-origin: 50% 100%;
}

.community-index .section-heading,
.community-index .section-intro {
    position: relative;
}
.community-index .section-heading::after,
.community-index .section-intro::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -12px;
    left: 0;
    height: 1px;
    opacity: .55;
    background: linear-gradient(90deg, var(--motion-violet), rgba(72, 220, 245, .16) 38%, transparent 78%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .9s var(--motion-ease) .12s;
}
.community-index .section-heading.is-dom-visible::after,
.community-index .section-intro.is-dom-visible::after { transform: scaleX(1); }

.community-index .app-nav {
    transition: transform .38s var(--motion-ease), border-color .25s ease, background .25s ease;
}
.community-index .nav-item {
    transition: color .2s ease, background .25s ease, transform .3s var(--motion-ease);
}
.community-index .nav-item:active { transform: scale(.92); }

.community-index .dom-view-enter {
    animation: indexViewEnter .52s var(--motion-ease) both;
}

.community-index .dom-press-wave {
    position: fixed;
    z-index: 9999;
    width: 12px;
    height: 12px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.2);
    animation: indexPressWave .55s var(--motion-ease) forwards;
}

@keyframes indexViewEnter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}
@keyframes indexPressWave {
    to { opacity: 0; transform: translate(-50%, -50%) scale(5); }
}

@media (max-width: 760px) {
    .community-index .app-main::before { z-index: 120; }
    .community-index .home-feature-carousel::before { display: none; }
    /* Conteudo essencial nunca depende do IntersectionObserver no mobile. */
    .community-index [data-dom-reveal],
    .community-index [data-dom-stagger] > .dom-motion-item {
        opacity: 1;
        transform: none;
        transition-delay: 0ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .community-index *,
    .community-index *::before,
    .community-index *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }
    .community-index [data-dom-reveal],
    .community-index [data-dom-stagger] > .dom-motion-item { opacity: 1; transform: none; }
}

.perf-lite.community-index .home-feature-carousel::before,
.perf-lite .community-index .home-feature-carousel::before { display: none; }