/* Terminal Cursor Animation */
.terminal-cursor {
    display: inline;
    width: auto;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ========================================
   Image Loading Spinner - Terminal Dots
   ======================================== */

/* Container for loader positioning */
.image-loader-container {
    position: relative;
    display: inline-block;
    width: 100%;
    background: #000;
    min-height: 200px;
}

/* Hide images while loading */
.image-loader-container img[data-loading="true"] {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

/* Show images when loaded */
.image-loader-container img:not([data-loading]) {
    opacity: 1;
}

/* Spinner wrapper - centered absolute positioning */
.image-loader-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
    display: flex;
    gap: 8px;
    align-items: center;
}

.image-loader-spinner.loaded {
    opacity: 0;
}

/* Individual dot styling */
.spinner-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0f0;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.6);
    animation: dotPulse 1.2s ease-in-out infinite;
}

/* Stagger the animation for each dot */
.spinner-dot:nth-child(1) {
    animation-delay: 0s;
}

.spinner-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.spinner-dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* Dot pulse animation with afterglow */
@keyframes dotPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
        box-shadow: 0 0 4px rgba(0, 255, 0, 0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 0 0 20px rgba(0, 255, 0, 1), 0 0 40px rgba(0, 255, 0, 0.6);
    }
}

/* Responsive dot sizes */
@media (max-width: 900px) {
    .spinner-dot {
        width: 10px;
        height: 10px;
    }
    .image-loader-spinner {
        gap: 7px;
    }
}

@media (max-width: 600px) {
    .spinner-dot {
        width: 9px;
        height: 9px;
    }
    .image-loader-spinner {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .spinner-dot {
        width: 8px;
        height: 8px;
    }
    .image-loader-spinner {
        gap: 5px;
    }
}