/* ================================================
   ELECTRIC BORDER — Foto individual de cada especie
================================================ */

/* Contenedor de la foto dentro de species-item */
.species-item__photo {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Marco con borde giratorio */
.electric-border {
  position: relative;
  border-radius: var(--radius-md);
  padding: 4px;
  width: 100%;
  max-width: 480px;

  /* Borde animado */
  background: linear-gradient(
    var(--eb-angle, 0deg),
    var(--green-dark),
    var(--green-pale),
    var(--cream-mid),
    var(--green-light),
    var(--green-dark)
  );
  animation: ebSpin 3.5s linear infinite;

  box-shadow:
    0 0 20px rgba(109,170,122,.45),
    0 0 50px rgba(109,170,122,.18);
}

/* Variante peligro */
.electric-border--danger {
  background: linear-gradient(
    var(--eb-angle, 0deg),
    #8b0000,
    #c0392b,
    #ff8a80,
    #e67e22,
    #8b0000
  );
  box-shadow:
    0 0 20px rgba(192,57,43,.5),
    0 0 50px rgba(192,57,43,.2);
}

/* Rotación usando @property cuando está disponible */
@property --eb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes ebSpin {
  to { --eb-angle: 360deg; }
}

/* Glow blur detrás del marco */
.electric-border::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--radius-md) + 3px);
  background: inherit;
  filter: blur(10px);
  opacity: .55;
  z-index: -1;
  animation: ebSpin 3.5s linear infinite;
}

/* Fallback para navegadores sin @property */
@supports not (background: paint(fallback)) {
  .electric-border {
    background: none;
    border: 3px solid var(--green-light);
    box-shadow: 0 0 16px rgba(109,170,122,.5);
    animation: ebPulse 2s ease infinite;
    padding: 0;
  }
  .electric-border--danger {
    border-color: var(--danger-red);
    box-shadow: 0 0 16px rgba(192,57,43,.5);
  }
  @keyframes ebPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(109,170,122,.5); }
    50%       { box-shadow: 0 0 28px rgba(109,170,122,.85); }
  }
}

/* La imagen dentro del marco */
.electric-frame-img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: zoom-in;
  transition: transform var(--trans-slow), filter var(--trans-mid);
  filter: brightness(.95);
}
.electric-border:hover .electric-frame-img {
  transform: scale(1.025);
  filter: brightness(1.05);
}

@media (max-width: 900px) {
  .electric-frame-img { height: 240px; }
  .electric-border { max-width: 100%; }
}
@media (max-width: 600px) {
  .electric-frame-img { height: 200px; }
}