/**
 * Scroll UX System
 *
 * CSS for scroll progress bar, scroll-to-top button, and section dot nav.
 * All features are conditionally loaded via CSS_Manager.
 */

/* ==========================================================================
   Scroll Progress Bar
   ========================================================================== */

.scroll-progress {
    position: fixed;
    top: var(--plexa-chrome-top, 0px);
    left: 0;
    width: 100%;
    height: var(--scroll-progress-height, 3px);
    background: var(--scroll-progress-color, var(--color-primary));
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 9999;
    pointer-events: none;
}

/* CSS-first: use scroll-driven animation where supported */
@supports (animation-timeline: scroll()) {
    .scroll-progress {
        animation: scroll-progress-fill auto linear forwards;
        animation-timeline: scroll(root block);
    }

    @keyframes scroll-progress-fill {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
}

/* Below-header position variant */
.scroll-progress--below-header {
    top: calc(var(--sticky-header-height, 0px) + var(--plexa-chrome-top, 0px));
}

/* Height variants */
.scroll-progress--sm { --scroll-progress-height: 2px; }
.scroll-progress--md { --scroll-progress-height: 3px; }
.scroll-progress--lg { --scroll-progress-height: 4px; }

/* Color variants */
.scroll-progress--secondary { --scroll-progress-color: var(--color-secondary); }
.scroll-progress--accent    { --scroll-progress-color: var(--color-accent); }

@media (max-width: 767px) {
    .scroll-progress {
        --scroll-progress-height: 2px;
    }
}

/* ==========================================================================
   Scroll-to-Top Button
   ========================================================================== */

.scroll-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    z-index: 997;
    background: var(--color-base-200);
    color: var(--color-base-content);
    box-shadow: 0 2px 8px color-mix(in oklch, var(--color-base-content) 15%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.scroll-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: var(--color-primary);
    color: var(--color-primary-content);
}

.scroll-to-top:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.scroll-to-top svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {
    .scroll-to-top {
        bottom: 1rem;
        right: 1rem;
    }
}

/* ==========================================================================
   Section Dot Navigation
   ========================================================================== */

.section-dot-nav {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 998;
}

.section-dot-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.section-dot-nav__dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background: color-mix(in oklch, var(--color-base-content) 30%, transparent);
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.section-dot-nav__dot:hover,
.section-dot-nav__dot:focus-visible {
    background: color-mix(in oklch, var(--color-primary) 60%, transparent);
    transform: scale(1.3);
}

.section-dot-nav__dot.is-active {
    background: var(--color-primary);
    transform: scale(1.2);
}

.section-dot-nav__dot:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.section-dot-nav__label {
    position: absolute;
    right: calc(100% + 0.75rem);
    white-space: nowrap;
    padding: 0.25rem 0.75rem;
    background: var(--color-base-200);
    color: var(--color-base-content);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    opacity: 0;
    transform: translateX(0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    box-shadow: 0 1px 4px color-mix(in oklch, var(--color-base-content) 10%, transparent);
}

.section-dot-nav__dot:hover .section-dot-nav__label,
.section-dot-nav__dot:focus .section-dot-nav__label {
    opacity: 1;
    transform: translateX(0);
}

/* Scroll margin for click-to-scroll with sticky header offset */
/* + the admin bar: an anchor target that clears the sticky header but not the
   admin bar still lands with its first line hidden. See the token in hero.css. */
section[id] {
    scroll-margin-top: calc(var(--sticky-header-height, 0px) + var(--plexa-chrome-top, 0px) + 1rem);
}

/* Hide dot nav on mobile */
@media (max-width: 767px) {
    .section-dot-nav {
        display: none;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .scroll-to-top {
        transition: none;
    }

    .section-dot-nav__dot {
        transition: none;
    }

    .section-dot-nav__label {
        transition: none;
    }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
    .scroll-progress,
    .scroll-to-top,
    .section-dot-nav {
        display: none !important;
    }
}