/* Шрифты — локально: css/fonts.css (раньше был @import с fonts.googleapis.com). */
/* kuvshinov.in — правки поверх шаблона Willy Wonka (index.css не трогаем) */

body { user-select: text; }                      /* шаблон запрещал выделение — email не скопировать */
.color-changer { display: none !important; }     /* переключатель цветов шаблона не нужен */

/* кириллица: Poppins/Monoton её не содержат — подменяем на Montserrat */
html[lang="ru"] body, html[lang="ru"] .firstline, html[lang="ru"] .secondline, html[lang="ru"] #loader,
html[lang="ru"] .navigation-links a, html[lang="ru"] h2, html[lang="ru"] h6, html[lang="ru"] button,
html[lang="ru"] input, html[lang="ru"] textarea, html[lang="ru"] .footer,
html[lang="ru"] .about-header, html[lang="ru"] .portfolio-header, html[lang="ru"] .contact-header,
html[lang="ru"] .services-heading, html[lang="ru"] .skills-header, html[lang="ru"] .form-header,
html[lang="ru"] .contact-info-header, html[lang="ru"] .html { font-family: 'Montserrat', sans-serif !important; }
html[lang="ru"] .navigation-links a { font-size: clamp(28px, 6vw, 64px); letter-spacing: 2px; }
html[lang="ru"] .secondline { font-size: clamp(18px, 2.6vw, 34px); }

/* переключатель языка в шапке */
.lang-switch { position: absolute; top: calc(40% + 15px); transform: translateY(-50%); right: calc(4% + 78px); z-index: 3; color: #f5f5f5; opacity: .7;
  font-family: 'Montserrat', poppins, sans-serif; font-size: 14px; letter-spacing: 2px; text-decoration: none;
  border: 1px solid rgba(255,255,255,.35); border-radius: 16px; padding: 5px 12px; transition: all .3s ease; }
