/* ==========================================================================
   Sections — header + hero (первый экран)
   Все значения — через токены из tokens.css.
   ========================================================================== */

/* ============================ Site header ============================ */
.site-header {
  padding-top: var(--header-padding-top);
}

/* Десктоп: сетка 5 колонок (лого + 4 пункта), зазор из макета */
.site-header__inner {
  display: grid;
  grid-template-columns: repeat(var(--nav-columns), 1fr);
  column-gap: var(--nav-column-gap);
  align-items: start;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
}

/* Логотип. Это не <img>, а закрашенная маска: так знак перекрашивается
   токеном (на hover — акцентный синий), а не остаётся картинкой с зашитым
   в файл цветом. Форму задаёт альфа-канал name.svg, его fill не участвует.
   Шапка и футер используют один и тот же знак. */
.site-logo {
  display: block;
  width: var(--logo-width);
  height: var(--logo-height);
  background-color: var(--color-text);
  -webkit-mask: url("../assets/svg/name.svg") no-repeat center / contain;
  mask: url("../assets/svg/name.svg") no-repeat center / contain;
  transition: background-color var(--transition-base);
}

@media (hover: hover) {
  .site-header__logo:hover .site-logo,
  .site-footer__logo:hover .site-logo {
    background-color: var(--color-accent);
  }
}

/* Тач — обратная связь на нажатии, как у остальных ссылок */
@media (hover: none) {
  .site-header__logo:active .site-logo,
  .site-footer__logo:active .site-logo {
    background-color: var(--color-accent);
  }
}

/* На десктопе обёртки «растворяются», и пункты становятся ячейками сетки */
.site-nav,
.site-nav__list {
  display: contents;
}

/* flex убирает лишний базовый интерлиньяж под инлайновой ссылкой */
.site-nav__list > li {
  display: flex;
}

/* Бургер, крестик и затемнение на десктопе не нужны */
.burger,
.site-nav__panel-head,
.site-nav__scrim {
  display: none;
}

/* ============================ Hero ============================ */
.hero {
  position: relative;
  max-width: var(--hero-max-width);
  margin-top: var(--hero-offset-top);
}

.hero__title {
  font-size: var(--font-size-h1);          /* 20px */
  line-height: var(--line-height-20);
  color: var(--color-text);
}

.hero__description {
  margin-top: var(--hero-text-gap);
  font-size: var(--font-size-small);       /* 12px */
  line-height: var(--line-height-12);
  color: var(--color-text-secondary);
}

/* Рукописная линия под словом «впервые» — декор.
   Позиционируется абсолютно относительно .hero. */
.hero__underline {
  position: absolute;
  left: var(--hero-underline-left);
  top: var(--hero-underline-top);
  pointer-events: none;
  user-select: none;
}

/* Рукописная пометка — декор.
   Позиционируется абсолютно относительно .hero, наклон — в CSS. */
.hero__note {
  position: absolute;
  top: var(--hero-note-top);
  left: var(--hero-note-left);
  rotate: var(--note-rotate);
  pointer-events: none;
  user-select: none;
  /* До ширины из макета (66px); высота — по пропорции файла (50×43),
     чтобы рисунок не растянулся. Общий размер для десктопа и мобилы. */
  width: 66px;
  height: auto;
}

/* ---------------- Большое «сердце»-росчерк из макета ----------------
   Тонкая синяя линия справа в первом экране. Рисуется снизу вверх (как
   пометки), затем стирается тем же движением, цикл повторяется.
   Позиция — из макета, относительно .hero. overflow: visible, потому что
   верхний завиток выходит за viewBox экспортированного файла. */
