@charset "utf-8";
/* CSS Document */
html
{
	scroll-behavior: smooth;
}

body
{
	/*cursor: url("../assets/misc/mouse_default.png"), auto;*/
	margin: 0;
	/*height: 100%;*/
	width:100vw;
	background-color:#000;
	color:#fff;
	font-family: 'Lato', Arial, Helvetica, sans-serif;
}

a
{
	/*cursor: url("../assets/misc/mouse_hover.png"), auto;*/
	cursor: pointer;
	text-decoration: none;
	color: red;
}

a:hover
{
	font-weight: bold;
}

p
{
	/*text-shadow: 1px 1px 2px #000000;*/
	margin:0;
}

#main-wrap
{
	width:100%;
	height:100%;
}

.container
{
	/*background: #010101;*/
	min-height: 360px;
	/*width:100%;*/
	text-align:center;
	z-index: 0;
	transition: 0.5s;
	display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: center;
	transition: 0.5s;

}

/*VIDEO*/
#mainVideo
{
	opacity:0.75;
	width:100%;
	height:100vh;
	object-fit:cover;
	object-position: 0;
	z-index: -10;
	bottom: 88px;
}

#vfx-vignette
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background-image: url("../assets/vfx/vignette.png");
	background-size:100% 100%;
	opacity:.75;

	animation-name: vignette-vfx;
	animation-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);
	animation-duration: .25s;
	animation-iteration-count: infinite;
}

#vfx-scanline
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background-image: url("../assets/vfx/scanlines.png");
  	background-repeat: repeat;
	opacity:.16;

	animation-name: scanline-scroll;
	animation-timing-function: linear;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

#vfx-static
{
	background-image: url("../assets/vfx/noise.png");
	position: fixed;
    top: 0;
    /* left: 0; */
    z-index: 1000;
    width: 100%;
    height: 100%;
    /*background-size: 100% 100%;*/
}

/*
CHARACTERS START
*/
#kat-character
{
    position: absolute;
    right: -10vw;
    bottom: -15vw;
    width: 40vw;
    z-index: -1;
/*
	animation-name: move-left,opacity-fade;
	animation-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);
	animation-duration: 1s;*/
}

#contact-char1
{
    position: absolute;
    left: -10vw;
    bottom: -5vw;
    width: 40vw;
    z-index: -1;

	/*Animation stuff*/
	transform-origin: 50% 100%;
	animation-name: character-animation;
	animation-timing-function:ease-in-out;
	animation-iteration-count: infinite;
	animation-direction:alternate;
	animation-duration: 15s;
}
#contact-char2
{
    position: absolute;
    right: -10vw;
    bottom: -5vw;
    width: 40vw;
    z-index: -1;

	/*Animation stuff*/
	transform-origin: 50% 100%;
	animation-name: character-animation;
	animation-timing-function:ease-in-out;
	animation-iteration-count: infinite;
	animation-direction:alternate;
	animation-duration: 10s;

}
/*
CHARACTERS END
*/
.spacer
{
	height: 64px;
}

.navbar
{
	overflow: hidden;
	background-color: rgb(0, 0, 0);
	position: fixed; /* Set the navbar to fixed position */
	width: 100%; /* Full width */
	max-height:64px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 8px 32px 0 rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	justify-content: center;
	text-transform: uppercase;
	font-weight: 700;
}

/* Links inside the navbar */
.navbar a
{
	color: #ffffff;
	text-align: center;
	padding: 16px;
	height: 32px;
	text-decoration: none;
	transition: 0.3s;
	display: flex;
	align-items: center;
}
/*PROJECT STUFF*/
#projects-container
{
	width:100%;
	height: 100%;
	display: flex;
	align-items: center; /* Centra los elementos verticalmente */
	z-index: -1;
	background-image: url("/assets/img/backgrounds/BG_bricks2.jpg");
	background-size: cover;
}
.project
{
	border-style:solid;
	border-width: 3px;
	border-color: white;
	min-width: 10%;
	height: 50%;
	margin:8px;
	background-color: black;
	transition: 0.5s;
	box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}
