/* ========================================
   Animações 3D Otimizadas - Performance First
   ======================================== */

/* Efeito perspective global para melhor performance 3D */
html {
  perspective: 1200px;
}

/* Body com transform-style para preservar 3D */
body {
  transform-style: preserve-3d;
}

/* ========================================
   Cards com efeito 3D Flip
   ======================================== */

.card, .service-card, .info-card {
  transform-style: preserve-3d;
  will-change: transform;
  perspective: 1000px;
}

/* Efeito 3D no hover dos cards */
.card:hover {
  transform: translate3d(0, -8px, 30px) rotateX(8deg) rotateY(-6deg) skewY(-1deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 40px rgba(7, 106, 219, 0.4), 0 0 80px rgba(7, 106, 219, 0.2);
  filter: brightness(1.05) saturate(1.1);
}

.info-card:hover {
  transform: translate3d(0, -6px, 25px) rotateX(6deg) rotateY(4deg);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 0 35px rgba(7, 106, 219, 0.35);
  filter: brightness(1.03) saturate(1.05);
}

/* ========================================
   Animações 3D Entrance
   ======================================== */

@keyframes slideInUp3D {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, -60px) rotateX(80deg) rotateZ(-15deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg);
  }
}

@keyframes flipIn {
  0% {
    opacity: 0;
    transform: perspective(500px) translate3d(0, 0, -300px) rotateY(90deg);
  }
  100% {
    opacity: 1;
    transform: perspective(500px) translate3d(0, 0, 0) rotateY(0deg);
  }
}

@keyframes zoomInRotate {
  from {
    opacity: 0;
    transform: translate3d(0, 0, -50px) scale3d(0.75, 0.75, 0.75) rotateX(45deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg);
  }
}

@keyframes floatLess {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 8px); }
}

@keyframes iconPulse {
  0%, 100% { 
    transform: translate3d(0, -8px, 20px) scale3d(1.15, 1.15, 1.15) rotateX(-15deg) rotateZ(10deg);
    filter: drop-shadow(0 4px 8px rgba(7, 106, 219, 0.4));
  }
  50% { 
    transform: translate3d(0, -10px, 25px) scale3d(1.2, 1.2, 1.2) rotateX(-18deg) rotateZ(12deg);
    filter: drop-shadow(0 6px 12px rgba(7, 106, 219, 0.6));
  }
}

/* ========================================
   Elementos com animação de entrada
   ======================================== */

.resource-card {
  animation: slideInUp3D 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}

.resource-card:nth-child(1) { animation-delay: 0.1s; }
.resource-card:nth-child(2) { animation-delay: 0.2s; }
.resource-card:nth-child(3) { animation-delay: 0.3s; }
.resource-card:nth-child(4) { animation-delay: 0.4s; }

/* ========================================
   Efeito 3D no Card Icon
   ======================================== */

.card-icon {
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.card:hover .card-icon,
.service-card:hover .card-icon {
  transform: translate3d(0, -8px, 20px) scale3d(1.15, 1.15, 1.15) rotateX(-15deg) rotateZ(10deg);
  filter: drop-shadow(0 4px 8px rgba(7, 106, 219, 0.4));
  animation: iconPulse 2s ease-in-out infinite;
}


.steps-section li i {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  will-change: transform;
}

.steps-section li:hover i {
  transform: translate3d(0, -4px, 15px) scale3d(1.2, 1.2, 1.2) rotateZ(10deg);
}

/* ========================================
   Efeito 3D Parallax no Hero
   ======================================== */

.submenu-hero-right {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.hero-person {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
  will-change: transform;
}

/* Remover animação anterior e deixar só hover 3D */
.hero-person:hover {
  transform: translate3d(0, -12px, 35px) rotateX(8deg) rotateY(-10deg);
}

/* ========================================
   Efeito 3D no Button Glow
   ======================================== */

.btn-glow {
  transform-style: preserve-3d;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.btn-glow:hover {
  transform: translate3d(0, -4px, 15px) scale3d(1.05, 1.05, 1.05);
}

/* ========================================
   Efeito 3D em Testimonials
   ======================================== */

.testimonial {
  transform-style: preserve-3d;
}

.testimonial.active {
  transform: scale3d(1.05, 1.05, 1.05) translate3d(0, -8px, 25px) rotateY(5deg);
}

/* ========================================
   Animação Hover Tilt 3D
   ======================================== */

@keyframes tilt {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
  }
  100% {
    transform: translate3d(2px, -2px, 8px) rotateX(-5deg) rotateY(8deg);
  }
}

/* Aplicar a animações com um efeito de mouse tracking simulado */
.service-card {
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.320, 1), box-shadow 0.35s ease;
  transform-style: preserve-3d;
}

.service-card:hover {
  transform: translate3d(0, -12px, 35px) rotateX(10deg) rotateY(-8deg);
}

/* ========================================
   Cards Animados - Stagger Effect
   ======================================== */

.info-card {
  animation: zoomInRotate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  transform-style: preserve-3d;
}

.info-card:nth-child(1) { animation-delay: 0.05s; }
.info-card:nth-child(2) { animation-delay: 0.1s; }
.info-card:nth-child(3) { animation-delay: 0.15s; }
.info-card:nth-child(4) { animation-delay: 0.2s; }

/* ========================================
   Efeito Light Reflection 3D
   ======================================== */

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: opacity;
}

.service-card:hover::before {
  opacity: 1;
}

/* ========================================
   Partner Logo 3D Hover
   ======================================== */

.partner-logo {
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

.partner-logo:hover {
  transform: translate3d(0, -3px, 12px) scale3d(1.1, 1.1, 1.1) rotateY(-8deg);
}

/* ========================================
   Animação Starburst 3D
   ======================================== */

@keyframes spectral-rotate {
  0% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  25% {
    transform: translate3d(0, -4px, 10px) rotateX(10deg) rotateY(10deg) rotateZ(5deg);
  }
  50% {
    transform: translate3d(0, -2px, 15px) rotateX(15deg) rotateY(20deg) rotateZ(10deg);
  }
  75% {
    transform: translate3d(0, -4px, 10px) rotateX(10deg) rotateY(10deg) rotateZ(5deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
}

/* ========================================
   Fade In com 3D
   ======================================== */

@keyframes fadeInTransform3D {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, -30px) rotateX(30deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg);
  }
}

.fade-in.visible {
  animation: fadeInTransform3D 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ========================================
   Efeito 3D em Links
   ======================================== */

a {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}

a:hover {
  transform: translate3d(2px, -2px, 8px);
}

/* ========================================
   Performance Optimizations
   ======================================== */

/* GPU Acceleration */
.card, .service-card, .info-card, .resource-card, .testimonial, 
.hero-person, .partner-logo, .btn-glow {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility: hidden;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .card, .service-card, .info-card, .resource-card, .testimonial,
  .hero-person, .partner-logo, .btn-glow,
  a, .card-icon {
    animation: none;
    transition: none;
  }
}