/*
Theme Name: AYOW Custom Theme
Author: Javier Díaz Neira
Author URI: https://javierdiazneira.com
Description: Child theme personalizado para hacer retoques a la web Ayoworld
Version: 1.0 
Template: blocksy
*/

@import url('../blocksy/style.css');

:root{
    --ehm-font-family: 'Open Sans', sans-serif;
    --ehm-input-width: 60vw;
    --ehm-form-font-size: clamp(20px, 2vw, 90px);
    --ehm-ayow-logo-with: 300px;
    --ehm-white: #f0f0f0;
    --ehm-message-margin: 1em;
}

.ehm-body, .ehm-backdrop-filter{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    overflow: hidden;
}

.ehm-body{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ehm-font-family);
    background: url('./media/exclusive-background.jpeg') no-repeat center/cover;
}

.ehm-backdrop-filter{
    backdrop-filter: grayscale(1) brightness(0.5);
    pointer-events: none;
    z-index: 0;
}

.ayow-logo-container{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
}

.ayow-logo {
    fill: var(--ehm-white);
    width: var(--ehm-ayow-logo-with);
}

.ehm-form-container{
    display: flex;
    flex-direction: column;
    width: var(--ehm-input-width);
    font-size: var(--ehm-form-font-size);
    color: var(--ehm-white);
    z-index: 100;
}

#emh_passwd{
    width: 100%;
	text-align: center;
	font-size: 1em;
	background: none;
    border: none;
	outline: none;
	border-bottom: 1px solid var(--ehm-white);
    color: var(--ehm-white);
	transition: 0.2s;
	border-radius: 0;
}

#emh_passwd::placeholder{
    color: var(--ehm-white);
    font-style: italic;

}

#emh_passwd.wrong-passwd{
    animation: horizontal-shaking;
    animation-duration: 0.25s;
    animation-iteration-count: 1;
}

.ehm-form-message{
    position: relative;
    font-style: italic;
    font-size: 0.6em;
    margin-left: var(--ehm-message-margin);
}

.ehm-form-message::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(calc(-1 * var(--ehm-message-margin)), -50%);
    border-radius: 100%;
    width: 0.4em;
    aspect-ratio: 1/1;
    background-color: var(--ehm-white);
}

.woocommerce-loop-product__title:hover{
	text-decoration: underline;
}

.ct-swap{
	display: none;
}

.wpzoom-secondary-image-container{
	display: flex;
	pointer-events: none;
}

.width-100{
	width: 100% !important;
}

footer li{
	font-size: 11px !important; 
}

.noise-ayow {
    position: fixed;
	top: 50%;
	left: 50%;
	width: 300vh;
	height: 300vh;
	opacity: .1 !important;
    transform: translate(-50%, -50%);
    background: url(https://parkworldshop.com/wp-content/uploads/2025/01/noise.png);
	pointer-events: none;
    animation: noise-ayow 1.2s steps(3) infinite;
	z-index: 99999;
    filter: grayscale(1);
}

@keyframes horizontal-shaking {
    0% { transform: translateX(0) }
    25% { transform: translateX(0.75vw) }
    50% { transform: translateX(-0.75vw) }
    75% { transform: translateX(0.75vw) }
    100% { transform: translateX(0) }
}

@keyframes noise-ayow {
    0% { transform: translate3d(1%, -1%, 0) translate(-50%, -50%)}
    10% { transform: translate3d(-5%, -2%, 0) translate(-50%, -50%)}
    20% { transform: translate3d(10%, 5%, 0) translate(-50%, -50%)}
    30% { transform: translate3d(5%, -11%, 0) translate(-50%, -50%)}
    40% { transform: translate3d(-12%, -5%, 0) translate(-50%, -50%)}
    50% { transform: translate3d(10%, 9%, 0) translate(-50%, -50%)}
    60% { transform: translate3d(15%, 0, 0) translate(-50%, -50%)}
    70% { transform: translate3d(-10%, 8%, 0) translate(-50%, -50%)}
    80% { transform: translate3d(10%, 2%, 0) translate(-50%, -50%)}
    90% { transform: translate3d(1%, 5%, 0) translate(-50%, -50%)}
    100% { transform: translate3d(0, 8%, 0) translate(-50%, -50%)}
}

@media (max-width: 768px) {
    :root{
        --ehm-input-width: 75vw;
        --ehm-ayow-logo-with: 40vw;
    }
}