/* ============================================================
   Обложка сайта (главная) - оглавление из четырёх дверей.
   Ровно один экран, прокрутки нет: ниже ничего не лежит.
   Принято Оксаной 26.08.2026, этюд - proto-hero/oblozhka.html.
   Шрифты и токены берутся из fonts.css и main.css, здесь не дублируются.
   ============================================================ */

body.cover-page { overflow: hidden; height: 100%; }
html:has(body.cover-page) { height: 100%; }

.scene {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

.bg-layer {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background: var(--hero-wash);
}
.bg-layer img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* вуаль гасит пестроту кадра, чтобы текст читался в любой фазе анимации */
.veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.2) 55%, rgba(17,19,22,.12) 100%);
}

.cover {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
}

/* Шапке и подвалу нужна своя подложка: фон под ними меняется от светлого чертежа
   до фотографии, и тёмный текст на кадре тонет. */
.cover-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px clamp(20px, 5vw, 64px);
  background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.55) 70%, rgba(255,255,255,0) 100%);
}
.cover-top .cover-mark {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 20px;
  letter-spacing: .02em; color: var(--ink);
}
.cover-top .cover-mark sup { font-size: .55em; color: var(--accent-ink); }
.top-link {
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid rgba(17,19,22,.28); padding-bottom: 2px;
}
.top-link:hover { border-color: var(--ink); }

.cover-mid {
  display: flex; align-items: center;
  padding: 0 clamp(20px, 5vw, 64px);
  min-height: 0;
}
.cover-glass {
  width: min(660px, 100%); max-width: 100%;
  padding: 30px 32px 26px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 26px 70px rgba(17,19,22,.14);
}
.cover-glass h1 {
  font-family: 'Manrope', sans-serif; font-weight: 700;
  font-size: clamp(25px, 3.1vw, 38px); line-height: 1.18; letter-spacing: -.02em;
}

.doors {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; margin-top: 22px;
}
.door {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 84px; padding: 16px 16px 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.82); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.door:hover, .door:focus-visible {
  transform: translateY(-3px); background: #fff;
  box-shadow: 0 14px 34px rgba(17,19,22,.14);
}
.door:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.door-num {
  font-family: 'Manrope', sans-serif; font-size: 12px;
  letter-spacing: .12em; color: var(--accent-ink); margin-bottom: auto;
}
.door-name {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: -.01em; overflow-wrap: normal; hyphens: none;
}
.door-hint { font-size: 13px; line-height: 1.4; color: var(--ink-soft); margin-top: 3px; }
/* Короткая подпись для телефона: на узком экране полная не помещается - четыре
   двери с подписями наезжают на подвал (замер 08.09.2026 на 375x667: минус 20 px).
   Короткая встаёт в одну строку с названием и высоту двери не меняет. */
.door-hint-s { display: none; }

/* пятая, тихая дверь - для тех, кто пришёл с задачей, а не с услугой */
.quiet {
  display: inline-block; margin-top: 16px; font-size: 15px;
  color: var(--accent-ink); text-decoration: none;
  border-bottom: 1px dashed rgba(54,95,125,.5); padding-bottom: 1px;
}
.quiet:hover { border-bottom-style: solid; }

.cover-bot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 16px clamp(20px, 5vw, 64px) 18px;
  font-size: 14px; color: #2b3037;
  background: linear-gradient(0deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.62) 68%, rgba(255,255,255,0) 100%);
}
.cover-contacts { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.cover-contacts a { color: var(--ink); text-decoration: none; font-weight: 600; }
.cover-contacts a:hover { text-decoration: underline; }
.cover-legal { color: #3d4249; max-width: 52ch; text-align: right; }

/* Зоны нажатия обложки. Текст остаётся на месте, кликабельную площадь до 44 px
   расширяет невидимый псевдоэлемент: замер 08.09.2026 показал высоту 21-27 px,
   пальцем в такие ссылки попадать трудно. Отступ у .quiet (16 px) больше половины
   прибавки, поэтому зона не наезжает на двери выше. */
.top-link, .quiet, .cover-contacts a { position: relative; }
.top-link::after,
.quiet::after,
.cover-contacts a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%; height: 44px;
  transform: translateY(-50%);
}

/* ---- фон: рисунок проявляется по диагонали, следом его раскрашивает фото ----
   Выбор Оксаны 08.09.2026 из шести проб: направление - из верхнего левого угла
   в нижний правый, темп около пяти секунд, движение проходит один раз.
   Отвергли: вычерчивание векторными штрихами (красиво, но 312 анимируемых контуров
   на первом экране), горизонтальную и вертикальную шторки, спокойное проявление. */
.risuem-kar, .risuem-foto {
  -webkit-mask-image: linear-gradient(135deg, #000 0 38%, transparent 58% 100%);
  mask-image: linear-gradient(135deg, #000 0 38%, transparent 58% 100%);
  -webkit-mask-size: 260% 260%; mask-size: 260% 260%;
  -webkit-mask-position: 100% 100%; mask-position: 100% 100%;
  animation: diagonal 5.4s ease-in-out forwards;
}
.risuem-foto { animation-delay: 1.9s; }
@keyframes diagonal {
  from { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
  48%, 100% { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .risuem-kar { display: none; }
  .risuem-foto {
    animation: none;
    -webkit-mask-image: none; mask-image: none;
  }
}

@media (max-width: 860px) {
  .cover-glass { width: 100%; padding: 24px 20px 22px; background: rgba(255,255,255,.88); }
  .cover-legal { text-align: left; }
}
@media (max-width: 560px) {
  .cover-glass h1 { font-size: 24px; }
  .doors { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
  .door {
    min-height: var(--tap); flex-direction: row; align-items: baseline;
    justify-content: flex-start; gap: 8px; padding: 12px;
  }
  .door-hint { display: none; }
  .door-hint-s {
    display: block; font-size: 11px; line-height: 1.3; color: var(--ink-soft);
    flex: 1 1 auto; min-width: 0;
  }
  .cover-bot { font-size: 13px; padding-bottom: 16px; }
}