/* 
* Creaty Orange Gradient CTA & SVG Animations
* Author: Custom Development
* Version: 1.0
*/

:root {
    /* Culori gradient portocaliu */
    --orange-light: #FF9D2F;
    --orange-medium: #FF7E29;
    --orange-dark: #FF5722;
    
    /* Gradient pentru CTA */
    --orange-gradient: linear-gradient(135deg, var(--orange-light) 0%, var(--orange-dark) 100%);
    --orange-gradient-hover: linear-gradient(135deg, var(--orange-dark) 0%, var(--orange-medium) 100%);
    
    /* Shadow pentru CTA */
    --orange-glow: 0 10px 20px rgba(255, 87, 34, 0.3);
    --orange-glow-hover: 0 15px 30px rgba(255, 87, 34, 0.5);
}

/* Stiluri pentru butonul call-to-action */
.btn-primary {
    background: var(--orange-gradient) !important;
    color: white !important;
    box-shadow: var(--orange-glow) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    background: var(--orange-gradient-hover) !important;
    box-shadow: var(--orange-glow-hover) !important;
    transform: translateY(-3px) !important;
}

/* Animație pentru Turnul Sfatului */
.turnul-sfatului {
    max-width: 100%;
    height: auto;
}

.turnul-sfatului .ceas {
    transform-origin: center;
    animation: rotate-clock 30s linear infinite;
}

.turnul-sfatului .ferestre path {
    animation: glow-window 3s ease-in-out infinite alternate;
}

.turnul-sfatului .acoperis path {
    animation: shine-roof 5s ease-in-out infinite alternate;
}

/* Animație pentru Podul Minciunilor */
.podul-minciunilor {
    max-width: 100%;
    height: auto;
}

.podul-minciunilor .arcada {
    animation: scale-arch 8s ease-in-out infinite alternate;
}

.podul-minciunilor .apa path {
    animation: flow-water 10s linear infinite;
}

.podul-minciunilor .ornamente path {
    animation: shine-ornament 4s ease-in-out infinite alternate;
}

/* Keyframes pentru animații */
@keyframes rotate-clock {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes glow-window {
    0% { opacity: 0.7; fill: #FFD54F; }
    100% { opacity: 1; fill: #FFECB3; }
}

@keyframes shine-roof {
    0% { fill-opacity: 0.8; }
    100% { fill-opacity: 1; }
}

@keyframes scale-arch {
    0% { transform: scaleY(1); }
    100% { transform: scaleY(1.02); }
}

@keyframes flow-water {
    0% { transform: translateX(0); }
    100% { transform: translateX(-20px); }
}

@keyframes shine-ornament {
    0% { fill-opacity: 0.7; }
    100% { fill-opacity: 1; }
}