/* =========================================================
   BASE — сброс, типографика, скроллбар, утилиты
   ========================================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: 80px;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 13.5px / 1.65 var(--mono);
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s, color .25s;
  overflow-x: hidden;
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--accent);
  color: var(--onacc);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Скроллбар --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 99px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* --- Анимации --- */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
}

@keyframes hf {
  to { opacity: 0; }
}

/* --- Зерно плёнки (grain) --- */

/* Появление элементов при смене страницы */
#app > * { animation: rise .25s ease both; }

/* --- Зерно плёнки (grain) --- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
:root:not([data-theme="dark"]) .grain { opacity: .035; }

/* --- Кастомный курсор --- */
.cursor-dot,
.cursor-ring {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
}

.cursor-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: .55;
  transition: width .18s, height .18s, opacity .18s, background .18s, border-color .18s;
}

.cursor-ring.on {
  width: 54px;
  height: 54px;
  opacity: 1;
  background: var(--accent-soft);
}

@media (pointer: fine) {
  * { cursor: none; }
  input { cursor: text; }
  .cursor-dot,
  .cursor-ring { display: block; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
  #app > * { animation: none; }
}