/* ============================================================
   MSR - Efeitos visuais da página pública (rifa)
   Carregado globalmente pelo header. Efeitos:
   1) Botão de comprar: brilho passando (sheen) + respiração (pulse)
   2) Imagens do carrossel: fade-in / shimmer (skeleton)
   3) Área de ganhador: brilho + confete
   (O loader de página com anel girando fica inline no header.)
   ============================================================ */

/* ====== 1. Botão de compra: brilho + respiração ====== */
.msr-cta-glow {
    position: relative;
    overflow: hidden;
    animation: msr-breathe 2.8s ease-in-out infinite;
    will-change: transform;
}

.msr-cta-glow::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0, rgba(255, 255, 255, .55) 50%, transparent 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 2;
    animation: msr-sheen 3.4s ease-in-out infinite;
}

/* mantém o conteúdo do botão acima do brilho */
.msr-cta-glow > * {
    position: relative;
    z-index: 3;
}

@keyframes msr-sheen {
    0%   { left: -80%; }
    30%  { left: 140%; }
    100% { left: 140%; }
}

@keyframes msr-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}

/* ====== 2. Imagens do carrossel: fade-in + shimmer ====== */
.msr-fx-img {
    opacity: 0;
    transition: opacity .5s ease;
}

.msr-fx-img.msr-loaded {
    opacity: 1;
}

.msr-fx-skeleton {
    position: relative;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, .06) 30%,
        rgba(255, 255, 255, .18) 50%,
        rgba(255, 255, 255, .06) 70%);
    background-size: 200% 100%;
    animation: msr-shimmer 1.3s linear infinite;
}

.msr-fx-skeleton.msr-fx-ready {
    animation: none;
    background: none;
}

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

/* ====== 3. Ganhador: brilho + confete ====== */
.winner-card,
.app-card.card.bg-success {
    position: relative;
    overflow: hidden;
}

.winner-card::before,
.app-card.card.bg-success::before {
    content: "";
    position: absolute;
    top: 0;
    left: -160%;
    width: 65%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-16deg);
    pointer-events: none;
    z-index: 1;
    animation: msr-winner-sheen 4.2s ease-in-out infinite;
}

@keyframes msr-winner-sheen {
    0%   { left: -160%; }
    42%  { left: 160%; }
    100% { left: 160%; }
}

/* conteúdo do card acima do brilho e do confete */
.winner-details,
.winner-card > a,
.app-card.card.bg-success .card-body {
    position: relative;
    z-index: 2;
}

.msr-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.msr-confetti i {
    position: absolute;
    top: -12%;
    width: 7px;
    height: 11px;
    border-radius: 1px;
    opacity: 0;
    animation: msr-confetti-fall linear infinite;
}

@keyframes msr-confetti-fall {
    0%   { transform: translateY(-30%) rotate(0); opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: translateY(560%) rotate(400deg); opacity: .15; }
}

/* ====== Acessibilidade: respeita "reduzir movimento" ====== */
@media (prefers-reduced-motion: reduce) {
    .msr-cta-glow,
    .msr-cta-glow::after,
    .winner-card::before,
    .app-card.card.bg-success::before,
    .msr-confetti i {
        animation: none !important;
    }

    .msr-cta-glow::after,
    .msr-confetti {
        display: none;
    }
}