.hero-heart {
  position: absolute;
  z-index: -1;                 /* за текстом хиро */
  left: 599px;
  top: -120px;
  width: 514px;                /* = viewBox, масштаб 1:1 к макету */
  height: auto;
  max-width: none;             /* иначе глобальный reset svg{max-width:100%} сожмёт */
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

.hero-heart path {
  stroke-dasharray: 1;         /* path имеет pathLength="1" */
  stroke-dashoffset: 1;        /* спрятана, пока не «нарисуется» */
  /* один раз: нарисовалась, стёрлась и больше не появляется.
     linear — равномерная скорость на всём рисовании и стирании. */
  animation: hero-heart-draw var(--hero-heart-duration) linear
    var(--hero-heart-delay) 1;
}

@keyframes hero-heart-draw {
  0% {
    stroke-dashoffset: 1;      /* пусто */
  }
  40% {
    stroke-dashoffset: 0;      /* нарисована целиком */
  }
  55% {
    stroke-dashoffset: 0;      /* пауза с полной линией */
  }
  95% {
    stroke-dashoffset: -1;     /* стёрлась тем же движением */
  }
  100% {
    stroke-dashoffset: -1;     /* пусто — стык с началом цикла бесшовный */
  }
}

/* «Уменьшить движение» — показываем сердце статично, нарисованным целиком */
@media (prefers-reduced-motion: reduce) {
  .hero-heart path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ============================ Cases ============================ */
.section {
  margin-top: var(--section-gap);
}

.section__content {
  margin-top: var(--section-content-gap);
}

/* Две карточки в ряд; ниже 768px — одна колонка */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cases-gap);
}

/* ============================ Side quests ============================ */
.section--spaced {
  margin-top: var(--section-gap-lg);
}

/* Крупные проекты — два в ряд, как кейсы */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--projects-gap);
}

.project-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.project-card__pic {
  position: relative;
  height: var(--project-pic-height);
  overflow: hidden;
  background-color: var(--color-surface);
}

/* Экран сдвинут от центра панели и обрезается её краями */
.project-card__screen {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: calc(-50% + var(--project-screen-offset-x))
    calc(-50% + var(--project-screen-offset-y));
  width: var(--project-screen-width);
  height: var(--project-screen-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.project-card__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Второй проект — экран сдвинут в другую сторону */
.project-card--shift-right {
  --project-screen-offset-x: var(--project-screen-offset-x-alt);
}

/* ---------------- Коллаж ----------------
   Десктоп: две строки. Верхняя — лента маленьких плиток (navi шире),
   нижняя — три крупных: sports | currenc | music. */
.collage {
  margin-top: var(--collage-offset);
  display: flex;
  flex-direction: column;
  gap: var(--collage-gap);
  /* если строки не влезают по ширине — прокрутка внутри, страница не едет */
  overflow-x: auto;
}

/* Обёртка ленты «растворяется», лента становится верхней строкой коллажа */
.collage__scroll {
  display: contents;
}

.collage__strip {
  display: flex;
  gap: var(--collage-gap);
}

.collage__strip .collage__tile {
  flex: 0 0 var(--collage-unit);   /* 272 */
  height: var(--collage-unit);
}

.collage__strip .collage__tile--navi {
  /* 272 + 12 + 96 = 380, как в макете */
  flex-basis: calc(
    var(--collage-unit) + var(--collage-gap) + var(--collage-col-narrow)
  );
}

/* Нижний ряд крупных плиток */
.collage__big {
  display: flex;
  gap: var(--collage-gap);
  height: var(--collage-big-height);   /* 556 */
}

.collage__big .collage__tile {
  height: 100%;
}

/* sports и music — «телефоны» по краям, currenc тянется в середине (≈452) */
.collage__tile--sports,
.collage__tile--music {
  flex: 0 0 var(--collage-big-side);   /* 378 */
}

.collage__tile--currenc {
  flex: 1 1 auto;
}

.collage__tile--sports {
  order: -1;   /* на десктопе — первой слева */
}

.collage__tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-color: var(--color-surface);
}

/* Картинка центрируется в плитке; высота задаётся долей от плитки,
   ширина считается сама из пропорций файла */
.collage__tile img {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: auto;
  height: var(--tile-img-height);
  max-width: none;
  border-radius: var(--radius-24);
}

/* Светлые скриншоты (52days, 75hour) сливаются с белым фоном — как в макете
   им нужна рамка, тот же приём, что у экранов в карточках кейсов. Радиус
   крупнее базового (34 против 24). */
.collage__tile--52days img,
.collage__tile--75hour img {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-34);
}

