/* ===================================================
   EFECTOS VISUALES — Portafolio de Angélica Vacca
   Paleta: burdeo (#be123c) → rojo cálido (#f87171)
   =================================================== */

/* --- Canvas de partículas de fondo (header) --- */
#network-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* --- SEGURIDAD: si por algo el JS no llega a cargar,
   las tarjetas se muestran normales (nunca en blanco) --- */
.reveal {
  opacity: 1;
}

/* Perspectiva 3D para el contenedor padre de las tarjetas con .reveal */
.reveal-grid {
  perspective: 1600px;
}

/* Solo se ocultan cuando <html> tiene la clase "js-ready",
   confirmando que el script sí cargó y va a controlar el efecto.
   Cada tarjeta entra con una rotación 3D distinta según su posición
   (izquierda/derecha/centro), dando profundidad real al scroll. */
html.js-ready .reveal {
  opacity: 0;
  transform-style: preserve-3d;
  transform: translateY(40px) translateZ(-120px) rotateX(14deg) rotateY(0deg) scale(0.94);
  filter: blur(6px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

html.js-ready .reveal[data-tilt="left"] {
  transform: translateY(40px) translateZ(-160px) rotateX(10deg) rotateY(18deg) scale(0.92);
}

html.js-ready .reveal[data-tilt="right"] {
  transform: translateY(40px) translateZ(-160px) rotateX(10deg) rotateY(-18deg) scale(0.92);
}

html.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) scale(1);
  filter: blur(0);
}

/* Destello que recorre el borde justo al aparecer */
.reveal::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent, #be123c, #f87171, transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}

html.js-ready .reveal.is-visible::after {
  animation: borderFlash 1s ease-out;
}

@keyframes borderFlash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

/* Escalonar tarjetas dentro del grid */
.reveal:nth-child(1) { transition-delay: 0s; }
.reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal:nth-child(6) { transition-delay: 0.4s; }

/* --- Inclinación 3D sutil al pasar el mouse (tarjetas) --- */
.card-hover {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.card-hover .sweep {
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(190, 18, 60, 0.10) 40%,
    rgba(248, 113, 113, 0.16) 50%,
    rgba(190, 18, 60, 0.10) 60%,
    transparent
  );
  transition: left 0.7s ease;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

@media (hover: hover) {
  .card-hover:hover .sweep {
    left: 130%;
  }
}

/* --- Halo que sigue el cursor en el header (efecto "wow" de entrada) --- */
#hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(500px circle at var(--spot-x, 50%) var(--spot-y, 30%),
              rgba(190, 18, 60, 0.14), transparent 60%);
  transition: background 0.15s ease;
}

/* --- Degradado animado sutil en el nombre (un único "momento" de marca) --- */
.name-gradient-animated {
  background-size: 200% 200%;
  animation: nameShift 6s ease-in-out infinite;
}

@keyframes nameShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* --- Tarjetas de la sección "Conocimiento en Servidores & IA" --- */
.skill-card-3d {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .skill-card-3d:hover {
    transform: translateY(-8px) rotateX(6deg);
  }
  .skill-card-3d:hover .skill-icon-3d {
    transform: translateZ(30px) scale(1.08);
  }
}

.skill-icon-3d {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(0);
}

