/*------------------------------------------------------------------*\
    COMPONENTS - Back to Top

    Floating scroll-to-top control, pinned bottom-right. The ring, the
    chevron and the accent sweep on hover all come from `.miv-ring`
    (components/arrow-ring.css) — the same component the hero carousel
    arrows are built on, so the motion matches by construction. Only the
    positioning and the reveal live here.

    Markup is emitted in functions.php on wp_footer:
        <button class="miv-back-to-top miv-ring miv-ring--up" ...>

    Hidden until back-to-top.js adds `.is-visible`, so a JS failure leaves
    nothing on screen rather than a dead button.
\*------------------------------------------------------------------*/

.miv-back-to-top {
    /* Match the hero carousel arrows exactly */
    --miv-ring-size: var(--fluid-arrow-circle);

    position: fixed;
    right: 2rem;
    bottom: 2rem;
    /* Below the preloader (9999999999) and the custom cursor (99999999999) */
    z-index: 9999;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    /* --miv-ring-angle has to be re-declared: this shorthand replaces the one on
       .miv-ring, and dropping the angle would kill the 0.6s sweep that is the
       whole point of reusing the component. */
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        --miv-ring-angle 0.6s ease;
}

.miv-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Reduced motion — the fill still reads, it just stops animating */
@media (prefers-reduced-motion: reduce) {
    .miv-back-to-top {
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
}