/* Inter 3.19 с осями wght и slnt: эта версия используется в макете. В Inter 4 другие ширины букв и настоящий курсив */
@font-face {
  font-family: 'Inter';
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-cyrillic-variable-full-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-variable-full-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --fs-title: 2.75rem;  /* 44 */
  --fs-nav: 2.25rem;    /* 36 */
  --fs-lead: 1.4375rem; /* 23 */
  --fs-body: 1.125rem;  /* 18 */
  --fs-list: 0.9375rem; /* 15 */
  --fs-meta: 0.875rem;  /* 14 */

  --gap-xs: 0.75rem;    /* 12 */
  --gap-s: 1.25rem;     /* 20 */
  --gap-m: 2rem;        /* 32 */
  --gap-l: 3.75rem;     /* 60 */
  --gap-xl: 6.25rem;    /* 100 */

  --column: 25.125rem;  /* 402 */
  --gutter: 0.875rem;   /* 14 */

  --placeholder: #91aed5;
  --accent: #1a63d8;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  letter-spacing: -0.025em; /* на каждом элементе: em должен считаться от его собственного кегля */
}

/* Макет рассчитан на 402px: на экранах уже него всё уменьшается пропорционально */
html {
  font-size: min(100%, 3.9801vw);
  background: #000;
  scrollbar-color: rgba(145, 174, 213, 0.5) transparent;
  interpolate-size: allow-keywords;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.375rem;
  overflow-wrap: break-word;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--accent);
  color: #fff;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 0.25rem;
}

.sr-only {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Страница и фон */
.page {
  position: relative;
  overflow: hidden;
}

.page--home {
  min-height: 75.125rem; /* 1202 */
}

.bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bg i {
  position: absolute;
  inset: 0;
  background: url(/assets/img/bg.png) top center / 100% auto repeat-y;
}

.body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  width: 100%;
  max-width: var(--column);
  margin-inline: auto;
  padding: 5rem var(--gutter);
}

.page--home .body {
  padding-bottom: var(--gap-m);
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-l);
}

/* Заголовки и вводный текст */
.title {
  font-size: var(--fs-title);
  line-height: 3.3125rem;
}

.title--home {
  font-size: 2.4375rem;
  line-height: 2.9375rem;
}

.title--social {
  font-size: var(--fs-nav);
  line-height: 2.5rem;
}

.title-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.title-row .title {
  flex: 1;
  min-width: 0;
  line-height: 3.125rem;
}

.back {
  position: relative;
  flex: none;
  width: 1.625rem;
  height: 3.5625rem;
}

.back img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5625rem;
  height: 1.625rem;
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.3s var(--ease-out);
}

.descr {
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.lead {
  font-size: var(--fs-lead);
  font-style: oblique 10deg;
  line-height: 1.75rem;
  text-align: right;
}

.about {
  line-height: 1.5rem;
}

.person {
  font-style: oblique 10deg;
  text-align: right;
}

/* Карточки */
.cards {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding: 1.25rem;
  overflow: hidden;
  border-radius: 2.5rem;
  background: linear-gradient(to right, rgba(4, 43, 93, 0.06), rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}

.card--soon {
  opacity: 0.5;
}

a.card:focus-visible {
  border-radius: 2.5rem;
  outline-offset: -2px;
}

.card__media {
  height: 15rem;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--placeholder);
}

.card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.card__head {
  display: flex;
  gap: var(--gap-xs);
  align-items: flex-start;
}

.card__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-lead);
  line-height: 1.5rem;
}

.card__arrow {
  flex: none;
  width: 2.5rem;
  height: 1.5rem;
  transition: transform 0.35s var(--ease-out);
}

.card__text,
.card__list {
  line-height: 1.5rem;
}

.card__text,
.card__list {
  opacity: 0.8;
}

.card__list,
.entry__list {
  padding-left: 1.5em;
  list-style: disc outside;
}

/* Записи подробного резюме */
.entry__head {
  display: flex;
  gap: var(--gap-xs);
  align-items: center;
  white-space: nowrap;
}

