/* Compatibility fixes for hosting environments */

/* Fallbacks for CSS Grid */
.features-grid,
.portfolio-grid,
.blog-grid,
.skills-grid,
.projetos-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 2rem;
}

.features-grid > *,
.portfolio-grid > *,
.blog-grid > *,
.skills-grid > *,
.projetos-grid > * {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 300px;
  flex: 1 1 300px;
  min-width: 280px;
}

/* Fallbacks for CSS Variables */
.typing-cursor {
  background-color: #e91e63 !important;
}

.hero-subtitle .bar {
  background: #ff2f6d !important;
}

/* Webkit prefixes for animations */
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* Force hardware acceleration */
.skill-card,
.project-card,
.projeto-card,
.course-item,
.timeline-item {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Ensure animations work */
.skill-card {
  -webkit-animation: fadeInUp 0.15s ease forwards;
  animation: fadeInUp 0.15s ease forwards;
}

.project-card {
  -webkit-animation: fadeInUp 0.2s ease forwards;
  animation: fadeInUp 0.2s ease forwards;
}

.course-item {
  -webkit-animation: fadeIn 0.2s ease forwards;
  animation: fadeIn 0.2s ease forwards;
}

/* Fallback for mask properties */
.feature-card::before,
.portfolio-card::before,
.blog-card::before,
.skill-card::before,
.project-card::before,
.projeto-card::before,
.timeline-item::before {
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: source-out;
  mask-composite: exclude;
}