/*
Theme Name: TT5 x Keny.
Template: twentytwentyfive

0. WP RESET & BUGS
1. CLASSES
2. SETTINGS
3. ANIMATIONS
*/

/* -_-_- 0. WP RESET & BUGS -_-_- */

/* logo svg compability */
.custom-logo{
	width:160px;}

/* remove focus styles */
:where(.wp-site-blocks *:focus) {
    outline-style: none !important;}




/* -_-_- 1. CLASSES -_-_- */


/* color - base  */
.base {
	color: var(--wp--preset--color--base);}

/* color - contrast  */
.contrast {
	color: var(--wp--preset--color--contrast);}

/* color - accent-1  */
.accent-1 {
	color: var(--wp--preset--color--accent-1);}

/* color - accent-2  */
.accent-2 {
	color: var(--wp--preset--color--accent-2);}

/* color - accent-3  */
.accent-3 {
	color: var(--wp--preset--color--accent-3);}

/* color - accent-4  */
.accent-4 {
	color: var(--wp--preset--color--accent-4);}

/* color - accent-5  */
.accent-5 {
	color: var(--wp--preset--color--accent-5);}

/* color - accent-6  */
.accent-6 {
	color: var(--wp--preset--color--accent-6);}

/* color - accent-7  */
.accent-7 {
	color: var(--wp--preset--color--accent-7);}


/* sticky header */
header.wp-block-template-part {
position: fixed;
width: 100%;
z-index:99999;
	top:0px;
}

//fog background effect
#fog {

}
.vanta-canvas {
	position: fixed !important;
	z-index: -1 !important; 
	top: 0px; 
	left: 0px; 
	width: 100vw !important; 
	height: 100vh !important;
	
}
/* shine effect */
.shine {
	filter: brightness(1.4);
  -webkit-mask-image: linear-gradient(-45deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
    animation: shine 6s infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;}
@-webkit-keyframes shine {
  from {-webkit-mask-position: 180%;}
  to {-webkit-mask-position: -80%;}}

/* greyscale filter */

.grey {filter: grayscale(100%) brightness(0.5);}}

/* -_-_- 2. SETTINGS -_-_- */

/* copy of wp default css media query */
@media (min-width: 800px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;}

    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;}}

/* portfolio grid - wide width on small screens */
@media screen and (min-width: 1921px){
.has-global-padding .alignfull{
	margin-right: auto;
    margin-left: auto;
	max-width: 1880px;}}
	
/* portfolio grid - wide width on small screens */
@media screen and (max-width: 1200px){
.wide-screen-mobile{ padding-right:var(--wp--style--root--padding-right);
	padding-left:var(--wp--style--root--padding-left)}}

/* portfolio grid - full width on small screens */
@media screen and (max-width: 1000px){
.full-screen-mobile{
    padding-top: 0;
    padding-bottom: 0;
    margin-left: calc(-100vw / 2 + 100% / 2) !important;
    margin-right: calc(-100vw / 2 + 100% / 2) !important;
    max-width: 100vw;}}

/* portfolio grid - 2 colums on small screens */
@media screen and (max-width: 440px){
	.wp-container-core-group-is-layout-a50d2c99,
	.wp-container-core-group-is-layout-88b8d14e,
	.wp-container-core-group-is-layout-ac6723e0
	{
	 grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); }}

@media screen and (max-width: 440px){
	.wp-container-core-group-is-layout-8c229696{
	 grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));}}

@media screen and (max-width: 440px){
	.wp-container-core-group-is-layout-e64ade09{
	 grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));}}

/* mobile nav icons customization */
button.wp-block-navigation__responsive-container-open svg {
	width: 40px;
	height: 40px;}

button.wp-block-navigation__responsive-container-close svg {
	width: 40px;
	height: 40px;	}

/*mobile nav list to left*/
@media screen and (max-width: 799px){
.wp-block-navigation.items-justified-left {
	--wp--preset--font-size--large: var(--wp--preset--font-size--xx-large);}}

/* nav hover color */
.wp-block-navigation a:hover {
	color: var(--wp--preset--color--contrast) !important;}

/* card hover bg color */
.hover-bg:hover {
	background-color: var(--wp--preset--color--base) !important;}

