/**
 * Efectos de alto impacto: cursor, reveal, nav blur, sheen en botones.
 */

/* --- Cursor personalizado (solo desktop, no touch) --- */
body.has-custom-cursor,
body.has-custom-cursor * {
  cursor: none !important;
}
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor .project-card,
body.has-custom-cursor .tech-tag,
body.has-custom-cursor .metric-card,
body.has-custom-cursor .contact-item,
body.has-custom-cursor .hero-tags span,
body.has-custom-cursor .chatbot-toggle,
body.has-custom-cursor .lang-selector-trigger,
body.has-custom-cursor .chatbot-chip {
  cursor: none;
}

.cursor-dot {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0d0d0d;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.cursor-dot.is-hover {
  width: 44px;
  height: 44px;
  background: transparent;
  border: 2px solid #0d0d0d;
}

/* --- Staggered reveal al hacer scroll --- */
.reveal-section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Nav blur dinámico al scroll --- */
.nav-content.nav-scrolled {
  backdrop-filter: blur(24px) saturate(1.2);
  background: rgba(248, 246, 241, 0.92);
}
[data-theme="dark"] .nav-content.nav-scrolled {
  background: rgba(10, 10, 10, 0.92);
}

/* --- Sheen en botones (destello al hover) --- */
.btn-primary,
.btn-secondary,
.view-all-btn {
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.btn-secondary::after,
.view-all-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  transform: skewX(-18deg);
  transition: left 0.55s ease;
}
.btn-primary:hover::after,
.btn-secondary:hover::after,
.view-all-btn:hover::after {
  left: 120%;
}

/* Transición suave para tilt 3D en fotos */
.photo-main,
.photo-small {
  transition: transform 0.2s ease-out;
  transform-origin: center center;
}

/* Tags magnéticos: transición suave */
.hero-tags span {
  transition: transform 0.2s ease-out;
}