/* Background Styles - Coquette Aesthetic */

/* Base background card styles */
.bg-card {
    position: relative;
    overflow: hidden;
}

.bg-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;
    filter: blur(0.5px) brightness(0.9) contrast(1.1);
    z-index: 0;
    transition: opacity 0.4s ease, transform 0.6s ease;
}

.bg-card:hover::before {
    opacity: 0.22;
    transform: scale(1.05);
}

.bg-card>* {
    position: relative;
    z-index: 1;
}

/* Horizontal backgrounds for wide cards */
.bg-horizontal-1::before {
    background-image: url('../assets/fondos/horizontales/1.jpeg');
}

.bg-horizontal-2::before {
    background-image: url('../assets/fondos/horizontales/2.jpeg');
}

.bg-horizontal-3::before {
    background-image: url('../assets/fondos/horizontales/3.jpeg');
}

/* Vertical backgrounds for tall cards */
.bg-vertical-1::before {
    background-image: url('../assets/fondos/verticales/1.jpg');
}

.bg-vertical-2::before {
    background-image: url('../assets/fondos/verticales/2.jpeg');
}

.bg-vertical-3::before {
    background-image: url('../assets/fondos/verticales/3.jpeg');
}

.bg-vertical-4::before {
    background-image: url('../assets/fondos/verticales/4.jpeg');
}

/* Soft overlay for better text readability */
.bg-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(42, 42, 62, 0.85) 0%,
            rgba(26, 26, 46, 0.90) 50%,
            rgba(42, 42, 62, 0.85) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Vintage coquette border effect */
.bg-card-vintage {
    border: 3px solid;
    border-image: linear-gradient(135deg,
            rgba(255, 182, 193, 0.6),
            rgba(221, 160, 221, 0.6),
            rgba(176, 224, 230, 0.6)) 1;
    box-shadow:
        5px 5px 0 rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(255, 192, 203, 0.1);
}

/* Delicate lace-like pattern overlay */
.bg-card-lace::after {
    background:
        linear-gradient(135deg, rgba(42, 42, 62, 0.85) 0%, rgba(26, 26, 46, 0.90) 100%),
        repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.02) 10px,
            rgba(255, 255, 255, 0.02) 20px);
}

/* Soft vignette effect */
.bg-card-vignette::before {
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.4);
}

/* Pastel tint overlays for different sections */
.bg-tint-pink::after {
    background: linear-gradient(135deg,
            rgba(255, 182, 193, 0.08) 0%,
            rgba(42, 42, 62, 0.88) 50%,
            rgba(221, 160, 221, 0.08) 100%);
}

.bg-tint-lavender::after {
    background: linear-gradient(135deg,
            rgba(221, 160, 221, 0.08) 0%,
            rgba(42, 42, 62, 0.88) 50%,
            rgba(176, 224, 230, 0.08) 100%);
}

.bg-tint-mint::after {
    background: linear-gradient(135deg,
            rgba(176, 224, 230, 0.08) 0%,
            rgba(42, 42, 62, 0.88) 50%,
            rgba(152, 251, 152, 0.08) 100%);
}

.bg-tint-peach::after {
    background: linear-gradient(135deg,
            rgba(255, 218, 185, 0.08) 0%,
            rgba(42, 42, 62, 0.88) 50%,
            rgba(255, 182, 193, 0.08) 100%);
}

/* Romantic glow effect */
.bg-card-glow {
    box-shadow:
        5px 5px 0 rgba(0, 0, 0, 0.5),
        0 0 40px rgba(255, 192, 203, 0.15),
        inset 0 0 60px rgba(255, 255, 255, 0.03);
}

/* Subtle texture overlay */
.bg-card-texture::after {
    background-image:
        linear-gradient(135deg, rgba(42, 42, 62, 0.85) 0%, rgba(26, 26, 46, 0.90) 100%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.05"/></svg>');
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .bg-card::before {
        opacity: 0.12;
        filter: blur(1px) brightness(0.85);
    }

    .bg-card:hover::before {
        opacity: 0.18;
    }
}

/* Animation for background on scroll */
@keyframes bgFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.02);
    }
}

.bg-card-animated::before {
    animation: bgFloat 20s ease-in-out infinite;
}

/* Frosted glass effect for modern touch */
.bg-card-frosted {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.bg-card-frosted::after {
    background: linear-gradient(135deg,
            rgba(42, 42, 62, 0.75) 0%,
            rgba(26, 26, 46, 0.80) 50%,
            rgba(42, 42, 62, 0.75) 100%);
}