/* ========================================
   SEATECH - ANIMAÇÕES E EFEITOS
   Elementos animados de fundo e efeitos visuais
   ======================================== */

/* ========================================
   ELEMENTOS ANIMADOS DE FUNDO
   ======================================== */
.tm-fx-box {
	border: 15px solid;
	border-color: transparent;
}

.tm-fx-box.square {
	background-color: rgb(255, 255, 255);
	transform: rotate(10deg);
}

.tm-fx-box.circle {
	border-radius: 50%;
	background-color: rgb(255, 255, 255);
}

.tm-triangle {
	width: 0;
	height: 0;
	border-width: 0 15px 30px 15px;
	border-style: solid;
	border-color: transparent transparent #fff transparent;
}

/* ========================================
   ANIMAÇÕES DE ELEMENTOS ESPECÍFICOS
   ======================================== */

/* Caixas quadradas animadas */
.tm-fx-box[style*="width:25vw"][style*="rotate(10deg)"] {
	animation: floatSquare 6s ease-in-out infinite;
}

.tm-fx-box[style*="width:25vw"][style*="rotate(-10deg)"] {
	animation: floatSquareReverse 6s ease-in-out infinite;
}

/* Círculos animados */
.tm-fx-box[style*="border-radius:50%"] {
	animation: floatCircle 8s ease-in-out infinite;
}

/* Triângulos animados */
.tm-triangle.tm-fx-box {
	animation: floatTriangle 7s ease-in-out infinite;
}

/* ========================================
   KEYFRAMES PARA ANIMAÇÕES
   ======================================== */
@keyframes floatSquare {
	0%, 100% {
		transform: translate3d(0, 0, 0) rotate(10deg);
	}
	50% {
		transform: translate3d(-20px, -10px, 0) rotate(15deg);
	}
}

@keyframes floatSquareReverse {
	0%, 100% {
		transform: translate3d(0, 0, 0) rotate(-10deg);
	}
	50% {
		transform: translate3d(15px, -8px, 0) rotate(-15deg);
	}
}

@keyframes floatCircle {
	0%, 100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	33% {
		transform: translate3d(-10px, -5px, 0) scale(1.05);
	}
	66% {
		transform: translate3d(10px, -8px, 0) scale(0.95);
	}
}

@keyframes floatTriangle {
	0%, 100% {
		transform: scale(2.5) rotate(-20deg);
	}
	50% {
		transform: scale(2.7) rotate(-25deg);
	}
}

/* ========================================
   EFEITOS DE HOVER E TRANSIÇÕES
   ======================================== */
.tm-fx-box {
	transition: all 0.3s ease;
}

.tm-fx-box:hover {
	opacity: 0.8;
	transform: scale(1.1);
}

/* ========================================
   EFEITOS ESPECÍFICOS PARA DIFERENTES PÁGINAS
   ======================================== */

/* Animações para página inicial */
.home .tm-fx-box {
	animation-duration: 8s;
}

/* Animações mais sutis para páginas de conteúdo */
.about-us .tm-fx-box,
.areas-attended .tm-fx-box,
.main-clients .tm-fx-box {
	animation-duration: 10s;
	opacity: 0.7;
}

/* Animações mais dinâmicas para página de serviços */
.main-services .tm-fx-box {
	animation-duration: 5s;
}

/* ========================================
   OTIMIZAÇÕES DE PERFORMANCE
   ======================================== */

/* Reduzir animações em dispositivos com preferência por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
	.tm-fx-box,
	.tm-triangle {
		animation: none;
	}
}

/* Pausar animações em dispositivos com bateria baixa */
@media (prefers-reduced-motion: reduce) {
	.tm-fx-box:hover {
		transform: none;
	}
}

/* Otimizações para dispositivos móveis */
@media (max-width: 768px) {
	.tm-fx-box {
		animation-duration: 12s; /* Animações mais lentas em mobile */
	}
	
	.tm-fx-box[style*="width:25vw"] {
		width: 20vw !important;
		height: 20vw !important;
	}
	
	.tm-fx-box[style*="width:20vw"] {
		width: 15vw !important;
		height: 15vw !important;
	}
	
	.tm-fx-box[style*="width:15vw"] {
		width: 12vw !important;
		height: 12vw !important;
	}
}