/* ============================================================================
   Футер INGRIAFARM «Нить и клубок» (partials/footer.blade.php).
   Компактная лента в тон страницы: единственная оранжевая нить (SVG поверх
   всего футера) — и верхняя граница, и главный герой: рисуется по скроллу
   и ныряет в клубок на нижней линовке; из-за линии подглядывает кот
   (header-cat, лапки на линии). Клубок — кнопка «Наверх», его можно
   таскать (нить привязана всегда), кот сам с ним играет (ingri-footer.js).
   Оранжевый — только контур, никаких заливок.
   Интерактив — ingri-footer.js; без него и при reduced-motion всё статично:
   нить дорисована (резервный d из разметки), контент виден CSS-дефолтами.
   .is-offstage вешает initFooterDecor (ingri-motion.js) — паузим идлы.
   Правый низ держим свободнее: там плавающая корзина (fixed 57px,
   right 27 / bottom 54 — modals.css). ======================================= */

.ifn {
  --ifn-ink: #040000;                 /* текст — чернильный, как у витрины */
  --ifn-dim: rgba(4, 0, 0, .56);
  --ifn-faint: rgba(4, 0, 0, .38);
  --ifn-line: rgba(4, 0, 0, .1);      /* нижняя линовка */
  --ifn-orange: #F39B2B;
  --ifn-foot: 60px;                   /* мин. высота сервисной строки */
  position: relative;
  margin-top: 84px;
  /* Глушим каркас старого .footer из style.css (flex + height:380px) */
  display: block;
  height: auto;
  padding: 64px 0 0;                  /* воздух над контентом — зона волны нити */
  font-family: 'Montserrat', sans-serif;
}
@media (max-width: 492px) {
  .ifn { padding-bottom: 0; }         /* и его мобильный padding-bottom */
}

/* ---------------- Нить ---------------- */
/* Поверх всего футера; клики сквозь. JS на лету подгоняет viewBox под
   реальные пиксели футера — статичный резервный d растянут preserveAspectRatio */
.ifn-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.ifn-thread__path {
  stroke: var(--ifn-orange);
  stroke-width: 2.6px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ---------------- Каркас ---------------- */
.ifn-wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
.ifn-grid {
  position: relative;               /* якорь сцены: низ сетки == линовка */
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) auto auto;
  gap: 36px clamp(44px, 7vw, 110px);
  justify-content: start;
  /* Справа — воздух под спуск нити к лапам кота */
  padding-right: clamp(180px, 22vw, 300px);
  /* Снизу — полка для клубка слева (66px) и кота справа на линовке */
  padding-bottom: 76px;
}

/* ---------------- Бренд-колонка ---------------- */
.ifn-kicker {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ifn-faint);
}
.ifn-word {
  margin: 0 0 12px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--ifn-ink);
}
.ifn-word b { color: var(--ifn-orange); font-weight: 800; }
.ifn-note {
  margin: 0 0 18px;
  max-width: 340px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ifn-dim);
}
.ifn-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ifn-ink);
}
.ifn-hours { font-weight: 500; color: var(--ifn-faint); }
.ifn-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c76f;
  animation: ifn-pulse 2.4s ease-out infinite;
}
.ifn-dot.is-off {
  background: #e05c4b;
  animation: none;
}
@keyframes ifn-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 199, 111, .45); }
  70% { box-shadow: 0 0 0 9px rgba(52, 199, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 199, 111, 0); }
}

/* ---------------- Навигация ---------------- */
.ifn-col__title {
  margin: 4px 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ifn-faint);
}
.ifn-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* «Навигация» в два столбца: columns сам балансирует любое число пунктов
   (страницы приходят из админки), порядок чтения — сверху вниз. flex с
   columns не дружит — возвращаем block, межстрочье переносим на li */
