@charset "UTF-8";
/* =====================================================
   up-button.css — Кнопка «Наверх»
   Содержит: .up-button и модификаторы
   Зависимости: нет
   Управление видимостью: JS добавляет .up-button--visible
   ===================================================== */

.up-button {
  position: fixed;
  left: min(25px, 4vw);
  bottom: min(30px, 5vh);
  width: clamp(50px, 6vw, 60px);
  height: clamp(50px, 6vw, 60px);

  /* Визуал */
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-radius: 50% 50% 50% 20%;
  border: none;
  box-shadow:
    0 4px 16px rgba(37, 99, 235, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset,
    2px 0 8px rgba(0, 0, 0, 0.1);

  /* Типография */
  color: #fff;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 500;
  text-decoration: none;

  /* Layout */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  /* Скрыто по умолчанию */
  cursor: pointer;
  z-index: 10010;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) translateX(-10px);

  /* Анимация появления */
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-property: opacity, visibility, transform, background-color, box-shadow;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ─── Видимое состояние (JS) ─── */
.up-button--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translateX(0);
}

/* ─── Hover / Active / Focus ─── */
.up-button:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow:
    0 6px 24px rgba(37, 99, 235, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  transform: translateY(-4px) translateX(4px);
}

.up-button:active {
  transform: translateY(-1px) translateX(2px);
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  transition-duration: 0.1s;
}

.up-button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 3px;
}

/* ─── Текст и иконка внутри кнопки ─── */
.up-button__text { font-size: 0.65em; line-height: 1; opacity: 0.9; }
.up-button__icon { font-size: 1.3em; line-height: 1; margin-top: -2px; }

/* ─── Адаптив ─── */

/* Мобильные (тач) */
@media (hover: none) and (pointer: coarse) {
  .up-button {
    left: max(20px, env(safe-area-inset-left));
    bottom: max(20px, env(safe-area-inset-bottom));
    width: clamp(56px, 12vw, 64px);
    height: clamp(56px, 12vw, 64px);
  }
  .up-button:hover { transform: none; }
  .up-button:active { transform: scale(0.95); }
}

@media (max-width: 240px) {
  .up-button { left: 10px; bottom: 10px; width: 44px; height: 44px; }
}