:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --gray: #6b6b6b;
  --gray-light: #e5e5e5;
  --nav-h: 84px;
  --hand: 'Caveat', 'Segoe Script', cursive;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--black);
  background: var(--white);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

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

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

/* language switching */
.lang-en { display: none; }
body.is-lang-en .lang-en { display: inline; }
body.is-lang-en .lang-ua { display: none; }

.lang-en-btn { opacity: .4; }
body.is-lang-en .lang-en-btn { opacity: 1; }
body.is-lang-en .lang-ua-btn { opacity: .4; }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 100;
  /* Opaque: at 85% the huge title showed through as a smeared ghost while it
     scrolled past, which read as a dirty white band across the letters. */
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.nav.is-scrolled { border-bottom-color: var(--gray-light); }

.nav__logo {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .02em;
}

.nav__links {
  display: flex;
  gap: 36px;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.nav__links a { position: relative; }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--black);
  transition: width .25s ease;
}
.nav__links a:hover::after { width: 100%; }

.nav__right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.lang-switch {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  color: var(--black);
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--black);
  transition: transform .25s ease, opacity .25s ease;
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-light);
  display: flex;
  flex-direction: column;
  padding: 8px 40px 24px;
  gap: 4px;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 99;
}
.mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-menu a {
  padding: 14px 0;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid var(--gray-light);
}

/* ---------- Hero: title + works collage on one screen ---------- */
.hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

.hero__text {
  position: absolute;
  top: calc(var(--nav-h) + 24px);
  left: 40px;
  z-index: 70; /* above every card (max 61), below the nav (100) */
  pointer-events: none;
  /* No backdrop plate: white type in "difference" mode inverts against whatever
     is behind it — it reads black over the page, white over a dark video. */
  color: #fff;
  mix-blend-mode: difference;
}

.hero__title {
  font-size: clamp(64px, 11vw, 160px);
  font-weight: 900;
  line-height: .85;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.hero__subtitle {
  margin-top: 24px;
  font-family: var(--hand);
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
  max-width: 560px; /* colour comes from .hero__text so the blend applies */
}

/* ---------- Section shared ---------- */
/* Kept deliberately compact: the works are the point of the page, so these
   closing sections support them rather than competing for space. */
.section-title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -.01em;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.about, .contact {
  padding: 56px 40px;
  max-width: 1400px;
  margin: 0 auto;
}

/* ---------- Carousel (staircase collage, scrolled by the visitor) ---------- */
.carousel {
  position: absolute;
  inset: 0;
}

.carousel__track {
  display: flex;
  align-items: flex-end;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-dragging { cursor: grabbing; }

.gallery__item {
  position: relative;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  flex: 0 0 auto;
  /* no will-change here: 28 video-bearing elements would each get a permanent
     compositor layer, and videos are promoted on their own anyway */
  /* grow upward from a shared baseline instead of drifting off-centre */
  transform-origin: center bottom;
  border-radius: 12px;
  /* two layers, modest blur: wide soft shadows have to be re-rasterised every
     time the card is re-scaled during a scroll, and that showed up as jank */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .18),
    0 12px 24px rgba(0, 0, 0, .22);
  transition: box-shadow .35s ease;
}

/* lit top edge + shaded bottom edge give the face its curvature */
.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, .13) 0%,
    rgba(255, 255, 255, 0) 18%,
    rgba(0, 0, 0, 0) 72%,
    rgba(0, 0, 0, .16) 100%
  );
}

.gallery__item:hover {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, .20),
    0 20px 38px rgba(0, 0, 0, .30);
}

/* Large enough that neighbours still overlap once the focus effect has scaled
   them down; otherwise the strip tears open into gaps. */
.gallery__item + .gallery__item { margin-left: -130px; }

/* On a phone the full-screen collage falls apart: a 16:9 clip sized by height
   ends up far wider than the screen, so only a sliver of the frame shows. Here
   the hero becomes an ordinary stacked block — title, description, then a strip
   whose cards are sized by WIDTH so each frame is visible whole. */
@media (max-width: 640px) {
  .hero {
    height: auto;
    overflow: visible;
    padding: calc(var(--nav-h) + 16px) 0 4px;
  }
  .hero__text {
    position: static;
    padding: 0 20px 8px;
    /* back to plain black: in normal flow there is no video behind it, and the
       difference blend would invert it against the white page into nothing */
    color: var(--black);
    mix-blend-mode: normal;
  }
  .carousel { position: static; }
  .carousel__track {
    height: auto;
    /* A 9:16 card is roughly twice the height of a 16:9 one at the same width,
       and the row is as tall as the tallest card. Bottom-aligning left a large
       dead area above the wide clips; centring splits it into even margins. */
    align-items: center;
    padding: 0 20px;
  }
  .gallery__item { height: auto; }
  .gallery__item video { width: 100%; height: auto; }
  .gallery__item + .gallery__item { margin-left: -40px; }
}

.gallery__item video {
  height: 100%;
  width: auto;
  display: block;
  transition: transform .5s ease;
  pointer-events: none;
}
.gallery__item:hover video { transform: scale(1.03); }

/* ---------- About / Contact ---------- */
.about__text {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 500;
  max-width: 640px;
  line-height: 1.55;
}

.contact__text {
  font-size: 15px;
  color: var(--gray);
  margin-bottom: 10px;
}
.contact__email {
  font-size: clamp(19px, 2.6vw, 28px);
  font-weight: 800;
  display: inline-block;
  border-bottom: 2px solid var(--black);
}

/* ---------- Footer ---------- */
.footer {
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--gray-light);
}
.footer__links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.footer__links a:hover { text-decoration: underline; }
.footer__copy {
  font-size: 12px;
  color: var(--gray);
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 40px;
}
.lightbox.is-open { display: flex; }

.lightbox__video {
  max-width: 100%;
  max-height: 90vh;
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 24px;
  cursor: pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .nav { padding: 0 20px; }
  .nav__links { display: none; }
  .nav__right { gap: 16px; }
  .burger { display: flex; }
  .mobile-menu a[href] { display: block; }
  .about, .contact { padding: 40px 20px; }
}