/* Показ проєкту на весь екран: з'являється поверх чату (і поверх хвиль голосового чату), нижнє поле, Skittle
   і логотип зверху лишаються на місці, кнопка теми на цей час ховається. */
.project-view {
  position: fixed;
  inset: 0;
  z-index: 22;                 /* вище за чат і хвилі (20), нижче за нижню зону (30) і шапку (25) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s ease, visibility 0s linear 1s;
  background: var(--bg);
  will-change: opacity;
}
.project-view.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  touch-action: none;          /* свайп по картинці обробляємо самі */
  transition: opacity 1s ease, visibility 0s;
}
.project-view img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;    /* будинок майже завжди внизу кадру — не обрізаємо його */
  will-change: opacity;
}
.project-view::after {          /* мʼякі затемнення під підпис і під шапку, щоб текст читався на будь-якому небі */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(to top, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.28) 30%, rgba(0,0,0,0) 55%);
}
.project-caption {
  position: absolute;
  z-index: 1;
  left: 20px;
  right: 20px;
  bottom: calc(var(--zone-h, 96px) + 22px);
  max-width: 34em;
  color: #fff;
  font-size: 15px;
  line-height: 1.45;
  text-shadow: 0 1px 12px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s ease 0.5s, transform 0.9s ease 0.5s;
}
.project-view.show .project-caption { opacity: 1; transform: none; }

/* поки показується проєкт: логотип зверху лишається (білим), кнопка теми зникає */
.top-bar .wordmark, .top-bar #theme-toggle { transition: opacity 0.6s ease, color 0.6s ease; }
body.project-shown .top-bar #theme-toggle { opacity: 0; pointer-events: none; }
body.project-shown .top-bar .wordmark, body.project-shown .top-bar .wordmark .bold { color: #fff; text-shadow: none; }
body.project-shown .bottom-zone::before { opacity: 0 !important; }   /* без матового градієнта над картинкою */

/* посилання на Instagram у відповідях */
.msg-body a.chat-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.msg-body a.chat-link:hover { text-decoration-color: currentColor; }