/* ============================================
   10-PORTFOLIO-REEL.CSS
   Carrusel estilo Instagram dentro de las
   tarjetas del portfolio: crossfade + dots
   ============================================ */

/* ─── CONTENEDOR ─── */
.portfolio-reel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #07111c;
  border-radius: 0;          /* hereda del card */
}

/* ─── SLIDES ─── */
.portfolio-reel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
  will-change: opacity;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;     /* los clicks van al botón padre */
}

.portfolio-reel__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.portfolio-reel__slide.is-prev {
  opacity: 0;
  z-index: 0;
}

/* ─── BARRA DE PROGRESO (estilo Instagram) ─── */
.portfolio-reel__bars {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  gap: 3px;
  pointer-events: none;
}

.portfolio-reel__bar {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.portfolio-reel__bar-fill {
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* Barra completa (slides anteriores) */
.portfolio-reel__bar.is-done .portfolio-reel__bar-fill {
  width: 100%;
  transition: none;
}

/* Barra activa: animación CSS de llenado */
.portfolio-reel__bar.is-active .portfolio-reel__bar-fill {
  width: 100%;
  /* duración se aplica via JS (inline style) */
  transition: width var(--reel-duration, 7s) linear;
}

/* ─── PAUSA VISIBLE ─── */
.portfolio-reel.is-paused .portfolio-reel__bar.is-active .portfolio-reel__bar-fill {
  /* detener la animación en el punto actual */
  animation-play-state: paused;
  transition: none;
}

/* ─── OVERLAY sutil en hover para indicar interactividad ─── */
.portfolio__card:hover .portfolio-reel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    transparent 30%
  );
  pointer-events: none;
}

/* ─── DOTS (alternativa visible en mobile) ─── */
.portfolio-reel__dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 5px;
  pointer-events: none;
}

.portfolio-reel__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: background 0.3s, transform 0.3s;
  flex-shrink: 0;
}

.portfolio-reel__dot.is-active {
  background: rgba(255,255,255,0.95);
  transform: scale(1.25);
}

/* ─── ICONO PAUSA ─── */
.portfolio-reel__pause-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 15;
  width: 40px;
  height: 40px;
  background: rgba(0,0,0,0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s;
  opacity: 0;
  pointer-events: none;
}

.portfolio-reel__pause-icon svg {
  width: 16px;
  height: 16px;
  fill: white;
}

.portfolio-reel.is-paused .portfolio-reel__pause-icon {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 480px) {
  .portfolio-reel__bars {
    top: 5px;
    left: 5px;
    right: 5px;
    gap: 2px;
  }
  .portfolio-reel__bar {
    height: 2px;
  }
}