/* =========================================================
   DEPO 2.0 — FUTURE STUDIO (v2 — Refined)
   Сдержанный футуризм: глубокий фон, акценты, читаемость.
   ========================================================= */

body.proto-home1-1 {
  --f-bg:       #0d0e16; /* Не чистый черный, а глубокий графит */
  --f-bg-2:     #12131e;
  --f-surface:  rgba(22, 24, 38, 0.7);
  --f-border:   rgba(120, 160, 255, 0.1);
  --f-accent:   #6c8cff;  /* Приглушенный индиго-синий, а не кислотный циан */
  --f-accent-2: #b46cff;  /* Мягкий фиолетовый */
  --f-text:     #e8ebf4;  /* Мягкий белый, не #fff */
  --f-dim:      #8b90a5;  /* Приглушенный серо-голубой для второстепенного текста */
  
  --bg: var(--f-bg);
  background: var(--f-bg);
  color: var(--f-text);
  overflow-x: hidden;
}

/* Убираем кислотную сетку и шум, оставляем едва заметный градиент */
body.proto-home1-1::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(108, 140, 255, 0.06), transparent 70%);
}
body.proto-home1-1 > .app-shell { position: relative; z-index: 2; }

/* Прогресс-бар: тонкий и элегантный */
.f-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 9999;
  background: linear-gradient(90deg, var(--f-accent), var(--f-accent-2));
  transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 8px rgba(108, 140, 255, 0.5);
  pointer-events: none;
}

/* ── КАСТОМНЫЙ КУРСОР (сдержанный) ── */
@media (hover: hover) and (pointer: fine) {
  body.proto-home1-1, body.proto-home1-1 a, body.proto-home1-1 button { cursor: none; }
  .f-cursor {
    position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none;
    width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
    background: var(--f-accent);
    box-shadow: 0 0 12px rgba(108, 140, 255, 0.8);
    transition: width .2s, height .2s, margin .2s, background .2s;
  }
  .f-cursor.is-active {
    width: 40px; height: 40px; margin: -20px 0 0 -20px;
    background: transparent; border: 1px solid var(--f-accent);
    box-shadow: 0 0 16px rgba(108, 140, 255, 0.4);
  }
}

/* ── БАННЕР: глубокий, с мягким свечением ── */
.h11-banner__img { filter: saturate(0.7) contrast(1.1) brightness(0.45); }
.h11-banner::before {
  background:
    linear-gradient(180deg, rgba(13,14,22,0.6) 0%, rgba(13,14,22,0.1) 40%, rgba(13,14,22,0.95) 100%),
    radial-gradient(60% 50% at 50% 40%, rgba(108, 140, 255, 0.12), transparent 70%);
}
.h11-banner__content {
  border: 1px solid var(--f-border);
  background: rgba(18, 19, 30, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 40px rgba(108, 140, 255, 0.05);
}
.h11-banner__logo {
  filter: drop-shadow(0 0 16px rgba(108, 140, 255, 0.4));
}
.h11-banner__text { color: #cdd2e6; text-shadow: none; }

/* ── КАРТОЧКИ ЦЕННОСТЕЙ: стекло, четкая иерархия ── */
.FirstScreen_blockText__grid > li {
  background: var(--f-surface);
  border: 1px solid var(--f-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .3s, box-shadow .3s;
}
.FirstScreen_blockText__grid > li:hover {
  border-color: rgba(108, 140, 255, 0.3);
  box-shadow: 0 8px 30px -10px rgba(108, 140, 255, 0.2);
}
.FirstScreen_blockText__grid > li::before { color: var(--f-accent); opacity: 0.7; text-shadow: none; }
.FirstScreen_blockText__grid h4 { color: #fff; }
.FirstScreen_blockText__grid p { color: var(--f-dim); }

/* ── ФОТО-СТЕНЫ: аккуратные карточки ── */
.h1-tile {
  border: 1px solid var(--f-border);
  background: var(--f-surface);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.h1-tile:hover {
  border-color: rgba(108, 140, 255, 0.4);
  box-shadow: 0 10px 30px -12px rgba(108, 140, 255, 0.3);
  transform: translateY(-3px); /* Без 3D-наклона, который утомляет */
}
.h1-tile__cap {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--f-accent); text-shadow: none;
  letter-spacing: 0.1em;
}

/* ── CLIENT MAP: панель с HUD-акцентами, но без кричащего неона ── */
.FirstScreen_clientMap__list {
  background: rgba(18, 19, 30, 0.6);
  border: 1px solid var(--f-border);
  backdrop-filter: blur(8px);
}
.FirstScreen_clientMap .FirstScreen_item {
  border: 1px solid var(--f-border);
  background: rgba(22, 24, 38, 0.6);
  color: #cdd2e6;
  transition: border-color .25s, color .25s;
}
.FirstScreen_clientMap .FirstScreen_item:hover {
  border-color: rgba(108, 140, 255, 0.5);
  color: #fff;
}
.FirstScreen_clientMap .FirstScreen_item::before { color: var(--f-accent); }

/* ── PEOPLE: карточки без «магентового» свечения ── */
.FirstScreen_masonry .FirstScreen_item {
  border: 1px solid var(--f-border);
  background: var(--f-surface);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.FirstScreen_masonry .FirstScreen_item:hover {
  border-color: rgba(180, 108, 255, 0.4);
  box-shadow: 0 10px 30px -12px rgba(180, 108, 255, 0.25);
  transform: translateY(-3px);
}
.FirstScreen_masonry .FirstScreen_item p {
  color: #fff; text-shadow: none;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Плавное появление секций (оставляем, это уместно) */
.FirstScreen_blockText, .FirstScreen_clientMap, .FirstScreen_blockPublished, .h1-wall {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.FirstScreen_blockText.is-visible, .FirstScreen_clientMap.is-visible,
.FirstScreen_blockPublished.is-visible, .h1-wall.is-visible {
  opacity: 1; transform: none;
}

/* Уважение к reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .FirstScreen_blockText, .FirstScreen_clientMap, .FirstScreen_blockPublished, .h1-wall {
    opacity: 1 !important; transform: none !important;
  }
  @media (hover: hover) {
    body.proto-home1-1, body.proto-home1-1 a, body.proto-home1-1 button { cursor: auto; }
    .f-cursor { display: none; }
  }
}