/* "There is more below": a small chevron at the bottom centre of the screen on every page that scrolls.
   Shown only while there is more than 50px of page below the screen, faded in and out. The button is in
   _Layout.cshtml, so every page has it; a page opts out with ViewData["HideScrollIndicator"] (the exam,
   the Battle Room), which leaves no button at all. Behaviour is in /js/scrollIndicator.js. */

.sp-scroll-ind {
    /* a page can lift it clear of something fixed to the bottom (see data-scroll-indicator-avoid) */
    --sp-si-lift: 0px;
    --sp-si-opacity: 1;            /* the icon's opacity */
    /* signed-in pages: the accent icon on a small white disc with a soft shadow, so it reads against the warm page */
    --sp-si-chip: var(--bg-card);
    --sp-si-shadow: 0 2px 8px rgba(0, 0, 0, .12);

    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--sp-si-lift));
    transform: translateX(-50%);
    /* above the page and its bars; below the drawers, overlays, dialogs and the Telegram button (800 < 1050) */
    z-index: 800;

    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: 40px;                 /* a 24px icon with 8px around it */
    height: 40px;
    padding: 8px;
    border: 0;
    border-radius: 50%;
    background: var(--sp-si-chip);
    box-shadow: var(--sp-si-shadow);
    color: var(--accent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility 0s linear .3s, bottom .2s ease;
}

.sp-scroll-ind.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.sp-scroll-ind:hover svg,
.sp-scroll-ind:focus-visible svg { opacity: 1; }

.sp-scroll-ind:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the float lives on the icon, so it never fights the button's own centring transform */
.sp-scroll-ind svg {
    display: block;
    opacity: var(--sp-si-opacity);
    transition: opacity .3s ease;
    animation: sp-si-float 1.5s ease-in-out infinite;
}

@keyframes sp-si-float {
    0%, 100% { transform: translateY(-3px); }
    50%      { transform: translateY(4px); }
}

/* The home page opens on a dark background, but has light bands further down (pricing, the closing call to
   action), where a white chevron would disappear. A small dark disc behind it keeps it readable on both. */
body[data-scroll-indicator-tone="dark"] .sp-scroll-ind {
    --sp-si-opacity: .6;
    --sp-si-chip: rgba(12, 10, 8, .7);
    --sp-si-shadow: none;
    color: var(--on-accent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: reduce) {
    .sp-scroll-ind svg { animation: none; }
    .sp-scroll-ind { transition: none; }
}

@media print { .sp-scroll-ind { display: none; } }