/* Стили для кнопки "Наверх" с прогресс-баром */

/* 1. Плавная прокрутка */
@media(prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* 2. Регистрация Свойств */
@property --progress {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

/* 3. Анимация, управляемая скроллом */
@keyframes progress-scroll {
  0% {
    --progress: 0%;
    --angle: 0deg;
  }
  2% {
    --angle: -90deg;
  }
  100% {
    --progress: 100%;
    --angle: -90deg;
  }
}

/* 4. Стили кнопки для десктопа */
.back-to-top {
    --yellow: #f5d600;
    --white: #ffffff;
    --border-color: #1a1a1a;

    position: fixed;
    inset: auto 2rem 2rem auto;
    display: inline-block;
    padding: 0.5em;
    border: 2px solid var(--border-color);
    border-radius: 0.5em;
    color: var(--border-color);
    text-decoration: none;
    z-index: 10;
    background-image: linear-gradient(
        var(--yellow) 0% var(--progress), 
        var(--white) var(--progress) 100%
    );
    animation: progress-scroll linear;
    animation-timeline: scroll(root);
}

/* 5. SVG-иконка */
.back-to-top svg {
    display: block;
    width: 32px;
    height: 32px;
    transform: rotate(var(--angle));
    transition: transform 0.2s ease;
}

/* 6. Скрытие текста для доступности */
.back-to-top span {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* 7. Подсказка при наведении */
.back-to-top::before {
    content: "Наверх";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    margin-bottom: 8px;
    z-index: 1001;
}

.back-to-top::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    margin-bottom: -2px;
}

.back-to-top:hover::before,
.back-to-top:hover::after {
    opacity: 1;
    visibility: visible;
}

/* 8. Фоллбэк для браузеров без поддержки animation-timeline */
@supports not (animation-timeline: scroll()) {
  .back-to-top {
    background: var(--yellow);
  }
}

/* 9. Прогресс-бар для мобильных устройств */
.mobile-reading-progress {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: #f0f0f0;
    z-index: 1001;
}

.mobile-reading-progress-bar {
    height: 100%;
    width: var(--progress, 0%);
    background: #f5d600;
    animation: progress-scroll linear;
    animation-timeline: scroll(root);
}

/* 10. Адаптив для мобильных устройств */
@media (max-width: 768px) {
    .back-to-top {
        display: none;
    }
    
    .mobile-reading-progress {
        display: block;
    }
}

/* 11. Адаптив для десктопа */
@media (min-width: 769px) {
    .mobile-reading-progress {
        display: none;
    }
}