/* =========================================================
    SCROLLIFY-JS
    Scroll progress + Back to top
    https://github.com/emmanpbarrameda/scrollify-js
    © emmanpbarrameda - https://emmanpbarrameda.github.io/
============================================================ */


/* =========================================================
    ! MARK: 1) SCROLL PROGRESS (TOP BAR)
============================================================ */

.scrollify_scroll_progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    height: 4px;
    background: linear-gradient(to left, #b374f8, #4da3ff);
    z-index: 999;

    pointer-events: none;
    will-change: transform;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =========================================================
    ! MARK: 2) BACK TO TOP (CIRCULAR PROGRESS)
============================================================ */

.scrollify-btt {
    --btt-size: 44px;
    --btt-track: rgba(14, 165, 233, 0.2);
    --btt-stroke: 3;

    /* focus ring */
    --btt-focus-ring: rgba(14, 165, 233, 0.45);
    --btt-focus-offset: 3px;

    position: fixed;
    bottom: 20px;
    z-index: 9999;

    width: var(--btt-size);
    height: var(--btt-size);

    border: 0;
    padding: 0;
    border-radius: 999px;

    background: transparent;
    box-shadow: none;
    backdrop-filter: none;

    display: grid;
    place-items: center;

    cursor: pointer;
    user-select: none;

    opacity: 0;
    visibility: hidden;
    transform: scale(0.96);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}

/* Position helpers (JS can apply these automatically) */
.scrollify-btt--right {
    right: 20px;
}

.scrollify-btt--left {
    left: 20px;
}

.scrollify-btt.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.scrollify-btt:active {
    transform: scale(0.92);
}

/* Keyboard focus ring */
.scrollify-btt:focus-visible {
    outline: 2px solid var(--btt-focus-ring);
    outline-offset: var(--btt-focus-offset);
}

/* Ring */
.scrollify-btt__ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.scrollify-btt__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.scrollify-btt__track {
    fill: none;
    stroke: var(--btt-track);
    stroke-width: var(--btt-stroke);
    transition: opacity 0.18s ease;
}

.scrollify-btt__progress {
    fill: none;
    stroke-width: var(--btt-stroke);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon */
.scrollify-btt__icon {
    display: grid;
    place-items: center;

    transform: translateY(0);
    will-change: transform;
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hover nudge toggle (default ON). Set data-hover="false" to disable */
.scrollify-btt:not([data-hover="false"]):hover .scrollify-btt__icon {
    transform: translateY(-2px);
}

.scrollify-btt:not([data-hover="false"]):active .scrollify-btt__icon {
    transform: translateY(0);
}

/* Optional: track slightly more visible on hover */
.scrollify-btt:not([data-hover="false"]):hover .scrollify-btt__track {
    opacity: 0.9;
}

.scrollify-btt__iconSvg {
    width: 20px;
    height: 20px;
    display: block;
}

.scrollify-btt__iconSvg path {
    fill: currentColor;
}


/* =========================================================
    RING SPIN (data-spin="true")
============================================================ */

.scrollify-btt[data-spin="true"] .scrollify-btt__svg {
    animation: scrollifySpin 2.2s linear infinite;
}

@keyframes scrollifySpin {
    to {
        transform: rotate(270deg);
    }
}


/* =========================================================
    ACCESSIBILITY: REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .scrollify-btt,
    .scrollify-btt__icon,
    .scrollify-btt__track,
    .scrollify-btt__progress {
        transition: none !important;
    }
    .scrollify-btt[data-spin="true"] .scrollify-btt__svg {
        animation: none !important;
    }
}