/* =========================================================
   BACK TO TOP — I.E. 10153 Carlos Del Castillo Niño
   Tokens: --btt-navy #0a1a3a | --btt-blue #2f6fed | --btt-gold #f0a500
========================================================= */
:root {
    --btt-navy:   #0a1a3a;
    --btt-blue:   #2f6fed;
    --btt-gold:   #f0a500;
    --btt-size:   54px;
    --btt-ring:   54px;        /* SVG viewBox size */
    --btt-r:      24px;        /* circle radius inside SVG */
    --btt-circ:   150.796px;   /* 2π × 24 ≈ 150.8 */
    --btt-easing: cubic-bezier(.4, 0, .2, 1);
}

/* ---- Wrapper ---- */
#btt-btn {
    position: fixed;
    bottom: 32px;
    right: 28px;
    z-index: 9990;
    width: var(--btt-size);
    height: var(--btt-size);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    outline: none;
    /* hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(.8);
    transition: opacity .35s var(--btt-easing),
                visibility .35s var(--btt-easing),
                transform .35s var(--btt-easing);
    -webkit-tap-highlight-color: transparent;
}

#btt-btn.btt-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ---- Subtle idle pulse ---- */
@keyframes btt-idle {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-4px) scale(1.04); }
}
#btt-btn.btt-visible {
    animation: btt-idle 3.2s ease-in-out 1.5s infinite;
}
#btt-btn:hover,
#btt-btn:focus-visible {
    animation: none;
}

/* ---- Progress ring (SVG) ---- */
#btt-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}
#btt-track {
    fill: none;
    stroke: rgba(47, 111, 237, .15);
    stroke-width: 2.5;
}
#btt-progress {
    fill: none;
    stroke: url(#btt-gradient);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: var(--btt-circ);
    stroke-dashoffset: var(--btt-circ);   /* JS updates this */
    transition: stroke-dashoffset .18s linear,
                stroke .4s ease;
    will-change: stroke-dashoffset;
}

/* ---- Inner circle (button face) ---- */
#btt-face {
    position: absolute;
    inset: 5px;                        /* 2.5px ring gap */
    border-radius: 50%;
    background: linear-gradient(135deg, var(--btt-blue) 0%, #1a4fb5 100%);
    box-shadow:
        0 6px 20px rgba(47, 111, 237, .38),
        0 2px  6px rgba(10, 26, 58, .20);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background .35s ease,
        box-shadow .35s ease,
        transform  .25s var(--btt-easing);
}
#btt-btn:hover #btt-face,
#btt-btn:focus-visible #btt-face {
    background: linear-gradient(135deg, var(--btt-gold) 0%, #c87d00 100%);
    box-shadow:
        0 10px 28px rgba(240, 165, 0, .42),
        0  4px  8px rgba(10,  26, 58, .22);
    transform: translateY(-3px) scale(1.06);
}

/* ---- Arrow icon ---- */
#btt-icon {
    color: #fff;
    font-size: 18px;
    line-height: 1;
    transition: transform .25s var(--btt-easing);
    display: flex;
    align-items: center;
    justify-content: center;
}
#btt-btn:hover #btt-icon,
#btt-btn:focus-visible #btt-icon {
    transform: translateY(-2px);
}

/* ---- Ripple ---- */
.btt-ripple {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    transform: scale(0);
    pointer-events: none;
    animation: btt-ripple-anim .55s ease-out forwards;
}
@keyframes btt-ripple-anim {
    to { transform: scale(2.6); opacity: 0; }
}

/* ---- Tooltip ---- */
#btt-tip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: var(--btt-navy);
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(10, 26, 58, .25);
    pointer-events: none;
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
}
#btt-tip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--btt-navy);
}
#btt-btn:hover #btt-tip,
#btt-btn:focus-visible #btt-tip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ---- Responsive ---- */
@media (max-width: 576px) {
    #btt-btn { bottom: 20px; right: 16px; }
    #btt-tip { display: none; }
}