/* Размер картинки по каждой плитке (доля от высоты плитки) */
.collage__tile--navi   { --tile-img-height: 50%; }
.collage__tile--robert { --tile-img-height: 73.53%; }
.collage__tile--52days { --tile-img-height: 73.53%; }
.collage__tile--75hour { --tile-img-height: 73.53%; }

.collage__tile--currenc { --tile-img-height: 72.3%; }

/* sports и music (одинаковый вертикальный кадр) выше плитки — показываем
   верх, обрезаем низ. */
.collage__tile--sports,
.collage__tile--music {
  --tile-img-height: 105.58%;
}

.collage__tile--sports img,
.collage__tile--music img {
  top: 10%;
  translate: -50% 0;
}

/* ============================ Обо мне ============================ */
.about__text {
  position: relative;
  max-width: var(--about-text-width);
}

.about__paragraph {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-16);
  color: var(--color-text);
}

/* Рукописная пометка внутри абзаца — декор.
   Координаты из макета, наклон и позиция только в CSS. */
/* Слово-якорь для пометки: «воина». Пометка позиционируется относительно
   него, а не абзаца, поэтому не уезжает при переносе строк на разных ширинах. */
.about-word {
  position: relative;
}

.about__note {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;        /* поверх слова, по центру — зачёркивает */
  rotate: var(--about-note-rotate);
  pointer-events: none;
  user-select: none;
}

/* Лента фото — та же механика, что у коллажа в сайд квестах */
.about__scroll {
  margin-top: var(--collage-offset);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.about__scroll::-webkit-scrollbar {
  display: none;
}

.about__strip {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--about-strip-gap);
  width: max-content;
}

/* ============================ Футер ============================ */
.site-footer {
  margin-top: var(--footer-gap);
  padding-bottom: var(--footer-padding-bottom);
}

/* Десктоп: та же сетка 5 колонок, что и в шапке */
.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(var(--nav-columns), 1fr);
  column-gap: var(--nav-column-gap);
  align-items: start;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
}

.site-footer__list {
  display: contents;
}

.site-footer__list > li {
  display: flex;
}

