/**
 * FUT SERVICE PRO - 3D Perspective Striker & Live Progress (100% RTL Logical)
 * File: assets/css/modules/fut-scroll-top.css
 */

/* ==========================================================================
   1. MAIN FLOATING CONTAINER (LOGICAL INSET POSITIONING)
   ========================================================================== */

.fut-scroll-up-button {
    position: fixed !important;
    inset-block-end: 4.25rem !important;
    inset-inline-end: 1.25rem !important;
    z-index: 9990 !important;
    cursor: pointer !important;
    user-select: none !important;

    /* Hidden at very top */
    opacity: 0 !important;
    visibility: hidden !important;
    translate: 0 1.25rem !important;
    scale: 0.8 !important;
    pointer-events: none !important;

    transition: opacity 0.3s ease, 
                visibility 0.3s ease, 
                translate 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                scale 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Scrolled down state */
.fut-scroll-up-button.fut-is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    translate: 0 0 !important;
    scale: 1 !important;
    pointer-events: all !important;
}


/* ==========================================================================
   2. ULTRA-COMPACT MICRO-HUD TOOLTIP
   ========================================================================== */

.fut-scroll-tooltip {
    position: absolute !important;
    inset-block-end: calc(100% + 7px) !important;
    inset-inline-start: 50% !important;
    translate: -50% 4px !important;

    /* Sleek minimal badge */
    padding-block: 0.18rem !important;
    padding-inline: 0.5rem !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    pointer-events: none !important;

    background: color-mix(in srgb, var(--e-global-color-79925c3, #080607) 94%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--e-global-color-533eff7, #FFE200) 50%, transparent) !important;
    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.8),
                0 0 10px -2px color-mix(in srgb, var(--e-global-color-533eff7, #FFE200) 25%, transparent) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;

    opacity: 0 !important;
    visibility: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;

    transition: opacity 0.2s ease, translate 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Micro pointer caret */
.fut-scroll-tooltip::after {
    content: "" !important;
    position: absolute !important;
    inset-block-start: 100% !important;
    inset-inline-start: 50% !important;
    translate: -50% 0 !important;
    border-block-start: 4px solid color-mix(in srgb, var(--e-global-color-533eff7, #FFE200) 50%, transparent) !important;
    border-inline: 3.5px solid transparent !important;
}

/* Micro typography */
.fut-scroll-tooltip span.fut-tooltip-pct {
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    color: var(--e-global-color-533eff7, #FFE200) !important;
    line-height: 1 !important;
}

.fut-scroll-tooltip span.fut-tooltip-lbl {
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: var(--e-global-color-4c4ea72, #F7F3EA) !important;
    line-height: 1 !important;
    opacity: 0.8 !important;
}

/* Reveal Tooltip on Hover */
.fut-scroll-up-button:hover .fut-scroll-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    translate: -50% 0 !important;
}


/* ==========================================================================
   3. STADIUM STAGE & CIRCULAR PROGRESS RING
   ========================================================================== */

.fut-player-stage {
    position: relative !important;
    inline-size: 3.95rem !important;
    block-size: 3.95rem !important;
    border-radius: 50% !important;

    background: radial-gradient(circle at 50% 35%, 
                color-mix(in srgb, var(--e-global-color-533eff7, #FFE200) 14%, transparent), 
                color-mix(in srgb, var(--e-global-color-79925c3, #080607) 96%, transparent) 80%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.8) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* Hover Ring Glow */
.fut-scroll-up-button:hover .fut-player-stage {
    box-shadow: 0 0 24px -2px color-mix(in srgb, var(--e-global-color-533eff7, #FFE200) 55%, transparent),
                0 12px 32px -4px rgba(0, 0, 0, 0.9) !important;
    transform: translateY(-2px) !important;
}

.fut-stage-svg {
    inline-size: 100% !important;
    block-size: 100% !important;
    overflow: visible !important;
}

/* Neon Live Progress Ring */
.fut-progress-ring {
    transform: rotate(-90deg);
    transform-origin: 36px 36px;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.15s cubic-bezier(0.1, 0.9, 0.2, 1);
}


/* ==========================================================================
   4. 3D PERSPECTIVE ZOOM: FOOTBALLER ADVANCES & GROWS LARGER
   ========================================================================== */

/*
 * At Top (0% scroll): scale(0.65) and translated back (-10px, -4px) -> Chota aur door
 * At Bottom (100% scroll): scale(1.05) and translated close (2px, 0px) -> Bara aur ball ke kareeb!
 */
.fut-striker {
    transform-origin: 26px 44px;
    transform: translate(
        calc(-10px + var(--fut-scroll-ratio, 0) * 12px), 
        calc(-4px + var(--fut-scroll-ratio, 0) * 4px)
    ) scale(calc(0.65 + var(--fut-scroll-ratio, 0) * 0.38));
    opacity: calc(0.85 + var(--fut-scroll-ratio, 0) * 0.15);
    transition: transform 0.08s linear;
}

/* Running leg-cycle while active scrolling */
.fut-scroll-up-button.is-scrolling .fut-leg-back {
    animation: futSprintBack 0.2s ease-in-out infinite alternate !important;
}

.fut-scroll-up-button.is-scrolling .fut-leg-front {
    animation: futSprintFront 0.2s ease-in-out infinite alternate !important;
}


/* ==========================================================================
   5. HOVER AIM PREPARATION VS. CLICK KICK LAUNCH
   ========================================================================== */

/* 
 * HOVER ONLY: Footballer draws leg back into a ready striking wind-up pose,
 * BUT DOES NOT KICK YET!
 */
.fut-scroll-up-button:hover:not(.is-kicking) .fut-leg-front {
    transform: rotate(-35deg) !important;
    transform-origin: 29px 38px !important;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.fut-scroll-up-button:hover:not(.is-kicking) .fut-boot {
    filter: drop-shadow(0 0 5px var(--e-global-color-533eff7, #FFE200));
}

.fut-scroll-up-button:hover:not(.is-kicking) .fut-ball {
    filter: drop-shadow(0 0 7px var(--e-global-color-533eff7, #FFE200));
}

/* 
 * CLICK ONLY: Full power strike, shockwave bursts, ball rockets skyward!
 */
.fut-scroll-up-button.is-kicking .fut-leg-front {
    animation: futKickStrike 0.5s cubic-bezier(0.2, 0.9, 0.2, 1) forwards !important;
    transform-origin: 29px 38px !important;
}

.fut-scroll-up-button.is-kicking .fut-ball {
    animation: futBallLaunch 0.72s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
    transform-origin: 51px 50px !important;
}

.fut-scroll-up-button.is-kicking .fut-kick-shockwave {
    animation: futShockwavePulse 0.45s ease-out forwards !important;
    transform-origin: 51px 50px !important;
}


/* ==========================================================================
   6. KEYFRAME PHYSICS
   ========================================================================== */

/* Running sprint legs */
@keyframes futSprintBack {
    0% { transform: rotate(22deg); transform-origin: 24px 38px; }
    100% { transform: rotate(-24deg); transform-origin: 24px 38px; }
}

@keyframes futSprintFront {
    0% { transform: rotate(-26deg); transform-origin: 29px 38px; }
    100% { transform: rotate(28deg); transform-origin: 29px 38px; }
}

/* Instantaneous strike follow-through */
@keyframes futKickStrike {
    0% { transform: rotate(-35deg); }
    28% { transform: rotate(72deg); }
    100% { transform: rotate(0deg); }
}

/* Ball blasts straight to the moon */
@keyframes futBallLaunch {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
    15% {
        transform: translate(1px, -1px) scale(0.85, 1.2);
        opacity: 1;
    }
    100% {
        transform: translate(14px, -800px) scale(0.2) rotate(1440deg);
        opacity: 0;
        filter: drop-shadow(0 30px 14px #FFE200);
    }
}

/* Kinetic impact wave */
@keyframes futShockwavePulse {
    0% { r: 3; opacity: 1; stroke-width: 3; }
    100% { r: 19; opacity: 0; stroke-width: 0.5; }
}


/* ==========================================================================
   7. RTL & MOBILE RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {
    .fut-scroll-up-button {
        inset-block-end: 1.25rem !important;
        inset-inline-end: 1.25rem !important;
    }

    .fut-player-stage {
        inline-size: 3.35rem !important;
        block-size: 3.35rem !important;
    }

    /* Hide tooltip on mobile touch screens */
    .fut-scroll-tooltip {
        display: none !important;
    }
}