/* === RESET & BASE === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif, Arial;
  user-select: none;
}
body {
  background: black;
  overflow-y: scroll; /* всегда показывать вертикальный скролл */
  color: rgba(150,150,150,0.95);
}
img, video, iframe {
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  display: block;
  pointer-events: auto;
  transition: transform .3s ease, opacity .3s ease;
}

/* === GALLERY === */
#gallery { width: 100%; margin: 0 auto; }
.row { display: flex; flex-wrap: nowrap; }
.item { 
  overflow: hidden; 
  position: relative; 
  cursor: pointer; /* Pointer for main gallery previews */
}
.item.project-item {
  cursor: default; /* Default cursor for project gallery images */
}
.item-inner {
  width: 101%; height: 101%;
  opacity: 0; transform: translateY(50px);
  transition: transform .6s ease, opacity .5s ease;
}
.item.visible .item-inner { opacity: 1; transform: translateY(0); }
.item-inner img, .item-inner video, .item-inner .youtube-wrapper {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item-inner .youtube-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none !important;
}

/* Scale preview images on hover */
.item:not(.project-item):hover img {
  transform: scale(1.05);
}

/* === OVERLAY === */
.overlay {
  position: absolute;
  inset: 0;
  /* background: rgba(0,0,0,0.75); */
  color: #dadada;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* текст у нижнего края */
  align-items: flex-start;   /* выравнивание слева */
  padding: 20px;
  transition: opacity .5s ease; /* увеличено время анимации для более плавного затемнения */
}

.item:hover .overlay {
  opacity: 1;
}

.overlay h3 {
  margin-bottom: 10px;
  font-size: 1.2em;
  font-weight: 600;
}

.overlay p {
  font-size: 0.9em;
  line-height: 1.4;
  max-width: 90%;
}

/* волновая задержка */
.row .item:nth-child(1) .item-inner { transition-delay: 0s; }
.row .item:nth-child(2) .item-inner { transition-delay: .1s; }
.row .item:nth-child(3) .item-inner { transition-delay: .2s; }
.row .item:nth-child(4) .item-inner { transition-delay: .3s; }
.row .item:nth-child(5) .item-inner { transition-delay: .4s; }

/* === DIM STATE === */
#gallery.dimmed .item { pointer-events: none; cursor: default; }
#gallery.dimmed .item img, #gallery.dimmed .item video, #gallery.dimmed .item .youtube-wrapper { opacity: .1; }
#gallery.dimmed .item:hover img { transform: none; }
#gallery.dimmed .item .overlay { opacity: 0; } /* текст и заголовки исчезают при затемнении */
#gallery.dimmed .item:hover .overlay { opacity: 0; } /* текст и заголовки не появляются при наведении в dimmed */
#gallery.dimmed .item .youtube-wrapper iframe { pointer-events: none; } /* Отключаем события мыши для iframe в затемненном состоянии */

/* === TEXT LINKS === */
.home-link, .mail-text {
  position: fixed; left: 50%; transform: translateX(-50%);
  font-weight: 100;
  font-family: sans-serif, Arial;
  z-index: 20;
  transition: color .3s ease, opacity .8s ease, text-transform .3s ease;
  text-decoration: none; cursor: pointer;
}
.home-link {
  bottom: 8vh;
  color: rgba(150,150,150,.95);
  font-size: calc((1vw + 1vh) * 1.15);
  text-transform: uppercase;
}
.home-link:hover { color: #fff; }
.mail-text {
  text-decoration: none; /* убираем подчеркивание */
  bottom: 4vh;
  color: rgba(99,99,99,.95);
  font-size: calc((1vw + 1vh) * .8);
  text-transform: lowercase;
}
.mail-text.copied { text-transform: uppercase; }

/* === EFFECTS === */
.bottom-gradient {
  position: fixed; bottom: 0; left: 0;
  width: 100%; height: 30vh;
  background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
  pointer-events: none; z-index: 10;
}
.home-link:hover ~ .progress-bar,
.work-together.active ~ .home-link {
  opacity: 0; pointer-events: none;
}

/* === LOADING SCREEN === */
.loading-screen {
  position: fixed; inset: 0;
  display: flex; justify-content: center; align-items: center;
  font-size: 4vh; font-weight: 100;
  z-index: 999; transition: opacity .8s ease;
  pointer-events: none;
}
.loading-screen.hidden { opacity: 0; visibility: hidden; }
.dots { display: inline-block; width: 3ch; text-align: left; }
.dots::after {
  content: "";
  animation: dots 2s steps(4, end) infinite;
}
@keyframes dots {
  0% { content:""; }
  25% { content:"."; }
  50% { content:".."; }
  75% { content:"..."; }
  100% { content:""; }
}

/* === XRAY === */
.xray-wrapper {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.xray-wrapper > img, .xray-wrapper > video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}
.xray-wrapper .xray-layer {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  --mx: -999px;
  --my: -999px;
  --r: 0px;
  --feather: 30px;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, #000 calc(var(--r) - var(--feather)), transparent var(--r));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, #000 calc(var(--r) - var(--feather)), transparent var(--r));
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  will-change: -webkit-mask-image, mask-image, opacity;
  contain: paint;
}
.xray-wrapper.active .xray-layer {
  opacity: 1;
}

/* === MOBILE === */
@media (max-width: 1024px) {
  .mail-text {
    font-size: 2vh;
  }
  #gallery.dimmed .item:hover .overlay {
    opacity: 1; /* текст и заголовки всегда видны при наведении на мобильных */
  }
  /* Отключаем затемнение для мобильных */
  #gallery.dimmed .item {
    pointer-events: auto;
    cursor: pointer;
  }
  #gallery.dimmed .item img, #gallery.dimmed .item video, #gallery.dimmed .item .youtube-wrapper {
    opacity: 1;
  }
  #gallery.dimmed .item .youtube-wrapper iframe {
    pointer-events: auto; /* Восстанавливаем события для iframe на мобильных */
  }
}