/**
 * Blueprint Core — Back-to-Top Button (D19.1)
 *
 * Surface-Variants + Shape + Hover, bindet D18 Surface-Token an. Loesst
 * den Legacy-Block in main.css ab (dort neutralisiert auf "Container only").
 *
 * Klassen-Vertrag:
 *   .bp-back-to-top                    Basis (immer)
 *   .bp-back-to-top--soft/--glass/--gloss/--dark/--primary/--secondary  Style-Modifier
 *   .bp-back-to-top--circle/--rounded/--square                          Shape
 *   .back-to-top                       Legacy-JS-Hook (visible-Klasse)
 *
 * Hover: ruhiger Lift (-2px). Keine Inner-Element-Animation, Icon bleibt
 * ruhig. prefers-reduced-motion neutralisiert Transform.
 *
 * @since 1.19.16-d19-1
 */

/* ────────────────────────────────────────────────────────────────
   BASIS
   ──────────────────────────────────────────────────────────────── */

.bp-back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    z-index: 999;
    will-change: transform;
    box-shadow: var(--bp-shadow-soft, 0 1px 2px rgba(15, 18, 28, 0.04));
}

/* JS-Sichtbarkeits-Klasse (vom Legacy-Handler gesetzt) */
.bp-back-to-top.visible,
.back-to-top.visible.bp-back-to-top {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Icon-Wrapper: ruhig, kein Hover-Translate */
.bp-back-to-top__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    color: currentColor;
}

.bp-back-to-top__icon .bp-svg-icon,
.bp-back-to-top__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    color: currentColor;
}

/* ────────────────────────────────────────────────────────────────
   SHAPES
   ──────────────────────────────────────────────────────────────── */

.bp-back-to-top--circle {
    border-radius: 999px;
}

.bp-back-to-top--rounded {
    border-radius: var(--bp-radius-card, 12px);
}

.bp-back-to-top--square {
    border-radius: 0;
}

/* ────────────────────────────────────────────────────────────────
   STYLE VARIANTS — gebunden an D18 Surface-Tokens
   ──────────────────────────────────────────────────────────────── */

/* Default — schlicht, neutral. Foreground = Primary, Bg = elevated. */
.bp-back-to-top {
    background-color: var(--bp-surface-elevated, #ffffff);
    color: var(--color-primary, #34aee4);
    border-color: var(--bp-surface-border, rgba(0, 0, 0, 0.08));
}

/* Soft */
.bp-back-to-top--soft {
    background-color: var(--bp-surface-soft, #f7f8fa);
    color: var(--color-text, #1a1a2e);
    border-color: var(--bp-surface-border, rgba(0, 0, 0, 0.08));
}

/* Glass */
.bp-back-to-top--glass {
    background-color: var(--bp-surface-glass, rgba(255, 255, 255, 0.62));
    color: var(--color-text, #1a1a2e);
    border-color: var(--bp-surface-border-gloss, rgba(255, 255, 255, 0.5));
    -webkit-backdrop-filter: blur(var(--bp-glass-blur, 14px)) saturate(var(--bp-glass-saturate, 160%));
    backdrop-filter: blur(var(--bp-glass-blur, 14px)) saturate(var(--bp-glass-saturate, 160%));
}

/* Gloss */
.bp-back-to-top--gloss {
    background-color: var(--bp-surface-gloss, rgba(255, 255, 255, 0.78));
    background-image: var(--bp-gloss-highlight, linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.25) 100%));
    color: var(--color-text, #1a1a2e);
    border-color: var(--bp-surface-border-gloss, rgba(255, 255, 255, 0.5));
    -webkit-backdrop-filter: blur(var(--bp-glass-blur, 14px)) saturate(var(--bp-glass-saturate, 160%));
    backdrop-filter: blur(var(--bp-glass-blur, 14px)) saturate(var(--bp-glass-saturate, 160%));
}

/* Dark */
.bp-back-to-top--dark {
    background-color: var(--bp-surface-dark, #0e0f14);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.08);
}

/* Primary */
.bp-back-to-top--primary {
    background-color: var(--color-primary, #34aee4);
    color: var(--button-primary-text, #ffffff);
    border-color: var(--color-primary, #34aee4);
}

/* Secondary */
.bp-back-to-top--secondary {
    background-color: var(--color-secondary, #1a1a2e);
    color: var(--button-secondary-text, #ffffff);
    border-color: var(--color-secondary, #1a1a2e);
}

/* ────────────────────────────────────────────────────────────────
   HOVER / FOCUS
   ──────────────────────────────────────────────────────────────── */

.bp-back-to-top:hover,
.bp-back-to-top:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--bp-shadow-card, 0 2px 6px rgba(15, 18, 28, 0.06), 0 1px 2px rgba(15, 18, 28, 0.04));
    outline: none;
}

.bp-back-to-top:focus-visible {
    outline: 2px solid var(--color-primary, #34aee4);
    outline-offset: 2px;
}

.bp-back-to-top:active {
    transform: translateY(0);
    transition-duration: 0.05s;
}

/* @supports-Fallback fuer Browser ohne backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bp-back-to-top--glass {
        background-color: var(--bp-surface-elevated, #ffffff);
    }
    .bp-back-to-top--gloss {
        background-color: var(--bp-surface-soft, #f7f8fa);
    }
}

/* ────────────────────────────────────────────────────────────────
   DARK MODE — Token-Overrides greifen automatisch ueber D18-Tokens.
   Explizite Anpassung nur fuer den Default-Style (color-Text statt
   color-primary, damit auf dunkler Surface lesbar).
   ──────────────────────────────────────────────────────────────── */

[data-theme="dark"] .bp-back-to-top,
.is-dark .bp-back-to-top {
    background-color: var(--bp-surface-elevated, #16181f);
    color: var(--color-text, #ffffff);
    border-color: var(--bp-surface-border, rgba(255, 255, 255, 0.1));
}

[data-theme="dark"] .bp-back-to-top--soft,
.is-dark .bp-back-to-top--soft {
    color: var(--color-text, #ffffff);
}

/* ────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .bp-back-to-top {
        transform: none;
        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            background-color 0.2s ease,
            color 0.2s ease,
            border-color 0.2s ease;
    }
    .bp-back-to-top:hover,
    .bp-back-to-top:focus-visible,
    .bp-back-to-top:active {
        transform: none;
    }
    .bp-back-to-top.visible,
    .back-to-top.visible.bp-back-to-top {
        transform: none;
    }
}

/* ────────────────────────────────────────────────────────────────
   MOBILE
   ──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .bp-back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 44px;
        height: 44px;
    }
    .bp-back-to-top__icon {
        width: 1rem;
        height: 1rem;
    }
}