/* Enhanced Gold Frame Styles with Advanced Interactivity */

.gold-frame {
    border: 8px solid transparent !important;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(45deg,
            #B8860B 0%,
            #DAA520 15%,
            #FFD700 30%,
            #FFF8DC 45%,
            #FFD700 55%,
            #DAA520 70%,
            #B8860B 85%,
            #8B7355 100%) border-box !important;
    padding: 28px !important;
    position: relative;
    z-index: 2;
    border-radius: 10px !important;
    box-shadow:
        inset 0 0 15px rgba(255, 215, 0, 0.2),
        inset 0 0 30px rgba(255, 248, 220, 0.1),
        0 0 25px rgba(212, 175, 55, 0.3),
        0 8px 25px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 215, 0, 0.2) !important;
    filter: brightness(1.04) contrast(1.08) saturate(1.05) !important;
    --sparkle-opacity: 0;
    --glow-intensity: 0.3;
    --border-animation-speed: 8s;
    /* Custom properties for dynamic control */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    will-change: transform, opacity;
}

/* Interactive border animation */
.gold-frame::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    background:
        linear-gradient(45deg,
            rgba(255, 215, 0, var(--glow-intensity)) 0%,
            rgba(218, 165, 32, calc(var(--glow-intensity) * 0.7)) 20%,
            rgba(255, 255, 220, calc(var(--glow-intensity) * 0.5)) 40%,
            rgba(255, 248, 220, calc(var(--glow-intensity) * 0.8)) 60%,
            rgba(218, 165, 32, calc(var(--glow-intensity) * 0.7)) 80%,
            rgba(255, 215, 0, var(--glow-intensity)) 100%);
    border-radius: 16px;
    z-index: -1;
    filter: blur(1px);
    animation: dynamicGlow var(--border-animation-speed) infinite ease-in-out;
    transition: all 0.4s ease-out;
}

/* Animated corner decorations */
.gold-frame::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.6) 0%, transparent 25%),
        radial-gradient(circle at 85% 15%, rgba(255, 248, 220, 0.4) 0%, transparent 20%),
        radial-gradient(circle at 15% 85%, rgba(255, 255, 255, 0.5) 0%, transparent 22%),
        radial-gradient(circle at 85% 85%, rgba(255, 248, 220, 0.45) 0%, transparent 18%);
    opacity: var(--sparkle-opacity);
    animation: cornerSparkles 4s infinite ease-in-out;
    mix-blend-mode: soft-light;
    border-radius: 8px;
    pointer-events: none;
}

/* Floating light particles */
.gold-frame {
    --particle-1-x: 20%;
    --particle-1-y: 30%;
    --particle-2-x: 70%;
    --particle-2-y: 60%;
    --particle-3-x: 40%;
    --particle-3-y: 80%;
}

.gold-frame:nth-child(odd) {
    --particle-1-x: 25%;
    --particle-2-x: 75%;
    --particle-3-x: 45%;
}

/* Hover interactions */
.gold-frame:hover {
    --glow-intensity: 0.8;
    --border-animation-speed: 3s;
    --sparkle-opacity: 0.7;
    transform: scale(1.02) translateY(-2px);
    box-shadow:
        inset 0 0 20px rgba(255, 215, 0, 0.4),
        inset 0 0 40px rgba(255, 248, 220, 0.2),
        0 0 40px rgba(212, 175, 55, 0.6),
        0 15px 35px rgba(0, 0, 0, 0.25),
        0 0 0 2px rgba(255, 215, 0, 0.4) !important;
    filter: brightness(1.08) contrast(1.12) saturate(1.15) !important;
}

/* Click/Active interaction */
.gold-frame:active {
    transform: scale(0.98) translateY(1px);
    transition: all 0.15s ease-out;
}

/* Focus interaction for accessibility */
.gold-frame:focus {
    outline: none;
    --glow-intensity: 0.6;
    --sparkle-opacity: 0.5;
}

/* Advanced animations */
@keyframes dynamicGlow {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1) rotate(0deg);
    }

    25% {
        opacity: 0.8;
        transform: scale(1.005) rotate(0.5deg);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.01) rotate(0deg);
    }

    75% {
        opacity: 0.7;
        transform: scale(1.005) rotate(-0.5deg);
    }
}

@keyframes cornerSparkles {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.8) rotate(0deg);
    }

    20% {
        opacity: 0.4;
        transform: scale(1.1) rotate(10deg);
    }

    40% {
        opacity: 0.7;
        transform: scale(1.3) rotate(-5deg);
    }

    60% {
        opacity: 0.5;
        transform: scale(1.0) rotate(15deg);
    }

    80% {
        opacity: 0.3;
        transform: scale(0.9) rotate(-10deg);
    }
}

