/* --- 6. SVG ICONS & THEME TOGGLE --- */
.icon {
  position: absolute;
  width: 20px;
  height: 20px;
  stroke: var(--text);
  fill: none;
  pointer-events: none;

  transition:
    transform 0.4s; cubic-bezier(.22,1,.36,1),
    opacity 0.25s;
}

.sun { opacity: 1; transform: rotate(0deg) scale(1); }
.moon { opacity: 0; transform: rotate(120deg) scale(0.6); }

body.light .sun { opacity: 0; transform: rotate(-120deg) scale(0.6); }
body.light .moon { opacity: 1; transform: rotate(0deg) scale(1); }