/* Placeholder Images using CSS gradients */

/* Hero video placeholder */
.hero-video-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, 
        rgba(212, 175, 55, 0.8) 0%, 
        rgba(26, 26, 26, 0.9) 50%, 
        rgba(212, 175, 55, 0.8) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dance" patternUnits="userSpaceOnUse" width="20" height="20"><circle cx="10" cy="10" r="2" fill="rgba(212,175,55,0.2)"/></pattern></defs><rect width="100" height="100" fill="url(%23dance)"/></svg>');
    z-index: -1;
}

/* Portfolio image placeholder backgrounds - only show when no image */
.portfolio-item:nth-child(1)::before {
    background: linear-gradient(45deg, #ff6b6b, #feca57);
    content: 'Cultural Festival\A2023';
}

.portfolio-item:nth-child(2)::before {
    background: linear-gradient(45deg, #48cae4, #023e8a);
    content: 'Modern Fusion\AChoreography';
}

.portfolio-item:nth-child(3)::before {
    background: linear-gradient(45deg, #f72585, #b5179e);
    content: 'International\ADance Day';
}

.portfolio-item:nth-child(4)::before {
    background: linear-gradient(45deg, #06ffa5, #159957);
    content: 'Dance Workshop\AMaster Class';
}

.portfolio-item:nth-child(5)::before {
    background: linear-gradient(45deg, #fd9843, #ff6b35);
    content: 'Music Video\AChoreography';
}

.portfolio-item:nth-child(6)::before {
    background: linear-gradient(45deg, #8338ec, #3a86ff);
    content: 'Award Ceremony\APerformance';
}



/* Show actual img elements when they exist */
.portfolio-item img {
    opacity: 1 !important;
}

.portfolio-item {
    position: relative;
}

/* About image placeholder - only show when image fails to load */
.about-image img {
    opacity: 1 !important;
}

.about-image::before {
    content: 'Rimal Ali Shah\APortrait Photo';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #d4af37 0%, #f4e4bc 50%, #d4af37 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    white-space: pre;
    border-radius: 10px;
    z-index: -1;
}

.portfolio-item::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    text-align: center;
    white-space: pre;
    z-index: -1;
    border-radius: 10px;
}