@keyframes cyber-pulse {
    0%, 100% { opacity: 0.3; }
    50%       { opacity: 1; }
}

@keyframes cyber-scan {
    0%   { transform: translateY(-200%) skewY(-1deg); opacity: 0; }
    15%  { opacity: 0.7; }
    85%  { opacity: 0.7; }
    100% { transform: translateY(450%) skewY(-1deg); opacity: 0; }
}

.mobile-before-layout__container .btn--info,
.mobile-before-layout__container .btn--danger,
.mobile-before-layout__container .btn--success {
    position: relative !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%) !important;
    overflow: hidden !important;
    will-change: contents !important;
}

.mobile-before-layout__container .btn--info::before,
.mobile-before-layout__container .btn--danger::before,
.mobile-before-layout__container .btn--success::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 12% !important;
    right: 12% !important;
    height: 2px !important;
    border-radius: 0 0 2px 2px !important;
    animation: cyber-pulse 2s infinite ease-in-out !important;
    will-change: opacity !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.mobile-before-layout__container .btn--info::after,
.mobile-before-layout__container .btn--danger::after,
.mobile-before-layout__container .btn--success::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 40% !important;
    pointer-events: none !important;
    animation: cyber-scan 2.8s infinite linear !important;
    will-change: transform, opacity !important;
    z-index: 1 !important;
}

.mobile-before-layout__container .btn--info {
    background: rgba(0, 8, 25, 0.55) !important;
    background-color: rgba(0, 8, 25, 0.55) !important;
    box-shadow: inset 0 0 0 1.5px #00c8ff, inset 0 10px 18px rgba(0, 200, 255, 0.1) !important;
    color: #00e5ff !important;
    text-shadow: 0 0 7px rgba(0, 200, 255, 0.9) !important;
}
.mobile-before-layout__container .btn--info .btn__inner,
.mobile-before-layout__container .btn--info .btn__inner--info {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
}
.mobile-before-layout__container .btn--info::before {
    background: #00e5ff !important;
}
.mobile-before-layout__container .btn--info::after {
    background: linear-gradient(180deg, rgba(0, 200, 255, 0.22), transparent) !important;
}
.mobile-before-layout__container .btn--info:active {
    background: rgba(0, 200, 255, 0.18) !important;
}

.mobile-before-layout__container .btn--danger {
    background: rgba(0, 12, 5, 0.55) !important;
    background-color: rgba(0, 12, 5, 0.55) !important;
    box-shadow: inset 0 0 0 1.5px #00e676, inset 0 10px 18px rgba(0, 230, 118, 0.1) !important;
    color: #00e676 !important;
    text-shadow: 0 0 7px rgba(0, 230, 118, 0.9) !important;
}
.mobile-before-layout__container .btn--danger .btn__inner,
.mobile-before-layout__container .btn--danger .btn__inner--danger {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
}
.mobile-before-layout__container .btn--danger::before {
    background: #00e676 !important;
}
.mobile-before-layout__container .btn--danger::after {
    background: linear-gradient(180deg, rgba(0, 230, 118, 0.22), transparent) !important;
}
.mobile-before-layout__container .btn--danger:active {
    background: rgba(0, 230, 118, 0.18) !important;
}

.mobile-before-layout__container .btn--success {
    background: rgba(18, 12, 0, 0.55) !important;
    background-color: rgba(18, 12, 0, 0.55) !important;
    box-shadow: inset 0 0 0 1.5px #ffc107, inset 0 10px 18px rgba(255, 193, 7, 0.1) !important;
    color: #ffd740 !important;
    text-shadow: 0 0 7px rgba(255, 193, 7, 0.9) !important;
}
.mobile-before-layout__container .btn--success .btn__inner,
.mobile-before-layout__container .btn--success .btn__inner--success {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
}
.mobile-before-layout__container .btn--success::before {
    background: #ffd740 !important;
}
.mobile-before-layout__container .btn--success::after {
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.22), transparent) !important;
}
.mobile-before-layout__container .btn--success:active {
    background: rgba(255, 193, 7, 0.18) !important;
}