/*
    Theme name: BuildConnectAchieve
    Theme URI:
    Author: Jonne Tenkula
    Author URI: 
    Description: Theme for digital business card
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: Theme, Template
    Text Domain: BuildConnectAchieve
*/




/* Load fonts */
@font-face {
    font-family: 'Ballet';
    src: url('fonts/Ballet_60pt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Teko';
    src: url('fonts/Teko-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
  
  

body {
  font-family: 'Teko', sans-serif;
}
html{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*** Particles ***/
html,body{ 
	width:100%;
	height:100%;
	background: #000000;
}
canvas{
  display:block;
  cursor:none;
}
#particles-js{
  width: 100%;
  height: 100%;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}


/*** Business Card ***/
/* Top Icons */
.top-icons {
	position: absolute;
	color: #e0f5e9;
	padding: 10px;
	opacity: .6;
	display: none;
}
.top-icons-front {
	right: 0;
}
.top-icons-back {
	left: 0;
}
/* Show on touch devices */
@media (hover: none) and (pointer: coarse) {
	.top-icons {
		display: flex; 
	}
}

/* Front and Back side of the card*/
.front, .back {
  border-radius: 10px;
  cursor: default;
}
.front-content, .back-content {
	display: flex;               /* Enables flexbox */
	flex-direction: column;      /* Stack elements vertically */
	justify-content: center;     /* Centers horizontally */
	align-items: center;         /* Centers vertically */
	height: 100%;                /* Ensure the height fills the container */
	text-align: center;          /* Centers text inside the div */
	border-radius: 10px;

	background:linear-gradient(40deg, 
		#000000, 
		#020202, 
		#040404, 
		#060606, 
		#080808, 
		#101010,
		#1b1b1b,
		#1d1d1d
		);
	background-size: 140% 200%;  /* Animation effects */
	animation: gradientAnimation 10s ease infinite; /* Optional: for a smooth gradient transition */
}
@keyframes gradientAnimation {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Business Card - Front Text Effects */
.front-content {
	font-family: 'Teko', sans-serif;
	font-size: 16pt;
	overflow: hidden;
}

/* Business Card - Main Title Text */
.main-title {
	animation: steam 60s linear infinite;
	letter-spacing: 2px;
	word-spacing: 30px;
}
/* Business Card - Main Title List */
ul.main-title-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	text-align: center;
}
ul.main-title-list li {
	width: 120px;
}
ul.main-title-list li.build {
	text-align: right;
}
ul.main-title-list li.connect {
	text-align: center;
}
ul.main-title-list li.achieve {
	text-align: left;
}



/* Business Card - Border Effects */
.front-content:before, .front-content:after, .back-content:before, .back-content:after {
	content: '';
	position: absolute;
	left: -1px;
	top: -1px;
	background: linear-gradient(90deg, #1b1b1b, #1c1c1c, #3a3a3a, #4d4d4d, #ffd700, #ffdd1d, #d4af37, #ffd700, #4d4d4d, #3a3a3a, #1c1c1c);
	background-size: 400%;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	z-index: -1;
	animation: steam 60s linear infinite;
	border-radius: 10px;
}
@keyframes steam {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 400% 0;
	}
	100% {
		background-position: 0 0;
	}
}
.front-content:after {
	filter: blur(15px);
}
.back-content:after {
  filter: blur(15px);
}
/* Business Card - Flipping Effect */
/* CENTERING */
.centered {
	position: fixed;
	top: 50%;
	left: 50%;
	/* bring your own prefixes */
	transform: translate(-50%, -50%);
}
/* Flip Effect*/
/* entire container, keeps perspective */
.flip-container {
	perspective: 2000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
	cursor: pointer;
}
.flip-container, .front, .back {
	height: 350px;
	width: 600px;
}
.flipper {
	transition: all 0.5s ease-in-out;
	transform-style: preserve-3d;
	position: relative;
}
.front, .back {
	backface-visibility: hidden;
	position: absolute;
}
.front {
	z-index: 1;
	transform: rotateY(0deg);
}
.back {
	transform: rotateY(180deg);
}
.vertical.flip-container {
	position: relative;
}
.vertical .back {
	transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
	transform-origin: 100% 400x; 
}
.vertical.flip-container:hover .flipper {
	transform: rotateX(-180deg);
}
/* Swipe Effect */
/* .flip-container.swipe .flipper {
	transform: rotateY(180deg);
} */
/* Flip states */
.flip-container.swipe-left .flipper {
	transform: rotateY(-180deg);
}

.flip-container.swipe-right .flipper {
	transform: rotateY(0deg);
}
  
  
  



/* Navigation */
ul.nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  text-align: center;
  position: relative;
  transform: translateY(0); /* Default position */
  transition: transform 0.5s ease; /* Smooth transition for moving */
}
/* Move nav to the top */
.nav.top {
  transform: translateY(-28px); /* Adjust this to fit your design */
}
ul.nav li {
  padding: 0 .5em .25em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: .3s;
  width: 120px;
}
.nav-item {
  margin-top: -20px;
  letter-spacing: 1px;
}
.build {
  background: linear-gradient(45deg, #007BFF, #00A3FF, #00D4FF, #28A745);
  color: transparent; /* Makes the text transparent */
  background-clip: text; /* Clips the background to the text */
  -webkit-background-clip: text; /* For Safari */
  background-size: 100%;
  animation: steam 60s linear infinite;
}
.connect {
  background: linear-gradient(45deg, #28A745, #32CD32, #A2E73D, #FFC107);
  color: transparent; /* Makes the text transparent */
  background-clip: text; /* Clips the background to the text */
  -webkit-background-clip: text; /* For Safari */
  background-size: 100%;
  animation: steam 60s linear infinite;
}
.achieve {
  background: linear-gradient(45deg, #FFC107, #FFD700, #FFEB3B, #ffd700);
  color: transparent; /* Makes the text transparent */
  background-clip: text; /* Clips the background to the text */
  -webkit-background-clip: text; /* For Safari */
  background-size: 100%;
  animation: steam 60s linear infinite;
}
.nav-item:before {
  content: ''; /* Creates a pseudo-element */
  z-index: -1; /* Places it behind the text */
  background: inherit; /* Matches the background */
  filter: blur(8px); /* Optional: add blur for a softer effect */
}


/*** Dynamic Content ***/
.content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    font-size: 16px;
    text-align: center;
    transition: opacity 1s ease, max-height 1s ease;
    width: 76%;
    color: #e0f5e9;
    cursor: text;
}
/* Display content smoothly */
.content.visible {
    margin-top: -20px;
    opacity: .85;
    max-height: 100px; /* Adjust height as needed */
}


/*** Contact Info ***/
.contact-info {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.contact-info:before {
  content: ''; /* Creates a pseudo-element */
  z-index: -1; /* Places it behind the text */
  background: inherit; /* Matches the background */
  filter: blur(8px); /* Optional: add blur for a softer effect */
}
.contact-email {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: auto;
  gap: 4px;
}

.email-typewriter, .info-typewriter {
  color: #e0f5e9;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0; /* Hidden initially */
  width: 0;
}
.email-typewriter:hover {
	cursor: pointer;
}
.info-typewriter:hover {
	cursor: text;
}
@keyframes email-typewriter {
  from { width: 0; }
  to { width: 220px; } /* Adjust width as needed for full text */
}
.show-email-typewriter {
	animation: email-typewriter 1s steps(22) forwards;
	opacity: .85;
}
@keyframes info-typewriter {
  from { width: 0; }
  to { width: 475px; } /* Adjust width as needed for full text */
}
.show-info-typewriter {
	animation: info-typewriter 1s steps(22) forwards;
	opacity: .85;
}

/* Contact Info - Email Icon */
.contact-email svg {
	opacity: .8;
	fill: #e0f5e9;
    transition: fill 0.3s ease;
	height: 22px;
	width: 22px;
}
.contact-email svg:hover {
	opacity: 1;
	cursor: pointer;
}




/*** Card Backside SVG Animations ***/
/* Active state effect for Infographic */
ul.nav li.active .infographic text {
    animation: rainbow-color-fill 1s linear infinite;
}
/* Animation for Infographic */
.infographic {
	&:hover,
	&:focus {
		text {
			animation: rainbow-color-fill 1s linear infinite ;
		}
 		.left-bottom,
		.right-bottom {
			stroke: #FFB9B9;
		}
		.left-side3,
		.right-side3 {
			stroke: #DAB9FF;
		}
		.left-side2,
		.right-side2 {
			stroke: #FFB9B9;
		}
		.left-side1,
		.right-side1 {
			stroke: #FFFEB9;
		}
		.left-top,
		.right-top{
			stroke: #B9FFCC;
		}
		.ellipse0 {
			stroke: #B9C9FF;
		}		
		.ellipse {
			stroke: transparent;
		}	
	}
}
.left-side3 {
	animation: leftSide3 3s ease-out infinite alternate;
}
.left-side2 {
	animation: leftSide2 3s ease-out infinite alternate;
}
.left-side1 {
	animation: leftSide1 3s ease-out infinite alternate;
}
.left-top {
	animation: leftTop 3s ease-out infinite alternate;
}
.right-side3 {
	animation: rightSide3 3s ease-out infinite alternate;
}
.right-side2 {
	animation: rightSide2 3s ease-out infinite alternate;
}
.right-side1 {
	animation: rightSide1 3s ease-out infinite alternate;
}
.right-top {
	animation: rightTop 3s ease-out infinite alternate;
}
/* Animation for Interactive */
.interactive {
	&:hover,
	&:focus {
		.ellipse,
		text {
			animation: rainbow-color-fill 1s linear infinite ;
		}
		.hand,
		.bar {
			stroke: #FFB9B9;
		}
		.ellipse4 {
			stroke: #DAB9FF;
		}
		.ellipse3 {
			stroke: #FFB9B9;
		}
		.ellipse2 {
			stroke: #FFFEB9;
		}
		.ellipse1 {
			stroke: #B9FFCC;
		}
		.ellipse0 {
			stroke: #B9C9FF;
		}		
		.ellipse {
			stroke: transparent;
		}	
	}
}
.ellipse0{
	animation: interactiveMotion0 3s  ease-out infinite;
}
.ellipse1{
	animation: interactiveMotion1 3s  ease-out infinite;
}
.ellipse2 {
	animation: interactiveMotion2 3s  ease-out infinite;
}
.ellipse3 {
	animation: interactiveMotion3 3s  ease-out infinite;
}
.ellipse4 {
	animation: interactiveMotion4 3s ease-out infinite;
}
.ui {
	&:hover,
	&:focus {
		circle,
		.btn,
		text {
			animation: rainbow-color-fill 1s linear infinite ;
			stroke: transparent;
		}
		.heart {
			stroke: transparent;
		}
	}
}
.heart {
	animation: ui 3s linear infinite;
}
/* SVG Animation */
.skill-outer {
	outline: none;
}
@keyframes interactiveMotion0 {
	from{
		d: path("M68,61.83a12,12 0 1,0 24,0a12,12 0 1,0 -24,0");
	}
	to {
		d: path("M60,61.83a20,20 0 1,0 40,0a20,20 0 1,0 -40,0");
		opacity: 0;	
	}
}
@keyframes interactiveMotion1 {
	from{
		d: path("M68,61.83a12,12 0 1,0 24,0a12,12 0 1,0 -24,0");
	}
	to {
		d: path("M55,61.83a25,25 0 1,0 50,0a25,25 0 1,0 -50,0");
		opacity: 0;	
	}
}
@keyframes interactiveMotion2 {
	from{
		d: path("M68,61.83a12,12 0 1,0 24,0a12,12 0 1,0 -24,0");
	}
	to {
		d: path("M50,61.83a30,30 0 1,0 60,0a30,30 0 1,0 -60,0");
		opacity: 0;	
	}
}
@keyframes interactiveMotion3 {
	from{
		d: path("M68,61.83a12,12 0 1,0 24,0a12,12 0 1,0 -24,0");
	}
	to {
		d: path("M45,61.83a35,35 0 1,0 70,0a35,35 0 1,0 -70,0");
		opacity: 0;	
	}
}
@keyframes interactiveMotion4 {
	from{
		d: path("M68,61.83a12,12 0 1,0 24,0a12,12 0 1,0 -24,0");
	}
	to {
		d: path("M40,61.83a40,40 0 1,0 80,0a40,40 0 1,0 -80,0");
		opacity: 0;	
	}
}
@keyframes ui {
	0%{
		d: path("M80 87.26l-2.02-5.87-5.67-1.82 5.67-1.83L80 71.88l1.71 5.86 5.98 1.83-5.99 1.82-1.7 5.87z");
	}
	20% {
		d: path("M80 83.96l-4.33 2.28.83-4.83L72.99 78l4.84-.71L80 72.9l2.17 4.39 4.84.71-3.5 3.41.82 4.83L80 83.96z");
	}
	40% {
		d: path("M80 83.89h-6.15l3.08-5.32L80 73.25l3.07 5.32 3.08 5.32H80z");
	}
	60% {
		d: path("M80 85.57l-1-.86c-3.37-3.06-5.59-5.07-5.59-7.54a3.56 3.56 0 0 1 3.6-3.6A3.9 3.9 0 0 1 80 74.94a3.9 3.9 0 0 1 2.94-1.37 3.56 3.56 0 0 1 3.6 3.6c0 2.47-2.22 4.48-5.59 7.54z");
	}
	80%{
		d: path("M74,80a6,6 0 1,0 12,0a6,6 0 1,0 -12,0");
	}
	100%{
		d: path("M80 87.26l-2.02-5.87-5.67-1.82 5.67-1.83L80 71.88l1.71 5.86 5.98 1.83-5.99 1.82-1.7 5.87z");

	}
}
@keyframes rainbow-color-fill {	
  0% {
    fill: #DAB9FF;
  }	
	20% {
    fill: #FFB9B9;
  }
	40% {
    fill: #FFFEB9;
	}
	60% {
    fill: #B9FFCC;
	}
	80% {
    fill: #B9C9FF;	
	}
  100% {
    fill: #DAB9FF;
  }
}
@keyframes rainbow-color-stroke {	
  0% {
	 stroke: #DAB9FF;
  }	
	20% {
	 stroke: #FFB9B9;

  }
	40% {
	 stroke: #FFFEB9;
	}
	60% {
	 stroke: #B9FFCC;
	}
	80% {
	 stroke: #B9C9FF;
	}
  100% {
  	 stroke: #DAB9FF;
  }
}
@keyframes leftSide3 {
	from{
		d: path("M53.18 76.81h22.6v36.53h-22.6z");
	}
	to {
		d: path("M53.18 32.15h22.6v81.19h-22.6z");
	}
}
@keyframes leftSide2 {
	from {
		d: path("M53.18 76.81l-9.46 8.22v36.52l9.46-8.21V76.81z");
	}
	to {
		d: path("M53.18 32.15l-9.46 8.21v81.19l9.46-8.21V32.15z");
	}
}
@keyframes leftSide1 {
	from {
		d: path("M30.57 76.81v36.53");
	}
	to {
		d: path("M30.57 32.15v81.19");
	}
}
@keyframes leftTop {
	from {
		d: path("M43.72 85l9.46-8.22h22.6c0-5-10.2-9-22.6-9s-22.6 4.09-22.6 9c0 3.53 5.14 6.74 13.14 8.22");
	}
	to {
		d: path("M43.72 40.36l9.46-8.21h22.6c0-5-10.2-9-22.6-9s-22.6 4.08-22.6 9c0 3.52 5.14 6.74 13.14 8.21");
	}
}
@keyframes rightSide3 {
	from {
		d: path("M129.43 31.73v79.28");
	}
	to {
		d: path("M129.43 80.41v30.6");
	}
}
@keyframes rightSide2 {
	from {
		d: path("M106.82 31.73l9.46 8.22v79.27l-9.46-8.21V31.73z");
	}
	to {
		d: path("M106.82 80.42l9.46 8.21v30.59l-9.46-8.21V80.42z");
	}
}
@keyframes rightSide1 {
	from {
		d: path("M84.22 31.73h22.6V111h-22.6z");
	}
	to {
		d: path("M84.22 80.41h22.6V111h-22.6z");
	}
}
@keyframes rightTop {
	from {
		d: path("M116.28 40l-9.46-8.22h-22.6c0-5 10.2-9 22.6-9s22.6 4.08 22.6 9c0 3.53-5.14 6.74-13.14 8.22");
	}
	to {
		d: path("M116.28 88.63l-9.46-8.22h-22.6c0-5 10.2-9 22.6-9s22.6 4.08 22.6 9c0 3.53-5.14 6.74-13.14 8.22");
	}
}




/*** Loader Bar animation ***/
.loader-bar {
	margin-top: -12px;
	height: 2px;
	width: 126px;
	position: relative;
	overflow: hidden;
	background: none; /* Remove the static background */
	opacity: .75;
}
.loader-bar .black_overlay {
	display: none; /* Remove the black overlay */
}
.loader-bar .light {
	width: 80px;
	height: 100%;
	position: absolute;
	left: -20%;
	top: 0px;
	background: linear-gradient(
		87deg,
		rgba(0, 0, 0, 0) 0%,
		#007BFF 30%,
		rgba(0, 0, 0, 0) 100%
);
	animation: light 2.4s infinite ease-in-out, colorShift 2.4s infinite linear;
}
/* Animation for light movement */
@keyframes light {
	from {
		left: -30%;
}
	to {
		left: 100%;
}
}
/* Animation for color shifting */
@keyframes colorShift {
	0% { background: linear-gradient(87deg, rgba(0, 0, 0, 0) 0%, #007BFF 40%, rgba(0, 0, 0, 0) 100%); }
	12.5% { background: linear-gradient(87deg, rgba(0, 0, 0, 0) 0%, #00A3FF 40%, rgba(0, 0, 0, 0) 100%); }
	25% { background: linear-gradient(87deg, rgba(0, 0, 0, 0) 0%, #00D4FF 40%, rgba(0, 0, 0, 0) 100%); }
	37.5% { background: linear-gradient(87deg, rgba(0, 0, 0, 0) 0%, #28A745 40%, rgba(0, 0, 0, 0) 100%); }
	50% { background: linear-gradient(87deg, rgba(0, 0, 0, 0) 0%, #32CD32 40%, rgba(0, 0, 0, 0) 100%); }
	62.5% { background: linear-gradient(87deg, rgba(0, 0, 0, 0) 0%, #A2E73D 40%, rgba(0, 0, 0, 0) 100%); }
	75% { background: linear-gradient(87deg, rgba(0, 0, 0, 0) 0%, #FFC107 40%, rgba(0, 0, 0, 0) 100%); }
	87.5% { background: linear-gradient(87deg, rgba(0, 0, 0, 0) 0%, #FFEB3B 40%, rgba(0, 0, 0, 0) 100%); }
	100% { background: linear-gradient(87deg, rgba(0, 0, 0, 0) 0%, #007BFF 40%, rgba(0, 0, 0, 0) 100%); }
}


/*** Media Queries ***/
/* Tablets and large phones (768px and below) */
@media (max-width: 660px) {
	.flip-container, .front, .back {
		height: 250px;
		width: 450px;
	}
    ul.nav li {
        width: 100px;
        padding: 0;
    }
}
/* Small phones (480px and below) */
@media (max-width: 480px) {
	.flip-container, .front, .back {
		height: 200px;
		width: 320px;
	}
    ul.nav li {
        width: 80px;
        padding: 0;
    }
    .contact-email {
        padding: 4px;
    }
}
@media (max-height: 400px) {
	.flip-container, .front, .back {
		height: 240px;
		width: 380px;
	}
    ul.nav li {
        width: 80px;
        padding: 0;
    }

}
/* Extra small screens (360px and below) */
@media (max-width: 360px) {
	.flip-container, .front, .back {
		height: 200px;
		width: 300px;
	}
    ul.nav li {
        width: 80px;
        padding: 0;
    }
    .contact-email {
        padding: 4px;
    }
}