@import 'contactBtn.css';

.textShadow p {
    transition:
        font-size var(--animSpeed) ease,
        transform var(--animSpeed) ease,
        filter var(--animSpeed) ease,
        text-shadow var(--animSpeed) ease;
}

.textShadow:hover p {
    --shadowColor: var(--highlightTextShadow);

    --x: -0.1rem;
    --y: 0.1rem;

    font-size: 1.6rem;

    transform: 
        translate(
            calc(var(--x) * -2),
            calc(var(--y) * -2)
        );
    font-weight: 800;
        filter:
            drop-shadow(calc(var(--x) * 0.1) calc(var(--y) * 0.1) 0 var(--shadowColor)) 
            drop-shadow(calc(var(--x) * 0.3) calc(var(--y) * 0.3) 0 var(--shadowColor)) 
            drop-shadow(calc(var(--x) * 0.5) calc(var(--y) * 0.5) 0 var(--shadowColor))
            drop-shadow(calc(var(--x) * 0.7) calc(var(--y) * 0.7) 0 var(--shadowColor)) 
            drop-shadow(calc(var(--x) * 1.0) calc(var(--y) * 1.0) 0 var(--shadowColor));



}

.iconShadow svg,
.iconShadow img {
    transition:
        scale var(--animSpeed) ease,
        transform var(--animSpeed) ease,
        filter var(--animSpeed) ease;
}

.iconShadow:hover svg,
.iconShadow:hover img {
    --shadowColor: var(--highlightTextShadow);
    --x: -0.1rem;
    --y: 0.1rem;

    transform: 
        translate(
            calc(var(--x) * -2),
            calc(var(--y) * -2)
        )
        scale(1.2);
    
    filter:
        drop-shadow(calc(var(--x) * 0.1) calc(var(--y) * 0.1) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.3) calc(var(--y) * 0.3) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.5) calc(var(--y) * 0.5) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.7) calc(var(--y) * 0.7) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 1.0) calc(var(--y) * 1.0) 0 var(--shadowColor));

    -webkit-filter:
        drop-shadow(calc(var(--x) * 0.1) calc(var(--y) * 0.1) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.3) calc(var(--y) * 0.3) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.5) calc(var(--y) * 0.5) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.7) calc(var(--y) * 0.7) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 1.0) calc(var(--y) * 1.0) 0 var(--shadowColor));
}

.inputShadow3d input,
.inputShadow3d textarea {
    --animSpeed: 300ms;

    transition:
        scale var(--animSpeed) ease,
        transform var(--animSpeed) ease,
        filter var(--animSpeed) ease;
}

.inputShadow3d input:focus,
.inputShadow3d textarea:focus {
    --shadowColor: var(--highlightShadow);
    --x: -0.04rem;
    --y: 0.1rem;

    transform: 
        translate(
            calc(var(--x) * -10),
            calc(var(--y) * -5)
        );
    
    filter:
        drop-shadow(calc(var(--x) * 0.1) calc(var(--y) * 0.1) 0 var(--shadowColor))
        drop-shadow(calc(var(--x) * 0.2) calc(var(--y) * 0.2) 0 var(--shadowColor))  
        drop-shadow(calc(var(--x) * 0.3) calc(var(--y) * 0.3) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.4) calc(var(--y) * 0.4) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.5) calc(var(--y) * 0.5) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.6) calc(var(--y) * 0.6) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.7) calc(var(--y) * 0.7) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.8) calc(var(--y) * 0.8) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.9) calc(var(--y) * 0.9) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 1.0) calc(var(--y) * 1.0) 0 var(--shadowColor));

    -webkit-filter:
        drop-shadow(calc(var(--x) * 0.1) calc(var(--y) * 0.1) 0 var(--shadowColor))
        drop-shadow(calc(var(--x) * 0.2) calc(var(--y) * 0.2) 0 var(--shadowColor))  
        drop-shadow(calc(var(--x) * 0.3) calc(var(--y) * 0.3) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.4) calc(var(--y) * 0.4) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.5) calc(var(--y) * 0.5) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.6) calc(var(--y) * 0.6) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.7) calc(var(--y) * 0.7) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.8) calc(var(--y) * 0.8) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 0.9) calc(var(--y) * 0.9) 0 var(--shadowColor)) 
        drop-shadow(calc(var(--x) * 1.0) calc(var(--y) * 1.0) 0 var(--shadowColor));
}

.contactForm-dark .inputShadow3d input:focus,
.contactForm-dark .inputShadow3d textarea:focus {
    --shadowColor: var(--dark);
}