/* :root {
            --hero-bg: url('./assets/banners/rrsecurity/banner_fundo_RRSecurity.jpg');
        } */

#avisoModal .custom-modal {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    /* background: #fff; */
}

#avisoModal .modal-header,
#avisoModal .modal-body,
#avisoModal .modal-footer {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 2;
    /* fica acima das camadas */
}

#avisoModal .modal-body {
    background-image: linear-gradient(
            rgba(16, 35, 107, 0.9),
            rgba(11, 26, 60, 0.65)
        ),
        var(--hero-bg),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg stroke='white' stroke-opacity='0.08' stroke-width='1'%3E%3Cpath d='M0 40H320M0 80H320M0 120H320M0 160H320M0 200H320M0 240H320M0 280H320'/%3E%3Cpath d='M40 0V320M80 0V320M120 0V320M160 0V320M200 0V320M240 0V320M280 0V320'/%3E%3C/g%3E%3Cg stroke='white' stroke-opacity='0.15' stroke-width='2'%3E%3Cpath d='M0 0L320 320M320 0L0 320'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover, cover, 100px 100px;
    background-position: center, center, top left;
    background-repeat: no-repeat, no-repeat, repeat;

    color: white;
}

#avisoModal .custom-modal.revealed .modal-header,
#avisoModal .custom-modal.revealed .modal-body,
#avisoModal .custom-modal.revealed .modal-footer {
    opacity: 1;
    transform: translateX(0);
}

/* Camadas inclinadas */
#avisoModal .reveal-layer {
    position: absolute;
    top: 0;
    left: 20%;
    height: 120%;
    width: 120%;
    /* background: #0d6efd; */
    background-color: rgb(199, 232, 255);
    transform: translateX(-100%) skewX(330deg);
    transform-origin: top left;
    animation: reveal 0.8s forwards;
    z-index: 1;
}

#avisoModal .reveal-layer:nth-child(2) {
    /* background: #198754; */
    animation-delay: 0.3s;
}

@keyframes reveal {
    to {
        transform: translateX(100%) skewX(330deg);
    }
}

@media screen and (max-width: 992px) {
    #avisoModal .reveal-layer {
        left: 30% !important;
    }
}