/* Сбрасываем стандартные отступы браузера */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow: hidden; /* чтобы не было скролла */
  background: #000;
  /* 
    Глобальный запрет выделения ЧЕГО-ЛИБО на сайте - текста, картинок, 
    кнопок и т.д. Наследуется всеми дочерними элементами автоматически, 
    отдельные user-select:none на кнопках/картинках теперь избыточны, 
    но не мешают - оставлены для ясности.
  */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;

  /* 
    ВАЖНО про мобильные устройства:
    100vh на телефонах считается некорректно, потому что браузер учитывает 
    высоту с адресной строкой, а адресная строка то появляется, то прячется.
    Из-за этого может появляться "лишнее" пустое место снизу — это выглядит
    как чёрная полоса.
    100dvh ("dynamic viewport height") — современная единица, которая 
    правильно считает РЕАЛЬНУЮ видимую высоту экрана в моменте.
    Пишем оба значения: 100vh — как запасной вариант для старых браузеров,
    100dvh — переопределит его в браузерах, которые его понимают (все современные).
  */
  height: 100vh;
  height: 100dvh;
}

/* Обёртка сцены занимает весь экран */
#scene-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* см. комментарий выше */
}

/* 
  Подложка со статичным кадром - лежит позади видео (z-index ниже, 
  чем у .scene-video). Видна только в те моменты, когда видео поверх 
  ещё не готово/прозрачно - вместо черноты пользователь увидит 
  правильный кадр нужного объекта.
*/
#poster-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* 
  Оба видео-слоя лежат друг на друге (position: absolute внутри 
  относительного #scene-wrapper) и всегда занимают весь экран.
  object-fit: cover обрезает края видео вместо чёрных полей - 
  актуально для вертикальных экранов.
  opacity + transition - плавное появление/исчезание при переключении 
  между слоями, именно это убирает видимость чёрного кадра загрузки.
*/
.scene-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  pointer-events: none; /* клики проходят "сквозь" видео к зонам ниже */
  opacity: 0;
  /* 
    Раньше тут была плавная transition opacity 0.15s ease - но пока оба 
    слоя одновременно частично прозрачны (один гаснет, другой проявляется), 
    они визуально смешиваются друг с другом, и это давало лёгкое 
    затемнение в момент переключения. Раз мы и так гарантируем, что новое 
    видео уже реально играет к моменту swap (через событие "playing" 
    в script.js) - плавный fade не нужен, переключаем мгновенно.
  */
  z-index: 1;
}

/* Класс "active" вешается через JS на тот слой, который сейчас должен быть виден */
.scene-video.active {
  opacity: 1;
  z-index: 2;
}

/* Общий стиль кликабельных зон */
.click-zone {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  cursor: pointer;
  /* 
    z-index выше, чем у #info-overlay (15) - чтобы клики по левой/правой 
    половине экрана продолжали листать объекты, даже когда открыт 
    оверлей с доп. информацией.
  */
  z-index: 16;
  /* background: rgba(255,0,0,0.1); можно раскомментировать для отладки, чтобы видеть зоны */
}

/* 
  Пока оверлей открыт, клик-зоны временно отключаются (см. openInfoOverlay 
  в script.js) - это нужно, чтобы клик мышкой по тексту в оверлее не 
  перехватывался зоной навигации, и текст можно было выделять/копировать. 
  Стрелки клавиатуры продолжают листать объекты в любом случае.
*/
.click-zone.disabled {
  pointer-events: none;
}

#zone-left {
  left: 0;
}

#zone-right {
  right: 0;
}

/* 
  ============================================================
  КНОПКИ В ПРАВОМ ВЕРХНЕМ УГЛУ
  ============================================================
*/
#top-buttons {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 12px; /* расстояние между кнопками - меняй тут */
  z-index: 20; /* выше видео и стрелок, чтобы кнопки всегда были кликабельны */
}

.icon-button {
  display: inline-block; /* нужно и для <button>, и для <a>, чтобы обе кнопки выглядели одинаково */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none; /* убирает подчёркивание, которое браузер по умолчанию ставит у ссылок */
  user-select: none; /* запрещает выделение самой кнопки/её текста */
  -webkit-user-drag: none; /* доп. запрет перетаскивания в Chrome/Safari */
  /* 
    Тень позади PNG-картинки. drop-shadow (в отличие от обычного 
    box-shadow) учитывает прозрачность самого PNG - то есть тень 
    ляжет ровно по силуэту надписи/иконки, а не по прямоугольнику 
    картинки целиком. Меняй цифры под себя:
    смещение по X, смещение по Y, размытие, цвет.
  */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.658));
}

.icon-button img {
  height: 60px; /* высота кнопки по умолчанию - меняй под размер своих PNG */
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* 
  Индивидуальный размер для каждой кнопки - переопределяет общее 
  правило выше. Меняй цифры height (и добавляй width, если нужно 
  не пропорциональное растяжение) под конкретную кнопку.
*/
#btn-mystery img {
  height: 60px; /* 150% от базовых 40px */
}