.lang-switch:hover { opacity: 1; border-color: #c70039; color: #c70039; }

/* логотип-монограмма вместо логотипа шаблона */
.logo img, #navigation-bar img { height: 56px; }

/* карточки приложения в портфолио: иконка на фирменном фоне вместо стоковой картинки */
.portfolio-image.app-card { display: flex; align-items: center; justify-content: center; min-height: 300px;
  background: radial-gradient(circle at 30% 30%, #2a2340 0%, #15131D 55%, #0B0A10 100%); border-radius: 12px; }
.portfolio-image.app-card img { width: 190px !important; height: 190px !important; border-radius: 42px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55); object-fit: cover; }
.portfolio-image.server-card { background: radial-gradient(circle at 70% 30%, #1d2b3a 0%, #121820 55%, #0a0d12 100%); }
.portfolio-image.server-card img { filter: grayscale(.35) brightness(.95); }

/* форма: honeypot, статус, ссылки в контактах */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
#form-status { min-height: 22px; margin-top: 14px; font-family: 'Montserrat', poppins, sans-serif; font-size: 14px; color: #bdbdbd; }
#form-status.ok { color: #4caf7d; } #form-status.err { color: #e05a6a; }
#submit[disabled] { opacity: .5; cursor: progress; }
.contact-info-icon-text a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.35); }
.contact-info-icon-text a:hover { color: #c70039; }
.icon.icon-small { padding: 6px; box-sizing: border-box; }
.social-media { width: 22px; height: 22px; }
.footer-text { opacity: .7; font-size: 13px; letter-spacing: 1px; }

/* карточка «Контакты»: в шаблоне фоном было стоковое фото contact-back.jpg (у нас его нет → 404). Ставим свой градиент. */
.contact-info { background: radial-gradient(circle at 80% 10%, rgba(199,0,57,.22) 0%, rgba(199,0,57,0) 45%), linear-gradient(160deg, #1c1c1c 0%, #0d0d0d 100%) !important; }

/* логотип = ссылка на главную */
.logo img, #navigation-bar > img { cursor: pointer; }
/* фото владельца: без искажений, лицо в кадре */
.header-image { overflow: hidden; }
.header-image img { width: 100%; height: 100vh; object-fit: cover; object-position: 50% 12%; float: none; display: block; }
.about-img img { object-fit: cover; object-position: 55% 20%; }
/* футер прижат к низу экрана на коротких страницах (контакты) */
#contact, #portfolio { min-height: 100vh; box-sizing: border-box; padding-bottom: 64px; }
#contact > .footer, #portfolio > .footer { position: absolute; left: 0; bottom: 0; box-sizing: border-box; }
#portfolio { position: relative; }
/* карточка «скоро» */
.portfolio-image.phun-card { padding: 0; overflow: hidden; background: #0d0b14; }
.portfolio-image.phun-card img { width: 100% !important; height: 100% !important; min-height: 300px; border-radius: 12px; box-shadow: none; object-fit: cover; }
.button .soon { display: inline-block; font-family: 'Montserrat', poppins, sans-serif; font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  color: #bdbdbd; border: 1px dashed rgba(255,255,255,.35); border-radius: 22px; padding: 11px 22px; cursor: default; }
/* скриншот сервера вместо иконки */
.portfolio-image.shot-card { padding: 0; overflow: hidden; border-radius: 12px; }
/* скриншот заполняет весь блок картинки (как у соседних карточек): раньше стоял по своей пропорции и под ним
   оставалась пустота до текста — на телефоне 116px «пропасти». Режем по правому/нижнему краю, интерфейс слева сверху цел. */
.portfolio-image.shot-card img { width: 100% !important; height: 100% !important; min-height: 300px; object-fit: cover; object-position: left top; border-radius: 12px; display: block; }

/* телефон: русская фамилия длиннее — уменьшаем кегль, чтобы не упиралась в край */
/* (оба языка) имя на телефоне: одинаковый кегль и поля, чтобы не упиралось в края */
@media only screen and (max-width: 550px) {
  .header-content .firstline, html[lang="ru"] .firstline { font-size: 12.5vw !important; line-height: 1.15 !important; }
  .header-content-box { padding: 0 22px !important; box-sizing: border-box; width: 100% !important; }
  .secondline { font-size: 5.2vw !important; }
}

/* === русская версия: единый шрифт без засечек (у Raleway/Poppins/Monoton/aileron шаблона нет кириллицы → падало в serif) */
html[lang="ru"] body, html[lang="ru"] body * { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important; }
html[lang="ru"] .about-second-line, html[lang="ru"] .service-description p, html[lang="ru"] .portfolio-text p { font-weight: 400; line-height: 1.75; }
/* меню: «призрачное» слово позади пункта при наведении — для кириллицы компактнее, чтобы влезало в экран */
html[lang="ru"] .navigation-links a::before { font-size: min(2.6em, 10.5vw); font-weight: 800; white-space: nowrap; }
html[lang="ru"] .navigation-links a:hover::before { letter-spacing: 4px; }
/* английская версия: у кнопок шаблона шрифт aileron не подключён → serif; ставим Poppins */
button, .button button, #submit { font-family: poppins, 'Montserrat', sans-serif; }

/* фирменные ссылки LinkedIn / GitHub вместо кнопки */
.brand-links { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 36px; }
.brand-link { display: inline-flex; align-items: center; gap: 4px; height: 46px; padding: 0 20px; border-radius: 8px; text-decoration: none;
  color: #f5f5f5 !important; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.04); transition: all .3s ease; }
.brand-link svg { width: 24px; height: 24px; display: block; }
.brand-link .wm { font-family: 'Montserrat', poppins, sans-serif !important; font-weight: 700; font-size: 21px; letter-spacing: -.3px; line-height: 1; }
.brand-link.linkedin svg { margin-left: 1px; }
.brand-link.github { gap: 10px; }
.brand-link.linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.brand-link.github:hover { background: #f5f5f5; border-color: #f5f5f5; color: #111 !important; }

/* === Safari: в index.css шаблона опечатка — @-webkit-keyframes для «scale» названы breakeranimate и в WebKit
   перекрывают настоящую анимацию перехода (красная панель «медленно раздувалась и пропадала» вместо пролёта
   слева направо). Даём переходу собственное имя кейфреймов + GPU-трансформ, чтобы шло ровно во всех браузерах. */
@keyframes ik-breaker { 0% { transform: translate3d(-100%,0,0); } 50% { transform: translate3d(0,0,0); } 100% { transform: translate3d(100%,0,0); } }
@-webkit-keyframes ik-breaker { 0% { -webkit-transform: translate3d(-100%,0,0); } 50% { -webkit-transform: translate3d(0,0,0); } 100% { -webkit-transform: translate3d(100%,0,0); } }
#breaker { top: 0; left: 0; transition: none !important; will-change: transform; backface-visibility: hidden;
  -webkit-animation: ik-breaker 2s linear !important; animation: ik-breaker 2s linear !important; }

/* типографика текстовых блоков: шаблон ставил 24–26px для абзаца «Обо мне» — крупно, особенно с Montserrat */
.about-first-line { font-size: clamp(22px, 2.1vw, 32px) !important; line-height: 1.35 !important; }
.about-second-line { font-size: clamp(15px, 1.12vw, 18px) !important; line-height: 1.75 !important; font-weight: 400 !important; display: inline-block; margin-top: 14px; }
.portfolio-text p { font-size: clamp(14px, 1.05vw, 17px) !important; line-height: 1.7 !important; font-weight: 400 !important; }
.service-description p { font-size: 15px !important; line-height: 1.65 !important; font-weight: 400 !important; }

/* «призрачное» слово позади пункта меню:
   — кириллица: правило «body *» не достаёт до псевдоэлементов, а шаблон жёстко ставит ::before шрифт monoton
     (кириллицы в нём нет) → в Chrome выпадали засечки; задаём Montserrat явно;
   — Safari: центрирование через transform + анимация opacity/letter-spacing загоняли текст в растровый слой
     (мыло и пиксели). Центрируем без transform — растягиваем псевдоэлемент на весь экран меню и ставим текст
     флексом; анимируем только прозрачность. */
.navigation-links a::before {
  top: 0 !important; left: 0 !important; right: 0; bottom: 0; width: 100%; height: 100%;
  transform: none !important; -webkit-transform: none !important;
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap;
  transition: opacity .35s ease, letter-spacing .35s ease !important;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
html[lang="ru"] .navigation-links a::before, html[lang="ru"] *::before, html[lang="ru"] *::after {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !important;
}
html[lang="ru"] .navigation-links a::before { letter-spacing: 30px; }
html[lang="ru"] .navigation-links a:hover::before { letter-spacing: 4px; }

/* === аудит 2026-09-18 === */
/* смена языка: без заставки и без анимации «наезда» (scale) у шапки; лёгкое проявление вместо рывка */
html.no-intro #loader { display: none !important; }
html.no-intro #header, html.no-intro #about, html.no-intro #portfolio, html.no-intro #contact { animation: none !important; }
html.no-intro body { animation: ik-fade .28s ease-out; }
@keyframes ik-fade { from { opacity: .0; } to { opacity: 1; } }
/* шапка-панель шаблона (fixed, 100px, прозрачная) перекрывала клики по верхней полосе любого раздела */
#navigation-bar { pointer-events: none; overflow: visible; }
#navigation-bar > * { pointer-events: auto; }
/* iOS Safari: 100vh больше видимой области (адресная строка) — берём dvh там, где он есть */
@supports (height: 100dvh) {
  #header, #navigation-content, #breaker, .header-image, .header-image img { height: 100dvh; }
  #contact, #portfolio { min-height: 100dvh; }
}
/* фокус с клавиатуры виден */
a:focus-visible, button:focus-visible, .menubar:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #c70039; outline-offset: 3px; }
/* уважение к «уменьшить движение» */
@media (prefers-reduced-motion: reduce) { #breaker, #breaker-two { animation-duration: .01s !important; } #header { animation: none !important; } }

/* (владелец 2026-09-18: имя по центру экрана, наезд на фото — так и задумано; ограничение левыми 60% убрано) */

/* телефон: заголовки разделов заезжали под фиксированную панель (переключатель языка и бургер) */
@media only screen and (max-width: 550px) {
  .about-header, .portfolio-header, .contact-header { padding-top: 96px !important; }
  .brand-links { justify-content: center; }
}

/* заставка с именем: в шаблоне 70px на любом экране — на телефоне упиралась в края. Делаем как имя в шапке. */
#loader { font-size: clamp(34px, 6vw, 70px); text-align: center; padding: 0 22px; box-sizing: border-box; line-height: 1.15; height: 100dvh; }
@media only screen and (max-width: 550px) { #loader { font-size: 12.5vw; } #loader .color { display: block; } }

/* на экранах >1441px шаблон ставил красной фразе в «Обо мне» 46px поверх общего размера строки — выравниваем */
.about-first-line .color { font-size: inherit !important; }

/* карточки «Чем занимаюсь»: у шаблона фиксированная высота (380/320px) + overflow:hidden и нулевые поля —
   длинный текст на телефоне упирался в нижний край/обрезался. Высота по содержимому, поля одинаковые со всех сторон,
   на десктопе карточки равной высоты (flex). */
.services-content { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 24px; padding: 2.5% 5% !important; box-sizing: border-box; overflow: visible; }
.service { height: auto !important; min-height: 0 !important; width: auto !important; flex: 1 1 260px; max-width: 400px; margin: 0 !important;
  padding: 30px 28px !important; box-sizing: border-box; display: block !important;
  overflow: hidden !important; /* обязательно: hover-заливка шаблона — это box-shadow 400px от иконки, рамку ей задаёт только обрезка карточки */ }
.service-img img { margin: 0 0 16px !important; }
.service-description { display: block; }
.service-description h2 { padding: 0 !important; margin: 0 0 12px !important; }
.service-description p { padding: 0 !important; margin: 0 !important; }
@media only screen and (max-width: 550px) { .service { flex-basis: 100%; max-width: none; padding: 28px 24px !important; } }

/* карточки портфолио на телефоне/планшете: текст стоял вплотную к краям тёмной плашки (поля 10/0/10/0) */
@media only screen and (max-width: 1025px) {
  .portfolio-text { padding: 26px 24px 28px !important; box-sizing: border-box; height: auto !important; }
  .portfolio-text h2 { margin: 0 0 12px !important; padding: 0 !important; }
  .portfolio-text p { margin: 0 0 18px !important; padding: 0 !important; }
  .portfolio-text .button { margin: 0 !important; padding: 0 !important; }
}

/* hover-заливка карточки «Чем занимаюсь»: тень от иконки; карточки теперь по содержимому и бывают выше — радиус с запасом */
.service:hover .service-img img { box-shadow: 0 0 0 640px #c70039 !important; }

/* === «Опыт и навыки»: вместо шкал с процентами — факты о масштабе и теги по направлениям (владелец 2026-09-18) === */
#skills { padding-bottom: 70px; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 46px; max-width: 1200px; margin: 10px auto 46px; padding: 0 24px; box-sizing: border-box; }
.fact { flex: 0 1 200px; text-align: center; color: whitesmoke; }
.fact-num { font-family: poppins, 'Montserrat', sans-serif; font-weight: 600; font-size: clamp(30px, 3.1vw, 48px); line-height: 1.1; white-space: nowrap; }
.fact-label { margin-top: 8px; font-family: poppins, 'Montserrat', sans-serif; font-size: 14px; line-height: 1.45; opacity: .72; }
.skill-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1100px; margin: 0 auto; padding: 0 5%; box-sizing: border-box; }
.skill-group { background: #191919; border-radius: 10px; padding: 26px 24px 28px; text-align: left; }
.skill-group h3 { margin: 0 0 16px; font-family: poppins, 'Montserrat', sans-serif; font-weight: 500; font-size: 18px; letter-spacing: 1px; color: #c70039; text-transform: uppercase; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { font-family: poppins, 'Montserrat', sans-serif; font-size: 13.5px; line-height: 1; color: #e8e8e8; padding: 9px 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: rgba(255,255,255,.03); white-space: nowrap; }
@media only screen and (max-width: 760px) { .skill-groups { grid-template-columns: 1fr; } }
@media only screen and (max-width: 550px) { .skill-groups { grid-template-columns: 1fr; padding: 0 18px; } .facts { gap: 26px 20px; } .fact { flex-basis: 40%; } }

/* кружок-курсор шаблона убран (владелец 2026-09-18) */
.cursor { display: none !important; }

/* подводка и контекст к цифрам: про что они и из какого домена (без названий компаний) */
.facts-lead { text-align: center; color: whitesmoke; opacity: .7; font-family: poppins, 'Montserrat', sans-serif; font-size: 15px; letter-spacing: .5px; margin: -6px auto 30px; padding: 0 24px; }
.fact-ctx { margin-top: 7px; font-family: poppins, 'Montserrat', sans-serif; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #c70039; opacity: .85; }

/* красную панель перехода теперь ведёт GSAP (см. index.js) — CSS-анимацию шаблона выключаем совсем */
#breaker { -webkit-animation: none !important; animation: none !important; }
/* место под полосу прокрутки зарезервировано всегда: иначе при переходе с короткой главной на длинный раздел
   ширина экрана прыгала на ширину скроллбара (у кого он не «оверлейный») */
html { scrollbar-gutter: stable; }

/* телефон: шаблон прятал логотип в верхней панели (display:none) — он был виден только внутри открытого меню.
   Показываем его всегда, на одной линии с переключателем языка и бургером; из самого меню на телефоне он убран. */
@media only screen and (max-width: 550px) {
  #navigation-bar > img { display: block !important; height: 42px !important; top: 55px !important; left: 18px !important; transform: translateY(-50%); }
  .logo { display: none !important; }   /* в раскрытом меню на телефоне логотип не показываем (владелец 2026-09-19) */
  .navigation-close { top: 55px !important; transform: translateY(-50%); right: 4% !important; }
}

/* верхняя панель: мягкое затемнение с размытием, чтобы прокручиваемый под неё контент не «врезался» в логотип,
   язык и бургер. На главной не нужно (она не прокручивается, и затемнение легло бы на фото). */
#navigation-bar::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 118px; pointer-events: none; z-index: -1;
  background: linear-gradient(to bottom, rgba(12,12,12,.94) 0%, rgba(12,12,12,.82) 45%, rgba(12,12,12,0) 100%);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  opacity: 1; transition: opacity .3s ease; }
body[data-section="home"] #navigation-bar::before { opacity: 0; }

/* главная: фон шапки = фон студийного фото (по замеру левый край header.jpg — rgb(20,20,20)), плюс мягкая растушёвка
   левого края фото — чтобы не было вертикальной полосы на стыке. При замене фото пересчитать цвет (см. README). */
body, #header { background: #141414 !important; }
.header-image { position: relative; z-index: 0; }
/* порядок слоёв как в шаблоне: фото → частицы поверх фото → текст поверх всего (растушёвка не должна гасить буквы имени) */
#particles { z-index: 1; }
.header-content { z-index: 2 !important; }
.social-media-links { z-index: 3; }
.header-image::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 140px; z-index: 0; pointer-events: none;
  background: linear-gradient(to right, #141414 0%, rgba(20,20,20,.6) 45%, rgba(20,20,20,0) 100%); }

/* значок GitHub в кнопке карточки сервера */
.portfolio-text button .index { display: inline-flex; align-items: center; gap: 9px; }
.btn-gh { width: 18px; height: 18px; flex: none; }

/* короткая заметка под формой: что уходит письмом и зачем нужен IP */
.form-privacy { margin: 14px 2px 0; font-size: 12.5px; line-height: 1.55; color: #8e8e8e; max-width: 46em; }