/* --- Galaxia de habilidades --- */
.galaxy-wrap { position: relative; height: 560px; max-width: 920px; margin: 0 auto; }
@media (max-width: 640px) { .galaxy-wrap { height: 620px; } }
.galaxy-network-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.galaxy-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: clamp(60px, 11vw, 88px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f87171, #be123c 72%);
  box-shadow: 0 0 40px 8px rgba(190,18,60,.45);
  display: flex; align-items: center; justify-content: center; z-index: 5;
  transition: opacity 0.3s ease;
}
.galaxy-hub span { font-size: clamp(12px, 2vw, 15px); font-weight: 800; color: #fff; letter-spacing: 0.02em; }
.galaxy-planets { position: absolute; inset: 0; z-index: 1; }
.planet {
  position: absolute; transform: translate(-50%,-50%);
  width: clamp(92px, 17vw, 128px); aspect-ratio: 1; border-radius: 9999px;
  cursor: pointer; z-index: 10; padding: 0; border: none; background: none;
  transition: left 0.65s cubic-bezier(0.16,1,0.3,1), top 0.65s cubic-bezier(0.16,1,0.3,1),
              width 0.65s cubic-bezier(0.16,1,0.3,1), height 0.65s cubic-bezier(0.16,1,0.3,1),
              opacity 0.5s ease, transform 0.35s ease;
}
@media (hover: hover) { .galaxy-wrap:not(.zoomed) .planet:hover { transform: translate(-50%,-50%) scale(1.08); } }
.planet-surface {
  width: 100%; height: 100%; border-radius: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8px;
  background: rgba(24,24,27,.82);
  border: 1.5px solid var(--planet-color);
  box-shadow: 0 0 22px -6px var(--planet-color), 0 10px 24px -10px rgba(0,0,0,.6);
  transition: border-radius 0.5s ease, padding 0.5s ease, align-items 0.5s ease, text-align 0.5s ease;
  overflow: hidden;
}
.planet-icon-badge {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-bottom: 5px;
  background: var(--planet-bg); border: 1px solid var(--planet-border);
  color: var(--planet-color); font-size: 15px;
  transition: width 0.5s ease, height 0.5s ease, margin 0.5s ease, font-size 0.5s ease;
}
.planet-title {
  font-size: clamp(9px, 2.4vw, 11px); font-weight: 700; color: #fff; line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: ellipsis; word-break: break-word; padding: 0 2px;
}
.planet-body { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; width: 100%; }
.planet-tag {
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #e4e4e7;
}
.planet-close {
  position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease 0.15s, background 0.2s ease;
}
.planet-close:hover { background: rgba(255,255,255,.18); }
.planet-close i { color: #fff; font-size: 12px; }
.planet.active {
  width: auto; height: auto; aspect-ratio: auto; max-width: min(380px, 86vw); z-index: 40; cursor: default; border-radius: 22px;
}
.planet.active .planet-surface { height: auto; border-radius: 22px; padding: 20px 22px; align-items: flex-start; text-align: left; }
.planet.active .planet-icon-badge { width: 46px; height: 46px; margin-bottom: 10px; font-size: 20px; }
.planet.active .planet-title { font-size: 16px; display: block; -webkit-line-clamp: unset; overflow: visible; }
.planet.active .planet-body { max-height: 420px; opacity: 1; transition-delay: 0.28s; margin-top: 8px; }
.planet.active .planet-close { opacity: 1; pointer-events: auto; }
.galaxy-wrap.zoomed .planet:not(.active) { opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.5); }
.galaxy-wrap.zoomed .galaxy-hub { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .planet { transition: opacity 0.3s ease; } }

/* --- Selector de idioma ES / EN --- */
.lang-btn { color: #a1a1aa; background: transparent; cursor: pointer; }
.lang-btn.active { background: #9f1239; color: #fff; }
.lang-btn:not(.active):hover { color: #f87171; }

/* Respeta accesibilidad */
@media (prefers-reduced-motion: reduce) {
  html.js-ready .reveal,
  html.js-ready .reveal::after,
  .card-hover,
  .card-hover .sweep,
  .name-gradient-animated,
  .skill-card-3d,
  .skill-icon-3d {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
  html.js-ready .reveal { opacity: 1; filter: none; }
  #hero-spotlight { display: none; }
}

/* ===================================================
   CAPA "CENTRO DE MONITOREO" — efectos de sitio
   Concepto: la página se comporta como un panel de red
   vivo. Todo comparte la misma paleta burdeo→rojo.
   =================================================== */

/* --- Barra de progreso de scroll (línea de señal) --- */
#scroll-signal {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  z-index: 100;
  background: linear-gradient(90deg, #be123c, #f87171);
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.7);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* --- Resplandor que sigue el cursor a nivel de página --- */
#cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 340px; height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  z-index: 80;
  pointer-events: none;
  background: radial-gradient(circle, rgba(190, 18, 60,0.10) 0%, rgba(248, 113, 113,0.05) 40%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}

/* --- Foco que sigue el cursor DENTRO de cada tarjeta --- */
.card-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
              rgba(190, 18, 60, 0.13), transparent 65%);
}

@media (hover: hover) {
  .card-hover:hover::before { opacity: 1; }
}

/* El contenido de la tarjeta debe quedar por encima del foco */
.card-hover > * { position: relative; z-index: 2; }

/* --- Brillo que recorre la tarjeta según la inclinación 3D --- */
.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.07) 50%, transparent 60%);
}

