/* ============================================================
   effects.css — слой дизайна «Fluid»:
   жидкий canvas-градиент в hero, ledger-типографика
   (solid + outline), моно-мета, гигантская бегущая строка,
   depth gauge (глубина скролла), манифест, горизонтальная
   галерея кейсов, плавающая «пилюля» шапки.
   Все анимации отключаются при prefers-reduced-motion: reduce.
   ============================================================ */

/* ---------- Мono-утилита (метки, мета-строки) ---------- */

.mono {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------- 1. Hero: жидкий градиент + ledger-типографика ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(94vh, 1000px);
  overflow: hidden;
}

.hero__fluid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero__fluid-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* мягкий апскейл низкого разрешения + переход в фон страницы */
  filter: blur(2px) saturate(1.05);
}

/* затемнение к нижнему краю hero — мостик к следующей секции */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  background: linear-gradient(transparent, var(--bg-main));
  pointer-events: none;
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  grid-template-columns: 1fr;
  width: 100%;
}

.hero__content { max-width: 1000px; }

.hero__title {
  margin-top: 8px;
}

/* solid-строка — обычный заголовок; outline — контурная декорация */
.hero__title .lw-solid {
  display: block;
  font-size: clamp(2.3rem, 6.4vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}

.hero__title .lw-outline {
  display: block;
  font-size: clamp(4rem, 15vw, 12.5rem);
  line-height: .9;
  font-weight: 500;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(198, 161, 91, .55);
  text-transform: uppercase;
  user-select: none;
  position: relative;
  transition:
    letter-spacing .9s cubic-bezier(.22, 1, .36, 1),
    -webkit-text-stroke-color .5s ease,
    filter .9s ease;
}

/* Золотой слой поверх контура: при наведении поднимается снизу вверх.
   clip-path анимируется линейно и без «ступенек» — в отличие от
   пересчёта background-size, который выглядел как резкая вспышка. */
.hero__title .lw-outline::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  background-image: linear-gradient(178deg, #e6cd93 0%, #d6b26e 38%, #c6a15b 62%, #8f6c33 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1.5px rgba(214, 178, 110, .95);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.hero__title .lw-outline:hover {
  letter-spacing: .055em;
  filter: drop-shadow(0 6px 32px rgba(198, 161, 91, .38));
  cursor: default;
}

.hero__title .lw-outline:hover::after {
  clip-path: inset(0 0 0 0);
}

.hero__subtitle {
  max-width: 52ch;
}

/* моно-мета под действиями — как в журнале спецификаций */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: .72rem;
  color: var(--text-secondary);
}

.hero__meta span b {
  color: var(--rose);
  font-weight: 400;
}

/* подсказка скролла — левый нижний угол hero */
.hero__scroll {
  position: absolute;
  left: clamp(20px, 4vw, 40px);
  bottom: 26px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .68rem;
  color: var(--text-secondary);
}

.hero__scroll-arrow {
  color: var(--rose);
  animation: aw-descend 2.4s var(--ease-soft) infinite;
}

@keyframes aw-descend {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(6px); opacity: .4; }
}

/* ---------- 2. Манифест ---------- */

.manifesto {
  position: relative;
  overflow: hidden;
  padding-block: clamp(96px, 14vw, 200px);
}

/* фоновое видео: на весь блок, приглушено, с невидимым фокусом */
.manifesto__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  pointer-events: none;
}

/* затемнение под текст: края тонут в фоне сайта */
.manifesto__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--bg-main), transparent 22%, transparent 78%, var(--bg-main)),
    rgba(11, 11, 14, .38);
}

.manifesto__text {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 40px);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.6vw, 3.9rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--text-main);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(11, 11, 14, .65);
}

/* Слова проявляются по скроллу; «тусклое» состояние только при JS */
.js .manifesto .w {
  opacity: .14;
  transition: opacity .6s var(--ease-out);
}

.js .manifesto .w.on {
  opacity: 1;
}

.manifesto .w--accent {
  font-style: italic;
  color: var(--rose);
}

/* ---------- 3. Depth gauge: глубина страницы справа ---------- */

.depth-gauge {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 14px;
  mix-blend-mode: difference;
  color: #f2efe8;
  pointer-events: none;
}

.depth-track {
  position: relative;
  width: 1px;
  height: 52vh;
  background: rgba(242, 239, 232, .35);
}

