/* Easter Eggs - Styles spéciaux pour les surprises */

/* Easter egg - Toast café */
.toast-notification.coffee {
    background: linear-gradient(135deg, #F6EDE1 0%, #E9D8C3 100%);
    border-left: 4px solid #D6C3A8 !important;
    color: #3B2E2A;
    box-shadow: 0 8px 24px rgba(90, 58, 46, 0.18);
    position: relative;
    overflow: hidden;
}

.toast-notification.coffee .toast-icon {
    color: #3B2E2A;
    font-size: 1.15rem;
    font-style: normal;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.05));
}

.toast-notification.coffee .toast-message {
    color: #3B2E2A;
    position: relative;
    z-index: 2;
}

/* Pluie de tasses de café - Animation pour l'easter egg café */
@keyframes coffeeRain {
    0% { 
        transform: translateY(-100px) rotate(0deg); 
        opacity: 0;
    }
    10% { 
        opacity: 0.8;
    }
    90% { 
        opacity: 0.8;
    }
    100% { 
        transform: translateY(200px) rotate(360deg); 
        opacity: 0;
    }
}

.toast-notification.coffee .toast-content { position: relative; }

.coffee-beans-layer-1,
.coffee-beans-layer-2 {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

.coffee-beans-layer-1 {
    animation: coffeeRain 3s linear infinite;
    opacity: 0.4;
}

.coffee-beans-layer-2 {
    animation: coffeeRain 4s linear infinite;
    animation-delay: 1.5s;
    opacity: 0.3;
}

/* Positionnement des tasses individuelles pour un effet de pluie réaliste */
.coffee-beans-layer-1::before {
    content: '☕';
    position: absolute;
    left: 10%;
    animation: coffeeRain 2.5s linear infinite;
    animation-delay: 0s;
}

.coffee-beans-layer-1::after {
    content: '☕';
    position: absolute;
    left: 30%;
    animation: coffeeRain 3.2s linear infinite;
    animation-delay: 0.8s;
}

.coffee-beans-layer-2::before {
    content: '☕';
    position: absolute;
    left: 60%;
    animation: coffeeRain 2.8s linear infinite;
    animation-delay: 1.2s;
}

.coffee-beans-layer-2::after {
    content: '☕';
    position: absolute;
    left: 80%;
    animation: coffeeRain 3.5s linear infinite;
    animation-delay: 2s;
}

/* Easter egg - Toast matinal */
.toast-notification.morning {
    /* Valeurs par défaut (fallback) */
    --m-start: #FFB347;
    --m-end: #FFD700;
    --m-border: #FF8C00;
    --m-text: #8B4513;
    --m-shadow: rgba(255, 179, 71, 0.3);

    background: linear-gradient(135deg, var(--m-start) 0%, var(--m-end) 100%);
    border-left: 4px solid var(--m-border) !important;
    color: var(--m-text);
    box-shadow: 0 8px 25px var(--m-shadow);
    position: relative;
    overflow: hidden;
}

.toast-notification.morning .toast-icon {
    color: var(--m-border);
    animation: morningGlow 2s ease-in-out infinite;
    font-size: 1.2rem;
    font-style: normal;
}

.toast-notification.morning .toast-message {
    color: var(--m-text);
}

@keyframes morningGlow {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* Respect des préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
    .toast-notification.coffee .toast-icon,
    .toast-notification.morning .toast-icon {
        animation: none !important;
    }
}

/* =========================== */
/* Pluie lente de tasses (☕)  */
/* =========================== */

/* Assure un conteneur de clipping pour la pluie en arrière-plan */
.toast-notification.coffee .toast-content {
    position: relative;
    overflow: hidden;
}

/* Calque d'arrière-plan pour la pluie de tasses */
.toast-notification.coffee .coffee-rain {
    position: absolute;
    inset: 0; /* couvre toute la surface de la toast */
    pointer-events: none;
    overflow: visible;
    z-index: 1; /* Derrière le texte/icone (qui sont en z-index:2) */
}

/* Eléments individuels (tasses) */

.toast-notification.coffee .coffee-cup {
    position: absolute;
    top: -20%;
    left: var(--left, 50%);
    font-size: var(--size, 1.15rem);
    animation-name: coffeeFall;
    animation-duration: var(--fall-duration, 12s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: var(--fall-delay, 0s);
    opacity: 0;
    transform: rotate(0deg);
    will-change: top, opacity, transform;
    filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.08));
}

