/* Основные переменные и сброс */
:root {
  --primary-color: #f5f5f5;
  --secondary-color: #b0b0b0;
  --accent-color: #c89c54;
  --background-color: #0a0a0a;
  --section-bg-color: #141414;
  --font-family: 'Arial', 'Helvetica Neue', sans-serif;
  --header-height: 90px;
}

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

body {
  font-family: var(--font-family);
  background-color: var(--background-color);
  color: var(--primary-color);
  line-height: 1.6;
}

/* Pages marked with .static-footer stretch to full viewport height so the footer
   can stick to the bottom. The main content area expands to fill
   remaining space, and the footer is pushed to the bottom using
   automatic margin. */
body.static-footer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.static-footer .main-content {
  flex: 1;
}
body.static-footer .footer {
  margin-top: auto;
}

img {
  max-width: 100%;
  display: block;
}

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

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header and navigation */
/*
 * The portfolio header closely mirrors the minimalist layout of Roman
 * Vasyanov’s site: a dark bar across the top with the artist’s name on
 * the left and a simple row of links on the right. The header stays
 * fixed so navigation is always available. Letter spacing and a
 * slightly reduced font size evoke the refined feel of the reference
 * design.
 */
/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
  border-bottom: 1px solid #1c1c1c;
  height: var(--header-height);
  padding: 0;
  z-index: 1000;
  transition: background 0.3s ease, opacity 0.3s ease;
}
.spacer-under-header { height: 0; }
.header, .header * { line-height: normal; }

/* Semi‑transparent header when scrolled */
/* When the page scrolls, fade the header by reducing opacity.  A 0.5
   alpha makes the bar noticeably translucent over the background
   content, clearly conveying that the viewer has scrolled away from
   the top. */
.header.scrolled {
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(28, 28, 28, 0.4);
}

/* Match header background to dropdown when burger is open */
.header:has(.nav.open), .header:has(.nav.is-open) {
  background: rgba(0,0,0,0.9) !important;
  border-bottom: 1px solid rgba(28,28,28,0.6);
  backdrop-filter: saturate(120%) blur(6px);
}
.header.scrolled:has(.nav.open), .header.scrolled:has(.nav.is-open) {
  background: rgba(0,0,0,0.9) !important;
  border-bottom: 1px solid rgba(28,28,28,0.6);
}

/* Layout within the header: nav on the left, toggle after it, brand and social icons on the right */
.header .container {
  display: flex;
  align-items: center;
  /* Constrain width similar to the original design */
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  height: 100%;
}

/* Navigation */
.nav ul {
  list-style: none;
  display: flex;
  /* Balanced spacing between navigation items to resemble the reference */
  gap: clamp(0.75rem, 2vw, 1.8rem);
}

/* Push navigation and following elements to the right side of the header */
.nav {
  margin-left: auto;
}

.nav a {
  font-size: clamp(0.72rem, 0.9vw, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  transition: color 0.3s ease;
  color: var(--primary-color);
}

.nav a.active {
  color: var(--accent-color);
}

.nav a:hover {
  color: var(--accent-color);
}

/* Brand group placed at the left of the header */
.brand-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

/* Site name styling */
.brand-name {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
  color: var(--primary-color);
  white-space: nowrap;
  display: block;
  line-height: 1;
}

/* Tagline underneath the site name */
.tagline {
  font-size: 0.7rem;
  /* Moderate letter spacing for more subtle alignment */
  letter-spacing: 0.15rem;
  color: var(--secondary-color);
  text-transform: uppercase;
  display: block;
  line-height: 1;
  white-space: nowrap;
}

/* Social icons in the header */
.header .social-links {
  display: flex;
  align-items: center;
  /* Reduce spacing between icons for a tighter grouping */
  gap: 0.7rem;
  /* Increase the gap between the navigation and the icons */
  margin-left: 2.8rem;
}

.header .social-links img {
  width: 20px;
  height: 20px;
  display: inline-block;
  filter: invert(100%);
  transition: opacity 0.3s ease;
  /* Rely on flex alignment for vertical centering within the header and
     adjust slightly upwards so icons sit on the same baseline as the
     navigation links */
  vertical-align: inherit;
  transform: translateY(-15px);
}

.header .social-links a:hover img {
  opacity: 0.7;
}

/* Переключатель меню для мобильных устройств */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  align-self: center;
}