.project-title
{
	float: left;
    width: 50%;
    margin: 16px;
	font-weight: 900;

}
.project-image
{
	border-style:solid;
	border-width: 3px;
	border-color: white;
	margin:8px;
	background-color: black;
	overflow: hidden;
}
.project-image img
{
	width: 100%;
	display: block; /* Elimina espacio adicional por alineación en línea */
	opacity: 0.32;
	transition: 0.5s;
}
.project:hover
{
	border-color: black;
	background-color: white;
	color:black;
	min-width: 20%;
	
}
.project:hover .project-image
{
	border-color: black;
	
	cursor: url("../assets/misc/mouse_hover.png"), auto;
}

.project:hover .project-image img
{
	opacity: 1;

}

/*SERVICES STUFF*/
#services-container
{
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column; /* Organiza los elementos en columnas */
	z-index: -1;
	background-image: url("../assets/img/backgrounds/BG_bricks2.jpg");
	background-size: cover;

}
.service
{
	height: 100%;
	width:100%;
	background-color: black;
	min-height: 30%;
	transition: 0.5s;
	background-attachment: fixed;
	background-size:cover;
	background-position: center;
	box-sizing: border-box;
	cursor: pointer;
	box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.75), 0px -8px 8px 0px rgba(0, 0, 0, 0.75);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	
}
#service-2dart
{
	background-image: url("../assets/img/services/2d_thumbnail.png");
	
}
#service-3dart
{
	background-image: url("../assets/img/services/3d_thumbnail.jpg");
}
#service-environment
{
	background-image: url("../assets/img/services/env_thumbnail.png");
}

.service-title
{
	font-size: 32px;
	font-weight: bold;
	text-shadow: 2px 2px 4px #000000;
}

.service:hover
{
	background-color: white;
	color:black;
	background-blend-mode:difference;
}
.service:hover
{
	text-shadow: 2px 2px 4px #ff0000;
}
/**/
#contact-container
{
	font-size: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width:50%;
	height:50%;
	
	border: 36px solid transparent;
	border-image-slice:15%;
	border-image-source:url("../assets/img/ui/dialogbox.png");
	background-color: #5bc288e0;
	z-index: 1;
	box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.5);
	border-radius: 64px;
	box-sizing:border-box;
}

#contact-arrow
{
	width:10%;
	height: 10%;
	position: absolute;
	background-image:url("../assets/img/ui/arrow.png");
	background-size: contain;
	background-repeat: no-repeat;
	/*Animation stuff*/
	animation-name: sway;
	animation-timing-function:ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	z-index: 2;
	right:24vw;
	top:60vh;
}

/**/
.text-header
{
	position:absolute;
	width:90%;
}

.text-header h1
{
	font-size: 80px;
	font-weight: 900;
	text-transform: uppercase;
}

.text-header h2
{
	font-size: 32px;
	font-weight: 400;
	text-transform: uppercase;
}

button
{
	width: 128px;
	height: 48px;
	color: white;
	background-color: black;
	border-radius: 8px;
	border-style: solid;
	border-color: white;
	box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.5);
	transition: 0.5s;
}

#demon-button
{
	position:absolute;
	top:50%;	
}

button:hover
{
	color: black;
	background-color: white;
	border-color: black;
	cursor: pointer;
}

/*modal for the videos*/
.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	justify-content: center;
	align-items: center;
	transition: 0.5s;
	z-index: 100000;
  }

  .modal-content {
	box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.5);
	width: 50%;
	max-width: 50%;
	background-color: #fff;
	padding: 20px;
	text-align: center;
	transition: 0.5s;
  }
  #modalVideo {
	max-width: 100%; /* Ajusta el ancho del video al contenedor */
	max-height: 100%; /* Opcional: ajusta la altura del video al contenedor */
  }
  .close-btn {
	position: absolute;
	top: 16%;
	right: 25%;
	cursor: pointer;
	color:white;
	font-size:64px;
	text-shadow: 2px 2px 4px #000000;
	z-index: 100000;
  }
