/* --- Custom CSS for the "About" page, complementing Tailwind classes --- */

:root {
  --bg: #0d111a;
  --card: rgba(30, 41, 59, 0.4);
  --card-border: rgba(45, 53, 70, 0.6);
  --text: #e2e8f0;
  --muted-text: #94a3b8;
  --primary: #5887ff;
  --secondary: #ff6347;
  --love-pink: #ff63c3; /* Added for the 'caring' animation */
}
body {
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

/* Custom Background Gradient */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
      circle at 20% 10%,
      rgba(88, 135, 255, 0.15),
      transparent 70%
    ),
    radial-gradient(circle at 80% 90%, rgba(255, 99, 71, 0.15), transparent 70%);
  pointer-events: none;
}

/* Keyframe animations */
@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.3);
    opacity: 0;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.4;
  }
}
.animate-pulse-ring-1 {
  animation: pulse-ring 6s infinite ease-in-out;
}
.animate-pulse-ring-2 {
  animation: pulse-ring 6s infinite ease-in-out 2s;
}
.animate-pulse-ring-3 {
  animation: pulse-ring 6s infinite ease-in-out 4s;
}

/* Reveal on scroll */
.will-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* Special text color gradient for signature */
.text-gradient {
  background: linear-gradient(to right, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- START: New Animations CSS --- */
#typing-effect::after {
  content: "|";
  margin-left: 0.1em;
  animation: blink 1s infinite step-end;
}

@keyframes blink {
  from,
  to {
    color: transparent;
  }
  50% {
    color: var(--text);
  }
}

.caring-effect {
  animation: pulse-love 2.5s infinite ease-in-out;
}

@keyframes pulse-love {
  0%,
  100% {
    color: var(--text);
    text-shadow: none;
  }
  50% {
    color: var(--love-pink);
    text-shadow: 0 0 7px var(--love-pink), 0 0 10px var(--love-pink),
      0 0 21px var(--love-pink);
  }
}
/* --- END: New Animations CSS --- */