/* =========================================================
   MY LITTLE SPACE
   ЧЁРНО-БЕЛЫЙ CSS
   🐟 + 🦴
========================================================= */

/* =========================================================
   01. ПОДКЛЮЧЕНИЕ ШРИФТОВ
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Press+Start+2P&display=swap");

/* =========================================================
   02. ЦВЕТА
========================================================= */

:root {
  --black: #050505;
  --black-soft: #0a0a0a;
  --black-light: #101010;

  --gray-dark: #171717;
  --gray: #242424;
  --gray-light: #555555;

  --white: #f5f5f5;
  --white-soft: #d8d8d8;
  --white-muted: #999999;

  --line: rgba(255, 255, 255, 0.12);
  --line-light: rgba(255, 255, 255, 0.22);

  --glow: 0 0 15px rgba(255, 255, 255, 0.1);

  --radius: 18px;

  --transition: 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* =========================================================
   03. СБРОС
========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(255, 255, 255, 0.035),
      transparent 25%
    ),
    radial-gradient(
      circle at 85% 70%,
      rgba(255, 255, 255, 0.025),
      transparent 30%
    ),
    var(--black);

  color: var(--white);

  font-family: "Comfortaa", sans-serif;

  overflow-x: hidden;
}

/* =========================================================
   04. ВЫДЕЛЕНИЕ ТЕКСТА
========================================================= */

::selection {
  background: rgba(255, 255, 255, 0.25);

  color: #fff;
}

/* =========================================================
   05. ПОЛОСА ПРОКРУТКИ
========================================================= */

::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-track {
  background: var(--black);
}

::-webkit-scrollbar-thumb {
  background: #3b3b3b;

  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* =========================================================
   06. ФОНОВЫЕ ДЕКОРАЦИИ
========================================================= */

.background-decor {
  position: fixed;

  inset: 0;

  pointer-events: none;

  overflow: hidden;

  z-index: -1;
}

.background-decor span {
  position: absolute;

  color: rgba(255, 255, 255, 0.08);

  user-select: none;

  transition: color 0.4s ease;

  animation: backgroundFloat 8s ease-in-out infinite;
}

/* разные позиции */

.background-decor span:nth-child(1) {
  top: 10%;
  left: 8%;

  font-size: 22px;

  animation-delay: 0s;
}

.background-decor span:nth-child(2) {
  top: 25%;
  right: 12%;

  font-size: 26px;

  animation-delay: 1s;
}

.background-decor span:nth-child(3) {
  top: 60%;
  left: 4%;

  font-size: 18px;

  animation-delay: 2s;
}

.background-decor span:nth-child(4) {
  top: 45%;
  right: 5%;

  font-size: 20px;

  animation-delay: 3s;
}

.background-decor span:nth-child(5) {
  bottom: 15%;
  left: 18%;

  font-size: 25px;

  animation-delay: 4s;
}

.background-decor span:nth-child(6) {
  bottom: 30%;
  right: 20%;

  font-size: 20px;

  animation-delay: 5s;
}

.background-decor span:nth-child(7) {
  top: 75%;
  right: 8%;

  font-size: 18px;

  animation-delay: 6s;
}

@keyframes backgroundFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);

    opacity: 0.35;
  }

  50% {
    transform: translateY(-18px) rotate(8deg);

    opacity: 0.8;
  }
}

/* =========================================================
   07. ОСНОВНОЕ ОКНО
========================================================= */

.site-window {
  width: min(1200px, 94%);

  margin: 20px auto;

  background: rgba(7, 7, 7, 0.96);

  border: 1px solid var(--line-light);

  border-radius: 22px;

  overflow: hidden;

  position: relative;

  box-shadow: 0 0 50px rgba(255, 255, 255, 0.025);

  animation: siteAppear 1s ease both;
}