#btn-info img {
  height: 58px; /* 145% от базовых 40px */
}

.icon-button:hover {
  opacity: 0.85;
}

/* 
  ============================================================
  ОВЕРЛЕЙ С ДОП. ИНФОРМАЦИЕЙ
  ============================================================
*/
#info-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* затемнение видео позади оверлея - меняй прозрачность (0.6) под себя */
  z-index: 15; /* ниже кнопок (20), но выше видео (0-1) */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}

/* Класс "hidden" полностью прячет оверлей (и с экрана, и из кликов) */
#info-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* 
  Кликабельные зоны навигации по краям оверлея. Ширина ЗАДАЁТСЯ ЧЕРЕЗ JS 
  (см. updateNavZoneSizes в script.js) - подстраивается под реальное 
  свободное место рядом с картинками, поэтому область вплотную примыкает 
  к контенту, не перекрывая сами фото/текст (это и даёт возможность 
  спокойно выделять/копировать текст).
*/
.info-nav-zone {
  position: absolute;
  top: 0;
  height: 100%;
  /* width задаётся через JS - тут просто запасное значение на случай, 
     если JS почему-то не сработает */
  width: 100px;
  cursor: pointer;
  z-index: 25;
}

.info-nav-zone-left {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.35), transparent);
}

.info-nav-zone-right {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.35), transparent);
}

.info-nav-zone:hover {
  filter: brightness(1.3);
}

/* 
  ГЛАВНЫЙ БЛОК КОМПОЗИЦИИ. 
  Сейчас это горизонтальный ряд: [левый столбик] [центральная картинка] [правый столбик].
  
  ЧТО МЕНЯТЬ, ЕСЛИ НУЖНА ДРУГАЯ КОМПОЗИЦИЯ:
  - flex-direction: row -> column, если хочешь расположить всё 
    вертикально (центр сверху/снизу, а не по центру между боков)
  - gap - расстояние между левым столбиком/центром/правым столбиком
  - align-items - вертикальное выравнивание (center/flex-start/flex-end)
  - max-width - насколько широко может растянуться весь блок
*/
#info-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 90vw;
  max-height: 85vh;
  /* 
    Плавное исчезание/появление содержимого при переключении объекта 
    (не весь оверлей, а именно картинки внутри - сам тёмный фон 
    оверлея остаётся на месте). Длительность (0.4s) - подстрой под 
    длину своих переходов между объектами, чтобы фейд совпадал по 
    времени с самой анимацией переезда камеры.
  */
  transition: opacity 0.4s ease;
  opacity: 1;
}

/* Этот класс включается через JS ровно на время переезда камеры между объектами */
#info-content.fading {
  opacity: 0;
}

/* 
  Обёртка центральной картинки + текста под ней - раньше картинка была 
  сама по себе, теперь у неё есть текстовый блок снизу.
*/
#info-center-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px; /* расстояние между картинкой и текстом */
}

/* 
  Центральная вертикальная картинка. 
  height задаёт основной размер - остальное (ширина) подстроится 
  само, если у картинки правильные пропорции (object-fit не нужен, 
  так как это просто <img>, а не видео).
*/
#info-center-img {
  height: 70vh; /* высота центральной картинки - меняй под свой макет */
  max-width: 30vw;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  /* та же обводка и тень по силуэту, что и у боковых картинок */
  filter:
    drop-shadow(1px 0 0 rgba(255, 255, 255, 0.7))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.7))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.7))
    drop-shadow(0 3px 8px rgba(0, 0, 0, 1));
}

/* Текст-описание объекта под центральной картинкой */
#info-text {
  color: white;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  max-width: 400px; /* ширина текстового блока - меняй под свой макет */
  cursor: text;
}

/* 
  Столбики слева/справа с картинками. 
  Сейчас расположены КОЛОНКОЙ (одна под другой). 
  Если хочешь, чтобы картинки шли В РЯД, а не столбиком - 
  поменяй flex-direction на "row" (и возможно понадобится 
  flex-wrap: wrap, если элементов много).
*/
.info-side {
  display: flex;
  flex-direction: column;
  gap: 20px; /* расстояние между картинками внутри столбика */
  align-items: center;
}

/* 
  Обёртка одной картинки + подписи под ней. 
  Создаётся динамически через JS (см. script.js, INFO_OVERLAYS).
*/
.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px; /* расстояние между картинкой и подписью */
  position: relative; /* нужно, чтобы "Copied" позиционировался абсолютно и не сдвигал вёрстку */
}

