/* Схемач — глубина и характер.
 *
 * Подключается ПОСЛЕ stil.css и переопределяет плоские места.
 * Приёмы взяты с сайтов, разобранных по их настоящим стилям:
 * Linear, Vercel, Raycast, Resend, Warp, Cursor.
 *
 * 🔴 Главное открытие разбора: ни один из них не ставит `border`
 * на карточки. Граница всегда box-shadow — она складывается слоями
 * и позволяет сделать кромку неравномерной: сверху светлее (кромка
 * ловит свет), снизу темнее. Плоскость берётся именно из ровной
 * обводки одного цвета.
 */

:root {
  /* Поверхности полупрозрачным белым, а не сплошным серым:
     так они работают на любом фоне и складываются друг с другом */
  --sloj-1: rgba(255, 255, 255, .032);
  --sloj-2: rgba(255, 255, 255, .055);
  --sloj-3: rgba(255, 255, 255, .085);

  /* Медь в разных ролях */
  --med-fon: rgba(217, 133, 69, .08);
  --med-svet: rgba(217, 133, 69, .22);
  --med-linija: rgba(217, 133, 69, .38);

  /* Кромки */
  --kromka: rgba(255, 255, 255, .30);
  --kromka-tihaja: rgba(255, 255, 255, .13);
  --kontur: rgba(0, 0, 0, .55);

  /* Тени лесенкой: одна большая тень выглядит дёшево,
     несколько мелких дают мягкость */
  --ten-mjagkaja:
    0 9px 48px rgba(0, 0, 0, .10),
    0 6px 24px rgba(0, 0, 0, .12),
    0 3px 12px rgba(0, 0, 0, .13),
    0 1px 2px rgba(0, 0, 0, .10);
  --ten-vysoko:
    0 24px 60px -12px rgba(0, 0, 0, .70),
    0 8px 24px rgba(0, 0, 0, .35);

  /* Плавность: пружина для нажатий, длинная кривая для появления */
  --plavno: cubic-bezier(.23, 1, .32, 1);
  --pruzhina: cubic-bezier(.34, 1.56, .64, 1);
  --kino: cubic-bezier(.32, .72, 0, 1);
}

html[data-tema="svetlaja"] {
  --sloj-1: rgba(255, 255, 255, .70);
  --sloj-2: rgba(255, 255, 255, .92);
  --sloj-3: rgba(0, 0, 0, .04);
  --med-fon: rgba(178, 102, 44, .07);
  --med-svet: rgba(178, 102, 44, .16);
  --med-linija: rgba(178, 102, 44, .30);
  --kromka: rgba(255, 255, 255, .95);
  --kromka-tihaja: rgba(0, 0, 0, .06);
  --kontur: rgba(0, 0, 0, .10);
  --ten-mjagkaja:
    0 9px 30px rgba(24, 20, 14, .07),
    0 4px 12px rgba(24, 20, 14, .06),
    0 1px 2px rgba(24, 20, 14, .05);
  --ten-vysoko:
    0 24px 50px -14px rgba(24, 20, 14, .22),
    0 8px 20px rgba(24, 20, 14, .10);
}

/* ═══════════ живой фон ═══════════ */

/* Точечная сетка: одна строка, а «однотонный фон» исчезает.
   Точки еле видны — их не замечаешь, но без них плоско. */
body {
  background:
    radial-gradient(circle at 1px 1px,
      rgba(255, 255, 255, .035) 1.1px, transparent 0) 0 0 / 24px 24px,
    var(--bg);
  letter-spacing: -.011em;
}

html[data-tema="svetlaja"] body {
  background:
    radial-gradient(circle at 1px 1px,
      rgba(24, 20, 14, .055) 1.1px, transparent 0) 0 0 / 24px 24px,
    var(--bg);
}

/* ═══════════ типографика ═══════════ */

/* Чем крупнее кегль, тем сильнее отрицательный трекинг —
   общее правило всех разобранных сайтов */
.pervyj h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 800;
}

.stranica-zagolovok {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  letter-spacing: -.03em;
  line-height: 1.08;
}

.razdel h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -.024em;
  line-height: 1.12;
}

/* ═══════════ первый экран ═══════════ */

/* Медное свечение сверху: эллипс от верхнего края.
   Лежит под содержимым и не перехватывает нажатия. */
.pervyj {
  position: relative;
  isolation: isolate;
  border-bottom: 0;
  padding-top: 84px;
}

.pervyj::before {
  content: "";
  position: absolute;
  inset: -120px 0 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 58% at 50% 0%,
    rgba(217, 133, 69, .26) 0%,
    rgba(217, 133, 69, .07) 45%,
    transparent 74%);
}

/* Мягкая граница вместо линии: секция растворяется, а не обрывается */
.pervyj::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--kromka-tihaja) 18%,
    var(--kromka-tihaja) 82%, transparent);
}

