/* The Container */
.warning-icon {
    width: 140px;
    height: 140px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Push content down to sit visually in the center of the triangle */
    padding-top: 20px;
    box-sizing: border-box;
}

/* 
   Using an SVG background allows for perfect rounded corners.
   We apply this same image to the ::before (pulse) and ::after (solid) layers.
   
   The data-uri below draws a triangle with stroke-linejoin='round' 
   to create the smooth corners.
*/
.warning-icon::before,
.warning-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    /* SVG Data URI: A triangle with thick rounded strokes */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 15 L85 80 L15 80 Z' fill='%23FFC107' stroke='%23FFC107' stroke-width='15' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 1. The Pulse Effect (Background Layer) */
.warning-icon::before {
    z-index: 0;
    animation: pulse-smooth 2s infinite;
}

/* 2. The Solid Triangle (Middle Layer) */
.warning-icon::after {
    z-index: 1;
}

/* 3. The Exclamation Mark Styling (Front Layer) */
.exclamation-line, 
.exclamation-dot {
    z-index: 2;
    /* User Request: Keep exclamation white */
    background-color: #ffffff; 
    /* Added a tiny shadow so it doesn't disappear if it swings too far */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); 
}

.exclamation-line {
    width: 12px;
    height: 42px;
    border-radius: 6px;
    margin-bottom: 8px;
    transform-origin: top center;
    animation: dangle 2.5s ease-in-out infinite;
}

.exclamation-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: dot-pulse 2.5s infinite;
}

/* --- ANIMATIONS --- */

/* 1. Pulse for the smooth triangle */
@keyframes pulse-smooth {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* 2. Swinging motion */
@keyframes dangle {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(10deg); }
    30% { transform: rotate(-8deg); }
    45% { transform: rotate(4deg); }
    60% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* 3. Dot breathing */
@keyframes dot-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.85); }
}