@font-face {
  font-family: "Campton";
  src: url('../src/font/Campton/Campton-Bold.woff');
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Campton";
  src: url('../src/font/Campton/Campton-Medium.woff');
  font-weight: 500;
  font-display: swap;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

body {
  font-size: 10px;
  font-family: "Campton";
  background: #000;
}




.header {
  display: flex;
  justify-content: flex-end;
  padding: 5em;
  padding-bottom: 0;
}

.header .main_logo {
  width: 8.5em;
  cursor: pointer;
}

.header .main_logo a{
  width: inherit;
}

.header .main_logo img{
  width: inherit;
}

.header .cv_head {
  position: relative;
}



.header .cv_link {
    display: inline-block;
    padding: 0.6em 1.4em;
    border: 1px solid #A3A3A3;
    font-size: 2.2em;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    
    /* Эффект заливки через градиент */
    background: linear-gradient(to right, #fff 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    
    transition: all 0.4s ease-out; 
    cursor: pointer;
}

.header .cv_link:hover {
    background-position: left bottom;
    color: #000;
    border-color: #fff;
    opacity: 1;
}



.content {
  height: 80vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.present {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 11em;
}

.links {
  display: flex;
  align-items: center;
  padding-bottom: 11.7em;
}

.links_item {
  list-style: none;
  width: 4.5em;
  height: 4.5em;
  margin-right: 5em;
  transition: opacity .0.4s;
}

.links_item.github:hover svg path {
  fill: #6cc644;
}

.links_item.telegram:hover svg path {
  fill: #0088cc;
}

.links_item.linkedin:hover svg path {
  fill: #0a66c2;
}

.links_item.behance:hover svg path {
  fill: #1769ff;
}

.links_item a {
  width: inherit;
  height: inherit;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.links_item svg {
  width: inherit;
  height: 3.5em;
}

/* Базовое состояние ссылки внутри списка */
.links_item a {
    display: inline-block; /* Нужно, чтобы трансформация (подъем) работала */
    transition: transform 0.4s ease, opacity 0.4s ease; /* Время анимации — 0.4 секунды */
    opacity: 0.8; /* Делаем чуть приглушенными в покое */
}

/* Состояние при наведении */
.links_item a:hover {
    transform: translateY(-5px); /* Иконка плавно прыгает на 5 пикселей вверх */
    opacity: 1; /* Становится полностью яркой */
}

/* Эффект нажатия (Scale) */
.links_item a:active {
    transform: scale(0.9); /* При клике иконка чуть-чуть уменьшается */
}

/* .links_item:hover {
  opacity: .5;
} */

.links_item:last-child {
  margin-right: 0;
}

.links_icon {
  width: 100%;
  height: 100%;
}



.main_pic {
  position: relative;
  width: 91.5em;
}

.logo {
  width: 100%;
}

.logo_back {
  position: absolute;
  width: calc(100% - 1em);
  left: 10em;
  bottom: -2em;
  z-index: -1;
}

.icon {
  position: absolute;
  top: -3em;
  right: -4.5em;
  width: 3.5em;
  height: auto;
}

.ic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s;
}

.ic.active {
  opacity: 1;
}

.footer {
  position: absolute;
  left: 0;
  bottom: 2em;
  display: flex;
  justify-content: center;
  width: 100%;
}

.footer_link {
  color: #666;
  font-weight: 500;
  font-size: 1.8em;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color .6s;
}

.footer_link:hover {
  color: #c0c0c0;
}

.glitch {
  font-size: 10px;
}

.glitch svg {
  width: 30em;
  height: 30em;
}

.error_page {
  background: #fff;
}

.error_page .header {
  justify-content: space-between;
}

@media (max-width: 1024px) {
  body {
    font-size: 8px;
  }

  .main_pic {
    width: 81.5em;
  }

  .links_item svg {
    width: 4.5em;
    height: 4.5em;
  }
}


@media (max-width: 768px) {
  body {
    font-size: 7px;
  }

  .main_pic {
    width: 71.5em;
  }

    .cursor { display: none; }
    body, a, button { cursor: auto !important; }

}


@media (max-width: 600px) {
  body {
    font-size: 6px;
  }

  .main_pic {
    width: 51.5em;
  }

  .links_item {
    width: 7.5em;
    height: 7.5em;
  }

  .logo_back {
    left: 1em;
  }

  .footer {
    bottom: 5em;
  }

  .footer .footer_link {
    font-size: 2.2em;
  }
}

@media (max-width: 400px) {
  body {
    font-size: 5px;
  }

  .links {
    padding-bottom: 10em;
  }

  .links_item {
    margin-right: 4.5em;
  }

  .main_pic {
    width: 60em;
  }

  .main_pic .logo {
    margin-left: 1em;
  }

  .main_pic .icon {
    right: -5.5em;
  }
}




/* Общие настройки анимации появления */
@keyframes fadeInPage {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Логотип появляется первым */
.main_pic {
  opacity: 0;
  animation: fadeInPage 2s ease-out forwards;
}

/* Кнопка CV — задержка 0.5с */
.header {
  opacity: 0;
  animation: fadeInPage 1.5s ease-out 0.5s forwards;
}

/* Иконки соцсетей — задержка 0.8с */
.links {
  opacity: 0;
  animation: fadeInPage 1.5s ease-out 0.8s forwards;
}

/* Почта в футере — задержка 1.2с */
.footer {
  opacity: 0;
  animation: fadeInPage 1.5s ease-out 1.2s forwards;
}




                  

/* 4. Анимации (только через transform) */
@keyframes floatRandom {
    0% { transform: translate(0, 0); }
    100% { transform: translate(15px, -20px); }
}

@keyframes floatRandomAlt {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-20px, 15px); }
}




/* Универсальный кастомный курсор */
.cursor {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.2s ease, background-color 0.2s ease, border 0.2s ease;
    transform: translate(-50%, -50%);
    /* Оставляем эффект только для текста, на иконках мы его отключим через JS */
    mix-blend-mode: difference; 
}

/* Эффект расширения (без заливки цветом), чтобы видеть цвет иконки */
.cursor.hovered {
    transform: translate(-50%, -50%) scale(3);
    background-color: transparent; /* Убираем заливку, чтобы видеть иконку */
    border: 1px solid rgba(255, 255, 255, 0.5);
    mix-blend-mode: normal; /* Выключаем инверсию при наведении */
}

/* Скрываем стандартный курсор на всех страницах */
body, a, button, .skill-card {
    cursor: none !important;
}