@keyframes siteAppear {
  from {
    opacity: 0;

    transform: translateY(20px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* =========================================================
   08. ВЕРХНЯЯ ПАНЕЛЬ
========================================================= */

.window-top {
  height: 42px;

  padding: 0 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid var(--line);

  background: rgba(255, 255, 255, 0.015);

  color: var(--white-muted);
}

.window-title {
  font-size: 11px;

  letter-spacing: 1px;

  text-transform: lowercase;
}

.window-buttons {
  display: flex;

  gap: 14px;
}

.window-buttons span {
  width: 20px;

  height: 20px;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 50%;

  color: var(--white-muted);

  transition: var(--transition);
}

.window-buttons span:hover {
  color: var(--white);

  background: rgba(255, 255, 255, 0.08);

  transform: scale(1.15);
}

/* =========================================================
   09. HEADER
========================================================= */

.header {
  min-height: 75px;

  padding: 18px 30px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  border-bottom: 1px solid var(--line);

  background: rgba(5, 5, 5, 0.88);

  position: sticky;

  top: 0;

  z-index: 100;

  backdrop-filter: blur(15px);
}

/* =========================================================
   10. ЛОГО
========================================================= */

.logo {
  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--white);

  font-family: "Press Start 2P", monospace;

  font-size: 11px;

  white-space: nowrap;
}

.logo:first-letter {
  color: #fff;
}

.logo:hover {
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.35);
}

/* =========================================================
   11. НАВИГАЦИЯ
========================================================= */

.navigation {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 23px;

  flex-wrap: wrap;
}

.navigation a {
  position: relative;

  color: var(--white-muted);

  text-decoration: none;

  font-size: 12px;

  padding: 8px 0;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.navigation a::after {
  content: "";

  position: absolute;

  bottom: 0;

  left: 50%;

  width: 0;

  height: 1px;

  background: white;

  transform: translateX(-50%);

  transition: width 0.3s ease;
}

.navigation a:hover {
  color: var(--white);

  transform: translateY(-2px);
}

.navigation a:hover::after {
  width: 100%;
}

/* =========================================================
   12. СИМВОЛ В HEADER
========================================================= */

.header-symbol {
  font-size: 20px;

  color: white;

  transition:
    transform 0.4s ease,
    text-shadow 0.4s ease;
}

.header-symbol:hover {
  transform: rotate(-10deg) scale(1.2);

  text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* =========================================================
   13. HERO
========================================================= */

.hero {
  margin: 25px;

  padding: 38px;

  min-height: 440px;

  display: grid;

  grid-template-columns: 1fr 1.25fr 0.9fr;

  align-items: center;

  gap: 28px;

  position: relative;

  overflow: hidden;

  border: 1px solid var(--line-light);

  border-radius: var(--radius);

  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.035),
      transparent 45%
    ),
    var(--black-soft);

  box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.015);
}

/* =========================================================
   14. ДЕКОР HERO
========================================================= */

.hero::before {
  content: "🐟";

  position: absolute;

  right: 8%;

  top: 8%;

  font-size: 18px;

  opacity: 0.15;

  animation: fishFloat 5s ease-in-out infinite;
}

.hero::after {
  content: "🦴";

  position: absolute;

  bottom: 8%;

  left: 7%;

  font-size: 20px;

  opacity: 0.12;

  animation: boneFloat 6s ease-in-out infinite;
}

@keyframes fishFloat {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  50% {
    transform: translate(-10px, -15px) rotate(-5deg);
  }
}

@keyframes boneFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(12deg);
  }
}

/* =========================================================
   15. HERO ТЕКСТ
========================================================= */

.hero-text {
  position: relative;

  z-index: 2;
}

.small-label {
  color: var(--white-muted);

  font-size: 11px;

  letter-spacing: 1px;

  margin-bottom: 22px;

  text-transform: lowercase;
}

.hero-text h1 {
  font-family: "Press Start 2P", monospace;

  font-size: clamp(24px, 4vw, 40px);

  line-height: 1.6;

  font-weight: 400;

  color: var(--white);

  margin-bottom: 22px;

  animation: titlePulse 4s ease-in-out infinite;
}

@keyframes titlePulse {
  0%,
  100% {
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
  }
}

.hero-text p {
  max-width: 350px;

  color: var(--white-muted);

  font-size: 14px;

  line-height: 1.9;
}

.hero-symbols {
  margin: 22px 0;

  font-size: 20px;

  letter-spacing: 6px;

  color: var(--white-soft);
}

/* =========================================================
   16. ГЛАВНАЯ КНОПКА
========================================================= */

.main-button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding: 0 22px;

  border: 1px solid var(--line-light);

  border-radius: 10px;

  color: var(--white);

  background: rgba(255, 255, 255, 0.025);

  text-decoration: none;

  font-size: 12px;

  transition:
    transform 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.main-button:hover {
  transform: translateY(-4px);

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.5);

  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.06);
}

