/* ─── Page load animation ───────────────────────────────────────────────────── */
.profile-container { animation: page-in 0.6s ease both; }
@keyframes page-in {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─── Card Effect defaults ──────────────────────────────────────────────────── */
.link-card {
  --link-glow-color:    var(--color-accent);
  --link-text-fx-color: var(--color-accent);
}

/* ── Glow — static outer shadow ─────────────────────────────────────────────── */
.link-fx-glow {
  box-shadow:
    0 0 8px  color-mix(in srgb, var(--link-glow-color) 70%, transparent),
    0 0 22px color-mix(in srgb, var(--link-glow-color) 40%, transparent),
    0 0 45px color-mix(in srgb, var(--link-glow-color) 20%, transparent) !important;
}

/* ── Shimmer — light sweep across the card ──────────────────────────────────── */
.link-fx-shimmer { overflow: hidden; }
.link-fx-shimmer::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -120%; width: 60%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.22) 50%,
    transparent 80%
  );
  animation: link-shimmer 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes link-shimmer {
  0%        { left: -120%; }
  60%, 100% { left: 160%; }
}

@keyframes link-pulse {
  0%, 100% { box-shadow: 0 0 8px  color-mix(in srgb, var(--link-glow-color) 45%, transparent); }
  50%       { box-shadow: 0 0 22px color-mix(in srgb, var(--link-glow-color) 75%, transparent),
                          0 0 45px color-mix(in srgb, var(--link-glow-color) 35%, transparent); }
}

@keyframes link-neon {
  0%, 100% {
    box-shadow:
      0 0 4px  color-mix(in srgb, var(--link-glow-color) 60%, transparent),
      inset 0 0 8px  color-mix(in srgb, var(--link-glow-color) 8%, transparent);
  }
  50% {
    box-shadow:
      0 0 16px color-mix(in srgb, var(--link-glow-color) 80%, transparent),
      0 0 32px color-mix(in srgb, var(--link-glow-color) 40%, transparent),
      inset 0 0 16px color-mix(in srgb, var(--link-glow-color) 14%, transparent);
  }
}

@keyframes link-rainbow {
  from { background-position: 0% center; }
  to   { background-position: 300% center; }
}

/* ─── Text Effects ──────────────────────────────────────────────────────────── */

/* Text Glow — static text-shadow */
.link-text-fx-glow .link-label {
  text-shadow:
    0 0 8px  var(--link-text-fx-color),
    0 0 20px color-mix(in srgb, var(--link-text-fx-color) 50%, transparent);
}

/* Text Pulse — animated text-shadow */
.link-text-fx-pulse .link-label { animation: text-pulse 2.2s ease-in-out infinite; }
@keyframes text-pulse {
  0%, 100% { text-shadow: 0 0 4px  color-mix(in srgb, var(--link-text-fx-color) 40%, transparent); }
  50%       { text-shadow: 0 0 14px var(--link-text-fx-color),
                            0 0 32px color-mix(in srgb, var(--link-text-fx-color) 50%, transparent); }
}

/* Text Shimmer — gradient light sweep */
.link-text-fx-shimmer .link-label {
  background: linear-gradient(90deg,
    var(--link-text-fx-color) 0%,
    rgba(255,255,255,.96) 48%,
    var(--link-text-fx-color) 52%,
    var(--link-text-fx-color) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 2.4s ease-in-out infinite;
}
@keyframes text-shimmer {
  0%   { background-position: 160% center; }
  100% { background-position: -60% center; }
}

/* Text Neon — two coprime-duration animations create an irregular beat that
   never feels mechanical. 1.7s × 2.6s repeats only every ~44s. */
.link-text-fx-neon .link-label {
  animation: text-neon-glow 1.7s ease-in-out infinite,
             text-neon-flicker 2.6s linear infinite;
}
@keyframes text-neon-glow {
  0%, 100% {
    text-shadow: 0 0 4px  var(--link-text-fx-color),
                 0 0 10px color-mix(in srgb, var(--link-text-fx-color) 60%, transparent);
  }
  50% {
    text-shadow: 0 0 8px  var(--link-text-fx-color),
                 0 0 22px var(--link-text-fx-color),
                 0 0 44px color-mix(in srgb, var(--link-text-fx-color) 40%, transparent);
  }
}
@keyframes text-neon-flicker {
  0%, 18%, 20%, 22%, 53%, 55%, 100% { opacity: 1; }
  19%, 21%  { opacity: 0.35; }
  54%       { opacity: 0.2;  }
}

/* Text Glitch — classic RGB-split chromatic aberration + jitter */
.link-text-fx-glitch .link-label { animation: text-glitch 3.5s linear infinite; }
@keyframes text-glitch {
  0%,  82%, 100% { text-shadow: none; transform: translate(0); }
  83%  { text-shadow: -2px 0 #ff0055, 2px 0 #00ffcc; transform: translateX(-2px); }
  84%  { text-shadow:  2px 0 #ff0055,-2px 0 #00ffcc; transform: translateX( 2px); }
  85%  { text-shadow: -1px 0 #ff0055, 1px 0 #00ffcc; transform: translateX(-1px) translateY(1px); }
  86%  { text-shadow: none; transform: translate(0); }
  90%  { text-shadow:  3px 0 #ff0055,-3px 0 #00ffcc; transform: translateX(2px) skewX(2deg); }
  91%  { text-shadow: none; transform: translate(0); }
  95%  { text-shadow: -2px 0 #ff0055, 2px 0 #00ffcc; transform: translateX(-1px); }
  96%  { text-shadow: none; transform: translate(0); }
}


/* Text Rainbow — animated rainbow gradient */
.link-text-fx-rainbow .link-label {
  background: linear-gradient(90deg, #ff0000, #ff7700, #ffff00, #00ff00, #0077ff, #8800ff, #ff0000);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-rainbow 3s linear infinite;
}
@keyframes text-rainbow {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* ─── Link card stagger ─────────────────────────────────────────────────────── */
.link-card { animation: card-in 0.4s ease both; }
.link-card:nth-child(1) { animation-delay:.10s; }
.link-card:nth-child(2) { animation-delay:.18s; }
.link-card:nth-child(3) { animation-delay:.26s; }
.link-card:nth-child(4) { animation-delay:.34s; }
.link-card:nth-child(5) { animation-delay:.42s; }
.link-card:nth-child(6) { animation-delay:.50s; }
.link-card:nth-child(7) { animation-delay:.58s; }
.link-card:nth-child(8) { animation-delay:.66s; }
@keyframes card-in {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─── Animated card effects (placed AFTER stagger to win cascade) ────────────
   These override animation on .link-card so the continuous effect plays.
   Cards with these effects skip the stagger-in — the effect IS the entrance. */

/* Pulse — breathing glow */
.link-card.link-fx-pulse {
  animation: link-pulse 2.2s ease-in-out infinite;
}

/* Neon — animated border glow */
.link-card.link-fx-neon {
  border-color: var(--link-glow-color) !important;
  border-width: 1px !important;
  animation: link-neon 2s ease-in-out infinite;
}

/* Rainbow — animated gradient border via ::before */
.link-card.link-fx-rainbow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff0000, #ff7700, #ffff00, #00ff00, #0077ff, #8800ff, #ff0000);
  background-size: 300% 100%;
  animation: link-rainbow 3s linear infinite;
  pointer-events: none;
  z-index: -1;
}