.entry__head--wrap {
  flex-wrap: wrap;
  row-gap: 0.25rem;
  white-space: normal;
}

.entry__title {
  flex: 1;
  min-width: 0;
}

.entry__head--wrap .entry__title {
  flex-basis: 100%;
}

.entry__date {
  flex: none;
  font-size: var(--fs-meta);
  line-height: 1.0625rem;
}

.entry__meta {
  font-size: var(--fs-meta);
  line-height: 1.0625rem;
  opacity: 0.7;
}

.entry__text {
  font-size: var(--fs-list);
  line-height: 1.25rem;
}

.entry__list {
  font-size: var(--fs-list);
  line-height: 1.125rem;
}

/* Раскрывающиеся секции */
.fold__head {
  display: flex;
  gap: var(--gap-xs);
  align-items: flex-start;
  padding-inline: 1rem;
  cursor: pointer;
  list-style: none;
}

.fold__head::-webkit-details-marker {
  display: none;
}

.fold__title {
  flex: 1;
  min-width: 0;
}

.fold__icon {
  position: relative;
  flex: none;
  align-self: stretch;
  width: 1.5rem;
}

.fold__icon img {
  position: absolute;
  top: -0.023rem;
  left: 0.316rem;
  width: 0.8675rem;
  height: 1.5rem;
  transition: transform 0.35s var(--ease-out);
}

.fold[open] .fold__icon img {
  transform: rotate(90deg);
}

.fold::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.45s var(--ease-out), content-visibility 0.45s allow-discrete;
}

.fold[open]::details-content {
  block-size: auto;
}

.fold__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding-top: var(--gap-xs);
}

/* Страница кейса */
.case {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.case__cover {
  height: 15rem;
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--placeholder);
}

.case__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case__intro {
  font-size: var(--fs-lead);
  line-height: 1.5rem;
}

.tb {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.tb__title {
  font-size: var(--fs-lead);
  line-height: 1.5rem;
}

.tb__body {
  line-height: 1.5rem;
  opacity: 0.8;
}

.tb__list {
  padding-left: 1.5em;
}

.tb__link {
  font-style: oblique 10deg;
  line-height: 1.5rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: opacity 0.2s ease;
}

.tb--image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.25rem;
}

.tb--image figcaption {
  font-size: var(--fs-meta);
  line-height: 1.25rem;
  opacity: 0.7;
}

/* Навигация и контакты */
.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-xl);
  font-size: var(--fs-nav);
  line-height: 2.75rem;
}

.nav__multi {
  line-height: 2.5rem;
}

.roll {
  display: grid;
  overflow: clip;
}

.roll > span {
  grid-area: 1 / 1;
  transition: transform 0.5s var(--ease-out);
}

.roll > span + span {
  transform: translateY(105%);
}

.contacts {
  line-height: 1.5rem;
}

.copy {
  display: inline-grid;
  overflow: clip;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  vertical-align: top;
  cursor: pointer;
}

.person .copy {
  justify-items: end;
}

.copy__label,
.copy__done {
  grid-area: 1 / 1;
  transition: transform 0.4s var(--ease-out);
}

.copy__done {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  transform: translateY(105%);
}

.copy__check {
  width: 1rem;
  height: 1rem;
}

.copy__check path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.copy.is-done .copy__label {
  transform: translateY(-105%);
}

.copy.is-done .copy__done {
  transform: none;
}

.copy.is-done .copy__check path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.35s var(--ease-out) 0.12s;
}

/* Наведение и нажатие */
a.card {
  transition: scale 0.25s var(--ease-out);
}

a.card:active {
  scale: 0.985;
}

.back:active img {
  transform: translate(-50%, -50%) rotate(90deg) translateY(0.25rem);
}

.nav a:active,
.contacts a:active,
.copy:active {
  opacity: 0.7;
}

