/* Scroll cue: the round button bottom-right. After ~2.5 s without scrolling it widens into a "SCROLL" pill
   and its three chevrons run downwards; near the end of the page it turns into "TOP".
   Look: dark, open or closed, with an orange ring that fills clockwise from the top as the page is read (the dim
   rest is what is left). */
@property --cue-p {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
.scroll-cue {
    position: fixed;
    right: 30px;
    bottom: 60px;
    z-index: 1001;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: border-box;
    height: 50px;
    min-width: 50px;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(#0d0d0d, #0d0d0d) padding-box,
        conic-gradient(#ffc49a 0deg, #ff7a3d calc(var(--cue-p) * 180deg), #ea4826 calc(var(--cue-p) * 360deg),
            #2b2b2b calc(var(--cue-p) * 360deg), #2b2b2b 360deg) border-box;
    color: #f2f2f2;
    text-decoration: none;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.35s ease, visibility 0.35s, transform 0.35s ease, --cue-p 0.25s linear;
    -webkit-tap-highlight-color: transparent;
}
.scroll-cue.is-on { opacity: 1; visibility: visible; transform: none; }
.scroll-cue:focus-visible { outline: 2px solid #ff7a3d; outline-offset: 3px; }

.scroll-cue:hover { background:
        linear-gradient(#1a1a1a, #1a1a1a) padding-box,
        conic-gradient(#ffc49a 0deg, #ff7a3d calc(var(--cue-p) * 180deg), #ea4826 calc(var(--cue-p) * 360deg),
            #2b2b2b calc(var(--cue-p) * 360deg), #2b2b2b 360deg) border-box; }

.scroll-cue-label {
    position: relative;
    display: block;
    overflow: hidden;
    max-width: 0;
    padding-left: 0;
    opacity: 0;
    white-space: nowrap;
    font: 500 12px/1 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.14em;
    transition: max-width 0.6s cubic-bezier(0.22, 1, 0.36, 1), padding-left 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.scroll-cue.is-idle .scroll-cue-label {
    max-width: 90px;
    padding-left: 20px;
    opacity: 1;
    transition-delay: 0s, 0s, 0.18s;
}

.scroll-cue-icon { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; overflow: hidden; }
.scroll-cue-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.4s ease;
}
/* three stacked chevrons, fading in towards the bottom */
.scroll-cue-icon path { opacity: 1; }
.scroll-cue-icon path:nth-child(1) { opacity: 0.3; }
.scroll-cue-icon path:nth-child(2) { opacity: 0.6; }
/* while the pill is open they light up one after another, top to bottom, so the arrows run downwards */
.scroll-cue.is-idle .scroll-cue-icon path { animation: scrollCueChevron 1.5s ease-in-out infinite; }
.scroll-cue.is-idle .scroll-cue-icon path:nth-child(2) { animation-delay: 0.2s; }
.scroll-cue.is-idle .scroll-cue-icon path:nth-child(3) { animation-delay: 0.4s; }
@keyframes scrollCueChevron {
    0% { opacity: 0.15; transform: translateY(-2px); }
    30% { opacity: 1; transform: translateY(0); }
    65%, 100% { opacity: 0.15; transform: translateY(2px); }
}
/* near the end of the page: back to top; turned over, the same run reads upwards */
.scroll-cue.is-top .scroll-cue-icon svg { transform: rotate(180deg); }

@media (max-width: 768px) {
    .scroll-cue { right: 20px; bottom: 20px; height: 45px; min-width: 45px; }
    .scroll-cue-icon { width: 39px; height: 39px; }
}
@media (max-width: 480px) {
    .scroll-cue { right: 15px; bottom: 15px; height: 40px; min-width: 40px; }
    .scroll-cue-icon { width: 34px; height: 34px; }
    .scroll-cue-icon svg { width: 22px; height: 22px; }
    .scroll-cue-label { font-size: 11px; }
    .scroll-cue.is-idle .scroll-cue-label { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cue-icon path { animation: none !important; }
}