/*  █████╗ ██████╗  ██████╗ ██╗   ██╗████████╗     ██████╗███████╗███████╗ */
/* ██╔══██╗██╔══██╗██╔═══██╗██║   ██║╚══██╔══╝    ██╔════╝██╔════╝██╔════╝ */
/* ███████║██████╔╝██║   ██║██║   ██║   ██║       ██║     ███████╗███████╗ */
/* ██╔══██║██╔══██╗██║   ██║██║   ██║   ██║       ██║     ╚════██║╚════██║ */
/* ██║  ██║██████╔╝╚██████╔╝╚██████╔╝   ██║       ╚██████╗███████║███████║ */
/* ╚═╝  ╚═╝╚═════╝  ╚═════╝  ╚═════╝    ╚═╝        ╚═════╝╚══════╝╚══════╝ */
/**************************************************************
 * ABOUT ME CARD — AVATAR STYLE
 * Selector: .content .avatar
 * Displays the small pixel-art portrait within the About Me card.
 **************************************************************/
/* ==========================================================
   AVATAR CONTAINER
   ========================================================== */
.content .avatar {
  /* Size & Shape */
  width: 88px;
  height: 88px;
  border-radius: 8px; /* slightly rounded pixel frame */
  /* Border & Shadow */
  border: 3px solid var(--black);
  box-shadow:
    6px 6px 0 var(--black),      /* bold pixel-style drop shadow */
    0 0 12px var(--neon-blue);   /* soft neon glow */
  /* Background Image (avatar artwork) */
  background: url("/assets/cv/avatars/avatar.png") center / cover repeat;
  /* Optional alt pattern for pixel stripe effect (disabled)
     repeating-linear-gradient(90deg, var(--neon-blue) 0 2px, var(--neon-pink) 2px 4px);
  */
  /* Rendering */
  image-rendering: pixelated; /* keeps pixel-art sharp */
  /* Spacing */
  margin-bottom: 18px;
}
/**************************************************************
 * ARROW LOADER ANIMATION
 * Animated chevron arrows (❯❯❯) for visual flair near avatar.
 **************************************************************/
.arrowLoader {
  position: relative;
  font-family: 'Press Start 2P', monospace;
  font-size: 50px; /* adjust size as needed */
  color: var(--neon-blue);
  text-shadow:
    0 0 6px var(--neon-blue),
    0 0 12px var(--neon-blue);
  background: transparent;
  margin-left: 110px;
}
/* Grow / animate arrow sequence */
.arrowLoader::after {
  content: "❯";
  animation: arrowGrow 1.5s steps(5) infinite;
}
/* ==========================================================
   KEYFRAMES — ARROW GROW LOOP
   Cycles through 1–5 arrows for continuous movement.
   ========================================================== */
@keyframes arrowGrow {
  0%   { content: "❯"; }
  22%  { content: "❯❯"; }
  44%  { content: "❯❯❯"; }
  66%  { content: "❯❯❯❯"; }
  88%  { content: "❯❯❯❯❯"; }
  100% { content: "❯"; }
}
/**************************************************************
 * AVATAR LAYOUT (inside About Me card)
 * Aligns avatar image and arrow loader horizontally.
 **************************************************************/
.avatar {
  display: flex;
  flex-direction: row;
}