/* logo hover color invert */
.hover-invert:hover {
	filter: invert(1);}
}

/* body padding - small */
@media screen and (max-width: 560px) {
  body.has-modal-open{ padding-right: 0.5rem !important;
      padding-left: 0.5rem !important;}}

@media screen and (max-width: 560px) {
  body{  --wp--style--root--padding-right: 0.5rem !important;
      --wp--style--root--padding-left: 0.5rem !important;}}

/* body padding - medium */
@media screen and (min-width: 561px) and (max-width: 1025px) {
  body.has-modal-open{ padding-right: 0.8rem !important;
      padding-left: 0.8rem !important;}}

@media screen and (min-width: 561px) and (max-width: 1025px) {
  body{  --wp--style--root--padding-right: 0.8rem !important;
      --wp--style--root--padding-left: 0.8rem !important;}}

/* neutralize the wp default for 600px */
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;}
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;}}

/* scrollbar customization */
  :root{
  scrollbar-width: thin;
  scrollbar-color: var(--wp--preset--color--accent-2) var(--wp--preset--color--accent-6);
  scroll-behavior: smooth;}


/* selection customization */
::-moz-selection {
	color: var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-3);}
::selection {
	color: var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-3);}

/* disable horizontal scroll */
html, body {
    max-width: 100%;
    overflow-x: hidden;}

