/* UPLINK // effects.css — Bottom-left profile + settings gear, shared glitch animations. */

/* ================= v3: settings / profile / gifs ================= */
/* --- bottom-left identity + gear --- */
.me {
  gap: 8px;
}
.me-id {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 4px;
  margin: -4px;
  cursor: pointer;
  text-align: left;
}
.me-id:hover .me-txt b {
  color: var(--accent);
}
.gear svg {
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.gear:hover svg {
  transform: rotate(90deg);
}
.gear.spin svg {
  transform: rotate(180deg);
}

/* --- shared glitch-in (tear + RGB split + flash) --- */
@keyframes glitchIn {
  0% {
    opacity: 0;
    clip-path: inset(40% 0 45% 0);
    transform: translate(-22px, 0) skewX(-12deg);
    filter: hue-rotate(90deg) saturate(4);
  }
  10% {
    opacity: 1;
    clip-path: inset(5% 0 80% 0);
    transform: translate(16px, -3px) skewX(8deg);
  }
  20% {
    clip-path: inset(62% 0 8% 0);
    transform: translate(-10px, 2px);
    filter: invert(1);
  }
  30% {
    clip-path: inset(20% 0 52% 0);
    transform: translate(8px, 0) skewX(-4deg);
    filter: none;
  }
  40% {
    clip-path: inset(78% 0 0 0);
    transform: translate(-5px, 0);
  }
  52% {
    clip-path: inset(0 0 30% 0);
    transform: translate(3px, 1px);
    filter: hue-rotate(-60deg);
  }
  64% {
    clip-path: inset(0);
    transform: translate(-2px, 0);
    filter: none;
  }
  76% {
    transform: translate(1px, 0);
  }
  100% {
    clip-path: inset(0);
    transform: none;
    opacity: 1;
  }
}
@keyframes rgbSplit {
  0%,
  60% {
    text-shadow:
      -4px 0 #ff2a00,
      4px 0 #00e5ff;
  }
  20% {
    text-shadow:
      5px 1px #ff2a00,
      -3px -1px #00e5ff;
  }
  40% {
    text-shadow:
      -2px -2px #ff2a00,
      3px 2px #00e5ff;
  }
  100% {
    text-shadow: none;
  }
}
@keyframes scanFlash {
  0% {
    opacity: 0.85;
  }
  25% {
    opacity: 0.25;
  }
  35% {
    opacity: 0.6;
  }
  60% {
    opacity: 0.1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scanRoll {
  to {
    background-position: 0 120px;
  }
}
@keyframes glitchOut {
  0% {
    opacity: 1;
  }
  30% {
    clip-path: inset(30% 0 30% 0);
    transform: translate(10px, 0) skewX(6deg);
  }
  60% {
    clip-path: inset(48% 0 48% 0);
    transform: translate(-14px, 0);
    opacity: 0.8;
  }
  100% {
    clip-path: inset(50% 0 50% 0);
    opacity: 0;
  }
}