/* ============================================================
   Skip to next section — a forward exit from the long, pinned
   sections. A pill at bottom-right, diagonally opposite the
   ambient music player and built from the same tokens.

   It reads as a transition — "03 -> 04" — rather than a lone
   number. The nav counter at the top shows the section you are ON;
   a single number down here showing where you would GO TO gets
   compared against it, and the pair reads as one number jumping
   two places (03 up top, 05 down here, once you have moved on).
   Spelling out both ends removes the ambiguity: the departure is
   dimmed, the destination carries full ink.

   Desktop carries the destination name at all times; narrow
   viewports collapse to the label, the number and a chevron, and
   reveal the name on hover where a pointer exists.
   ============================================================ */
.skip-next {
    --sn-ink: #faf9f0;
    --sn-bg: rgba(15, 15, 14, 0.78);
    --sn-accent: #d65c39;
    --sn-h: 44px;                 /* WCAG 2.5.5 tap target */
    --sn-pad: 14px;

    position: fixed;
    right: clamp(16px, 3vw, 30px);
    bottom: calc(clamp(16px, 3.2vh, 30px) + env(safe-area-inset-bottom, 0px));
    z-index: 95;

    display: inline-flex;
    align-items: center;
    height: var(--sn-h);
    padding: 0 var(--sn-pad);
    border: 1px solid rgba(250, 249, 240, 0.16);
    border-radius: 999px;
    background: var(--sn-bg);
    color: var(--sn-ink);
    font-family: "JetBrains Mono", monospace;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(250, 249, 240, 0.08);

    /* Resting state — faded out until the component says otherwise. */
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.35s ease,
                transform 0.45s cubic-bezier(.16,1,.3,1),
                border-color 0.3s ease,
                background 0.3s ease;
}
.skip-next[hidden] { display: none; }

.skip-next.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.skip-next:hover { border-color: rgba(214, 92, 57, 0.5); }
.skip-next:focus-visible {
    outline: 2px solid var(--sn-accent);
    outline-offset: 3px;
    border-color: rgba(214, 92, 57, 0.5);
}
.skip-next.is-visible:active { transform: translateY(1px) scale(0.97); }

/* --- the section being left, dimmed: context, not the subject --- */
.skip-next-from {
    font-size: 11px;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    color: rgba(250, 249, 240, 0.42);
    flex: 0 0 auto;
    transition: opacity 0.2s ease,
                transform 0.2s cubic-bezier(.16,1,.3,1);
}

/* --- the arrow between them, drawn rather than typed --- */
.skip-next-rule {
    position: relative;
    width: 15px;
    height: 1px;
    margin: 0 8px;
    background: rgba(250, 249, 240, 0.28);
    flex: 0 0 auto;
}
.skip-next-rule::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    border-top: 1px solid rgba(250, 249, 240, 0.28);
    border-right: 1px solid rgba(250, 249, 240, 0.28);
    transform: translateY(-50%) rotate(45deg);
}

/* --- destination number --- */
.skip-next-num {
    font-size: 11px;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    color: var(--sn-ink);
    flex: 0 0 auto;
    transition: opacity 0.2s ease,
                transform 0.2s cubic-bezier(.16,1,.3,1);
}

/* --- destination name --- */
.skip-next-name {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    font-family: "Source Serif 4", Georgia, serif;
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0;
    color: rgba(250, 249, 240, 0.82);
    transition: max-width 0.4s cubic-bezier(.16,1,.3,1),
                padding 0.4s cubic-bezier(.16,1,.3,1),
                opacity 0.2s ease,
                transform 0.2s cubic-bezier(.16,1,.3,1);
}

@media (hover: hover) {
    .skip-next:hover .skip-next-name { max-width: 220px; opacity: 1; padding-left: 10px; }
}
/* Keyboard focus must expand even where hover is unavailable. */
.skip-next:focus-visible .skip-next-name { max-width: 220px; opacity: 1; padding-left: 10px; }

/* --- chevron: two borders on a rotated box, no SVG --- */
.skip-next-arrow {
    display: block;
    width: 8px;
    height: 8px;
    margin-left: 10px;
    margin-top: -2px;             /* optical centring against the rotated box */
    border-right: 1.5px solid var(--sn-accent);
    border-bottom: 1.5px solid var(--sn-accent);
    transform: rotate(45deg);
    flex: 0 0 auto;
    animation: sn-float 2.6s ease-in-out infinite;
}

@keyframes sn-float {
    0%, 100% { transform: rotate(45deg) translate(0, 0); }
    50%      { transform: rotate(45deg) translate(2px, 2px); }
}

/* --- crossfade when the destination changes --- */
.skip-next.is-swapping .skip-next-from,
.skip-next.is-swapping .skip-next-num,
.skip-next.is-swapping .skip-next-name {
    opacity: 0;
    transform: translateY(-4px);
    transition-duration: 0.15s;
}

/* --- tablet: a touch more presence --- */
@media (min-width: 768px) {
    .skip-next { --sn-h: 50px; --sn-pad: 17px; }
    .skip-next-from,
    .skip-next-num { font-size: 12px; }
    .skip-next-rule { width: 17px; margin: 0 9px; }
    .skip-next-name { font-size: 14px; }
    .skip-next-arrow { width: 9px; height: 9px; }
}

/* --- desktop: full size, destination named at all times --- */
@media (min-width: 1024px) {
    .skip-next { --sn-h: 58px; --sn-pad: 22px; }
    .skip-next-from,
    .skip-next-num { font-size: 14px; }
    .skip-next-rule { width: 20px; margin: 0 11px; }
    .skip-next-name {
        max-width: 260px;
        opacity: 1;
        padding-left: 13px;
        font-size: 16px;
    }
    .skip-next-arrow {
        width: 10px;
        height: 10px;
        margin-left: 16px;
        margin-top: -3px;
        border-right-width: 1.75px;
        border-bottom-width: 1.75px;
    }
    /* The name is already out; hover has nothing left to reveal. */
    .skip-next.is-swapping .skip-next-name { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skip-next,
    .skip-next-name,
    .skip-next-num { transition-duration: 0.01ms; }
    .skip-next-arrow { animation: none; }
    .skip-next.is-visible:active { transform: none; }
}