.depth-tick {
  position: absolute;
  right: 0;
  width: 12px;
  height: 1px;
  background: rgba(242, 239, 232, .55);
}

.depth-tick.is-minor {
  width: 5px;
  background: rgba(242, 239, 232, .3);
}

.depth-tick-label {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .58rem;
  letter-spacing: .14em;
  opacity: .65;
}

.depth-marker {
  position: absolute;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f2efe8;
  transform: translateY(-50%);
}

.depth-readout {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .62rem;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
  opacity: .8;
}

@media (max-width: 1099px) {
  .depth-gauge { display: none; }
}

/* ---------- 4. Горизонтальная галерея кейсов ---------- */

.cases-rail {
  position: relative;
}

/* Индексы SPEC-стиля: ПР.01, ПР.02… */
.cases-rail .case-card__idx {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--rose);
  background: rgba(11, 11, 14, .72);
  border: 1px solid rgba(198, 161, 91, .35);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  backdrop-filter: blur(4px);
}

.cases-rail > * .case-card {
  border-radius: 12px;
}

.cases-rail__nav {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.cases-rail__btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--sand);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.cases-rail__btn:hover {
  background: var(--rose);
  border-color: var(--rose);
  color: #0b0b0e;
}

.cases-rail__progress {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.cases-rail__progress i {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: inherit;
  background: var(--rose);
  transition: width .2s linear, transform .2s linear;
}

@media (min-width: 900px) {
  .cases-rail {
    display: flex;
    gap: clamp(20px, 2.6vw, 32px);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 16px;
    scrollbar-width: none;
    cursor: grab;
  }

  .cases-rail::-webkit-scrollbar { display: none; }

  .cases-rail.is-drag { cursor: grabbing; scroll-snap-type: none; }

  .cases-rail > * {
    flex: 0 0 min(430px, 36vw);
    scroll-snap-align: start;
  }

  .cases-rail > * .case-card__visual { aspect-ratio: 4 / 3; }
}

@media (max-width: 899px) {
  .cases-rail__nav { display: none; }
}

/* ---------- 5. Шапка-пилюля ---------- */

.site-header {
  margin-inline: clamp(10px, 2vw, 24px);
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
}

.site-header.is-scrolled {
  background: rgba(11, 11, 14, .78);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-color: var(--border);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6);
}

/* в мобильной панели шапки пилюля не нужна */
@media (max-width: 899px) {
  .site-header {
    margin-inline: 0;
    margin-top: 0;
    border-radius: 0;
  }
}

/* ---------- Блог: карточки статей и мета-шапка ---------- */

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
}

.blog-card__date {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose);
}

.blog-card__title {
  font-size: 1.15rem;
  line-height: 1.3;
}

.blog-card__text {
  font-size: .85rem;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__more {
  margin-top: auto;
  padding-top: 8px;
  font-size: .82rem;
  color: var(--rose);
}

.article-meta {
  margin-top: -18px;
  margin-bottom: 8px;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---------- Cookie-баннер (152-ФЗ): деликатная панель снизу ---------- */

.cookie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  padding: 14px clamp(14px, 3vw, 40px) 18px;
  transform: translateY(115%);
  pointer-events: none;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.cookie.is-shown {
  transform: translateY(0);
  pointer-events: auto;
}

.cookie__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px 28px;
  flex-wrap: wrap;
  background: var(--bg-card);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

.cookie__text {
  flex: 1 1 340px;
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.cookie__policy {
  color: var(--rose);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie__policy:hover { color: var(--taupe-deep); }

.cookie__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.cookie__more {
  font-size: .82rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie__more:hover { color: var(--text-main); }

.cookie__accept { white-space: nowrap; }

/* ---------- Reduced motion: всё статично и доступно ---------- */

@media (prefers-reduced-motion: reduce) {
  .cookie { transition: none; }

  .hero__fluid-canvas { filter: none; }

  .hero__scroll-arrow { animation: none; }

  /* У контура — мгновенная заливка без движения и свечения */
  .hero__title .lw-outline { transition: none; }
  .hero__title .lw-outline::after { transition: none; }
  .hero__title .lw-outline:hover { letter-spacing: .04em; filter: none; }
  .hero__title .lw-outline:hover::after { clip-path: inset(0 0 0 0); }

  .js .manifesto .w { opacity: 1; transition: none; }

  .cases-rail { scroll-behavior: auto; }
}