.nadzagolovok {
  background: var(--sloj-1);
  border: 0;
  box-shadow:
    inset 0 .5px 0 var(--kromka-tihaja),
    0 0 0 1px var(--kontur);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
}

/* Снимок программы: наклон, медный ореол и блик кромки */
.pervyj-snimok {
  border: 0;
  border-radius: 14px;
  transform: perspective(1600px) rotateX(-8deg) rotateY(-4deg) scale(.97);
  box-shadow:
    0 0 0 1px var(--kromka-tihaja),
    inset 0 .5px 0 var(--kromka),
    0 0 90px 24px rgba(217, 133, 69, .10),
    0 0 36px 10px rgba(217, 133, 69, .07),
    var(--ten-vysoko);
  transition: transform 1s var(--kino), box-shadow .8s var(--plavno);
}

.pervyj-snimok:hover {
  transform: perspective(1600px) rotateX(0) rotateY(0) scale(1);
  box-shadow:
    0 0 0 1px var(--med-linija),
    inset 0 .5px 0 var(--kromka),
    0 0 110px 30px rgba(217, 133, 69, .16),
    var(--ten-vysoko);
}

/* ═══════════ карточки ═══════════ */

/* 🔴 border убран совсем: вместо него слои box-shadow.
   Верхняя кромка светлая — она «ловит свет», контур тёмный. */
.plitka,
.chislo-plitka,
.vid,
.karta,
.vypusk,
.plata-karta,
.vopros,
.sravnenie-storona,
.snimok-ramka,
.stat-plitka,
.proverka,
.avtor-karta {
  border: 0;
  background: var(--sloj-1);
  box-shadow:
    inset 0 .5px 0 var(--kromka-tihaja),
    0 0 0 1px var(--kontur),
    var(--ten-mjagkaja);
  transition:
    transform .22s var(--plavno),
    box-shadow .22s var(--plavno),
    background-color .3s var(--plavno);
}

/* Подсветка угла: свет как бы падает из-за верхнего левого края.
   Приём Linear — семь переходов, чтобы не было полос. */
.plitka,
.vid,
.stat-plitka {
  position: relative;
  overflow: hidden;
}

.plitka::before,
.vid::before,
.stat-plitka::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 55% at 6% 0%,
    rgba(217, 133, 69, .13) 0%,
    rgba(217, 133, 69, .09) 22%,
    rgba(217, 133, 69, .05) 42%,
    rgba(217, 133, 69, .02) 62%,
    transparent 82%);
  opacity: .9;
}

/* При наведении карточка приподнимается, кромка загорается медью */
.plitka:hover,
.vid:hover,
.karta:hover,
.plata-karta:hover,
.stat-plitka:hover,
.avtor-karta:hover {
  transform: translateY(-3px);
  background-color: var(--sloj-2);
  box-shadow:
    inset 0 .5px 0 var(--kromka),
    0 0 0 1px var(--med-linija),
    0 0 28px -6px var(--med-svet),
    var(--ten-vysoko);
}

/* Свежий выпуск — с медным свечением, он главный на странице */
.vypusk.poslednij {
  background:
    radial-gradient(ellipse 70% 100% at 0% 0%,
      rgba(217, 133, 69, .12), transparent 60%),
    var(--sloj-1);
  box-shadow:
    inset 0 .5px 0 var(--kromka),
    0 0 0 1px var(--med-linija),
    0 0 32px -8px var(--med-svet),
    var(--ten-mjagkaja);
}

/* ═══════════ числа ═══════════ */