/* 
  ФИКСИРОВАННАЯ РАМКА одинакового размера для всех боковых картинок. 
  Раньше размер задавался прямо на <img>, и если у картинки были 
  сильно не квадратные пропорции (например, широкая и невысокая), 
  она визуально выглядела "растянутой" по сравнению с остальными - 
  на деле искажения не было, просто рамка каждой картинки была 
  разного размера.
  
  Теперь у ВСЕХ картинок одинаковая рамка-контейнер (120x120), 
  а сама картинка внутри неё через object-fit: contain вписывается 
  целиком, сохраняя СВОИ реальные пропорции (может остаться пустое 
  место сверху/снизу или по бокам внутри рамки - это нормально, 
  так работает "вписывание без искажения").
*/
.info-item img {
  width: 120px;  /* <- размер рамки, меняй эту цифру */
  height: 120px; /* <- и эту, чтобы рамка была не квадратная, если нужно */
  user-select: none; /* запрещает выделение самой картинки мышкой */
  -webkit-user-drag: none; /* доп. запрет перетаскивания картинки в Chrome/Safari */
  object-fit: contain;
  /* 
    Обводка и тень ПО СИЛУЭТУ png (не по прямоугольнику рамки), 
    так же как у кнопок в правом/левом верхнем углу. Работает через 
    несколько наложенных drop-shadow со сдвигом в разные стороны на 
    1px - это и создаёт эффект "обводки" ровно по контуру непрозрачных 
    пикселей картинки. Последний drop-shadow (с размытием 8px) - 
    это сама тень позади.
  */
  filter:
    drop-shadow(1px 0 0 rgba(255, 255, 255, 0.7))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.7))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.7))
    drop-shadow(0 3px 8px rgba(0, 0, 0, 1));
}

.info-item img[src*="Victoria's Secret tease lace trim unlined demi bra.png"] {
  width: 120px;
  height: 100px;
  object-fit: contain;
}
/* 
  ============================================================
  КАК УВЕЛИЧИТЬ/УМЕНЬШИТЬ ОТДЕЛЬНУЮ КАРТИНКУ (а не все сразу)
  ============================================================
  Раз картинки вставляются автоматически из manifest.json, проще 
  всего обратиться к нужному файлу напрямую по КУСКУ ИМЕНИ ФАЙЛА 
  через атрибут src. Например, если у тебя есть файл "shoes1.png" 
  и хочешь сделать именно его крупнее остальных - раскомментируй 
  и подставь своё имя файла:

  .info-item img[src*="shoes1"] {
    max-width: 200px;
    max-height: 200px;
  }

  Можно добавить сколько угодно таких блоков, по одному на каждую 
  картинку, которую хочешь настроить индивидуально - они переопределят 
  общий размер именно для этого файла, не трогая остальные.
*/

.info-item span {
  color: white;
  font-size: 14px;
  font-family: Arial, sans-serif; /* <- меняй шрифт тут, см. комментарий ниже */
  text-align: center;
  max-width: 140px; /* чтобы длинные подписи переносились, а не растягивали блок */
  cursor: pointer; /* клик по подписи копирует её текст (см. script.js) */
  user-select: none; /* раз копирование теперь по клику, выделение мышкой не нужно */
}

.info-item span:hover {
  opacity: 0.75; /* лёгкая подсказка при наведении, что подпись кликабельна */
}

/* 
  Всплывающая подсказка "Copied". position: absolute означает, что она 
  НЕ влияет на расположение остальных элементов (картинка/подпись не 
  сдвигаются, когда подсказка появляется/исчезает) - она просто 
  накладывается поверх, не участвуя в потоке вёрстки. 
  opacity + transition дают быстрое, но плавное появление/исчезание.
*/
.copied-tooltip {
  position: absolute;
  top: -30px; /* положение над подписью - меняй под свой макет */
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75); /* лёгкое затемнение под текстом */
  color: white;
  font-size: 12px;
  font-family: Arial, sans-serif;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none; /* не мешает кликам под собой */
  transition: opacity 0.12s ease; /* быстрый, но плавный fade */
  z-index: 30;
}

.copied-tooltip.visible {
  opacity: 1;
}

/* 
  Как поменять шрифт: просто впиши название нужного шрифта в font-family 
  выше. Если хочешь ИМЕННО СВОЙ шрифт (не из стандартного набора браузера) - 
  нужно сначала подключить файл шрифта через @font-face в начале этого 
  файла, например:

  @font-face {
    font-family: "MyFont";
    src: url("fonts/myfont.woff2") format("woff2");
  }

  а потом писать font-family: "MyFont", sans-serif; вместо Arial.
*/

/* 
  Стрелки-подсказки поверх зон (чисто декоративные, кликов не перехватывают).
  Цвет управляется через "color" (используется внутри svg через 
  stroke="currentColor"), размер — через width/height ниже.
*/
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6); /* цвет стрелки — поменяй здесь */
  pointer-events: none; /* чтобы не мешали кликам */
  user-select: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}

/* Размер самой иконки — меняй width/height под себя */
.arrow svg {
  width: 32px;
  height: 32px;
  display: block;
}

.arrow-left {
  left: 20px;
}

.arrow-right {
  right: 20px;
}

/* 
  Необязательный эффект: стрелка чуть ярче/подсвечена, когда наводишь мышку 
  на соответствующую половину экрана. Работает через "соседский" CSS-селектор.
*/
#zone-left:hover ~ .arrow-left,
#zone-right:hover ~ .arrow-right {
  color: rgba(255, 255, 255, 1);
}