.ifn-list--cols {
  display: block;
  columns: 2;
  column-gap: 28px;
}
.ifn-list--cols li {
  break-inside: avoid;      /* пункт не разрезается между столбцами */
  margin-bottom: 10px;
}
.ifn-list--cols li:last-child { margin-bottom: 0; }
.ifn-link {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ifn-dim);
  overflow-wrap: anywhere;    /* длинные слова документов не рвут сетку */
  transition: color .25s ease;
}
/* Ховер — «ниточка»: оранжевое подчёркивание дорисовывается слева направо */
.ifn-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 1px;
  background: var(--ifn-orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.ifn-link:hover { color: var(--ifn-ink); }
.ifn-link:hover::after,
.ifn-link:focus-visible::after { transform: scaleX(1); }
.ifn-link:focus-visible {
  outline: 2px solid var(--ifn-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------- Сцена: клубок и кот вместе справа ---------------- */
/* Клубок-источник у лап кота (справа), нить сходит с него ВЛЕВО по
   верхней кромке — вся геометрия привязана к сцене, не к краям экрана
   (контейнер центрован!). Сцена — абсолют внутри сетки: её низ совпадает
   с линовкой на любом брейкпоинте. Отступ справа — с запасом от зоны
   плавающей корзины (fixed, right 27). Клубок слева от кота (order в
   потоке) — «у передних лап». */
.ifn-scene {
  position: absolute;
  right: clamp(76px, 9vw, 126px);
  bottom: -1px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
/* Клубок — настоящая кнопка «Наверх»; его же можно таскать (drag в JS,
   touch-action: none, чтобы жест не превращался в скролл страницы) */
.ifn-ballbtn {
  display: block;
  margin-bottom: -1px;                /* нижняя точка «на» линии */
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: grab;
  touch-action: none;
}
.ifn-ballbtn.is-drag { cursor: grabbing; }
.ifn-ballbtn:focus-visible {
  outline: 2px solid var(--ifn-orange);
  outline-offset: 5px;
}
.ifn-ball {
  display: block;
  width: 66px;
  height: 66px;
  transform-origin: 50% 88%;
  animation: ifn-rock 7s ease-in-out infinite;
}
@keyframes ifn-rock {
  0%, 100% { rotate: -5deg; }
  50% { rotate: 6deg; }
}
/* Кот подглядывает из-за линовки: голова над линией, лапки свисают на неё */
.ifn-cat {
  display: block;
  width: 104px;
  aspect-ratio: 400 / 365;
  margin-bottom: -14px;
  background: no-repeat center bottom / contain url(img/icon/header-cat.png);
  cursor: pointer;
  animation: ifn-breathe 6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes ifn-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.025; }
}
/* За экраном (класс от initFooterDecor) идлы стоят — экономия FPS */
.is-offstage .ifn-ball,
.is-offstage .ifn-cat,
.is-offstage .ifn-dot { animation-play-state: paused; }

/* Салют лапок по клику на кота (элементы создаёт ingri-footer.js) */
.ifn-burst-paw {
  position: absolute;
  z-index: 3;
  width: 20px;
  height: 20px;
  color: var(--ifn-orange);
  pointer-events: none;
}
.ifn-burst-paw svg { display: block; width: 100%; height: 100%; }

/* ---------------- Сервисная строка ---------------- */
.ifn-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  min-height: var(--ifn-foot);
  box-sizing: border-box;
  padding: 16px 0 20px;
  border-top: 1px solid var(--ifn-line);
}
.ifn-copy {
  margin: 0;
  font-size: 12px;
  color: var(--ifn-faint);
}

/* ---------------- Тёмная тема ---------------- */
.theme-dark .ifn {
  --ifn-ink: #FFFFFF;
  --ifn-dim: rgba(255, 255, 255, .62);
  --ifn-faint: rgba(255, 255, 255, .4);
  --ifn-line: rgba(255, 255, 255, .12);
}
/* Тёплый ободок, чтобы рыжий кот не сливался с тёмным низом */
.theme-dark .ifn-cat {
  filter: drop-shadow(0 0 14px rgba(243, 155, 43, .28));
}

/* ---------------- Адаптив ---------------- */
@media (max-width: 1280px) {
  /* На узких вьюпортах правый край строки — под плавающей корзиной */
  .ifn-bottom { padding-right: 84px; }
}
@media (max-width: 1023px) {
  .ifn-grid {
    /* min 200px бренду: без него 1fr схлопывался в слово-на-строку,
       когда auto-колонки навигации/документов съедали всю ширину */
    grid-template-columns: minmax(200px, 1fr) auto auto;
    gap: 32px clamp(28px, 5vw, 60px);
    padding-right: 0;
    /* Сцена уезжает под колонки — оставляем ей полосу над линовкой */
    padding-bottom: 100px;
  }
}
@media (max-width: 639px) {
  .ifn { padding-top: 52px; margin-top: 64px; }
  .ifn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
    padding-bottom: 92px;
  }
  .ifn-col--brand { grid-column: 1 / -1; }
  /* Навигация и документы стоят бок о бок по ~159px — внутренние два
     столбца изрубили бы длинные пункты, складываем в один */
  .ifn-list--cols { columns: 1; }
  .ifn-scene { right: clamp(52px, 14vw, 86px); }
  .ifn-ball { width: 54px; height: 54px; }
  .ifn-cat { width: 84px; margin-bottom: -11px; }
  .ifn-bottom { padding-bottom: 16px; }
}
/* Совсем узкие экраны: две колонки по ~124px не вмещают названия
   документов («конфиденциальности») — складываем в одну. Навигация при
   этом получает всю ширину (~272px) — её два столбца возвращаются и
   режут высоту вдвое там, где вертикаль дороже всего */
@media (max-width: 400px) {
  .ifn-grid { grid-template-columns: 1fr; gap: 24px; }
  .ifn-list--cols { columns: 2; column-gap: 22px; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .ifn-ball,
  .ifn-cat { animation: none; }
  .ifn-cat { cursor: default; }
  .ifn-ballbtn { cursor: pointer; touch-action: auto; } /* только клик «Наверх» */
  .ifn-dot { animation: none; }
  .ifn-link::after { transition: none; }
}