@layer cdp-base {
/*
 * Cruzeiro do Povo v2 — Animações Premium + Layouts Home
 * Sofia Flux — UX/UI | Victor Boost — Performance | Passo 8
 *
 * Princípio: prefers-reduced-motion respeita acessibilidade.
 * Todas as animações desativadas se usuário preferir menos movimento.
 */

/* ── Reduced motion reset ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:   1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration:  1ms !important;
    }
}

/* ── Card entrance (staggered) ──────────────────────────────────────────── */
.cdp-anim-card {
    opacity:    0;
    transform:  translateY(24px);
    animation:  cdp-card-in .55s cubic-bezier(.2,.9,.4,1.1) forwards;
    animation-delay: calc(var(--stagger, 0) * 70ms);
}

@keyframes cdp-card-in {
    to { opacity: 1; transform: translateY(0); }
}

/* Intersection Observer — só anima quando visível */
.cdp-anim-card[data-visible="false"] {
    animation: none;
    opacity: 0;
}

/* ── Hover 3D lift ──────────────────────────────────────────────────────── */
.cdp-post-card,
.cdp-match-card {
    transition:
        transform  .28s cubic-bezier(.2,.9,.4,1.1),
        box-shadow .28s ease;
    will-change: transform;
}

.cdp-post-card:hover,
.cdp-match-card:hover {
    transform:  translateY(-6px) scale(1.015);
    box-shadow: 0 20px 40px rgba(0,0,0,.28);
}

/* ── Shimmer skeleton ───────────────────────────────────────────────────── */
.cdp-skeleton,
.cdp-skeleton-text {
    background: linear-gradient(90deg,
        oklch(94% 0.012 255) 25%,
        oklch(98% 0.008 255) 50%,
        oklch(94% 0.012 255) 75%);
    background-size: 200% 100%;
    animation:  cdp-shimmer 1.5s infinite;
    border-radius: 6px;
    color:      transparent !important;
    pointer-events: none;
}

@keyframes cdp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Bareômetro — pulse no novo líder ───────────────────────────────────── */
.bareometer-item--entering {
    animation: cdp-highlight-pulse .6s ease-out;
}

@keyframes cdp-highlight-pulse {
    0%  { background-color: rgba(200,169,81,0); }
    40% { background-color: rgba(200,169,81,.25); }
    100%{ background-color: rgba(200,169,81,0); }
}

/* ── Gol — flash global ──────────────────────────────────────────────────── */
.cdp-goal-flash-overlay {
    position:       fixed;
    inset:          0;
    pointer-events: none;
    z-index:        99000;
    animation:      cdp-goal-flash .7s ease-out forwards;
}

@keyframes cdp-goal-flash {
    0%  { background: rgba(255,215,0,0); }
    20% { background: rgba(255,215,0,.35); }
    100%{ background: rgba(255,215,0,0); }
}

/* ── Confetti ────────────────────────────────────────────────────────────── */
.cdp-confetti-piece {
    position:   fixed;
    top:        -20px;
    width:      10px;
    height:     10px;
    border-radius: 2px;
    pointer-events: none;
    z-index:    99001;
    animation:  cdp-confetti-fall var(--fall-dur, 3s) var(--fall-delay, 0s) linear forwards;
}

@keyframes cdp-confetti-fall {
    0%   { transform: translateY(0)     rotate(0deg)   translateX(0);   opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg) translateX(var(--drift, 0px)); opacity: 0; }
}

