/* ==========================================================================
   Одностраничник, только первый экран.
   Основа — стиль первого экрана storm-themeswear.blogspot.com:
   то же фоновое фото, затемнение #111 с opacity .3, белый текст,
   шрифты: PT Sans (заголовки) + Bad Script (эффект набора), мигающий
   курсор эффекта набора.
   От оригинала отступаем в трёх местах по запросу:
   1) кегль и насыщенность текста уменьшены;
   2) вместо значка скролла внизу — меню в одну строку;
   3) иконки соцсетей без круглых рамок, просто белые глифы.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;                        /* база rem, как в исходнике */
  -webkit-text-size-adjust: 100%;
}

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'PT Sans', Helvetica, Arial, sans-serif;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  background: #222;
  overflow: hidden;                       /* экран один — скролла нет */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------- Экран ---------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;                          /* фолбэк */
  height: 100dvh;                         /* мобильные с динамической адресной строкой */
  min-height: 100%;
  padding: clamp(56px, 9vh, 110px) 15px clamp(76px, 12vh, 130px);
  overflow: hidden;
  background: url(../img/background.jpg) no-repeat center bottom;
  background-size: cover;
  background-attachment: fixed;
}

/* затемнение, как в оригинале: #111 с opacity .3 */
.hero-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #111;
  opacity: .3;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  /* лёгкая компенсация вертикали, как transform:translateY(-2.1rem) в оригинале */
  transform: translateY(-1.2rem);
}

/* -------------------------------- Тексты -------------------------------- */
.hero-content h1 {
  display: inline-block;
  margin: .6rem 0 1.6rem;
  font-size: clamp(1.4rem, 5.6vw, 3.6rem);    /* уменьшено по запросу */
  font-weight: 600;                            /* легче оригинального 800 */
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: none;
  color: #fff;
}

.hero-subtitle {
  margin: 0 0 1.5rem;
  font-family: 'PT Sans', Helvetica, Arial, sans-serif;
  font-size: clamp(.8rem, 3.1vw, 1.6rem);      /* уменьшено по запросу */
  font-weight: 400;
  line-height: 1.4;
  text-shadow: none;
  color: #fff;
}

/* слова эффекта набора — рукописным шрифтом (лендинги, визитки…) */
.typist-blink {
  font-family: 'Bad Script', 'PT Sans', cursive;
}

/* курсор-палочка поверх эффекта набора — 1-в-1 из исходника */
.typist-blink {
  display: inline-block;
  min-width: 1ch;
  font-weight: 400;
  font-size: 1.05em;                      /* рукописный шрифт визуально мельче */
}
.typist-blink::after {
  position: relative;
  top: .06em;
  display: inline-block;
  width: 0;
  height: 1em;
  margin-right: .18em;
  margin-left: .06em;
  content: ' ';
  vertical-align: -.14em;
  border-right: 2px solid currentColor;
  animation: blink 0.5s step-start 0 infinite;
}
@keyframes blink {
  0%, to { opacity: 1; }
  50%    { opacity: 0; }
}

/* ------------- Социальные иконки: один стиль, один размер --------------- */
/* Белые PNG-глифы (img/vk.png, tg.png, email.png), без рамок, подложек и
   бейджей. Единая высота картинки = одинаковый размер всех трёх иконок. */
.social-link {
  margin: 0 0 2rem;
  font-size: 0;                           /* убирает базовые зазоры inline-блоков */
}
.social-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0 .35rem;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  color: #fff;
  opacity: .45;                             /* приглушены — ярче только при наведении */
  transition: opacity .3s ease, transform .3s ease;
}
.social-link a:hover,
.social-link a:focus {
  color: #fff;
  opacity: 1;
  transform: translateY(-2px);
  outline: none;
}
.social-link img {
  display: block;
  height: 1.2rem;                         /* единая высота всех иконок */
  width: auto;
}

/* --------- Низ экрана: «мышка»-скролл + меню из одного пункта ----------- */
.hero-bottom {
  position: absolute;
  left: 0;
  bottom: clamp(18px, 4.5vh, 52px);        /* позиция .go-down из оригинала */
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding: 0 15px;
}

/* контур мыши со скроллом — акцентировать внимание на «Портфолио» */
.scroll-mouse {
  position: relative;
  display: block;
  width: 20px;
  height: 32px;
  margin-bottom: clamp(8px, 1.6vh, 14px);
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 11px;
  animation: mouse-float 2.4s ease-in-out infinite;
}
.scroll-wheel {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  border-radius: 1px;
  background: #fff;
  animation: wheel-drop 1.8s ease-in-out infinite;
}
/* колесо скролла «уезжает» вниз и гаснет (дистанция — переменная) */
@keyframes wheel-drop {
  0%   { opacity: 0; transform: translateY(0); }
  20%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--wheel-drop, 11px)); }
}
@keyframes mouse-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

.hero-menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.hero-menu a {
  position: relative;
  display: inline-block;
  padding: 5px 1px;
  font-size: clamp(.6rem, 1.45vw, .8rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}
/* плавное подчёркивание ссылки: ширина 0 → 100%, цвет не меняется */
.hero-menu a::before {
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 1px;
  content: '';
  background: currentColor;
  transition: width .3s ease;
}
.hero-menu a:hover::before,
.hero-menu a:focus-visible::before {
  width: 100%;
}
.hero-menu a:focus { outline: none; }

/* ---------------- Адаптив (брейкпоинты исходника) ---------------------- */
@media (max-width: 960px) {
  .hero-content { transform: translateY(0); }
}
@media (max-width: 767px) {
  .hero { background-attachment: scroll; } /* мобильные браузеры плохо работают с fixed */
}
@media (max-width: 480px) {
  .hero { padding-bottom: 96px; }
  .hero-subtitle { margin-bottom: 1.6rem; }
  .social-link { margin-bottom: 1.4rem; }
}
@media (max-width: 380px) {
  .hero-menu a { letter-spacing: .1em; }
}
/* узкий по высоте экран (landscape-телефон, небольшие окна) */
@media (max-height: 520px) {
  .hero { padding-top: 34px; padding-bottom: 66px; }
  .hero-content { transform: translateY(0); }
  .hero-content h1 { margin: 0 0 1rem; }
  .hero-subtitle { margin-bottom: 1.2rem; }
  .social-link { margin-bottom: 1rem; }
  .social-link a { width: 1.9rem; height: 1.9rem; }
  .social-link img { height: 1rem; }
  .hero-bottom { bottom: 12px; }
  .scroll-mouse { width: 17px; height: 27px; margin-bottom: 8px; }
  .scroll-wheel { top: 5px; height: 5px; --wheel-drop: 9px; }
}
/* уважение к системной настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .typist-blink::after { animation: none; }
  .social-link a { transition: none; }
  .social-link a:hover,
  .social-link a:focus { transform: none; }
  .scroll-mouse { animation: none; border-color: rgba(255, 255, 255, .7); }
  .scroll-wheel { animation: none; opacity: 1; }
}