/**/
/* Change background on mouse-over */
.nav-button
{
	transition: 1s;
}
.nav-button:hover
{
	/*background-color: white;
	color: black;*/
	font-weight: bold;
	text-decoration: underline;
}
.nav-button.active
{
	/*background-color: white;
	color: black;*/
	font-weight: bold;
	text-decoration: underline;
}
#logo-small
{
	height:100%;
}

#sad-container
{
	float: left;
    margin: 8vw;
	text-align: left;
}

#project-info
{
	float: left;
    width: 45%;
    margin: 8px;
	font-weight: 900;
    font-size: xxx-large;
}


footer
{
	z-index:9999;
	border-color: white;
	border-width: 2px;
	border-top: solid;
	background-color: #000;
	text-align: center;
	max-height: 96px;
	position: fixed;
	bottom: 0;
	width: 100%;
	color: white;
	box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.5), 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

.footer-content
{
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 8px;
}

.social-icons
{
	display: flex;
	justify-content: center;
	margin: 8px;
}

.social-icons a
{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0px 8px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border-width: 2px;
	border-style: solid;
	background-color: white; /* Set the initial background color to white */
	transition: 0.3s;
	color: black; /* Set the icon color to black */
	text-decoration: none;
}

.social-icons a i
{
	font-size: 24px;
}

.social-icons a:hover
{
	background-color: black; /* Change the background color to black on hover */
	color: white; /* Change the icon color to white on hover */
	border-color: white;
}

/*CLASSES FOR STUFF*/
/*
.hide
{
	height:0;
	opacity: 0;
}

.show
{
	height:100vh;
}*/

/*SERVICES*/

#services-section {
    text-align: center;
    padding: 60px 20px;
  }

  #services-section h1 {
    font-size: 36px;
    margin-bottom: 10px;
  }

  #services-section h2 {
    font-size: 20px;
    color: #aaa;
    margin-bottom: 40px;
  }

  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: auto;
  }

  .service-card {
    background: #1c1c1c;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
  }

  .service-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #ffffff;
  }

  .service-card p {
    font-size: 15px;
    line-height: 1.5;
    color: #ddd;
  }

  .service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  }

/*GAMES SECTION*/

#games-section {
    text-align: center;
    padding: 60px 20px;
  }

  #games-section h1 {
    font-size: 36px;
    margin-bottom: 10px;
  }

  #games-section h2 {
    font-size: 20px;
    color: #aaa;
    margin-bottom: 40px;
  }

  /* Cards en pila */
  .game-card {
    display: flex;
    gap: 20px;
    background: #1c1c1c;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    align-items: center;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
  }

  .game-icon {
    width: 160px;
    height: 160px;
    border-radius: 16px;
    object-fit: cover;
    flex-shrink: 0;
  }

  .game-info {
    flex: 1;
  }

  .game-title {
    font-size: 22px;
    margin: 0 0 8px;
    color: #ffffff;
  }

  .game-desc {
    font-size: 15px;
    color: #ddd;
    margin-bottom: 12px;
    line-height: 1.5;
  }

  .store-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .store-badges img {
    height: 40px;
    object-fit: contain;
  }

  /* Responsive: en móvil el icono se va arriba */
  @media (max-width: 600px) {
    .game-card {
      flex-direction: column;
      text-align: center;
    }
    .game-icon {
      margin-bottom: 12px;
    }
    .game-info {
      text-align: center;
    }
    .store-badges {
      justify-content: center;
    }
  }


/*CONTACT*/
/* Layout */
#contact-section{ padding:60px 20px; text-align:center; }
#contact-section h1{ margin-bottom:16px; }
.contact-row{ display:flex; flex-wrap:wrap; gap:24px; justify-content:center; text-align:left; }
.contact-left{ flex:1 1 420px; }
.contact-right{ flex:1 1 420px; display:flex; flex-direction:column; gap:16px; }