.nav-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--primary-color);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Основной контент */
/* Main content expands full width to allow full-bleed previews */
.main-content {
  margin-top: var(--header-height);
  width: 100%;
  max-width: none;
  margin-inline: 0; /* keep horizontal margins reset without nuking top offset */
}

/* Список работ на страницах */
.works {
  padding: 0;
  width: 100%;
}

/* Portfolio list items */
/* Each work-item occupies the full viewport width and has no gaps */
.work-item {
  position: relative;
  margin: 0;                 /* default: no gap on desktop */
  margin-bottom: 0;          /* explicit for transition */
  transition: margin-bottom 220ms ease; /* smooth gap on viewport changes */
}

/* Category label above each item */
.category {
  font-size: 0.75rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  margin-bottom: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .work-item { transition: none; }
}

.work-item h2 {
  font-size: 2rem;
  font-weight: 600;
  margin: 0.5rem 0;
}

.work-item p {
  font-size: 0.9rem;
  color: #999;
  margin-bottom: 0.75rem;
}

/* Preview image fills the viewport width and is darkened slightly for overlay legibility */
.work-item img {
  width: 100%;
  /* Maintain a 2:1 cinematic aspect ratio for previews */
  aspect-ratio: 2/1;
  object-fit: cover;
  display: block;
  filter: none;                 /* no default dimming */
  transition: filter 240ms ease;/* smooth hover effect */
}

.work-item:hover img {
  filter: brightness(60%);
}

/* Link covering the entire preview */
.video-link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

/* Overlay text centered on preview */
.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--primary-color);
  text-align: center;
  pointer-events: none;
}

.overlay .project-title {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  margin-bottom: 0.25rem;
  /* Display titles as block elements so the director credit can sit beneath */
  display: block;
  opacity: 1;
  transition: opacity 240ms ease;
}

.overlay .project-director {
  font-size: 0.8rem;
  letter-spacing: 0.08rem;
  color: var(--secondary-color);
  /* Ensure the director name always appears on its own line under the title */
  display: block;
  opacity: 1;
  transition: opacity 240ms ease;
}

/* Секция «Обо мне» */
.bio-section {
  padding: 100px 0;
  background: var(--section-bg-color);
}

/* CV section spacing and typography */
.cv-section {
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.cv-section h2 {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.cv-section p {
  color: var(--secondary-color);
  line-height: 1.6;
  font-size: 0.95rem;
  text-align: center;
}

/* Modal for playing Vimeo videos */
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.video-modal.active {
  display: flex;
}

.video-modal iframe {
  width: min(92vw, 1600px);
  aspect-ratio: 16 / 9;    /* keep player and controls together */
  height: auto;            /* derived from aspect ratio */
  max-height: 88vh;        /* larger on desktop but contained */
  border: none;
  display: block;
}

.video-modal .close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: var(--primary-color);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
}

.video-modal .fs-toggle {
  position: absolute;
  top: 1rem;
  right: 3.25rem; /* sits left of the close button */
  font-size: 1.25rem;
  color: var(--primary-color);
  background: none;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  line-height: 1;
}
.video-modal .fs-toggle:hover { background: rgba(255,255,255,0.08); }
.bio-section h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.bio-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.bio-text {
  flex: 1 1 300px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--secondary-color);
}

.bio-image {
  flex: 1 1 300px;
}

.bio-image img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

/* Секция контактов */
.contact-section {
  padding: 100px 0;
  background: var(--background-color);
}

.contact-section h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.contact-section p {
  max-width: 600px;
  margin: 0 auto 2rem;
  color: var(--secondary-color);
  text-align: center;
}