@keyframes coffeeFall {
    0% {
        top: -20%;
        opacity: 0;
        transform: rotate(0deg);
    }
    10% {
        opacity: 0.85;
    }
    90% {
        opacity: 0.85;
    }
    100% {
        top: 110%;
        opacity: 0;
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast-notification.coffee .coffee-cup {
        animation: none !important;
        opacity: 0.2;
    }
}

/* S'assure que l'icône reste au-dessus de la pluie */
.toast-notification.coffee .toast-icon {
    position: relative;
    z-index: 2;
}

/* Variante or (gold) générée */
.toast-notification.morning.morning--gold{
  --m-start:#FFF3C4; --m-end:#FFE59D;
  --m-border:#E8B24C; --m-text:#5C4625; --m-shadow:rgba(232,178,76,.24);
}

/* =========================== */
/* Pluie matinale (🌤️)        */
/* =========================== */

.toast-notification.morning .morning-rain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

.toast-notification.morning .morning-drop {
    position: absolute;
    top: -20%;
    left: var(--left, 50%);
    font-size: var(--size, 1.2rem);
    animation-name: morningFall;
    animation-duration: var(--fall-duration, 6s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: var(--fall-delay, 0s);
    opacity: 0;
    transform: rotate(0deg);
    will-change: top, opacity, transform;
    filter: drop-shadow(0 2px 1px var(--m-shadow));
}

@keyframes morningFall {
    0% {
        top: -20%;
        opacity: 0;
        transform: rotate(0deg);
    }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% {
        top: 110%;
        opacity: 0;
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast-notification.morning .morning-drop { animation: none !important; opacity: 0.25; }
}

/* S'assure que l'icône/texte restent au-dessus de la pluie matinale */
.toast-notification.morning .toast-icon,
.toast-notification.morning .toast-message {
    position: relative;
    z-index: 2;
}

/* =========================== */
/* Easter egg VL (clé)         */
/* =========================== */

.toast-notification.vl {
    /* Style standard - utilise les couleurs par défaut */
    position: relative;
    overflow: hidden;
}

.toast-notification.vl .toast-icon {
    color: #28a745;
    font-size: 1.25rem;
    font-style: normal;
}

.toast-notification.vl .toast-message {
    color: #333;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

/* =========================== */
/* Easter egg Alert (gif)      */
/* =========================== */

.toast-notification.alert {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
    border-left: 4px solid #FF4757 !important;
    color: #2F2F2F;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
    position: relative;
    overflow: hidden;
}

.toast-notification.alert .toast-icon {
    color: #FF4757;
    font-size: 1.25rem;
    font-style: normal;
    animation: alertPulse 1.5s ease-in-out infinite;
}

.toast-notification.alert .toast-message {
    color: #2F2F2F;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

@keyframes alertPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

/* Pluie d'alertes */
.toast-notification.alert .alert-rain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

.toast-notification.alert .alert-drop {
    position: absolute;
    top: -20%;
    left: var(--left, 50%);
    font-size: var(--size, 1.2rem);
    animation-name: alertFall;
    animation-duration: var(--fall-duration, 6s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: var(--fall-delay, 0s);
    opacity: 0;
    transform: rotate(0deg);
    will-change: top, opacity, transform;
    filter: drop-shadow(0 2px 1px rgba(255, 71, 87, 0.2));
}

@keyframes alertFall {
    0% {
        top: -20%;
        opacity: 0;
        transform: rotate(0deg);
    }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% {
        top: 110%;
        opacity: 0;
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast-notification.alert .alert-drop { animation: none !important; opacity: 0.25; }
    .toast-notification.alert .toast-icon { animation: none !important; }
}

/* =========================== */
/* Easter egg Ordinateur (59)  */
/* =========================== */

.toast-notification.computer {
    background: linear-gradient(135deg, #ECE8FF 0%, #E8DFFB 100%);
    border-left: 4px solid #8A7CCF !important;
    color: #2D3445;
    box-shadow: 0 8px 22px rgba(138,124,207,.18);
    position: relative;
    overflow: hidden;
}

.toast-notification.computer .toast-icon {
    color: #8A7CCF;
    font-size: 1.25rem;
    font-style: normal;
    animation: computerGlow 2s ease-in-out infinite;
}

.toast-notification.computer .toast-message {
    color: #2D3445;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

@keyframes computerGlow {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

/* Pluie d'ordinateurs */
.toast-notification.computer .computer-rain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

.toast-notification.computer .computer-drop {
    position: absolute;
    top: -20%;
    left: var(--left, 50%);
    font-size: var(--size, 1.2rem);
    animation-name: computerFall;
    animation-duration: var(--fall-duration, 6s);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-delay: var(--fall-delay, 0s);
    opacity: 0;
    transform: rotate(0deg);
    will-change: top, opacity, transform;
    filter: drop-shadow(0 2px 1px rgba(138, 124, 207, 0.2));
}

@keyframes computerFall {
    0% {
        top: -20%;
        opacity: 0;
        transform: rotate(0deg);
    }
    10% { opacity: 0.9; }
    90% { opacity: 0.9; }
    100% {
        top: 110%;
        opacity: 0;
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .toast-notification.computer .computer-drop { animation: none !important; opacity: 0.25; }
    .toast-notification.computer .toast-icon { animation: none !important; }
}