/* ==============================================
   High-Tech Toast Animations
   ============================================== */

/* ---- RGB glitch text effect ---- */
@keyframes toastGlitch {
    0%   { text-shadow: 2px 0 #ff0040, -2px 0 #00f0ff; }
    20%  { text-shadow: -2px 1px #ff0040, 2px -1px #00f0ff; }
    40%  { text-shadow: 1px -1px #ff0040, -1px 1px #00f0ff; }
    60%  { text-shadow: -1px 0 #ff0040, 1px 0 #00f0ff; }
    80%  { text-shadow: 0 0 #ff0040, 0 0 #00f0ff; }
    100% { text-shadow: none; }
}

/* ---- Scanline sweep ---- */
@keyframes toastScanline {
    0%   { top: -4px; opacity: 1; }
    100% { top: calc(100% + 4px); opacity: 0.3; }
}

/* ---- Neon border glow pulse ---- */
@keyframes toastBorderGlow {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 0; }
}

/* ---- Progress bar countdown ---- */
@keyframes toastCountdown {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ---- Base toast styles ---- */
.toast.toast-animated {
    overflow: hidden;
    border: none !important;
    border-radius: 10px;
    position: relative;
    transform-origin: center right;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.toast.toast-animated:hover {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Scanline element */
.toast.toast-animated .toast-scanline {
    position: absolute;
    left: 0;
    top: -4px;
    width: 100%;
    height: 4px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: toastScanline 0.4s ease-out 0.1s forwards;
    pointer-events: none;
    z-index: 5;
}

/* Neon border glow element */
.toast.toast-animated .toast-border-glow {
    position: absolute;
    inset: -1px;
    border-radius: 11px;
    border: 2px solid rgba(var(--toast-glow-rgb, 255, 255, 255), 0.8);
    animation: toastBorderGlow 1.2s ease-out 0.3s forwards;
    pointer-events: none;
    z-index: 4;
    box-shadow: 0 0 15px rgba(var(--toast-glow-rgb, 255, 255, 255), 0.4),
                inset 0 0 15px rgba(var(--toast-glow-rgb, 255, 255, 255), 0.1);
}

/* Glitch text */
.toast.toast-animated.toast-glitching .toast-body,
.toast.toast-animated.toast-glitching .toast-header strong {
    animation: toastGlitch 0.4s steps(5) forwards;
}

/* Progress bar */
.toast.toast-animated .toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 10px 10px;
    z-index: 3;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
}

.toast.toast-animated .toast-progress.running {
    animation: toastCountdown linear forwards;
}

/* ---- Type-specific glow colors ---- */
.toast.toast-animated.text-bg-success {
    --toast-glow-rgb: 25, 135, 84;
    background: linear-gradient(135deg, rgba(25, 135, 84, 0.95), rgba(15, 95, 60, 0.98)) !important;
}

.toast.toast-animated.text-bg-danger {
    --toast-glow-rgb: 220, 53, 69;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.95), rgba(160, 35, 50, 0.98)) !important;
}

.toast.toast-animated.text-bg-warning {
    --toast-glow-rgb: 255, 193, 7;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.95), rgba(200, 150, 5, 0.98)) !important;
}

.toast.toast-animated.text-bg-info {
    --toast-glow-rgb: 13, 202, 240;
    background: linear-gradient(135deg, rgba(13, 202, 240, 0.95), rgba(10, 150, 180, 0.98)) !important;
}

.toast.toast-animated.text-bg-primary {
    --toast-glow-rgb: 13, 110, 253;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.95), rgba(10, 80, 200, 0.98)) !important;
}

.toast.toast-animated:not([class*="text-bg-"]) {
    --toast-glow-rgb: 108, 117, 125;
}

/* ---- Header / body ---- */
.toast.toast-animated .toast-header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: inherit;
    position: relative;
    z-index: 2;
}

.toast.toast-animated .toast-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.toast.toast-animated .toast-header .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg) scale(1.2);
}

.toast.toast-animated .toast-header strong {
    color: rgba(255, 255, 255, 0.95);
}

.toast.toast-animated .toast-body {
    color: rgba(255, 255, 255, 0.95);
    position: relative;
    z-index: 2;
}