/* =========================================================
   17. HERO PHOTO
========================================================= */

.hero-photo {
  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  z-index: 2;
}

.hero-photo .photo-placeholder {
  width: 100%;

  max-width: 360px;

  height: 340px;

  border: 1px dashed rgba(255, 255, 255, 0.35);

  border-radius: 22px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  color: var(--white-muted);

  background: rgba(255, 255, 255, 0.015);

  transition:
    transform 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
}

.hero-photo .photo-placeholder:hover {
  transform: scale(1.025) rotate(-1deg);

  border-color: rgba(255, 255, 255, 0.65);

  box-shadow: 0 0 35px rgba(255, 255, 255, 0.07);
}

.placeholder-symbol {
  font-size: 28px;

  opacity: 0.8;

  animation: placeholderFloat 3s ease-in-out infinite;
}

@keyframes placeholderFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

.photo-placeholder small {
  color: #666;

  font-size: 10px;
}

/* =========================================================
   18. ЕСЛИ ПОЯВИТСЯ НАСТОЯЩЕЕ ФОТО
========================================================= */
.hero-photo img,
.about-photo img,
.gallery-item img,
.music-cover img,
.about-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
}

.about-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.extra-photo img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  border-radius: inherit;

  transition:
    transform 0.6s ease,
    filter 0.5s ease;
}

.hero-photo img:hover,
.about-photo img:hover,
.gallery-item img:hover,
.music-cover img:hover,
.extra-photo img:hover {
  transform: scale(1.04);

  filter: brightness(1.08);
}
xz

/* =========================================================
   19. STATUS CARD
========================================================= */

.status-card {
  padding: 24px;

  border: 1px solid var(--line);

  border-radius: 17px;

  background: rgba(255, 255, 255, 0.018);

  position: relative;

  z-index: 2;

  transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.status-card:hover {
  transform: translateY(-5px);

  border-color: var(--line-light);

  box-shadow: var(--glow);
}

.status-title {
  font-size: 16px;

  margin-bottom: 20px;

  color: var(--white);
}

.status-item {
  display: flex;

  justify-content: space-between;

  gap: 10px;

  padding: 11px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  font-size: 11px;
}

.status-item span {
  color: #666;
}

.status-item strong {
  color: var(--white-soft);

  font-weight: 500;
}

.status-decoration {
  margin-top: 20px;

  text-align: right;

  opacity: 0.5;
}

/* =========================================================20. ОСНОВНАЯ СЕТКА
========================================================= */

.content-layout {
  display: grid;

  grid-template-columns: 1.4fr 0.8fr;

  gap: 20px;

  padding: 0 25px 25px;
}

.left-column,
.right-column {
  display: flex;

  flex-direction: column;

  gap: 20px;
}

/* =========================================================
   21. КАРТОЧКИ
========================================================= */

.card {
  position: relative;

  overflow: hidden;

  padding: 25px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.018),
      rgba(255, 255, 255, 0.008)
    ),
    var(--black-soft);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.card:hover {
  transform: translateY(-5px);

  border-color: rgba(255, 255, 255, 0.3);

  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(255, 255, 255, 0.025);
}

/* декоративный символ */

.card::after {
  content: "✦";

  position: absolute;

  right: 18px;

  top: 15px;

  color: rgba(255, 255, 255, 0.18);

  font-size: 12px;

  transition:
    transform 0.5s ease,
    color 0.5s ease;
}

.card:hover::after {
  color: rgba(255, 255, 255, 0.6);

  transform: rotate(180deg) scale(1.3);
}

/* =========================================================
   22. ЗАГОЛОВОК КАРТОЧКИ
========================================================= */

.card-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-bottom: 22px;
}

.card-header h2 {
  font-size: 16px;

  font-weight: 500;

  color: var(--white);
}

.card-header span {
  color: var(--white-muted);

  font-size: 16px;

  transition: transform 0.4s ease;
}

.card:hover .card-header span {
  transform: rotate(-10deg) scale(1.15);
}

/* =========================================================
   23. ОБО МНЕ
========================================================= */

.about-content {
  display: grid;

  grid-template-columns: 220px 1fr;

  gap: 25px;

  align-items: center;
}

