/**
 * Theme Name:     Hello Elementor Child
 * Author:         Elementor Team
 * Template:       hello-elementor
 * Text Domain:	   hello-elementor-child
 * Description:    Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
 */

@property --g1 { syntax:'<color>'; inherits:false; initial-value:#a8872f; }
@property --g2 { syntax:'<color>'; inherits:false; initial-value:#ae8e33; }
@property --g3 { syntax:'<color>'; inherits:false; initial-value:#b59636; }
@property --g4 { syntax:'<color>'; inherits:false; initial-value:#bd9b3e; } /* Referenz */
@property --g5 { syntax:'<color>'; inherits:false; initial-value:#c6a445; }
@property --g6 { syntax:'<color>'; inherits:false; initial-value:#cfad4c; }

:root{
    --tilt: 19s;
}

.centerFlex {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.rot15 {
	transform: rotate(-15deg);
}

.gold {
    position: relative;
    overflow: hidden;
}

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

.gold::before {
	content: "";
 	position: absolute;
	z-index: 0;
	pointer-events: none;
	inset: -50%;
	background: linear-gradient(
		135deg,
		var(--g1) 0%,
		var(--g2) 10%,
		var(--g3) 18%,
		var(--g4) 26%,
		var(--g5) 33%,
		var(--g6) 36%,
		var(--g5) 39%,
		var(--g3) 47%,
		var(--g2) 57%,
		var(--g4) 67%,
		var(--g5) 75%,
		var(--g3) 84%,
		var(--g2) 92%,
		var(--g1) 100%
	);
	background-size: 200%;
    animation: metalTilt var(--tilt) cubic-bezier(.45,.05,.55,.95) infinite alternate,
		goldMove 12s ease-in-out infinite alternate,
		rotateGradient 15s linear infinite alternate;
}

@keyframes rotateGradient {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-35deg); }
}

@keyframes goldMove {
    0%   { background-position: 5% 10%; }
    50%  { background-position: 25% 5%; }
    100% { background-position: 15% 15%; }
}

@keyframes metalTilt {
    0% {
        --g1:#a8872f;
        --g2:#ae8e33;
        --g3:#b59636;
        --g4:#bd9b3e;
        --g5:#c6a445;
        --g6:#cfad4c;
    }
    50% {
        --g1:#b59636;
        --g2:#bd9b3e;
        --g3:#c6a445;
        --g4:#debb5a;
        --g5:#c6a445;
        --g6:#bd9b3e;
    }
    100% {
        --g1:#cfad4c;
        --g2:#c6a445;
        --g3:#bd9b3e;
        --g4:#b59636;
        --g5:#ae8e33;
        --g6:#a8872f;
    }
}


.goldShimmer::after {
    content: "";
    position: absolute;
	z-index: 0;
	pointer-events: none;
    inset: 0;
    background: linear-gradient(
        75deg,
        transparent 20%,
        rgba(255,255,255,0.0) 21%,
        rgba(255,255,255,0.3) 48%,
        rgba(255,255,255,0.0) 79%,
        transparent 80%
    );
    animation: goldShine 11s ease-in-out infinite;
}

@keyframes goldShine {
    0% { transform: translateX(-120%); }
    2% { transform: translateX(120%); }
    100% { transform: translateX(120%); }
}

@media (max-width: 768px) {
    .gold::before {
        background: var(--g4);
        animation: none;
        transform: none;
    }

    .goldShimmer::after {
        display: none;
    }
}