/* 
 * Festeiros - SEO & CLS Helpers
 * Adicione esta folha de estilo ao layout principal do seu .NET MVC (_Layout.cshtml)
 * para evitar o Layout Shift (CLS) dos Web Components Angular Elements.
 */

/* 1. Reservas de espaço mínimo para evitar saltos visuais durante o carregamento do JS */
fest-split-bill, 
fest-bbq-calculator, 
fest-ice-calculator,
fest-item-assigner,
fest-roulette,
fest-shot-roulette,
fest-countdown,
fest-drinking-game {
    display: block;
    min-height: 600px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 2. Efeito de Shimmer (Carregamento Visual Fluido) */
fest-split-bill:empty,
fest-bbq-calculator:empty,
fest-ice-calculator:empty,
fest-item-assigner:empty,
fest-roulette:empty,
fest-shot-roulette:empty,
fest-countdown:empty,
fest-drinking-game:empty {
    position: relative;
    overflow: hidden;
}

fest-split-bill:empty::after,
fest-bbq-calculator:empty::after,
fest-ice-calculator:empty::after,
fest-item-assigner:empty::after,
fest-roulette:empty::after,
fest-shot-roulette:empty::after,
fest-countdown:empty::after,
fest-drinking-game:empty::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.02) 20%,
        rgba(255, 255, 255, 0.05) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: fest-shimmer 2s infinite;
}

@keyframes fest-shimmer {
    100% {
        transform: translateX(100%);
    }
}