/* Анімаційні рамки для фото */
.gallery-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    margin: 10px;
}

/* Рамка 1: Пульсуюча синьо-жовта */
.frame-pulse {
    position: relative;
    padding: 8px;
    background: linear-gradient(45deg, #0057b7, #ffd700, #0057b7);
    background-size: 400% 400%;
    border-radius: 20px;
    animation: pulse-border 3s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% {
        background-position: 0% 50%;
        transform: scale(1);
    }
    50% {
        background-position: 100% 50%;
        transform: scale(1.02);
    }
}

/* Рамка 2: Обертальна */
.frame-rotate {
    position: relative;
    padding: 4px;
    background: conic-gradient(from 0deg, #0057b7, #ffd700, #0057b7, #ffd700, #0057b7);
    border-radius: 20px;
    animation: rotate-border 4s linear infinite;
}

@keyframes rotate-border {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.frame-rotate img {
    border-radius: 16px;
}

/* Рамка 3: Мерехтлива */
.frame-twinkle {
    position: relative;
    padding: 6px;
    background: 
        radial-gradient(circle at 20% 20%, #0057b7, transparent 50%),
        radial-gradient(circle at 80% 80%, #ffd700, transparent 50%),
        radial-gradient(circle at 40% 40%, #0057b7, transparent 50%),
        radial-gradient(circle at 60% 60%, #ffd700, transparent 50%);
    background-size: 200% 200%;
    border-radius: 18px;
    animation: twinkle-border 2s ease-in-out infinite alternate;
}

@keyframes twinkle-border {
    0% {
        background-position: 0% 0%;
        opacity: 0.8;
    }
    100% {
        background-position: 100% 100%;
        opacity: 1;
    }
}

/* Рамка 4: Хвиляста */
.frame-wave {
    position: relative;
    padding: 5px;
    background: linear-gradient(90deg, #0057b7, #ffd700, #0057b7);
    background-size: 200% 100%;
    border-radius: 20px;
    animation: wave-border 2s ease-in-out infinite;
}

@keyframes wave-border {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Рамка 5: Неонова */
.frame-neon {
    position: relative;
    padding: 4px;
    border-radius: 20px;
    background: transparent;
    box-shadow: 
        0 0 10px #0057b7,
        0 0 20px #0057b7,
        0 0 30px #ffd700,
        inset 0 0 10px rgba(0, 87, 183, 0.3);
    animation: neon-pulse 2s ease-in-out infinite alternate;
}

@keyframes neon-pulse {
    from {
        box-shadow: 
            0 0 10px #0057b7,
            0 0 20px #0057b7,
            0 0 30px #ffd700,
            inset 0 0 10px rgba(0, 87, 183, 0.3);
    }
    to {
        box-shadow: 
            0 0 15px #0057b7,
            0 0 25px #0057b7,
            0 0 35px #ffd700,
            0 0 45px #ffd700,
            inset 0 0 15px rgba(0, 87, 183, 0.5);
    }
}

/* Рамка 6: Глітч ефект */
.frame-glitch {
    position: relative;
    padding: 3px;
    border-radius: 20px;
    background: linear-gradient(45deg, #0057b7, #ffd700, #0057b7);
    animation: glitch-border 3s ease-in-out infinite;
}

@keyframes glitch-border {
    0%, 100% {
        filter: hue-rotate(0deg);
        transform: translateX(0);
    }
    25% {
        filter: hue-rotate(90deg);
        transform: translateX(-2px);
    }
    50% {
        filter: hue-rotate(180deg);
        transform: translateX(2px);
    }
    75% {
        filter: hue-rotate(270deg);
        transform: translateX(-1px);
    }
}

/* Рамка 7: 3D ефект */
.frame-3d {
    position: relative;
    padding: 8px;
    border-radius: 20px;
    background: 
        linear-gradient(145deg, #0057b7, #003d82),
        linear-gradient(45deg, #ffd700, #ffed4e);
    background-blend-mode: overlay;
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: threed-rotate 6s ease-in-out infinite;
}

@keyframes threed-rotate {
    0%, 100% {
        transform: rotateY(0deg) rotateX(0deg);
    }
    25% {
        transform: rotateY(10deg) rotateX(5deg);
    }
    50% {
        transform: rotateY(0deg) rotateX(10deg);
    }
    75% {
        transform: rotateY(-10deg) rotateX(5deg);
    }
}

/* Рамка 8: Частинки */
.frame-particles {
    position: relative;
    padding: 6px;
    border-radius: 20px;
    background: 
        radial-gradient(circle at 10% 20%, #0057b7 2px, transparent 2px),
        radial-gradient(circle at 30% 40%, #ffd700 2px, transparent 2px),
        radial-gradient(circle at 50% 60%, #0057b7 2px, transparent 2px),
        radial-gradient(circle at 70% 80%, #ffd700 2px, transparent 2px),
        radial-gradient(circle at 90% 10%, #0057b7 2px, transparent 2px);
    background-size: 50px 50px;
    animation: particles-move 4s linear infinite;
}

@keyframes particles-move {
    0% {
        background-position: 0 0, 25px 25px, 50px 50px, 75px 75px, 100px 100px;
    }
    100% {
        background-position: 50px 50px, 75px 75px, 100px 100px, 125px 125px, 150px 150px;
    }
}

/* Рамка 9: Морські хвилі */
.frame-ocean {
    position: relative;
    padding: 7px;
    border-radius: 20px;
    background: 
        linear-gradient(90deg, 
            transparent 0%, 
            #0057b7 20%, 
            #ffd700 40%, 
            #0057b7 60%, 
            #ffd700 80%, 
            transparent 100%);
    background-size: 200% 100%;
    animation: ocean-wave 3s ease-in-out infinite;
}

@keyframes ocean-wave {
    0% {
        background-position: -200% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

/* Рамка 10: Зоряне небо */
.frame-stars {
    position: relative;
    padding: 5px;
    border-radius: 20px;
    background: 
        radial-gradient(circle at 20% 30%, #ffd700 1px, transparent 1px),
        radial-gradient(circle at 40% 70%, #ffd700 1px, transparent 1px),
        radial-gradient(circle at 60% 20%, #ffd700 1px, transparent 1px),
        radial-gradient(circle at 80% 50%, #ffd700 1px, transparent 1px),
        radial-gradient(circle at 30% 80%, #ffd700 1px, transparent 1px),
        #0057b7;
    background-size: 100px 100px;
    animation: stars-twinkle 2s ease-in-out infinite;
}

@keyframes stars-twinkle {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* Внутрішній контент рамок */
.frame-content {
    border-radius: 15px;
    overflow: hidden;
    background: white;
}

/* Адаптація для мобільних */
@media (max-width: 768px) {
    .gallery-image-container {
        margin: 5px;
    }
    
    .frame-pulse,
    .frame-rotate,
    .frame-twinkle,
    .frame-wave,
    .frame-neon,
    .frame-glitch,
    .frame-3d,
    .frame-particles,
    .frame-ocean,
    .frame-stars {
        padding: 3px;
        border-radius: 15px;
    }
}

/* Додаткові стилі для покращення вигляду */
.gallery-item {
    transition: transform 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.frame-type-selector {
    text-align: center;
    margin: 20px 0;
    padding: 15px;
    background: linear-gradient(135deg, #0057b7, #003d82);
    border-radius: 10px;
}

.frame-type-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.frame-btn {
    padding: 8px 16px;
    border: 2px solid #ffd700;
    background: transparent;
    color: #ffd700;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.frame-btn:hover,
.frame-btn.active {
    background: #ffd700;
    color: #0057b7;
    transform: scale(1.05);
}

.frame-badge {
    display: inline-block;
    padding: 4px 8px;
    background: linear-gradient(135deg, #0057b7, #003d82);
    color: #ffd700;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    margin-top: 5px;
}