/*css/styles.css*/
.profile-image {
  width: auto;
  height: 80vh;
  max-height: 80vh;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent);
  mask-image: linear-gradient(to bottom, black 80%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: revealImage 1s ease-out 1s forwards;
}
/* Píldoras con pseudo-underline animado */
.tab-btn {
  @apply relative font-semibold uppercase tracking-wide antialiased transition-colors duration-200;
}
.tab-btn::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: theme("colors.cyan.400");
  transition: width 0.3s ease, left 0.3s ease;
}
.tab-btn[aria-selected="true"]::after,
.tab-btn:hover::after {
  width: 50%;
  left: 25%;
}

/* Ring de foco personalizado */
.tab-btn:focus {
  outline: none;
 }

/* Fondo sutil cuando está activo */
.tab-btn[aria-selected="true"] {
  @apply bg-white/10 backdrop-blur-sm text-white;
}

/* Animación de relleno de agua para la navegación de proyectos */
/* -------------- EFECTO AGUA GENÉRICO -------------- */
.projects-nav .water-effect {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image:
    var(--fill-water),
    linear-gradient(white, white);
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 100% 0%, 100% 100%;
  background-position: bottom left, bottom left;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease-out;
  display: block;
}

.projects-nav .water-effect:hover {
  background-size: 100% 100%, 100% 100%;
}


/* -------------- EFECTOS PERSONALIZADOS -------------- */
.projects-nav .custom-layer {
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Dos capas: la customizada (primera), más un respaldo blanco */
  background-image:
    var(--fill-custom),
    linear-gradient(white, white);
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 100% 0%, 100% 100%;
  background-position: bottom left, bottom left;
  background-repeat: no-repeat;
  transition: background-size 0.6s ease-out;
  display: block;
}
/* 1) Haz que la I herede el mismo gradiente y clipping que el li.custom-layer */
.projects-nav .custom-layer .sensor-i {
  /* transparent para que el texto saque el fondo */
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  /* toma el mismo gradiente definido en --fill-custom */
  background-image: var(--fill-custom), linear-gradient(white, white);
  background-clip: text;
  -webkit-background-clip: text;
  /* mismo tamaño inicial que el resto */
  background-size: 100% 0%, 100% 100%;
  background-position: bottom left, bottom left;
  background-repeat: no-repeat;
  transition: background-size 0.6s ease-out;
  display: inline-block; /* para que funcione el fondo */
  --wifi-color: #00d390;
}

/* Estilo similar para la I de NOMIA con una estrella */
.projects-nav .custom-layer .star-i {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  background-image: var(--fill-custom), linear-gradient(white, white);
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 100% 0%, 100% 100%;
  background-position: bottom left, bottom left;
  background-repeat: no-repeat;
  transition: background-size 0.6s ease-out;
  display: inline-block;
  --star-color: currentColor;
  position: relative;
  vertical-align: middle;
  top: -0.4rem;
}

/* 2) Al hacer hover sobre el li.custom-layer, expande también el fondo de .sensor-i */
.projects-nav .custom-layer:hover .sensor-i {
  background-size: 100% 100%, 100% 100%;
}

/* y también para la versión con estrella */
.projects-nav .custom-layer:hover .star-i {
  background-size: 100% 100%, 100% 100%;
}

/* 3) Conserva el color de las ondas Wi-Fi */
.sensor-i::before,
.sensor-i::after,
.sensor-i span {
  border-top: 2px solid var(--wifi-color) !important;
}

.projects-nav .custom-layer:hover {
  background-size: 100% 100%, 100% 100%;
}

/* ------------------ ANIMACIONES ------------------ */

@keyframes slideDownFade {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

header {
  animation: slideDownFade 0.8s ease-out forwards;
}

header .font-extrabold {
  opacity: 0;
  animation: slideDownFade 0.6s ease-out 0.4s forwards;
}

header #socialIcons a {
  opacity: 0;
  animation: slideDownFade 0.6s ease-out calc(0.4s + var(--i) * 0.1s) forwards;
}

header #menuToggle {
  opacity: 0;
  animation: slideDownFade 0.6s ease-out 0.7s forwards;
}