.contact-section form {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.contact-section input,
.contact-section textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background: #1c1c1c;
  border: none;
  border-radius: 4px;
  color: var(--primary-color);
  font-size: 1rem;
}

.contact-section button {
  width: fit-content;
  justify-self: center;
  background: var(--accent-color);
  color: var(--background-color);
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.contact-section button:hover {
  background: var(--primary-color);
  color: var(--background-color);
}

/* Contact information on the Contact page when the form is removed.  The
   .contact-info wrapper centres text and constrains its width. Each
   paragraph inside gets a modest margin and consistent line height. */
.contact-info {
  text-align: center;
  max-width: 600px;
  margin: 2rem auto;
}
.contact-info p {
  color: var(--secondary-color);
  line-height: 1.6;
  margin: 0;
}
.contact-info p + p {
  margin-top: 1.5rem;
}
.contact-info strong {
  color: var(--primary-color);
  font-size: 1.1rem;
}

.social-links {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.social-links a {
  color: var(--primary-color);
  font-size: 1rem;
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Подвал */
.footer {
  padding: 1rem 0;
  text-align: center;
  background: var(--section-bg-color);
  font-size: 0.85rem;
  color: var(--secondary-color);
}

/* Footer layout: text left, socials right */
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.footer-text { margin: 0; text-align: left; }
.footer-social-links {
  display: flex;
  gap: 0.75rem;
  margin-left: auto; /* push icons to the right */
}
.footer-social-links img {
  width: 20px;
  height: 20px;
  display: inline-block;
  filter: invert(100%);
  transition: opacity 0.2s ease;
}
.footer-social-links a:hover img { opacity: 0.7; }

/* Small screens: allow wrapping without breaking alignment */
@media (max-width: 540px) {
  .footer-content { flex-wrap: wrap; }
  .footer-text {
    flex: 1 1 auto;
    text-align: left;
  }
  .footer-social-links { flex: 0 0 auto; margin-left: auto; }
}

/* Early collapse to burger to prevent overlap on medium screens */
@media (max-width: 1280px) {
  /* Hide horizontal nav and right-side tools, show burger */
  .nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
  }
  .header .social-links { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }

  /* Dropdown panel reused from mobile logic */
  .nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background: transparent;   /* no black strip when closed */
    height: 0;                 /* collapse when closed */
    padding: 0;
    overflow: hidden;
    pointer-events: none;      /* ignore clicks when closed */
    display: block;            /* keep element for toggling */
  }
  .nav.open ul,
  .nav.is-open ul {
    visibility: visible;
    max-height: 100vh;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .nav.open {
    background: rgba(0,0,0,0.9);
    padding: 1rem 0;           /* visible padding only when open */
    height: auto;
    pointer-events: auto;
    z-index: 1001;             /* above content but below header */
    backdrop-filter: saturate(120%) blur(6px);
  }

  /* Freeze dropdown typography to mobile size */
  .nav.open a, .nav.is-open a {
    font-size: 1.1rem !important;
    letter-spacing: 0.08rem;
    line-height: 1.2;
  }
  .nav.open ul { gap: 12px; }
  .nav.open ul li a { padding: 8px 0; }

  /* Slightly reduce tagline on medium screens */
  .tagline { font-size: 0.65rem; letter-spacing: 0.18rem; }
}

/* Адаптивность */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }
  .nav ul {
    position: static;          /* let the list live inside the dropdown panel */
    width: 100%;
    flex-direction: column;
    background: transparent;   /* background handled by parent */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav.open ul, .nav.is-open ul { max-height: 500px; padding: 1rem 0; }
  .nav ul li {
    padding: 0.5rem 0;
    text-align: center;
  }
  .nav-toggle {
    display: flex;
  }
  /* Изменение полосок бургер‑кнопки при открытом меню */
  .nav.open + .nav-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .nav.open + .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .nav.open + .nav-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
  .bio-content {
    flex-direction: column;
    text-align: center;
  }
  .bio-image,
  .bio-text {
    flex: 1 1 100%;
  }
  .brand-name { white-space: nowrap; }
  .tagline { white-space: nowrap; }

  /* Show project title on mobile (adaptive size), keep director hidden */
  .overlay .project-title {
    opacity: 1;
    font-size: clamp(0.85rem, 4.5vw, 1.25rem);
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    font-weight: 600; /* bold on mobile */
  }
  .overlay .project-director {
    opacity: 1;
    font-weight: 400; /* normal weight on mobile */
  }

  /* Slight default dim on mobile for better legibility */
  .work-item img { filter: brightness(90%); }

  /* Center overlay text on mobile (both axes) */
  .overlay {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    display: block;      /* use absolute centering like desktop */
    text-align: center;
    padding: 0 8px;      /* small side padding */
    width: auto;         /* allow natural width */
    max-width: 90%;
  }
  .overlay .project-title,
  .overlay .project-director {
    text-align: center;
  }
}

/* Мобильная адаптация */
@media (max-width: 768px) {
  /* Разворачиваем хедер: бренд остаётся слева, навигация и иконки справа */
  .header .container {
    flex-direction: row;
    align-items: center;
  }

  /* Блок с именем и подписью занимает всю доступную ширину */
  .brand-group {
    flex: 1;
  }

  /* Навигация скрыта по умолчанию, затем показывается вертикально */
  .nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background: transparent;   /* closed state has no background */
    padding: 0;                 /* no padding when closed */
    height: 0;                  /* collapse closed state */
    overflow: hidden;           /* prevent visual strip */
    pointer-events: none;       /* ignore clicks when closed */
  }
  .nav.open, .nav.is-open {   /* этот класс будет добавляться скриптом при клике */
    display: block;
    background: rgba(0,0,0,0.9);
    padding: 1rem 0;            /* only when open */
    height: auto;
    pointer-events: auto;
    backdrop-filter: saturate(120%) blur(6px);
  }

  /* Элементы меню в столбик */
  .nav ul {
    flex-direction: column;
    align-items: center;
  }
  .nav ul li {
    padding: 0.5rem 0;
  }

  /* Показываем бургер‑кнопку */
  .nav-toggle {
    display: flex;
  }

  /* Freeze dropdown typography to mobile size */
  .nav.open a, .nav.is-open a {
    font-size: 1.1rem !important;
    letter-spacing: 0.08rem;
    line-height: 1.2;
  }
  .nav.open ul, .nav.is-open ul { gap: 12px; }
  .nav.open ul li a, .nav.is-open ul li a { padding: 8px 0; }

  /* Логотипы соцсетей притягиваем вправо и уплотняем расстояние */
  .header .social-links {
      display: none;
  }

  .nav.open .nav-socials, .nav.is-open .nav-socials { display: flex; justify-content: center; gap: 1.2rem; margin-top: 0.8rem; }
  .nav.open .nav-socials img, .nav.is-open .nav-socials img { width: 22px; height: 22px; }
  .nav.open .nav-socials a:hover img, .nav.is-open .nav-socials a:hover img { opacity: 0.7; }

  /* Show project title on mobile (adaptive size), keep director hidden */
  .overlay .project-title {
    opacity: 1;
    font-size: clamp(1rem, 6vw, 1.6rem);
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    font-weight: 600; /* bold on mobile */
  }
  .overlay .project-director {
    opacity: 1;
    font-weight: 400; /* normal weight on mobile */
  }

  .work-item {
    margin-bottom: 4px; /* small gap between images on mobile */
  }

  /* Slight default dim on mobile for better legibility */
  .work-item img { filter: brightness(70%); }

  /* Center overlay text on mobile (both axes) */
  .overlay {
    top: 53%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    display: block;
    text-align: center;
    padding: 0 8px;
    width: auto;
    max-width: 90%;
  }
  .overlay .project-title,
  .overlay .project-director {
    text-align: center;
  }
}