.chislo-plitka b {
  background: linear-gradient(180deg, #F0A468, var(--acc) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 34px;
  letter-spacing: -.03em;
}

html[data-tema="svetlaja"] .chislo-plitka b {
  background: linear-gradient(180deg, #C4753A, var(--acc) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ═══════════ кнопки ═══════════ */

/* Объём как у клавиши: блик сверху, тень снизу, медный ореол.
   Текст тёмный — на меди белый читается плохо. */
.knopka.glavnaja {
  background: linear-gradient(180deg, #E59A5E, #D98545 58%, #C2723A);
  border: 0;
  color: #2A1B0F;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -2px 0 rgba(0, 0, 0, .18),
    0 0 18px -2px rgba(217, 133, 69, .30),
    0 2px 6px rgba(0, 0, 0, .28);
  transition:
    transform .16s var(--pruzhina),
    box-shadow .22s var(--plavno),
    filter .22s var(--plavno);
}

.knopka.glavnaja:hover {
  background: linear-gradient(180deg, #EFA66B, #E08D4C 58%, #CB7B41);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -2px 0 rgba(0, 0, 0, .18),
    0 0 30px 2px rgba(217, 133, 69, .40),
    0 4px 12px rgba(0, 0, 0, .32);
}

.knopka.glavnaja:active {
  transform: translateY(1px) scale(.994);
}

/* Обычная кнопка — стеклянная */
.knopka:not(.glavnaja) {
  border: 0;
  background: var(--sloj-1);
  box-shadow:
    inset 0 .5px 0 var(--kromka-tihaja),
    0 0 0 1px var(--kontur);
  transition:
    transform .16s var(--pruzhina),
    box-shadow .22s var(--plavno),
    background-color .22s var(--plavno);
}

.knopka:not(.glavnaja):hover {
  background: var(--sloj-2);
  box-shadow:
    inset 0 .5px 0 var(--kromka),
    0 0 0 1px var(--med-linija);
}

.knopka:not(.glavnaja):active {
  transform: translateY(1px);
}

/* ═══════════ шапка ═══════════ */

.shapka {
  background: rgba(21, 23, 28, .72);
  backdrop-filter: saturate(1.8) blur(18px);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--kromka-tihaja);
}

html[data-tema="svetlaja"] .shapka {
  background: rgba(242, 240, 236, .78);
  box-shadow: 0 1px 0 rgba(24, 20, 14, .08);
}

/* Стекло не везде поддерживается — тогда просто плотный фон */
@supports not (backdrop-filter: blur(1px)) {
  .shapka { background: var(--rail); }
  .nadzagolovok { background: var(--panel); }
}

.navigacija a.tekushhaja {
  background: var(--med-fon);
  box-shadow: inset 0 0 0 1px var(--med-linija);
}

/* ═══════════ разделители ═══════════ */

/* Пунктир градиентом: у обычного border-style: dashed нельзя
   задать шаг, и он выглядит грубо */
.razdel.s-liniej {
  border-top: 0;
  position: relative;
}

.razdel.s-liniej::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: repeating-linear-gradient(to right,
    var(--kromka-tihaja) 0, var(--kromka-tihaja) 3px,
    transparent 3px, transparent 8px);
}

/* ═══════════ снимки в разделе «как выглядит» ═══════════ */

.vid img {
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--kontur);
}

/* ═══════════ шаги ═══════════ */

.shagi li {
  border: 0;
  background: var(--sloj-1);
  box-shadow:
    inset 0 .5px 0 var(--kromka-tihaja),
    0 0 0 1px var(--kontur);
  transition: box-shadow .22s var(--plavno),
              background-color .22s var(--plavno);
}

.shagi li:hover {
  background: var(--sloj-2);
  box-shadow:
    inset 0 .5px 0 var(--kromka),
    0 0 0 1px var(--med-linija);
}

.shagi li::before {
  background: linear-gradient(180deg, var(--acc), #B96F36);
  color: #2A1B0F;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 2px 6px rgba(0, 0, 0, .28);
}

/* ═══════════ поля ═══════════ */

.pole-poiska,
.vybor,
.vhod-pole input {
  border: 0;
  background: var(--sloj-1);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .25),
    0 0 0 1px var(--kontur);
  transition: box-shadow .2s var(--plavno);
}

.pole-poiska:focus,
.vybor:focus,
.vhod-pole input:focus {
  outline: none;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .25),
    0 0 0 1px var(--med-linija),
    0 0 0 4px rgba(217, 133, 69, .12);
}

/* ═══════════ волна появления ═══════════ */

/* Блоки всплывают не разом, а с небольшим запаздыванием —
   так взгляд успевает за движением */
.dvizhenie .vsplyvaet {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .7s var(--plavno),
    transform .7s var(--plavno);
}

.dvizhenie .vsplyvaet.vidno {
  opacity: 1;
  transform: none;
}

/* Задержка по порядку внутри ряда */
.plitki .plitka:nth-child(2),
.chisla .chislo-plitka:nth-child(2),
.vidy .vid:nth-child(2) { transition-delay: .07s; }

.plitki .plitka:nth-child(3),
.chisla .chislo-plitka:nth-child(3),
.vidy .vid:nth-child(3) { transition-delay: .14s; }

.chisla .chislo-plitka:nth-child(4),
.vidy .vid:nth-child(4) { transition-delay: .21s; }

/* ═══════════ кому движение мешает ═══════════ */

@media (prefers-reduced-motion: reduce) {
  .pervyj-snimok,
  .pervyj-snimok:hover {
    transform: none;
    transition: none;
  }
  .plitka, .vid, .karta, .knopka, .shagi li {
    transition: none;
  }
  .plitka:hover, .vid:hover, .karta:hover,
  .plata-karta:hover, .stat-plitka:hover, .avtor-karta:hover {
    transform: none;
  }
  .dvizhenie .vsplyvaet {
    opacity: 1;
    transform: none;
    transition: none;
  }
}