/* Emphasis spectrum — reusable chromatic accent surfaces.
   Tokens live in colors.css / effects.css. Use sparingly:
   hero stripe, primary CTA halo, prose link hover. */

@layer components {
  /* Shared gradient drift — X only; Y is set per surface (50% stripe, 100% underline) */
  @keyframes emphasis-drift {
    from {
      background-position-x: 0%;
    }
    to {
      background-position-x: 100%;
    }
  }

  /* ── Stripe: x.ai-style underline / divider ───────────── */
  .emphasis-stripe {
    display: block;
    height: 3px;
    border-radius: var(--radius-full);
    pointer-events: none;
    background-image: var(--color-emphasis-gradient);
    background-size: var(--emphasis-size);
    background-position: 0% 50%;
    box-shadow: var(--shadow-emphasis-line);
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 12%,
      #000 88%,
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 12%,
      #000 88%,
      transparent 100%
    );
    transform-origin: left center;
    animation: emphasis-drift var(--emphasis-drift-duration) var(--ease-in-out) infinite alternate;
  }
  .emphasis-stripe--sm {
    height: 2px;
  }
  .emphasis-stripe--static {
    animation: none;
  }

  /* ── Glow: ambient spectrum halo (wrap a control) ───────
     Parent should be position:relative; isolation:isolate. */
  .emphasis-glow {
    position: relative;
    isolation: isolate;
  }
  .emphasis-glow::before {
    content: "";
    position: absolute;
    inset: -30% -12%;
    z-index: -1;
    border-radius: inherit;
    background-image: var(--color-emphasis-gradient);
    background-size: var(--emphasis-size);
    background-position: 0% 50%;
    filter: blur(22px);
    opacity: 0.42;
    pointer-events: none;
    animation: emphasis-drift var(--emphasis-drift-duration) var(--ease-in-out) infinite alternate;
    transition: opacity var(--duration-normal) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .emphasis-glow:hover::before {
      opacity: 0.72;
    }
  }

  /* ── Link: spectrum underline on hover (label stays solid) ── */
  .emphasis-link {
    color: var(--color-link);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    text-decoration-thickness: 0;
    background-image: linear-gradient(
      var(--color-link-decoration),
      var(--color-link-decoration)
    );
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% var(--link-underline-thickness);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition:
      color var(--duration-fast) var(--ease-out),
      background-image var(--duration-fast) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .emphasis-link:hover {
      color: var(--color-link-hover);
      background-image: var(--color-emphasis-gradient);
      background-size: 200% var(--link-underline-thickness);
      background-position: 0% 100%;
      background-position-y: 100%;
      animation: emphasis-drift var(--emphasis-drift-duration) var(--ease-in-out) infinite alternate;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .emphasis-stripe,
    .emphasis-glow::before,
    .emphasis-link:hover {
      animation: none;
    }
  }
}