/* custom cursor */
html { cursor: url(https://keny.studio/wp-content/uploads/2025/07/cursor-default2.png), default; }
a { cursor: url(https://keny.studio/wp-content/uploads/2025/07/cursor-pointer2.png) 16 16, default;}
input{ cursor: url(https://keny.studio/wp-content/uploads/2025/07/cursor-text3.png) 16 16, default;}
textarea{ cursor: url(https://keny.studio/wp-content/uploads/2025/07/cursor-text3.png) 16 16, default;}
.wp-block-button__link { cursor: url(https://keny.studio/wp-content/uploads/2025/07/cursor-pointer2.png) 16 16, default;}
input[type=submit]{ cursor: url(https://keny.studio/wp-content/uploads/2025/07/cursor-send2.png) 16 16, default;}



/* contact form */
#contact-form {
	padding-top:0px;
	margin-top:0px;
}
input, textarea, label {
  width: 100%;
  display: block;}

input, textarea {
  background-color: transparent;
  padding: 0.8rem 0 0.8rem 0;
  margin-bottom: 0rem;
  border: 2px solid var(--wp--preset--color--accent-2);	
  border-radius: 16px;
  color: var(--wp--preset--color--contrast);
  resize: none;
  font-size: var(--wp--preset--font-size--medium);
  font-family: var(--wp--preset--font-family--ysabeau-office);}

label {
	color: var(--wp--preset--color--base);
	padding-top:16px;
	padding-bottom:8px;}

textarea  {
    box-sizing: border-box;
    padding-left: 16px;}

textarea:hover  {
   background-color:  var(--wp--preset--color--base);}

input[type="text"]  {
    box-sizing: border-box;
    padding-left: 16px;}

input[type="text"]:hover  {
   background-color:  var(--wp--preset--color--base);}

input[type="submit"] {
background-color: transparent;
	color: var(--wp--preset--color--contrast);
	border: 2px solid var(--wp--preset--color--accent-3);
	border-radius:32px;
	  transition: all 180ms ease;}

input[type="submit"]:hover {
	color: var(--wp--preset--color--accent-1);
	background-color: var(--wp--preset--color--contrast);}

::placeholder {color: var(--wp--preset--color--accent-3);
	font-size: var(--wp--preset--font-size--medium);}

#error, #success-msg {
  width: 40vw;
  margin: 0.125rem 0;
  font-size: var(--wp--preset--font-size--medium);
  text-transform: uppercase;
  transition-delay: 1s;}




/* mailpoet newsletter*/
.mailpoet_form {
	font-family: var(--wp--preset--font-family--ysabeau-office) !important;
		line-height:1.2 !important;}

/* input wrapper (label + input) */
.mailpoet_paragraph {
  line-height:20px;
  margin-bottom: 20px;}

/* labels */
.mailpoet_segment_label,
.mailpoet_text_label,
.mailpoet_textarea_label,
.mailpoet_select_label,
.mailpoet_radio_label,
.mailpoet_checkbox_label,
.mailpoet_list_label,
.mailpoet_date_label {
  display:block;
	line-height:1.2 !important;}

/* inputs */
.mailpoet_text,
.mailpoet_textarea,
.mailpoet_select,
.mailpoet_date_month,
.mailpoet_date_day,
.mailpoet_date_year,
.mailpoet_date {
  display:block;
	line-height:1.2 !important;}

.mailpoet_text,
.mailpoet_textarea {
  width: 200px;
	  font-size: var(--wp--preset--font-size--medium) !important;
  font-family: var(--wp--preset--font-family--ysabeau-office) !important;
	  padding: 0.8rem 0 0.8rem 0 !important;
	    padding-left: 16px !important; 
	line-height:1.2 !important;
  background-color:  transparent}

.mailpoet_text:hover  {
    background-color:  var(--wp--preset--color--accent-6) !important;}

.mailpoet_submit {
	  font-size: var(--wp--preset--font-size--medium) !important;
    font-family: var(--wp--preset--font-family--ysabeau-office) !important;
	border: 2px solid var(--wp--preset--color--accent-3) !important;
	font-weight:600 !important;
	line-height:1.2 !important;}

@media screen and (max-width: 499px) {
    .mailpoet_form .mailpoet_submit, .mailpoet_form .mailpoet_paragraph, .mailpoet_form .mailpoet_form_paragraph, .mailpoet_form .mailpoet_textarea, .mailpoet_form .mailpoet_text, .mailpoet_form .mailpoet_select, .mailpoet_form .mailpoet_form_image, .mailpoet_form .mailpoet_message, .mailpoet_form .mailpoet_paragraph select {
         font-size: var(--wp--preset--font-size--medium) !important;
        line-height: 1.2 !important;}}

/* logo slider */
.slider {margin:0px;
    width: 100%;
    height: var(--height);
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 3% 97%,
        transparent);
	filter: grayscale(100%) brightness(0.6);}

.slider .list {
    display: flex;
    width: 100%;
    min-width: calc(var(--width) * var(--quantity));
    position: relative;}

.slider .list .item {
    width: var(--width);
    height: var(--height);
    position: absolute;
    left: 100%;
    animation: autoRun 30s linear infinite;
    transition: filter 0.5s;
    animation-delay: calc( (30s / var(--quantity)) * (var(--position) - 1) - 30s)!important;}

.slider .list .item img {
    width: 100%;}

@keyframes autoRun {
    from {left: 100%;}
    to {left: calc(var(--width) * -1);}}




/* -_-_- 3. ANIMATIONS -_-_- */


/*fade in2 animation */
.fade-in2 {
    -webkit-animation: fade-in2 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
            animation: fade-in2 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;}

 @-webkit-keyframes fade-in2 {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;}
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;}}
@keyframes fade-in2 {
  0% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;}
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;}}


.pulsate-opacity {
  animation: Pulse-opacity 2s ease 0s infinite normal forwards;
}

@keyframes Pulse-opacity {
  from { opacity: 1; }
  30% { opacity: 0.2; }
  to { opacity: 1; }
}

.pulsate-scale {
  animation: Pulse-scale 3s ease 0s infinite normal forwards;
}

@keyframes Pulse-scale {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.015);
  }

  100% {
    transform: scale(1);
  }
}



.fist-scale {
  animation: fist-scale 6s ease 0s infinite normal forwards;
}

@keyframes fist-scale {
  0% {
    transform: scale(0.5);
  }

 20% {
    transform: scale(1);
  }
	
40% {
    transform: scale(1);
  }
	80% {
    transform: scale(0.5);
  }

  100% {
    transform: scale(0.5);
  }
}


.slide-in{
      animation: slide-in 10s ease 0s infinite normal forwards;
}

 @keyframes slide-in {
  0% {
    
            transform: translateY(50%);
    ;}
	  30% {
    
            transform: translateY(50%);
    ;}
  50% {
    
            transform: translateY(7%);
    }
	  70% {
    
            transform: translateY(5%);
    }
	 100% {

            transform: translateY(50%);
    }
}