/**
 * JoomION Scroll2Top – Frontend-Styles
 * (C) 2026 JoomION – GNU General Public License version 2 or later
 *
 * Farben, Groesse und Position setzt das Skript als CSS-Variablen direkt
 * am Button; hier steht nur das gemeinsame Grundgeruest.
 */

/* ---------- Grundgeruest ---------- */
.jis2t {
    --jis2t-size: 46px;
    --jis2t-ms: 250ms;
    --jis2t-side: 1;
    position: fixed;
    z-index: var(--jis2t-z, 10000);
    box-sizing: border-box;
    width: var(--jis2t-size);
    height: var(--jis2t-size);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--jis2t-icon, #2382b1);
    font: inherit;
    line-height: 0;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--jis2t-ms) ease,
        transform var(--jis2t-ms) ease,
        visibility 0s linear var(--jis2t-ms);
}

.jis2t--contained {
    position: absolute;
}

.jis2t:hover,
.jis2t:focus,
.jis2t:active {
    background: transparent;
    box-shadow: none;
}

.jis2t__inner {
    position: absolute;
    inset: 0;
    display: block;
    transition: transform 250ms ease;
}

.jis2t__svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.jis2t__bg {
    transition: fill 250ms ease, filter 250ms ease;
}

.jis2t--bghover:hover .jis2t__bg,
.jis2t--bghover:focus-visible .jis2t__bg {
    fill: var(--jis2t-hover);
}

/* ---------- Icon ---------- */
.jis2t__icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--jis2t-icon-size, 22px);
    height: var(--jis2t-icon-size, 22px);
    margin: calc(var(--jis2t-icon-size, 22px) / -2) 0 0 calc(var(--jis2t-icon-size, 22px) / -2);
    color: var(--jis2t-icon);
    opacity: var(--jis2t-icon-op, 0.6);
    font-size: var(--jis2t-icon-size, 22px);
    line-height: 1;
    pointer-events: none;
    transition: color 250ms ease, opacity 250ms ease, transform 250ms ease;
}

.jis2t__icon svg,
.jis2t__icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.jis2t__icon--html svg,
.jis2t__icon--html img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jis2t:hover .jis2t__icon,
.jis2t:focus-visible .jis2t__icon {
    color: var(--jis2t-icon-hover);
    opacity: 1;
}

.jis2t--noicon .jis2t__icon {
    display: none;
}

/* ---------- Prozentanzeige ---------- */
.jis2t__pct {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--jis2t-pct);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.jis2t-pct-inside .jis2t__pct {
    display: flex;
}

.jis2t-pct-hover .jis2t__pct {
    display: flex;
    opacity: 0;
    transition: opacity 200ms ease;
}

.jis2t-pct-hover:hover .jis2t__pct,
.jis2t-pct-hover:focus-visible .jis2t__pct {
    opacity: 1;
}

.jis2t-pct-hover:hover .jis2t__icon,
.jis2t-pct-hover:focus-visible .jis2t__icon {
    opacity: 0;
}

.jis2t__below {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 8px;
    background: var(--jis2t-pill, transparent);
    transform: translateX(-50%);
    color: var(--jis2t-pct);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---------- Schatten ---------- */
/* Schatten nur auf die Hintergrundflaeche, damit Strichmuster sauber bleiben. */
.jis2t-sh-soft .jis2t__bg {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.18));
}

