/*------------------------------------------------------------------*\
    COMPONENTS - Arrow Ring
    Reusable circular progress ring that fills clockwise starting from
    the bottom (rises up the left side first) on hover. Add `.miv-ring`
    to a circular button/element.

    A uniform chevron icon (Lucide) is drawn inside via ::after. It points
    left by default; add `.miv-ring--right` for a right-pointing chevron.

    Drive the fill from a parent on hover with the `.is-filled` helper or
    a context selector, e.g.:
        .portfolio-item:hover .miv-ring { --miv-ring-angle: 360deg; }

    Tunable via custom properties:
        --miv-ring-size        circle diameter (default 3rem)
        --miv-ring-border      circle border   (default 1px solid rgba(255,255,255,.7))
        --miv-ring-icon-size   chevron size as % of the ring (default 40%)
        --miv-ring-icon-color  chevron colour  (default rgba(255,255,255,.9))
\*------------------------------------------------------------------*/

/* Animatable angle — registering it as <angle> lets the fill transition */
@property --miv-ring-angle {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}

.miv-ring {
    --miv-ring-angle: 0deg;
    /* Lucide chevron-left */
    --miv-ring-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tbGVmdC1pY29uIGx1Y2lkZS1jaGV2cm9uLWxlZnQiPjxwYXRoIGQ9Im0xNSAxOC02LTYgNi02Ii8+PC9zdmc+");

    /* Normalise across span / button / a so the icon sizes identically everywhere */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    line-height: 0;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--miv-ring-size, 3rem);
    height: var(--miv-ring-size, 3rem);
    border: var(--miv-ring-border, 1px solid rgba(255, 255, 255, 0.7));
    border-radius: 50%;
    overflow: visible;
    transition: --miv-ring-angle 0.6s ease;
}

.miv-ring--right {
    /* Lucide chevron-right */
    --miv-ring-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg==");
}

/* Progress ring — starts at the bottom (6 o'clock), fills clockwise */
.miv-ring::before {
    --ring-size: 2.5px;
    --ring-aa: 0.75px; /* soft edge width for anti-aliasing */
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    /* tiny seam softening so the progress front doesn't alias either */
    background: conic-gradient(
        from 180deg,
        var(--color-accent) calc(var(--miv-ring-angle) - 0.5deg),
        transparent var(--miv-ring-angle)
    );
    /* Soft inner + outer edges (and transparent at 100% to clip the square corners) */
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--ring-size) - var(--ring-aa)),
        #000 calc(100% - var(--ring-size)),
        #000 calc(100% - var(--ring-aa)),
        transparent 100%
    );
    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--ring-size) - var(--ring-aa)),
        #000 calc(100% - var(--ring-size)),
        #000 calc(100% - var(--ring-aa)),
        transparent 100%
    );
    pointer-events: none;
}

/* Uniform chevron icon — masked SVG so it takes a solid colour */
.miv-ring::after {
    content: '';
    width: var(--miv-ring-icon-size, 50%);
    height: var(--miv-ring-icon-size, 50%);
    background-color: var(--miv-ring-icon-color, rgba(255, 255, 255, 0.9));
    -webkit-mask: var(--miv-ring-icon) no-repeat center / contain;
    mask: var(--miv-ring-icon) no-repeat center / contain;
}

/* Fill on direct hover, or when a parent toggles `.is-filled` */
.miv-ring:hover,
.miv-ring.is-filled {
    --miv-ring-angle: 360deg;
}