/* Animaciones para iconos y letras del robot AI */
.ai-bot-icons-animated .tech-icon {
  will-change: transform, opacity;
}
.ai-bot-bar-animated {
  will-change: width, background-position;
}
.ai-bot-message span, .ai-bot-desc-message span {
  will-change: transform, opacity;
}
/* Shared animations extracted from inline styles to improve caching */

@keyframes roboticBounce {
  0% { transform: translateY(0); }
  25% { transform: translateY(-3px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

@keyframes shine {
  0%, 100% {
    text-shadow:
      0 0 4px rgba(0, 191, 255, 0.25),
      0 0 10px rgba(0, 191, 255, 0.15);
  }
  50% {
    text-shadow:
      0 0 6px rgba(0, 191, 255, 0.35),
      0 0 14px rgba(0, 191, 255, 0.22);
  }
}

.robotic-letter {
  display: inline-block;
  color: rgba(0, 191, 255, 0.85) !important;
  animation: roboticBounce 2s infinite, shine 2s infinite;
}

@keyframes shineAndMove {
  0% {
    transform: translateY(0);
    text-shadow: 0 0 4px rgba(0, 191, 255, 0.22);
    filter: brightness(1);
  }
  50% {
    transform: translateY(-5px);
    text-shadow: 0 0 10px rgba(0, 191, 255, 0.35);
    filter: brightness(1.15);
  }
  100% {
    transform: translateY(0);
    text-shadow: 0 0 4px rgba(0, 191, 255, 0.22);
    filter: brightness(1);
  }
}

.animated-letter {
  display: inline-block;
  color: rgba(0, 191, 255, 0.85) !important;
  animation: shineAndMove 2s infinite;
}

@keyframes indexNavGlowPulse {
  0%, 100% {
    text-shadow: 0 0 2px rgba(0, 191, 255, 0.14), 0 0 6px rgba(0, 191, 255, 0.08);
  }
  50% {
    text-shadow: 0 0 4px rgba(0, 191, 255, 0.22), 0 0 10px rgba(0, 191, 255, 0.12);
  }
}

.index-nav-glow {
  display: inline-block;
  color: rgba(0, 191, 255, 0.85) !important;
  animation: roboticBounce 2s infinite, indexNavGlowPulse 2.6s infinite;
}

/* Contact page: email HUD animation (icons + path + flying planes) */
.page-contact .email-animation {
  padding: 56px 16px 18px;
  background: #fff;
}

.page-contact .email-animation .ea-hud {
  --ea-side: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 124px;
  max-width: 860px;
  margin: 0 auto;
  padding: 34px 34px;
  border-radius: 22px;
  color: rgba(0, 191, 255, 0.98);

  /* Modern card */
  background:
    radial-gradient(80% 120% at 10% 30%, rgba(0, 191, 255, 0.10), transparent 60%),
    radial-gradient(80% 120% at 90% 70%, rgba(0, 191, 255, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 249, 252, 0.92));
  border: 1px solid rgba(0, 191, 255, 0.18);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.75) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.page-contact .email-animation .ea-hud::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 191, 255, 0.00) 0px,
    rgba(0, 191, 255, 0.00) 18px,
    rgba(0, 191, 255, 0.08) 18px,
    rgba(0, 191, 255, 0.08) 19px
  );
  opacity: 0.22;
  pointer-events: none;
}

.page-contact .email-animation .ea-end,
.page-contact .email-animation .ea-core {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 2px solid rgba(0, 191, 255, 0.50);
  background: rgba(0, 191, 255, 0.05);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.70) inset,
    0 14px 32px rgba(0, 0, 0, 0.08);
  animation: eaPulse 2.4s ease-in-out infinite;
}

.page-contact .email-animation .ea-end i,
.page-contact .email-animation .ea-core i {
  font-size: 22px;
}

.page-contact .email-animation .ea-core {
  border-radius: 999px;
  border-color: rgba(0, 191, 255, 0.65);
  background: rgba(0, 191, 255, 0.08);
  animation-duration: 2.1s;
}

.page-contact .email-animation .ea-path {
  position: absolute;
  left: var(--ea-side);
  right: var(--ea-side);
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
  background:
    linear-gradient(90deg,
      rgba(0, 191, 255, 0.15) 0%,
      rgba(0, 191, 255, 0.65) 28%,
      rgba(0, 191, 255, 0.85) 50%,
      rgba(0, 191, 255, 0.65) 72%,
      rgba(0, 191, 255, 0.15) 100%
    );
  opacity: 0.9;
}

.page-contact .email-animation .ea-path::after {
  content: "";
  position: absolute;
  inset: -5px 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(0, 191, 255, 0.00) 0px,
    rgba(0, 191, 255, 0.00) 14px,
    rgba(0, 191, 255, 0.35) 14px,
    rgba(0, 191, 255, 0.35) 16px
  );
  opacity: 0.35;
  mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}

.page-contact .email-animation .ea-mail {
  position: absolute;
  top: 50%;
  left: var(--ea-side);
  transform: translate(-50%, -50%);
  font-size: 20px;
  filter: drop-shadow(0 10px 18px rgba(0, 191, 255, 0.22));
  opacity: 0;
  animation: eaMailFly 3.1s linear infinite;
}

.page-contact .email-animation .ea-mail-2 {
  animation-delay: 1.3s;
}

@keyframes eaPulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.70) inset, 0 10px 26px rgba(0, 0, 0, 0.06); }
  50% { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.78) inset, 0 14px 34px rgba(0, 191, 255, 0.10); }
}

@keyframes eaMailFly {
  0% {
    left: var(--ea-side);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92) rotate(-8deg);
  }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% {
    left: calc(100% - var(--ea-side));
    opacity: 0;
    transform: translate(-50%, -62%) scale(1.05) rotate(10deg);
  }
}

@media (max-width: 520px) {
  .page-contact .email-animation .ea-hud {
    --ea-side: 104px;
    gap: 44px;
    max-width: 92vw;
    padding: 22px 16px;
  }
  .page-contact .email-animation .ea-path {
    left: var(--ea-side);
    right: var(--ea-side);
  }
  .page-contact .email-animation .ea-mail {
    left: var(--ea-side);
  }
  @keyframes eaMailFly {
    0% { left: var(--ea-side); opacity: 0; transform: translate(-50%, -50%) scale(0.92) rotate(-8deg); }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: calc(100% - var(--ea-side)); opacity: 0; transform: translate(-50%, -62%) scale(1.05) rotate(10deg); }
  }
}