/* ==========================================================================
   Wipe Animation Link Styles
   ========================================================================== */

/* --- 1. Global Variable Definitions --- */
:root {
  --primary-color: #374151; /* Softer dark gray (gray-700) instead of harsh charcoal */
  --hovered-color: #2563EB; /* Accent blue on hover */
  --page-background: #F9FAFB; /* For demo body background */
  --animation-duration: 0.35s; /* Controls speed of the wipe effect */
}

/* --- 2. Base Styles for ALL Animated Links --- */
.animated-link,
.link-inline {
  position: relative;
  text-decoration: none;
  color: var(--primary-color);
}

/* --- 3. The Core Animation Mechanism (Applied to the Inner Span) --- */
.animated-link > span,
.link-inline > span {
  display: inline-block;
  position: relative; 
  background-image:
    linear-gradient(var(--hovered-color), var(--hovered-color)),
    linear-gradient(var(--primary-color), var(--primary-color));
  background-repeat: no-repeat;
  background-position: 0% 100%, 0% 100%;
  background-size: 0% var(--underline-thickness), 100% var(--underline-thickness);
  transition: background-size var(--animation-duration) ease-in-out;
}

.animated-link > span::before,
.link-inline > span::before {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--hovered-color);
  width: 0%;
  overflow: hidden;
  white-space: nowrap;
  transition: width var(--animation-duration) ease-in-out;
}


/* --- 4. Hover State Trigger --- */
.animated-link:hover > span,
.link-inline:hover > span {
  background-size: 100% var(--underline-thickness), 100% var(--underline-thickness);
}

.animated-link:hover > span::before,
.link-inline:hover > span::before {
  width: 100%;
}


/* --- 5. Class-Specific Styling --- */

/* For .animated-link (Button Style) */
.animated-link {
  /* Use inline-flex and align-items to vertically center contents like icons and text. */
  display: inline-flex;
  align-items: center;
  /* Font is now handled by the `font-sans` utility class in the HTML. */
  font-weight: 600;
  --underline-thickness: 2px;
}

/* For .link-inline (In-Paragraph Style) */
.link-inline {
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  --underline-thickness: 0.08em;
}