/*
 * Logos animados de Clipgeist. El PNG original no se toca; encima van capas finas
 * (párpados, destellos, escaneo) posicionadas en % del icono de 256 px, así que no
 * se deforma nunca y escala a cualquier tamaño. Uso:
 *   <span class="geisty" data-app="clipgeist"><img src="assets/clipgeist-logo.png" alt=""></span>
 */
.geisty {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: 22%;
  overflow: hidden;
  isolation: isolate;
  animation: geisty-flota 4.8s ease-in-out infinite;
}
.geisty img { width: 100%; height: auto; display: block; }
.geisty > i { position: absolute; pointer-events: none; display: block; }

@keyframes geisty-flota { 50% { transform: translateY(-4%); } }

/* Destello diagonal que cruza el icono cada pocos segundos. */
.geisty .brillo {
  inset: -20% auto -20% -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg);
  animation: geisty-brillo 6s ease-in-out infinite;
  z-index: 3;
}
@keyframes geisty-brillo { 0%, 70% { left: -60%; } 90%, 100% { left: 130%; } }

/* Párpados: un óvalo del blanco del fantasma que baja y sube sobre cada ojo. */
.geisty .parpado {
  background: #fafafb;
  border-radius: 50%;
  transform: scaleY(0);
  transform-origin: top;
  animation: geisty-parpadeo 4.2s infinite;
}
@keyframes geisty-parpadeo {
  0%, 91%, 100% { transform: scaleY(0); }
  94%, 96% { transform: scaleY(1); }
}

/* Chispa que late (estrella, rayitas). */
.geisty .chispa {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 236, 160, 0.5) 35%, transparent 70%);
  mix-blend-mode: screen;
  animation: geisty-chispa 2.4s ease-in-out infinite;
}
@keyframes geisty-chispa { 0%, 100% { opacity: 0; transform: scale(0.4); } 50% { opacity: 1; transform: scale(1); } }

/* Reflejo que recorre el cristal de la lupa. */
.geisty .lente { border-radius: 50%; overflow: hidden; }
.geisty .lente::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; width: 35%; left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-15deg);
  animation: geisty-lente 3.2s ease-in-out infinite;
}
@keyframes geisty-lente { 0%, 55% { left: -50%; } 85%, 100% { left: 120%; } }

/* Línea de escaneo sobre las fotos (clonbuster). */
.geisty .escaneo { overflow: hidden; border-radius: 8%; }
.geisty .escaneo::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14%; top: -14%;
  background: linear-gradient(transparent, rgba(110, 255, 200, 0.7), transparent);
  mix-blend-mode: screen;
  animation: geisty-escaneo 2.8s ease-in-out infinite;
}
@keyframes geisty-escaneo { 0%, 20% { top: -14%; } 70%, 100% { top: 100%; } }

/* Halo que late en la base del holograma (clipgeist). */
.geisty .halo-base {
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(90, 255, 220, 0.55), transparent);
  mix-blend-mode: screen;
  animation: geisty-halo 2.6s ease-in-out infinite;
}
@keyframes geisty-halo { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }

@media (prefers-reduced-motion: reduce) {
  .geisty, .geisty > i, .geisty > i::after { animation: none !important; }
}