/* Floating particles effect */
.gold-frame:hover::before {
    animation: hoverPulse 1.5s ease-out infinite;
}

@keyframes hoverPulse {

    0%,
    100% {
        filter: blur(1px) brightness(1);
        transform: scale(1);
    }

    50% {
        filter: blur(0.5px) brightness(1.2);
        transform: scale(1.02);
    }
}

/* Breathing effect when not hovering */
@keyframes frameBreathing {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1.04) saturate(1.05);
    }

    50% {
        transform: scale(1.005);
        filter: brightness(1.06) saturate(1.08);
    }
}

.gold-frame:not(:hover) {
    animation: frameBreathing 6s infinite ease-in-out;
}

/* Mouse-following glow effect */
.gold-frame:hover::before {
    background:
        radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255, 215, 0, 0.8) 0%,
            rgba(255, 215, 0, 0.4) 30%,
            transparent 60%),
        linear-gradient(45deg,
            rgba(255, 215, 0, var(--glow-intensity)) 0%,
            rgba(218, 165, 32, calc(var(--glow-intensity) * 0.7)) 20%,
            rgba(255, 255, 220, calc(var(--glow-intensity) * 0.5)) 40%,
            rgba(255, 248, 220, calc(var(--glow-intensity) * 0.8)) 60%,
            rgba(218, 165, 32, calc(var(--glow-intensity) * 0.7)) 80%,
            rgba(255, 215, 0, var(--glow-intensity)) 100%);
}

/* Frame visibility animation */
.gold-frame.frame-visible {
    animation: frameAppear 1s ease-out forwards;
}

@keyframes frameAppear {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
        filter: brightness(0.8) saturate(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0px);
        filter: brightness(1.04) saturate(1.05);
    }
}

/* Dynamic particle positions */
.gold-frame::after {
    background:
        radial-gradient(circle at var(--particle-1-x, 15%) var(--particle-1-y, 15%),
            rgba(255, 255, 255, 0.6) 0%, transparent 25%),
        radial-gradient(circle at var(--particle-2-x, 85%) var(--particle-2-y, 15%),
            rgba(255, 248, 220, 0.4) 0%, transparent 20%),
        radial-gradient(circle at var(--particle-3-x, 15%) var(--particle-3-y, 85%),
            rgba(255, 255, 255, 0.5) 0%, transparent 22%),
        radial-gradient(circle at 85% 85%,
            rgba(255, 248, 220, 0.45) 0%, transparent 18%);
    transition: background 0.3s ease-out;
}

/* Touch feedback for mobile */
.gold-frame.touching {
    transform: scale(1.01);
    --glow-intensity: 0.9;
    --sparkle-opacity: 0.8;
}

/* Loading shimmer effect */
@keyframes frameShimmer {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 100% 0;
    }
}

.gold-frame::before {
    background-size: 200% 100%;
    animation:
        dynamicGlow var(--border-animation-speed) infinite ease-in-out,
        frameShimmer 3s infinite linear;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {

    .gold-frame,
    .gold-frame::before,
    .gold-frame::after {
        animation: none !important;
        transition: opacity 0.3s ease-out !important;
    }

    .gold-frame:hover {
        --sparkle-opacity: 0.3;
        --glow-intensity: 0.5;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .gold-frame {
        border: 8px solid #FFD700 !important;
        background: white !important;
        box-shadow: 0 0 0 2px #000000 !important;
    }
}

/* Smooth and elegant animations */
@keyframes subtleGlow {

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

    50% {
        opacity: 0.8;
        transform: scale(1.005);
    }
}

@keyframes gentleSparkle {

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

    25% {
        opacity: 0.3;
        transform: translateY(-2px) scale(1.05);
    }

    50% {
        opacity: 0.6;
        transform: translateY(-1px) scale(1.1);
    }

    75% {
        opacity: 0.4;
        transform: translateY(-3px) scale(1.02);
    }
}

@keyframes hoverGlow {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }

    100% {
        opacity: 0.9;
        transform: scale(1.01);
    }
}

@keyframes hoverSparkle {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }

    100% {
        opacity: 0.4;
        transform: scale(1.02);
    }
}

/* Simplified ornamental texture overlay */
.gold-frame {
    background-image:
        linear-gradient(white, white),
        linear-gradient(45deg,
            #B8860B 0%,
            #DAA520 15%,
            #FFD700 30%,
            #FFF8DC 45%,
            #FFD700 55%,
            #DAA520 70%,
            #B8860B 85%,
            #8B7355 100%) !important;
    background-clip: padding-box, border-box !important;
    background-size: auto, auto !important;
    background-repeat: no-repeat, no-repeat !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gold-frame {
        border: 8px solid transparent !important;
        padding: 20px !important;
        border-radius: 10px !important;
    }

    .gold-frame::before {
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        border-radius: 14px;
    }
}