a.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), rgba(145, 174, 213, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

@media (hover: hover) {
  a.card:hover::before {
    opacity: 1;
  }

  a.card:hover .card__arrow {
    transform: translateX(0.375rem);
  }

  a.card:hover .card__media img {
    transform: scale(1.03);
  }

  .nav a:hover .roll > span:first-child {
    transform: translateY(-105%);
  }

  .nav a:hover .roll > span + span {
    transform: none;
  }

  .back:hover img {
    transform: translate(-50%, -50%) rotate(90deg) translateY(0.25rem);
  }

  .contacts a:hover,
  .person a:hover,
  .copy:hover .copy__label {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .tb__link:hover {
    opacity: 0.7;
  }
}

/* Появление: свет фона проявляется из черноты, слова заголовка поднимаются из-под маски */
.w {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: 0.08em;
  vertical-align: top;
}

.w > span {
  display: inline-block;
  animation: word-rise 0.9s var(--ease-out) both;
}

.w:nth-of-type(2) > span { animation-delay: 60ms; }
.w:nth-of-type(3) > span { animation-delay: 120ms; }
.w:nth-of-type(4) > span { animation-delay: 180ms; }
.w:nth-of-type(5) > span { animation-delay: 240ms; }
.w:nth-of-type(n + 6) > span { animation-delay: 300ms; }

@keyframes word-rise {
  from {
    transform: translateY(105%);
  }
}

html:not(.seen) .bg {
  animation: bg-bloom 1.4s var(--ease-out) both;
  transform-origin: 70% 15%;
}

@keyframes bg-bloom {
  from {
    opacity: 0;
    transform: scale(1.08);
  }
}

.lead,
.about {
  animation: text-focus 0.8s var(--ease-out) 0.25s both;
}

.about {
  animation-delay: 0.35s;
}

@keyframes text-focus {
  from {
    opacity: 0;
    filter: blur(6px);
  }
}

/* Элементы ниже появляются при прокрутке. Без скриптов они просто видны */
[data-reveal] {
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), scale 0.25s var(--ease-out);
}

html.js [data-reveal]:not(.in) {
  opacity: 0;
  transform: translateY(1.5rem);
}

.card--soon.in {
  opacity: 0.5;
}

/* Стекло ловит блик в момент появления */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
  transform: translateX(-110%);
  pointer-events: none;
}

.card.in::after {
  animation: sheen 1.3s var(--ease-out) 0.1s both;
}

@keyframes sheen {
  to {
    transform: translateX(110%);
  }
}

/* Фон отстаёт от контента при прокрутке: так стекло ощущается отдельным слоем */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .bg i {
      animation: bg-drift linear both;
      animation-timeline: scroll(root);
    }

    @keyframes bg-drift {
      to {
        transform: translateY(5%);
      }
    }
  }
}

/* Переходы между страницами */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 160ms ease both vt-out;
}

::view-transition-new(root) {
  animation: 320ms var(--ease-out) both vt-in;
}

::view-transition-group(case-cover) {
  animation-duration: 0.5s;
  animation-timing-function: var(--ease-out);
}

@keyframes vt-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .w > span,
  .lead,
  .about,
  html:not(.seen) .bg,
  .card.in::after {
    animation: none;
  }

  html.js [data-reveal]:not(.in) {
    opacity: 1;
    transform: none;
  }

  .card--soon:not(.in) {
    opacity: 0.5;
  }

  .fold::details-content,
  .roll > span,
  .card__arrow,
  .card__media img,
  .fold__icon img,
  .back img,
  a.card {
    transition: none;
  }

  [data-reveal] {
    transition: opacity 0.2s ease;
  }

  /* Подтверждение копирования остаётся, но без движения */
  .copy__label,
  .copy__done {
    transition: opacity 0.15s ease;
  }

  .copy__done {
    transform: none;
    opacity: 0;
  }

  .copy.is-done .copy__label {
    transform: none;
    opacity: 0;
  }

  .copy.is-done .copy__done {
    opacity: 1;
  }

  .copy.is-done .copy__check path {
    transition: none;
  }
}

@media print {
  html.js [data-reveal]:not(.in) {
    opacity: 1;
    transform: none;
  }
}