/* --- Encabezados que se ensamblan por palabra al entrar en pantalla --- */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px) rotateX(-40deg);
  transform-origin: bottom center;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.split-ready .split-word.is-in { opacity: 1; transform: translateY(0) rotateX(0); }
/* Sin JS, los títulos se ven normales */
html:not(.js-ready) .split-word { opacity: 1; transform: none; }

/* --- Botones magnéticos --- */
.magnetic { will-change: transform; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }

/* --- Marco tipo terminal para la línea de roles del hero --- */
.role-line { position: relative; }
.role-caret {
  display: inline-block;
  width: 9px;
  height: 1.05em;
  margin-left: 4px;
  vertical-align: -0.16em;
  background: #f87171;
  box-shadow: 0 0 10px rgba(248, 113, 113,0.8);
  animation: caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* --- Etiquetas de estado tipo panel de monitoreo --- */
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 0 0 rgba(248, 113, 113,0.6);
  animation: statusPulse 2.4s ease-out infinite;
}
@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(248, 113, 113,0.5); }
  70%  { box-shadow: 0 0 0 9px rgba(248, 113, 113,0); }
  100% { box-shadow: 0 0 0 0 rgba(248, 113, 113,0); }
}

/* --- Cinta de tecnologías en movimiento continuo --- */
.tech-rail { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tech-rail-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  animation: railScroll 38s linear infinite;
  will-change: transform;
}
.tech-rail-track > * { flex: 0 0 auto; }
.tech-rail:hover .tech-rail-track { animation-play-state: paused; }
@keyframes railScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Accesibilidad: todo lo anterior se apaga si se pide menos movimiento --- */
@media (prefers-reduced-motion: reduce) {
  #cursor-glow { display: none !important; }
  .split-word { opacity: 1 !important; transform: none !important; }
  .role-caret { animation: none; }
  .status-dot { animation: none; }
  .tech-rail-track { animation: none; }
  .magnetic { transition: none !important; transform: none !important; }
  .tilt-glare { display: none; }
}


/* ===================================================
   MÓVIL — que se sienta tan potente como en escritorio
   =================================================== */

/* La tarjeta que estás mirando se realza sola al hacer scroll */
.card-hover.in-focus,
.skill-card-3d.in-focus {
  border-color: rgba(190, 18, 60, 0.45);
  box-shadow: 0 18px 40px -12px rgba(190, 18, 60, 0.28),
              0 0 22px -6px rgba(248, 113, 113, 0.18);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.4s ease;
}

/* Un haz de luz recorre la tarjeta enfocada, sustituyendo al hover del mouse */
@media (hover: none) {
  .card-hover.in-focus .sweep { animation: mobileSweep 1.5s ease-out; }
  @keyframes mobileSweep {
    from { left: -60%; }
    to   { left: 130%; }
  }

  /* Los títulos de sección reciben un subrayado que se dibuja al entrar */
  .split-ready { position: relative; }
}

/* En móvil el borde de la tarjeta enfocada respira suavemente */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .skill-card-3d.in-focus .skill-icon-3d {
    transform: scale(1.1);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* El resplandor grande del hero es muy costoso de repintar en móviles:
   se reduce el radio de desenfoque para que el scroll siga fluido. */
@media (max-width: 768px) {
  .hero-glow { filter: blur(60px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .card-hover.in-focus, .skill-card-3d.in-focus { transform: none !important; }
  .card-hover.in-focus .sweep { animation: none !important; }
}