.jis2t-sh-strong .jis2t__bg {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

.jis2t-sh-glow .jis2t__svg {
    filter: drop-shadow(0 0 7px rgba(var(--jis2t-ring-rgb, 35, 130, 177), 0.75));
}

/* ---------- Glas-Effekt ---------- */
.jis2t--glass.jis2t--circle .jis2t__inner {
    border-radius: 50%;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.jis2t--glass.jis2t--rounded .jis2t__inner {
    border-radius: 28%;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.jis2t--glass.jis2t--square .jis2t__inner {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* ---------- Tastatur-Fokus (Barrierefreiheit) ---------- */
.jis2t:focus {
    outline: none;
}

.jis2t:focus-visible {
    outline: 3px solid var(--jis2t-ring, #2382b1);
    outline-offset: 3px;
}

.jis2t--circle:focus-visible {
    border-radius: 50%;
}

/* ---------- Tooltip ---------- */
.jis2t__tip {
    position: absolute;
    z-index: 2;
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(20, 28, 38, 0.92);
    color: #fff;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms ease;
}

.jis2t-tip-left .jis2t__tip {
    top: 50%;
    right: calc(100% + 10px);
    transform: translate(6px, -50%);
}

.jis2t-tip-right .jis2t__tip {
    top: 50%;
    left: calc(100% + 10px);
    transform: translate(-6px, -50%);
}

.jis2t-tip-top .jis2t__tip {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 6px);
}

.jis2t-tip-bottom .jis2t__tip {
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, -6px);
}

.jis2t:hover .jis2t__tip,
.jis2t:focus-visible .jis2t__tip {
    opacity: 1;
}

.jis2t-tip-left:hover .jis2t__tip,
.jis2t-tip-left:focus-visible .jis2t__tip,
.jis2t-tip-right:hover .jis2t__tip,
.jis2t-tip-right:focus-visible .jis2t__tip {
    transform: translate(0, -50%);
}

.jis2t-tip-top:hover .jis2t__tip,
.jis2t-tip-top:focus-visible .jis2t__tip,
.jis2t-tip-bottom:hover .jis2t__tip,
.jis2t-tip-bottom:focus-visible .jis2t__tip {
    transform: translate(-50%, 0);
}

/* ---------- Einblend-Effekte (Ausgangszustand) ---------- */
.jis2t-in-slide-up {
    transform: translateY(15px);
}

.jis2t-in-slide-side {
    transform: translateX(calc(var(--jis2t-side) * 40px));
}

.jis2t-in-zoom {
    transform: scale(0.3);
}

.jis2t-in-flip {
    transform: perspective(300px) rotateY(90deg);
}

.jis2t-in-bounce {
    transform: translateY(24px);
}

.jis2t-in-none {
    transition: none;
}

/* Sichtbarer Zustand */
.jis2t.jis2t--on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.jis2t-in-bounce.jis2t--on {
    animation: jis2t-bounce-in calc(var(--jis2t-ms) * 2.4) cubic-bezier(0.28, 0.84, 0.42, 1);
}

@keyframes jis2t-bounce-in {
    0% { transform: translateY(24px); }
    45% { transform: translateY(-7px); }
    70% { transform: translateY(3px); }
    100% { transform: translateY(0); }
}

/* ---------- Hover-Effekte ---------- */
.jis2t-hv-lift:hover .jis2t__icon,
.jis2t-hv-lift:focus-visible .jis2t__icon {
    transform: translateY(-14%);
}

.jis2t-hv-grow:hover .jis2t__inner,
.jis2t-hv-grow:focus-visible .jis2t__inner {
    transform: scale(1.09);
}

.jis2t-hv-rotate .jis2t__icon {
    transition: color 250ms ease, opacity 250ms ease, transform 500ms ease;
}

.jis2t-hv-rotate:hover .jis2t__icon,
.jis2t-hv-rotate:focus-visible .jis2t__icon {
    transform: rotate(360deg);
}

.jis2t-hv-pulse:hover .jis2t__inner,
.jis2t-hv-pulse:focus-visible .jis2t__inner,
.jis2t--attn .jis2t__inner {
    animation: jis2t-pulse 1s ease-in-out infinite;
}

.jis2t--attn .jis2t__inner {
    animation-iteration-count: 3;
}

.jis2t-hv-shake:hover .jis2t__icon,
.jis2t-hv-shake:focus-visible .jis2t__icon {
    animation: jis2t-shake 0.55s ease;
}

@keyframes jis2t-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes jis2t-shake {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-18%); }
    50% { transform: translateY(4%); }
    75% { transform: translateY(-8%); }
}

/* ---------- Lese-Fortschrittsbalken ---------- */
.jis2t-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: none;
    height: 4px;
    pointer-events: none;
}

.jis2t-bar--contained {
    position: absolute;
}

.jis2t-bar--bottom {
    top: auto;
    bottom: 0;
}

.jis2t-bar--active {
    display: block;
}

.jis2t-bar__fill {
    width: 0;
    height: 100%;
}

/* ---------- Weniger Bewegung gewuenscht ----------
   Klasse setzt das Skript nur, wenn „Bewegung reduzieren“ beachtet werden
   soll und das System es meldet. */
.jis2t--calm,
.jis2t--calm * {
    transition-duration: 0s !important;
    animation: none !important;
}

/* ---------- Druck ---------- */
@media print {
    .jis2t,
    .jis2t-bar {
        display: none !important;
    }
}