/* ============================================================
   styles.css — Portafolio Juan Pablo Peiro
   Importado desde index.html
   ============================================================ */


/* ── 1. SCROLLBAR PERSONALIZADO ─────────────────────────────── */
::-webkit-scrollbar         { width: 6px; }
::-webkit-scrollbar-track   { background: #F1F5F9; }
::-webkit-scrollbar-thumb   { background: #2563EB; border-radius: 3px; }


/* ── 2. KEYFRAMES ────────────────────────────────────────────── */

/* Pulso del punto verde en el hero badge */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.4); }
}

/* Flotación suave (decorativos) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* Degradado animado del Hero */
@keyframes hero-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Línea de acento expandiéndose */
@keyframes line-grow {
  from { width: 0; }
  to   { width: 48px; }
}

/* Shimmer sobre la foto */
@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(250%) skewX(-15deg); }
}


/* ── 3. ANIMACIONES DE ENTRADA (base + variantes) ────────────── */
/*
   Todas usan la clase .fade-in como base.
   El JS añade .visible cuando el elemento entra en viewport.
   Variantes de dirección:   .from-left  .from-right  .zoom
   Variantes de retardo:     .delay-1 … .delay-5
*/

.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Desde la izquierda */
.fade-in.from-left {
  transform: translateX(-40px) translateY(0);
}
.fade-in.from-left.visible {
  transform: translateX(0);
}

/* Desde la derecha */
.fade-in.from-right {
  transform: translateX(40px) translateY(0);
}
.fade-in.from-right.visible {
  transform: translateX(0);
}

/* Zoom in */
.fade-in.zoom {
  transform: scale(0.92) translateY(0);
}
.fade-in.zoom.visible {
  transform: scale(1);
}

/* Retardos escalonados para grillas de tarjetas */
.fade-in.delay-1  { transition-delay: 0.08s; }
.fade-in.delay-2  { transition-delay: 0.16s; }
.fade-in.delay-3  { transition-delay: 0.24s; }
.fade-in.delay-4  { transition-delay: 0.32s; }
.fade-in.delay-5  { transition-delay: 0.40s; }
.fade-in.delay-6  { transition-delay: 0.48s; }


/* ── 4. HERO ─────────────────────────────────────────────────── */
.hero-gradient {
  background: linear-gradient(
    -45deg,
    #EFF6FF 0%,
    #F8FAFC 30%,
    #ECFDF5 60%,
    #EFF6FF 100%
  );
  background-size: 400% 400%;
  animation: hero-shift 12s ease infinite;
}


/* ── 5. LÍNEA DECORATIVA DEL ACENTO ─────────────────────────── */
.accent-line::after {
  content: '';
  display: block;
  width: 0;          /* empieza en 0 y crece con la animación */
  height: 4px;
  background: #2563EB;
  border-radius: 2px;
  margin-top: 12px;
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
/* Cuando el padre recibe .visible, crece la línea */
.fade-in.visible .accent-line::after,
.accent-line.visible::after,
section .accent-line::after {
  width: 48px;
  animation: line-grow 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}


/* ── 6. FOTO DE PERFIL — efecto shimmer al hover ─────────────── */
.profile-photo-wrapper {
  position: relative;
  overflow: hidden;
}
.profile-photo-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 60%
  );
  transform: translateX(-100%) skewX(-15deg);
  pointer-events: none;
}
.profile-photo-wrapper:hover::after {
  animation: shimmer 0.75s ease forwards;
}


/* ── 7. TARJETAS DE PROYECTO ─────────────────────────────────── */
.project-card {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 48px rgba(37, 99, 235, 0.13);
}


/* ── 8. NAVEGACIÓN — indicador de link activo ────────────────── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #2563EB;
  transition: width 0.25s ease;
  border-radius: 1px;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}


/* ── 9. SKILL BADGES — entrada escalonada ────────────────────── */
.skill-badge {
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.skill-badge.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* ── 10. SECCIÓN PROYECTOS — separador de categoría ─────────── */
.category-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.fade-in.visible .category-line {
  transform: scaleX(1);
}


/* ── 11. FORMULARIO — focus ring más suave ───────────────────── */
input:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}


/* ── 12. FOOTER ──────────────────────────────────────────────── */
footer a:hover {
  color: #2563EB;
  transition: color 0.2s ease;
}