/* ════════════════════════════════════════════════════════════════════════
   zURL_demo.css — a ONE-OFF reskinned link (opt in: zBrush [page, leaf, demo.zURL_demo]).
   Proof of how far a zURL reskins purely through your OWN class on the canonical
   <a> surface — here a gradient-ink link with an underline that sweeps in on hover.
   Deliberately NOT a button: no pill, no fill — just a fancy bit of text.
   _zClass: fancy-link lands on the <a>, so every rule below is reached from that
   one class. NOTHING zOS owns is overridden — this is the author's own class.
   Bifrost-only — the terminal just confirms with y/yes.
   ════════════════════════════════════════════════════════════════════════ */

/* the link — gradient "ink" text, no box around it */
.fancy-link {
    --fl-a:          #6366f1;
    --fl-b:          #ec4899;
    position:        relative;
    display:         inline-block;
    font-weight:     700;
    letter-spacing:  0.01em;
    text-decoration: none;
    background:      linear-gradient(90deg, var(--fl-a), var(--fl-b));
    -webkit-background-clip: text;
    background-clip: text;
    color:           transparent;
    transition:      filter 0.2s ease;
}

/* the underline that sweeps in from the left on hover */
.fancy-link::after {
    content:          "";
    position:         absolute;
    left:             0;
    bottom:           -3px;
    width:            100%;
    height:           2px;
    background:       linear-gradient(90deg, var(--fl-a), var(--fl-b));
    transform:        scaleX(0);
    transform-origin: left center;
    transition:       transform 0.3s ease;
}

/* hover — a soft glow + the underline draws across */
.fancy-link:hover {
    filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.45));
}
.fancy-link:hover::after {
    transform: scaleX(1);
}

/* keyboard focus — a clear ring around the text */
.fancy-link:focus-visible {
    outline:        2px solid var(--fl-a);
    outline-offset: 3px;
    border-radius:  3px;
}

/* respect reduced-motion — hold the underline still */
@media (prefers-reduced-motion: reduce) {
    .fancy-link::after { transition: none; }
}