.about-photo {
  width: 100%;

  height: 220px;

  border: 1px dashed rgba(255, 255, 255, 0.3);

  border-radius: 15px;

  overflow: hidden;

  background: #080808;
}

.about-photo .photo-placeholder {
  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 10px;

  color: #777;

  font-size: 11px;
}

.about-text p {
  color: var(--white-muted);

  font-size: 13px;

  line-height: 1.9;

  margin-bottom: 8px;
}

.about-text .greeting {
  color: var(--white);

  font-size: 18px;

  margin-bottom: 12px;
}

.hidden-info {
  color: var(--white-soft);
}

.text-decoration {
  margin-top: 20px;

  color: #777;

  font-size: 16px;

  letter-spacing: 5px;
}

/* =========================================================
   24. ИНТЕРЕСЫ
========================================================= */

.hobbies-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;
}

.hobby {
  min-height: 65px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 12px;

  color: var(--white-muted);

  font-size: 12px;

  background: rgba(255, 255, 255, 0.012);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    background 0.3s ease;
}

.hobby:hover {
  color: var(--white);

  border-color: rgba(255, 255, 255, 0.3);

  background: rgba(255, 255, 255, 0.04);

  transform: translateY(-3px);
}

.hobby-icon {
  font-size: 18px;

  color: var(--white-soft);
}

/* =========================================================
   25. ГАЛЕРЕЯ
========================================================= */

.gallery-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;
}

.gallery-item {
  height: 190px;

  overflow: hidden;

  border: 1px dashed rgba(255, 255, 255, 0.25);

  border-radius: 13px;

  background: #080808;
}

