/**
 * Animated Icons CSS — keyframes + transitions
 * Converted from itshover React/Motion to pure CSS
 */

/* ── Shared ── */
.icon-hover svg,
.icon-hover-standalone svg {
  overflow: visible;
}
.icon-hover path,
.icon-hover circle,
.icon-hover rect,
.icon-hover g,
.icon-hover-standalone path,
.icon-hover-standalone circle,
.icon-hover-standalone rect,
.icon-hover-standalone g {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ── Brain Circuit ── */
@keyframes brain-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
@keyframes circuit-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes terminal-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.8); opacity: 1; }
}

/* ── Globe ── */
.globe-circle {
  transform-origin: 23px 19px;
}
@keyframes globe-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes globe-reset {
  to { transform: rotate(0deg); }
}

/* ── Camera ── */
.lens {
  transform-origin: 12px 13px;
  transition: transform 0.3s ease-out;
}
.cam-body {
  transform-origin: 12px 12px;
  transition: transform 0.3s ease-out;
}

/* ── CPU ── */
.pins, .inner, .outer {
  transform-origin: 12px 12px;
}
@keyframes cpu-pins {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
@keyframes cpu-inner {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.9); }
}
@keyframes cpu-outer {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ── Sparkles ── */
.sparkle-main {
  transform-origin: 9px 12px;
}
.sparkle-top {
  transform-origin: 18px 6px;
}
.sparkle-bottom {
  transform-origin: 18px 18px;
}
@keyframes sparkle-rotate-main {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(180deg) scale(1); }
}
@keyframes sparkle-rotate-top {
  0% { transform: rotate(0deg) scale(1); opacity: 1; }
  50% { transform: rotate(-90deg) scale(0.8); opacity: 0.6; }
  100% { transform: rotate(-90deg) scale(1.1); opacity: 1; }
}
@keyframes sparkle-rotate-bottom {
  0% { transform: rotate(0deg) scale(1); opacity: 1; }
  50% { transform: rotate(90deg) scale(1.15); opacity: 0.7; }
  100% { transform: rotate(90deg) scale(0.9); opacity: 1; }
}

/* ── Gear ── */
.gear-rotator {
  transform-origin: 16px 16px;
}
.gear-center {
  transform-origin: 16px 16px;
}
@keyframes gear-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes gear-center-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ── Mail ── */
.mail-flap {
  transform-origin: 50% 0%;
  transition: transform 0.5s ease-in-out;
  transform-style: preserve-3d;
}
.icon-hover svg,
.icon-hover-standalone svg {
  perspective: 800px;
}