/* Padrões Tribais Africanos Adicionais para Hero */
.hero {
position: relative;
}
/* Padrão de tambores africanos */
.hero .tribal-drums {
position: absolute;
top: 10%;
right: 5%;
width: 100px;
height: 100px;
background: url('data:image/svg+xml,') center/cover;
animation: tribalDrums 8s ease-in-out infinite;
z-index: 1;
}
@keyframes tribalDrums {
0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.06; }
50% { transform: rotate(180deg) scale(1.1); opacity: 0.1; }
}
/* Padrão de máscaras africanas */
.hero .tribal-masks {
position: absolute;
top: 60%;
left: 8%;
width: 80px;
height: 80px;
background: url('data:image/svg+xml,') center/cover;
animation: tribalMasks 12s ease-in-out infinite reverse;
z-index: 1;
}
@keyframes tribalMasks {
0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.05; }
33% { transform: rotate(-10deg) scale(0.9); opacity: 0.08; }
66% { transform: rotate(10deg) scale(1.1); opacity: 0.1; }
}
/* Símbolos Adinkra flutuantes */
.hero .adinkra-symbols {
position: absolute;
top: 30%;
left: 15%;
width: 60px;
height: 60px;
background: url('data:image/svg+xml,') center/cover;
animation: adinkraFloat 15s linear infinite;
z-index: 1;
}
@keyframes adinkraFloat {
0% { transform: translateY(0) rotate(0deg); opacity: 0.04; }
25% { transform: translateY(-10px) rotate(90deg); opacity: 0.08; }
50% { transform: translateY(0) rotate(180deg); opacity: 0.06; }
75% { transform: translateY(10px) rotate(270deg); opacity: 0.1; }
100% { transform: translateY(0) rotate(360deg); opacity: 0.04; }
}
/* Versão mobile - reduzir elementos decorativos */
@media (max-width: 768px) {
.hero .tribal-drums,
.hero .tribal-masks,
.hero .adinkra-symbols {
display: none;
}
}
/* Para dispositivos que preferem movimento reduzido */
@media (prefers-reduced-motion: reduce) {
.hero .tribal-drums,
.hero .tribal-masks,
.hero .adinkra-symbols {
animation: none;
opacity: 0.03;
}
}