@keyframes revealImage {
  from { opacity: 0; transform: translate(-50%, -30%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes typing {
  from { width: 0; opacity: 1; }
  to   { width: 100%; opacity: 1; }
}

@keyframes blinkCaret { 50% { border-color: transparent; } }

.hero-title {
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: .15em solid rgba(255,255,255,0.75);
  animation: typing 1.5s steps(30) 1.2s forwards,
             blinkCaret .75s step-end infinite 2.7s;
}

@keyframes fadeScale { to { opacity: 1; transform: scale(1); } }

.subtext {
  opacity: 0;
  transform: scale(0.8);
  animation: fadeScale 0.5s ease-out 2.7s forwards;
}
/* Wi-Fi effect for "i" letter */
.sensor-i {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: var(--wifi-color, currentColor);
  top: -0.4rem;
}
.sensor-i::before,
.sensor-i::after,
.sensor-i span {
  content: '';
  position: absolute;
  bottom: 70%;
  left: 50%;
  transform-origin: bottom center;
  border-radius: 50% 50% 0 0;
  border-left: none;
  border-right: none;
  opacity: 0; /* Inicialmente oculto */
  animation-play-state: paused;
  transition: opacity 0.3s ease; /* Transición suave */
}

.sensor-i.active-wave::before,
.sensor-i.active-wave::after,
.sensor-i.active-wave span {
  animation-play-state: running;
  opacity: 1; /* Visible cuando está activo */
}
.sensor-i::before {
  width: 0.3em;
  height: 0.15em;
  border-top: 2px solid currentColor;
  transform: translate(-50%, -0.05em);
  z-index: 3;
}
.sensor-i::after {
  width: 0.5em;
  height: 0.25em;
  border-top: 1.8px solid currentColor;
  transform: translate(-50%, -0.08em);
  z-index: 2;
}
.sensor-i span {
  width: 0.7em;
  height: 0.35em;
  border-top: 1.5px solid currentColor;
  transform: translate(-50%, -0.11em);
  z-index: 1;
}
@keyframes wave1 {
  0% { opacity: 0.8; transform: translate(-50%, -0.05em) scaleX(0.5); }
  50% { opacity: 0; transform: translate(-50%, -0.05em) scaleX(1.2); }
  100% { opacity: 0; transform: translate(-50%, -0.05em) scaleX(0.5); }
}
@keyframes wave2 {
  0% { opacity: 0.6; transform: translate(-50%, -0.08em) scaleX(0.6); }
  50% { opacity: 0; transform: translate(-50%, -0.08em) scaleX(1.3); }
  100% { opacity: 0; transform: translate(-50%, -0.08em) scaleX(0.6); }
}
@keyframes wave3 {
  0% { opacity: 0.4; transform: translate(-50%, -0.11em) scaleX(0.7); }
  50% { opacity: 0; transform: translate(-50%, -0.11em) scaleX(1.4); }
  100% { opacity: 0; transform: translate(-50%, -0.11em) scaleX(0.7); }
}


/* 1) Base: las ondas siempre ocultas */
.projects-nav .custom-layer .sensor-i::before,
.projects-nav .custom-layer .sensor-i::after,
.projects-nav .custom-layer .sensor-i span {
  opacity: 0;
}

/* 2) Al hacer hover, arrancan las animaciones con sus delays */
.projects-nav .custom-layer:hover .sensor-i::before {
  animation: wave1 2.5s ease-out infinite 0s;
}
.projects-nav .custom-layer:hover .sensor-i::after {
  animation: wave2 2.5s ease-out infinite 0.6s;
}
.projects-nav .custom-layer:hover .sensor-i span {
  animation: wave3 2.5s ease-out infinite 1.2s;
}

/* ------------------ EFECTO ESTRELLA PARA NOMIA ------------------ */
.star-i .star {
  position: absolute;
  bottom: 60%;
  left: 50%;
  width: 0.5em;
  height: 0.5em;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  opacity: 0;
}
.star-i.active-star .star {
  animation: starScale 0.6s ease-out forwards;
}
@keyframes starScale {
  from {
    opacity: 0;
    transform: translate(-50%, 30%) scale(0);
  }
  to {
    opacity: 0.5;
    transform: translate(-50%, 10%) scale(0.3);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.7);
  }
}



/* —— EFECTO ARAÑAZO PARA DRUIDS —— */
.projects-nav .scratch-layer {
  position: relative;
  display: inline-block;  
}

.projects-nav .scratch-layer::before {
  content: "";
  position: absolute;
  /* LEFT en porcentaje del ancho total del texto */
  left: 75%;            
  bottom: 0.8em;        
  
  width: 2em;          
  height: 1em;         

  background: url("../assets/garras7.webp") no-repeat center bottom;
  background-size: contain;
  pointer-events: none;

  /* 1. Configuramos el delay de 1s en la animación */
  animation: scratch-up 0.4s ease-out 0.3s forwards;
  animation-play-state: paused;

  /* 2. Lo ocultamos por defecto y añadimos transición para el fade-out */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* Al hacer hover, arrancamos la animación y lo mostramos */
.projects-nav .scratch-layer:hover::before {
  animation-play-state: running;
}
/* Al quitar el hover, cancelamos la animación y lo ocultamos de golpe */
.projects-nav .scratch-layer:not(:hover)::before {
  animation: none;
  opacity: 0;
}

@keyframes scratch-up {
  0% {
    transform: translate(-60%, -10%) rotate(-15deg);
    opacity: 0;
  }
  40% {
    opacity: 0.1;   
  }
  70% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, 50%) rotate(-1deg);
    opacity: 1;
  }
}


.projects-nav .scanner-layer {
  position: relative;
  display: block;  
  width: auto;           
}

/* El contenedor de la animación cubre todo el li */
.projects-nav .scanner-layer .scanner {
  position: absolute;
  top: 0; left: -28px;
  width: 20vh; /* Ajusta el ancho según sea necesario */
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1; /* sobre el fondo de texto */
}

/* El SVG de Lottie se estira para llenar el contenedor */
.projects-nav .scanner-layer .scanner svg {
  width: 100%;
  height: 100%;
  display: block;
}

.scanner-wrapper {
  display: inline-block;
}

/* El contenedor .scanner se expande al 100% de su wrapper, no del li */
.scanner-wrapper .scanner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* —— ESCONDEMOS EL SCANNER POR DEFECTO —— */
.projects-nav .scanner-layer .scanner {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* —— CUANDO HACES HOVER EN APPSISTENCIA —— */
.projects-nav .scanner-layer:hover .scanner {
  animation: scannerAnimation 1s ease-in-out 0.3s forwards;
}

@keyframes scannerAnimation {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- Utilidades para el panel de información --- */
.fade {
  transition: opacity 0.2s ease;
}