/* ==========================================================================
   Mobile ≤768px — навигация сворачивается в бургер
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --header-padding-top: var(--space-16);
    --hero-offset-top: 31px;
    --hero-text-gap: var(--space-16);
    --hero-underline-left: 133px;
    --hero-underline-top: 79px;   /* на 2px выше — как в мобильном макете */
    --section-gap: 60px;
    --section-content-gap: var(--space-24);
    --cases-gap: var(--space-32);

    /* Крупные проекты */
    --project-pic-height: 320px;
    --project-screen-width: 383px;
    --project-screen-height: 320px;
    --project-screen-offset-x: -44px;
    --project-screen-offset-x-alt: -44px;  /* на мобиле оба одинаково */
    --project-screen-offset-y: 24px;
    --projects-gap: var(--space-32);

    /* Коллаж */
    --collage-unit: 200px;
    --collage-unit-wide: 279px;
    --collage-block-height: 320px;
    --collage-offset: var(--space-32);

    /* Обо мне и футер */
    --footer-gap: 60px;
    --footer-padding-bottom: 46px;
  }

  /* Карточки в одну колонку */
  .cases-grid {
    grid-template-columns: 1fr;
  }

  /* ---------------- Side quests на мобиле ---------------- */
  .section--spaced {
    margin-top: var(--section-gap);
  }

  /* Крупные проекты — в одну колонку */
  .projects-grid {
    grid-template-columns: 1fr;
  }

  /* По макету это название переносится на две строки */
  .project-card__title--narrow {
    width: var(--project-title-narrow);
    white-space: normal;
  }

  /* ---------------- Обо мне на мобиле ---------------- */
  .about__text {
    max-width: none;
  }

  /* Лента выходит к краям экрана, как коллаж */
  .about__scroll {
    margin-inline: calc(var(--container-gutter) * -1);
    padding-inline: var(--container-gutter);
  }

  /* ---------------- Футер на мобиле ---------------- */
  /* Лого слева, контакты колонкой справа */
  .site-footer__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .site-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--footer-item-gap);
    width: var(--footer-contacts-width);
  }

  /* Коллаж: лента со свайпом + два широких блока под ней */
  .collage {
    display: flex;
    flex-direction: column;
    gap: var(--collage-gap);
    overflow: visible;
  }

  /* Полоса прокрутки. Отрицательные поля выводят ленту к краям экрана,
     внутренние padding'и держат первую и последнюю плитку по контейнеру.
     Ширина полосы равна ширине экрана, поэтому страница вбок не едет. */
  .collage__scroll {
    display: block;
    overflow-x: auto;
    margin-inline: calc(var(--container-gutter) * -1);
    padding-inline: var(--container-gutter);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .collage__scroll::-webkit-scrollbar {
    display: none;
  }

  /* Лента: в строку, без переносов */
  .collage__strip {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--collage-gap);
    width: max-content;
  }

  .collage__strip .collage__tile {
    flex: 0 0 auto;
    width: var(--collage-unit);
    height: var(--collage-unit);
  }

  .collage__strip .collage__tile--navi {
    width: var(--collage-unit-wide);
  }

  /* Нижний ряд на мобиле — колонкой: currenc, music, sports. Сбрасываем
     десктопные flex/order и фикс. высоту 556 (иначе блоки под коллажем
     наложатся), растягиваем на всю ширину. */
  .collage__big {
    display: flex;
    flex-direction: column;
    gap: var(--collage-gap);
    height: auto;
  }

  .collage__big .collage__tile {
    flex: 0 0 auto;
    width: 100%;
    height: var(--collage-block-height);
  }

  .collage__tile--sports {
    order: 0;   /* сбрасываем десктопный order: -1 → sports снизу */
  }

  .collage__tile--sports,
  .collage__tile--music {
    --tile-img-height: 123.44%;
  }

  .collage__tile--currenc {
    --tile-img-height: 80%;
  }

  /* Хедер в строку: лого слева, бургер справа */
  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Кнопка-бургер */
  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--burger-size);
    height: var(--burger-size);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
  }

  /* Затемнение под панелью */
  .site-nav__scrim {
    display: block;
    position: fixed;
    inset: 0;
    background-color: var(--scrim-color);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base),
      visibility var(--transition-base);
    z-index: 10;
  }

  /* Выезжающая панель меню */
  .site-nav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--menu-width);
    max-width: 100%;
    padding: var(--menu-padding);
    background-color: var(--color-bg);
    translate: 100% 0;
    visibility: hidden;
    transition: translate var(--transition-base),
      visibility var(--transition-base);
    z-index: 11;
  }

  /* Шапка панели с крестиком */
  .site-nav__panel-head {
    display: flex;
    justify-content: flex-end;
  }

  .site-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--burger-size);
    height: var(--burger-size);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
  }

  /* Список пунктов */
  .site-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--menu-item-gap);
    margin-top: var(--menu-list-offset);
  }

  /* Открытое состояние */
  .site-nav.is-open {
    translate: 0 0;
    visibility: visible;
  }

  .site-nav__scrim.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* Блокировка прокрутки страницы под открытым меню */
  body.is-menu-open {
    overflow: hidden;
  }

  /* Hero: пометка переезжает к правому краю тезиса (по макету) */
  .hero {
    max-width: none;
  }

  .hero__note {
    top: 1px;
    left: auto;
    right: 10px;   /* на 4px правее */
    /* размер — общий, задан в базовом правиле .hero__note */
  }

  /* На мобиле первый экран плотный — большое сердце убираем */
  .hero-heart {
    display: none;
  }
}

/* Уважаем настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-nav__scrim,
  .nav-item__mark {
    transition-duration: 0.01ms;
  }
}