/* Tarjetas */
.card{ background:#1b1b1b; border:1px solid #2a2a2a; border-radius:10px; padding:18px; }

/* Form estilo “línea naranja” */
.contact-left h3{ margin:0 0 10px; }
.contact-left form{ display:flex; flex-direction:column; gap:12px; }
.contact-left label{ font-size:14px; color:#cfcfcf; }
.contact-left input, .contact-left textarea{
  background:transparent; color:#fff; border:none; outline:none;
  border-bottom:2px solid #ffffff; padding:8px 4px;
}
.contact-left textarea{ resize:vertical; }
.hint{ font-size:12px; color:#a9a9a9; margin:6px 0 0; }
.contact-left button{
  margin-top:6px; padding:12px 16px; border:0; border-radius:4px;
  background:#ffffff; color:#000000; font-weight:800; cursor:pointer;
}
.contact-left button:hover{ filter:brightness(.95); }

/* Info con íconos */
.info h3{ margin-top:0; }
.info-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.info-list li{ display:flex; gap:10px; align-items:flex-start; }
.icon{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:#23262a; color:#ffffff; flex-shrink:0;
}
.info-list a{ color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.2); }
.info-list a:hover{ border-bottom-color:#ffffff; }

/* Quick actions */
.quick-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.btn{ background:#e8e8e8; color:#111; font-weight:800; padding:10px 14px; border-radius:8px; text-decoration:none; }
.btn.ghost{ background:transparent; color:#fff; border:1px solid #2a2a2a; }

/* Mapa */
.map-ratio{ position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:8px; }
.map-ratio iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Responsive */
@media (max-width:800px){
  .contact-left, .contact-right{ flex:1 1 100%; }
}


/* ANIMATION */
/* Safari 4.0 - 8.0 */
@-webkit-keyframes opacity-fade
{
    from {opacity:0;}
    to {opacity:1;}
}

/* Standard syntax */
@keyframes opacity-fade
{
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes move-right
{
    from {left:-50%;}
    to {left:2vw;}
}

@keyframes move-left
{
    from {right:-40%;}
    to {right:40vw;}
}

@keyframes smartphone-up
{
    from {top:100%;}
    to {top:10vw;}
}

@keyframes scanline-scroll
{
    from {background-position:0 0;}
    to {background-position:0 100%;}
}

@keyframes vignette-vfx
{
    0% {opacity:.7;}
	50% {opacity:.75;}
    100% {opacity:.7;}
}

@keyframes static-vfx
{
    from {background-position:0 0;}
    to {background-position:100% 100%;}
}

@keyframes static-vfx-off
{
    0% {opacity:0;visibility: visible;}
	25% {opacity:1;}
    100% {opacity:0;visibility: hidden;}
}
.animate-static
{
	opacity: 1;
	visibility:visible;
	animation: static-vfx .5s steps(8) infinite, static-vfx-off 1s forwards;
}
.animate-sway
{
	animation-name: sway,rotate;
	animation-timing-function:ease-in-out;
	animation-duration: 3s;
	animation-direction: alternate-reverse;
	animation-iteration-count:infinite;
}
@keyframes sway
{
    0%{transform: translateY(-5%);}
	25%{transform: translateY(5%);}
	50%{transform: translateY(-5%);}
	75%{transform: translateY(5%);}
	100%{transform: translateY(-5%);}
}

.animate-rotate
{
	animation-name: rotate;
	animation-timing-function:ease-in-out;
	animation-duration: 3s;
	animation-iteration-count:infinite;
}
@keyframes rotate
{
    0%{rotate: -3deg;}
	100%{rotate: 3deg;}
}

@keyframes character-animation
{
    0%
	{
		rotate: -3deg;
		transform: translateY(-5%);
		transform: scale(.95,.95);
	}
    25%
	{
		rotate: 3deg;
	}
	50%
	{
		transform: scale(1.05,1.05);
	}
    75%
	{
		rotate: -3deg;
	}
	100%
	{
		rotate: 3deg;
		transform: translateY(5%);
		transform: scale(.95,.95);
	}
}
.typing-text {
	overflow: hidden;
	border-right: 1px solid #000;
	white-space: nowrap;
	font-size: 24px;
	font-family: monospace;
  }

  /* Animación de escritura */
  @keyframes typing {
	from {
	  width: 0;
	}
	to {
	  width: 100%;
	}
  }

  .animate-typing {
	display: inline-block;
	animation: typing 3s steps(40) infinite;
  }
/* ANIMATION */