/* ── Score pop (quando placar muda) ─────────────────────────────────────── */
.cdp-score-pop {
    animation: cdp-score-pop .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes cdp-score-pop {
    0%   { transform: scale(.6); opacity: 0; }
    100% { transform: scale(1);  opacity: 1; }
}

/* ── Badge de conquista ──────────────────────────────────────────────────── */
.cdp-achievement-toast {
    position:     fixed;
    top:          80px;
    right:        20px;
    background:   var(--cdp-grad-sapphire, linear-gradient(135deg, #003087, #1B5BBF));
    border:       1px solid var(--cdp-champagne, #C8A951);
    border-radius:16px;
    padding:      1rem 1.25rem;
    color:        #fff;
    z-index:      99002;
    display:      flex;
    gap:          .75rem;
    align-items:  center;
    max-width:    320px;
    box-shadow:   0 8px 32px rgba(0,0,0,.4);
    animation:    cdp-achievement-in .5s cubic-bezier(.34,1.56,.64,1);
}

@keyframes cdp-achievement-in {
    from { transform: translateX(140%) scale(.8); opacity: 0; }
    to   { transform: translateX(0)    scale(1);  opacity: 1; }
}

.cdp-achievement-toast__icon { font-size: 2rem; flex-shrink: 0; }
.cdp-achievement-toast__title{ font-weight: 700; font-size: .88rem; }
.cdp-achievement-toast__msg  { font-size: .78rem; opacity: .8; margin-top: .15rem; }

/* ══════════════════════════════════════════════════════════════════════════ */
/* HOME — Layouts                                                            */
/* ══════════════════════════════════════════════════════════════════════════ */

/* ── Layout switcher ────────────────────────────────────────────────────── */
.cdp-layout-switcher {
    position:       fixed;
    top:            50%;
    right:          0;
    transform:      translateY(-50%);
    z-index:        500;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .35rem;
    background:     rgba(0,0,0,.7);
    backdrop-filter:blur(8px);
    border-radius:  12px 0 0 12px;
    padding:        .75rem .5rem;
    border:         1px solid rgba(255,255,255,.1);
    border-right:   none;
}

.cdp-layout-switcher__label { font-size: .55rem; opacity: .5; text-transform: uppercase; letter-spacing: .05em; color: #fff; writing-mode: vertical-rl; }
.cdp-layout-btn {
    width:         36px; height: 36px;
    border-radius: 8px;
    background:    rgba(255,255,255,.08);
    border:        1px solid transparent;
    color:         #fff;
    cursor:        pointer;
    font-size:     1rem;
    display:       grid;
    place-items:   center;
    transition:    background .2s, border-color .2s;
}
.cdp-layout-btn:hover  { background: rgba(255,255,255,.18); }
.cdp-layout-btn.active { background: #003087; border-color: #C8A951; }

@media (max-width: 768px) {
    .cdp-layout-switcher { display: none; } /* Oculto em mobile — muito pequeno */
}

/* ── Featured (padrão) ──────────────────────────────────────────────────── */
.cdp-home__grid-featured {
    display:               grid;
    grid-template-columns: 1fr 380px;
    gap:                   2rem;
    align-items:           start;
}

@media (max-width: 960px) {
    .cdp-home__grid-featured { grid-template-columns: 1fr; }
}

.cdp-featured-post {
    border-radius: 16px; overflow: hidden;
    background: var(--cdp-surface, #fff);
    border: 1px solid var(--cdp-border, #E3E8F0);
    box-shadow: var(--cdp-shadow-sm);
}
.cdp-featured-post__image-link img { width: 100%; height: 320px; object-fit: cover; display: block; }
.cdp-featured-post__body { padding: 1.5rem; }
.cdp-featured-post__title { font-size: clamp(1.25rem, 3vw, 2rem); font-family: 'Bebas Neue', sans-serif; line-height: 1.1; margin: .5rem 0; }
.cdp-featured-post__title a { color: var(--cdp-text, #0E1A2B); text-decoration: none; }
.cdp-featured-post__title a:hover { color: var(--cdp-sapphire-700, #003DA5); }
.cdp-featured-post__excerpt { font-size: .92rem; color: var(--cdp-text-muted, #5A6B82); line-height: 1.6; }
.cdp-featured-post__meta    { font-size: .78rem; color: var(--cdp-text-soft, #8A98AE); margin-top: .75rem; display: flex; gap: .75rem; }

.cdp-home__secondary-posts { display: flex; flex-direction: column; gap: 1rem; }

/* ── Grid layout ────────────────────────────────────────────────────────── */
.layout-grid .cdp-home__body--featured .cdp-home__grid-featured {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.layout-grid .cdp-featured-post__image-link img { height: 200px; }

/* ── Magazine layout ────────────────────────────────────────────────────── */
.layout-magazine .cdp-home__grid-featured { grid-template-columns: 2fr 1fr; }
.layout-magazine .cdp-featured-post__image-link img { height: 400px; }
.layout-magazine .cdp-home__body--featured { border-left: 4px solid var(--cdp-champagne, #C8A951); padding-left: 1rem; }

/* ── Minimal layout ─────────────────────────────────────────────────────── */
.layout-minimal .cdp-home__hero { max-height: 50vh; }
.layout-minimal .cdp-hero-stadium__hologram { display: none; }
.layout-minimal .cdp-home__timeline { display: none; }
.layout-minimal .cdp-home__jersey { display: none; }
.layout-minimal .cdp-post-card { border-bottom: 1px solid var(--cdp-border, #E3E8F0); border-radius: 0; background: none; box-shadow: none; }

/* ── Stadium layout ─────────────────────────────────────────────────────── */
.layout-stadium .cdp-home__body--featured .cdp-home__grid-featured { grid-template-columns: 1fr; }
.layout-stadium .cdp-home__live-strip { position: sticky; top: 60px; z-index: 100; }

/* ── Posts grid ─────────────────────────────────────────────────────────── */
.cdp-posts-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   1.5rem;
}

/* ── Live strip ─────────────────────────────────────────────────────────── */
.cdp-home__live-strip-inner {
    display:               grid;
    grid-template-columns: 1fr 340px;
    gap:                   2rem;
    align-items:           start;
}

@media (max-width: 900px) {
    .cdp-home__live-strip-inner { grid-template-columns: 1fr; }
}

/* ── Ranking grid ────────────────────────────────────────────────────────── */
.cdp-home__ranking-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
}

@media (max-width: 760px) {
    .cdp-home__ranking-grid { grid-template-columns: 1fr; }
}

.cdp-ranking-widget {
    background: var(--cdp-surface, #fff);
    border: 1px solid var(--cdp-border, #E3E8F0);
    border-radius: 14px; padding: 1.25rem;
    box-shadow: var(--cdp-shadow-sm);
}
.cdp-ranking-widget h3 {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: .05em; margin: 0 0 1rem;
    color: var(--cdp-sapphire-700, #003DA5);
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.cdp-section          { padding: 3rem 0; }
.cdp-section--dark    { background: var(--cdp-grad-sapphire-deep); color:#fff; }
.cdp-section--azul    { background: color-mix(in oklab, var(--cdp-sapphire-700, #003DA5) 6%, transparent); }
.cdp-section--gradient{ background: linear-gradient(135deg,
    color-mix(in oklab, var(--cdp-sapphire-700, #003DA5) 8%, transparent) 0%,
    color-mix(in oklab, var(--cdp-champagne, #C8A951) 6%, transparent) 100%); }
.cdp-section-header   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.cdp-section-desc     { color: var(--cdp-text-muted, #5A6B82); font-size: .9rem; margin-top: -.5rem; }

/* ── Load more ───────────────────────────────────────────────────────────── */
.cdp-home__load-more { text-align: center; margin-top: 2rem; }

/* ── Placar ao vivo ──────────────────────────────────────────────────────── */
.cdp-placar-live { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.cdp-placar-live__label { background: #e74c3c; color: #fff; padding: .15rem .75rem; border-radius: 20px; font-size: .72rem; font-weight: 700; animation: cdp-live-blink 1.5s ease-in-out infinite; }
@keyframes cdp-live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.cdp-placar-live__score { display: flex; align-items: center; gap: 1rem; font-family: 'Bebas Neue', sans-serif; font-size: 3rem; }
.cdp-placar-live__goals { color: var(--cdp-champagne-deep, #B89940); min-width: 2rem; text-align: center; }
.cdp-placar-live__sep   { opacity: .4; }
.cdp-placar-live__team  { font-size: 1.2rem; }
.cdp-placar-live__minute{ font-size: .82rem; color: var(--cdp-text-muted, #5A6B82); }

/* ── Jersey loading bar ───────────────────────────────────────────────────── */
.jersey-loading-bar { position: absolute; bottom: 0; left: 0; height: 3px; background: #C8A951; border-radius: 2px; transition: width .3s; z-index: 10; }
.jersey-3d-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 1rem; }
.jersey-3d-fallback__label { font-size: .78rem; opacity: .5; }

} /* end @layer cdp-base */