/* docs/styles.css — gradient + glass cards (glassmorphism)
   - плавный фон-перелив (как раньше)
   - кнопки/карточки — полупрозрачное стекло с хорошей читаемостью
   - сохраняется .link.seen (однократная подпрыгивающая анимация)
   - уважение prefers-reduced-motion
*/

/* ========== переменные ========== */
:root{
  --g1: #fbc4ab;
  --g2: #e7c6ff;

  --card-text: #07101a;       /* основной текст на карточках (тёмный для контраста) */
  --muted: #51606e;
  --card-bg-alpha: 0.18;      /* базовая прозрачность карточки (не сильно высокая) */
  --card-border-alpha: 0.18;  /* граница карточки */
  --radius: 12px;
  --gap: 12px;
  --maxw: 840px;

  --grad-duration: 24s;
  --grad-timing: ease-in-out;
}

/* ========== сброс / базовые правила ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color: var(--card-text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;

  /* базовый градиент (фоновая подложка) */
  background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%);
  background-size: 200% 200%;
  animation: gradientShift var(--grad-duration) var(--grad-timing) infinite;
}

/* перестановка фона при reduced motion */
@media (prefers-reduced-motion: reduce){
  body{ animation: none !important; }
}

/* плавный сдвиг позиции фонового градиента */
@keyframes gradientShift{
  0% { background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* ========== контейнер и хедер ========== */
.page{ width:100%; max-width:var(--maxw); margin:0 auto; display:block; }

.hero{ text-align:center; margin-bottom:18px; padding:8px 12px; user-select:none; }
.avatar{
  width:92px;height:92px;border-radius:999px;border:2px solid rgba(255,255,255,0.08);
  object-fit:cover;display:block;margin:0 auto 10px;background-color: rgba(255,255,255,0.06);
}
.name{ font-size:1.35rem; margin:0; font-weight:700; color:var(--card-text); }
.subtitle{ color:var(--muted); margin:6px 0 0; font-size:0.95rem; }

/* ========== список ссылок (grid) ========== */
.links{ display:grid; gap:var(--gap); margin:18px 0; }

/* ========== glass card (основной стиль ссылок/кнопок) ========== */
/* Используется для <a> и для <button class="link action"> */
.link, .link.action{
  display:block;
  padding:14px 16px;
  border-radius:var(--radius);

  /* GLASS: полупрозрачный фон + backdrop-filter (blur + saturate) */
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.10));
  background-clip: padding-box;

  color: var(--card-text);
  text-decoration: none;
  font-weight:700;
  text-align:left;

  /* эффект стекла: размытие фона позади и небольшая насыщенность */
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);

  /* тонкая граница (светлая) и лёгенькая тень для глубины */
  border: 1px solid rgba(255,255,255,var(--card-border-alpha));
  box-shadow: 0 8px 24px rgba(9,12,18,0.28);

  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, backdrop-filter 160ms ease;
  cursor:pointer;
}

/* альтернатива: если фон слишком светлый — можно усилить контраст:
   .link { background: rgba(255,255,255,0.20); color:#06121a; } */

.link .link-content{ display:inline-flex; align-items:center; gap:10px; vertical-align:middle; }

/* фокус-стиль — для клавиатурного доступа */
.link:focus, .link.action:focus{
  outline: 3px solid rgba(96,165,250,0.18);
  outline-offset: 3px;
  box-shadow: 0 14px 40px rgba(9,12,18,0.36);
  transform: translateY(-4px);
}

/* hover: чуть поднимаем и усиливаем прозрачность/ясность стекла */
.link:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(9,12,18,0.36);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.12));
}

/* если нужно — svg-иконки в кнопках */
.link .icon{ width:20px; height:20px; display:inline-block; opacity:0.95 }

/* ========== подпрыгивание .seen (один раз) ========== */
@keyframes bounce {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-9px); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}
.link.seen{
  animation: bounce 420ms cubic-bezier(.22,.9,.31,1) 1 both;
}

/* ========== адаптивность ========== */
@media (min-width:640px){
  .links{ grid-template-columns: repeat(2, 1fr); }
  .hero{ margin-bottom:22px; }
}

/* ========== футер ========== */
.foot{ text-align:center; color:var(--muted); margin-top:12px; font-size:0.86rem; }

/* ========== отладка / быстрые советы ==========
   Если кнопки всё ещё "невидимы":
   1) Убедись, что текущий styles.css загружен (DevTools → Network → styles.css → 200).
   2) Временно применить override в Console:
        document.querySelectorAll('.link').forEach(el => el.style.background = 'rgba(255,255,255,0.18)');
   3) Если браузер не поддерживает backdrop-filter, эффект размытости не будет виден — в таком случае мы усилили фон (rgba 0.14-0.18) и добавили тень, чтобы карточки были читаемы.
   4) Для IE/старых браузеров добавь fallback-bg: .link { background-color: rgba(255,255,255,0.22); }
*/