.gallery-item .photo-placeholder {
  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #666;

  font-size: 10px;

  text-align: center;

  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.gallery-item:hover .photo-placeholder {
  color: #aaa;

  background: rgba(255, 255, 255, 0.03);
}

/* =========================================================
   26. ПРАВИЛА
========================================================= */

.rules-list {
  list-style: none;
}

.rules-list li {
  position: relative;

  padding: 12px 0 12px 25px;

  color: var(--white-muted);

  font-size: 13px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  transition:
    color 0.3s ease,
    padding-left 0.3s ease;
}

.rules-list li::before {
  content: "🦴";

  position: absolute;

  left: 0;

  font-size: 12px;

  filter: grayscale(1);
}

.rules-list li:hover {
  color: var(--white);

  padding-left: 30px;
}

.rules-footer {
  margin-top: 20px;

  color: #777;

  font-size: 11px;

  text-align: center;
}

/* =========================================================
   27. ЛЮБИМЫЕ ВЕЩИ
========================================================= */

.favorites-list {
  list-style: none;
}

.favorites-list li {
  display: flex;

  align-items: center;

  gap: 15px;

  padding: 13px 0;

  color: var(--white-muted);

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  font-size: 12px;

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.favorites-list li:hover {
  color: var(--white);

  transform: translateX(5px);
}

.favorites-list li span {
  color: #555;

  font-family: monospace;

  font-size: 10px;
}

/* =========================================================
   28. НАСТРОЕНИЕ
========================================================= */

.mood-card {
  text-align: center;
}

.mood-face {
  font-size: 30px;

  margin: 20px 0;

  color: var(--white);

  animation: moodFloat 3s ease-in-out infinite;
}

@keyframes moodFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.mood-card p {
  color: var(--white-muted);

  font-size: 12px;

  line-height: 1.8;
}

.mood-fish {
  margin-top: 20px;

  color: #777;

  letter-spacing: 5px;
}

/* =========================================================
   29. NOTE CARD
========================================================= */

.note-card {
  text-align: center;
}

.note-symbol {
  font-size: 25px;

  margin-bottom: 15px;

  opacity: 0.7;
}

.note-card h2 {
  font-size: 15px;

  font-weight: 500;

  margin-bottom: 15px;
}

.note-card p {
  color: var(--white-muted);

  font-size: 12px;

  line-height: 1.8;
}

.note-bottom {
  margin-top: 20px;

  color: #777;

  font-size: 10px;
}

/* =========================================================
   30. ПЛЕЙЛИСТ
========================================================= */

.music-info {
  display: flex;

  align-items: center;

  gap: 15px;
}

.music-cover {
  width: 70px;

  height: 70px;

  flex-shrink: 0;

  border: 1px dashed rgba(255, 255, 255, 0.3);

  border-radius: 10px;

  overflow: hidden;
}

.music-cover .photo-placeholder {
  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #666;

  font-size: 8px;

  text-align: center;

  padding: 5px;
}

.music-text {
  display: flex;

  flex-direction: column;

  gap: 7px;
}

.music-text strong {
  font-size: 12px;

  color: var(--white);
}

.music-text span {
  font-size: 11px;

  color: var(--white-muted);
}

.music-text small {
  color: #555;

  font-size: 9px;
}

/* =========================================================
   31. ЭКВАЛАЙЗЕР
========================================================= */

.equalizer {
  height: 45px;

  margin: 22px 0;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 4px;
}

.equalizer span {
  display: block;

  width: 4px;

  height: 10px;

  border-radius: 5px;

  background: #aaa;

  animation: equalizer 1s ease-in-out infinite alternate;
}

/* разные задержки */

.equalizer span:nth-child(1) {
  animation-delay: 0.1s;
}

.equalizer span:nth-child(2) {
  animation-delay: 0.25s;
}

.equalizer span:nth-child(3) {
  animation-delay: 0.4s;
}

.equalizer span:nth-child(4) {
  animation-delay: 0.15s;
}

.equalizer span:nth-child(5) {
  animation-delay: 0.35s;
}

.equalizer span:nth-child(6) {
  animation-delay: 0.5s;
}

.equalizer span:nth-child(7) {
  animation-delay: 0.2s;
}

.equalizer span:nth-child(8) {
  animation-delay: 0.45s;
}

.equalizer span:nth-child(9) {
  animation-delay: 0.3s;
}

.equalizer span:nth-child(10) {
  animation-delay: 0.55s;
}

.equalizer span:nth-child(11) {
  animation-delay: 0.2s;
}

.equalizer span:nth-child(12) {
  animation-delay: 0.4s;
}

@keyframes equalizer {
  from {
    height: 5px;

    opacity: 0.4;
  }

  to {
    height: 35px;

    opacity: 1;
  }
}

/* =========================================================
   32. КНОПКИ МУЗЫКИ
========================================================= */

.music-controls {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 20px;
}

.music-controls button {
  width: 35px;

  height: 35px;

  border: 1px solid rgba(255, 255, 255, 0.15);

  border-radius: 50%;

  background: transparent;

  color: var(--white);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.music-controls button:hover {
  transform: scale(1.12);

  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
}

.music-controls .play-button {
  width: 48px;

  height: 48px;

  background: #eee;

  color: #111;

  border: none;
}

.music-controls .play-button:hover {
  background: #fff;

  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.music-decoration {
  margin-top: 20px;

  text-align: center;

  color: #555;

  font-size: 12px;
}

/* =========================================================
   33. ДОПОЛНИТЕЛЬНОЕ ФОТО
========================================================= */

.extra-photo {
  width: 100%;

  height: 220px;

  overflow: hidden;

  border: 1px dashed rgba(255, 255, 255, 0.3);

  border-radius: 14px;

  background: #080808;
}

.extra-photo .photo-placeholder {
  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 10px;

  color: #666;

  font-size: 10px;
}

/* =========================================================
   34. НИЖНЕЕ СООБЩЕНИЕ
========================================================= */

.final-message {
  padding: 65px 25px;

  text-align: center;

  border-top: 1px solid var(--line);

  background: rgba(255, 255, 255, 0.01);
}

.final-decor {
  color: #666;

  font-size: 18px;

  letter-spacing: 6px;

  margin-bottom: 25px;

  animation: decorFloat 4s ease-in-out infinite;
}

@keyframes decorFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.final-message h2 {
  font-family: "Press Start 2P", monospace;

  font-size: clamp(13px, 2.5vw, 19px);

  font-weight: 400;

  line-height: 2;

  color: var(--white);

  margin-bottom: 15px;
}

.final-message p {
  color: var(--white-muted);

  font-size: 12px;

  line-height: 1.8;
}

.final-fish {
  margin-top: 25px;

  font-size: 25px;

  animation: fishSwim 4s ease-in-out infinite;
}

@keyframes fishSwim {
  0%,
  100% {
    transform: translateX(-15px);
  }

  50% {
    transform: translateX(15px);
  }
}

/* =========================================================
   35. FOOTER
========================================================= */

footer {
  padding: 25px;

  border-top: 1px solid var(--line);

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 15px;

  flex-wrap: wrap;

  color: #555;

  font-size: 10px;

  text-align: center;
}

footer div:first-child {
  color: #777;
}

footer div:last-child {
  letter-spacing: 3px;
}

/* =========================================================
   36. КЛАСС ДЛЯ JAVASCRIPT
   Появление элементов при прокрутке
========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(30px);

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.active {
  opacity: 1;

  transform: translateY(0);
}

/* =========================================================
   37. ПЛАВАЮЩИЕ СИМВОЛЫ
   JavaScript потом будет создавать их
========================================================= */

.floating-symbol {
  position: fixed;

  bottom: -50px;

  color: rgba(255, 255, 255, 0.65);

  pointer-events: none;

  z-index: 999;

  animation: floatingSymbol 7s linear forwards;

  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

@keyframes floatingSymbol {
  0% {
    opacity: 0;

    transform: translateY(0) rotate(0deg) scale(0.7);
  }

  15% {
    opacity: 0.8;
  }

  80% {
    opacity: 0.4;
  }

  100% {
    opacity: 0;

    transform: translateY(-110vh) rotate(180deg) scale(1.1);
  }
}

/* =========================================================
   38. ЭФФЕКТ КЛИКА
   Будет использоваться JavaScript
========================================================= */

.click-effect {
  position: fixed;

  width: 8px;

  height: 8px;

  border: 1px solid white;

  border-radius: 50%;

  pointer-events: none;

  transform: translate(-50%, -50%);

  animation: clickEffect 0.6s ease-out forwards;

  z-index: 9999;
}

@keyframes clickEffect {
  from {
    width: 8px;

    height: 8px;

    opacity: 0.8;
  }

  to {
    width: 70px;

    height: 70px;

    opacity: 0;
  }
}

/* =========================================================
   39. МОБИЛЬНАЯ ВЕРСИЯ
========================================================= */

max-width: 950px {
  .header {
    flex-wrap: wrap;

    justify-content: center;
  }

  .hero {
    grid-template-columns: 1fr 1fr;

    padding: 28px;
  }

  .hero-text {
    grid-column: 1 / -1;

    text-align: center;
  }

  .hero-text p {
    margin: auto;
  }

  .hero-photo {
    grid-column: 1 / 2;
  }

  .status-card {
    grid-column: 2 / 3;
  }

  .content-layout {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   40. ПЛАНШЕТ
========================================================= */

max-width: 700px {
  .site-window {
    width: 96%;

    margin: 8px auto;

    border-radius: 17px;
  }

  .header {
    padding: 16px;

    min-height: 65px;
  }

  .navigation {
    gap: 14px;
  }

  .navigation a {
    font-size: 10px;
  }

  .hero {
    grid-template-columns: 1fr;

    margin: 12px;

    padding: 22px;
  }

  .hero-text,
  .hero-photo,
  .status-card {
    grid-column: auto;
  }

  .hero-text {
    text-align: center;
  }

  .hero-text p {
    margin: auto;
  }

  .hero-photo .photo-placeholder {
    max-width: 100%;

    height: 300px;
  }

  .content-layout {
    padding: 0 12px 12px;
  }

  .about-content {
    grid-template-columns: 1fr;
  }

  .about-photo {
    max-width: 300px;

    margin: auto;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item {
    height: 230px;
  }

  footer {
    flex-direction: column;
  }
}

/* =========================================================
   41. МАЛЕНЬКИЙ ТЕЛЕФОН
========================================================= */

max-width: 430px {
  .navigation {
    display: none;
  }

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

  .hero-text h1 {
    font-size: 21px;
  }

  .hero {
    min-height: auto;
  }

  .card {
    padding: 18px;

    border-radius: 15px;
  }

  .hobbies-grid {
    grid-template-columns: 1fr;
  }

  .status-item {
    font-size: 10px;
  }

  .music-info {
    align-items: flex-start;
  }

  .final-message {
    padding: 45px 18px;
  }
}

/* =========================================================
   42. ЕСЛИ ПОЛЬЗОВАТЕЛЬ ОТКЛЮЧИЛ АНИМАЦИИ
========================================================= */

prefers-reduced-motion: reduce {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;
  }
}