/* JewelArte Feed — вертикальная полноэкранная лента
   Свайп реализован нативным scroll-snap: инерция и фиксация по экрану
   достаются от браузера, без жестовых библиотек и без потери 60 FPS. */

.ja-feed {
  position: fixed;
  inset: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;        /* не тянуть страницу под лентой */
  -webkit-overflow-scrolling: touch;
  background: #0B0B14;
  scrollbar-width: none;
}
.ja-feed::-webkit-scrollbar { display: none; }

/* Пока пользователь зумит фото — вертикальная навигация выключается (§19) */
.ja-feed.is-zooming { scroll-snap-type: none; overflow: hidden; }

.ja-feed-item {
  position: relative;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;              /* не проматывать два экрана одним свайпом */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Медиа ─── */

/* §16: горизонтальное или квадратное фото не кропаем, а кладём
   на размытое продолжение самого себя */
.ja-media-bg {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  object-fit: cover;
  filter: blur(34px) saturate(1.15) brightness(0.55);
  transform: scale(1.06);
  pointer-events: none;
}

.ja-media {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.ja-media.is-cover   { object-fit: cover; }
.ja-media.is-contain { object-fit: contain; }

/* §33: пока грузится оригинал — показываем LQIP */
.ja-lqip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px);
  transform: scale(1.04);
  transition: opacity .35s ease;
}
.ja-lqip.is-hidden { opacity: 0; }

/* ─── Читаемость UI поверх фото.
   §4: градиент лёгкий, он не должен затемнять саму фотографию ─── */
.ja-scrim-top,
.ja-scrim-bottom {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.ja-scrim-top {
  top: 0; height: 190px;
  background: linear-gradient(180deg, rgba(8,8,16,.55) 0%, rgba(8,8,16,.22) 45%, transparent 100%);
}
.ja-scrim-bottom {
  bottom: 0; height: 300px;
  /* Градиент только для читаемости текста — панелью выглядеть не должен */
  background: linear-gradient(0deg, rgba(8,8,16,.52) 0%, rgba(8,8,16,.20) 42%, transparent 100%);
}

/* ─── §18 Clean View: тап по свободной области скрывает весь интерфейс ─── */
.ja-ui {
  transition: opacity .22s ease, transform .22s ease;
}
.ja-feed.ui-hidden .ja-ui,
.ja-feed.ui-hidden .ja-scrim-top,
.ja-feed.ui-hidden .ja-scrim-bottom {
  opacity: 0;
  pointer-events: none;
}

/* ─── Верхняя навигация ─── */
.ja-feed-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
}
.ja-feed-tabs { display: flex; gap: 18px; margin-left: auto; margin-right: auto; }
.ja-feed-tab {
  background: none; border: 0; padding: 2px 0;
  font-family: var(--font-ui);
  font-size: 15px; font-weight: 700;
  color: rgba(243,239,230,.62);
  cursor: pointer;
  position: relative;
}
.ja-feed-tab.is-active { color: #fff; }
.ja-feed-tab.is-active::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -7px; width: 22px; height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

/* ─── Правая панель действий (§6) ─── */
.ja-rail {
  position: absolute;
  right: 12px;
  bottom: 150px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;            /* без счётчиков нужен больший шаг, иначе иконки слипаются */
}
.ja-rail-btn {
  background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ja-rail-ico {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  /* Двойная тень: мягкая для объёма + плотная по контуру, чтобы белая
     линия не терялась на светлых участках кадра */
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6)) drop-shadow(0 0 2px rgba(0,0,0,.45));
}
.ja-rail-num {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
  font-variant-numeric: tabular-nums;
}
.ja-rail-btn.is-on .ja-rail-ico { color: var(--gold); }

/* §35: отклик мгновенный, не ждём сервер */
@keyframes ja-pop { 0% { transform: scale(1) } 42% { transform: scale(1.32) } 100% { transform: scale(1) } }
.ja-pop { animation: ja-pop .34s cubic-bezier(.2,.9,.25,1); }

/* ─── Нижний информационный блок (§8) ─── */
.ja-feed-info {
  position: absolute;
  left: 16px; right: 84px;
  bottom: 104px;
  z-index: 25;
  color: #fff;
}
.ja-feed-creator {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: 13.5px; font-weight: 700;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.ja-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
}
.ja-feed-title {
  font-family: var(--font-ui);
  font-size: 16px; font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 1px 8px rgba(0,0,0,.65);
}
.ja-feed-sub {
  margin-top: 3px;
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 500;
  color: rgba(243,239,230,.82);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.ja-feed-caption {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(243,239,230,.9);
  line-height: 1.38;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.ja-more {
  background: none; border: 0; padding: 0 0 0 4px;
  color: rgba(243,239,230,.6);
  font: inherit; cursor: pointer;
}

/* §9: цена — тихий индикатор, не рекламный баннер */
.ja-price {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: rgba(10,10,20,.42);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.17);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ja-live {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 7px;
  font-size: 11.5px; color: rgba(243,239,230,.72);
}
.ja-live::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--value);
  box-shadow: 0 0 7px var(--value);
}

/* ─── Нижняя навигация (§29) ─── */
.ja-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 8px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: linear-gradient(0deg, rgba(8,8,16,.92) 0%, rgba(8,8,16,.55) 70%, transparent 100%);
}
.ja-tab {
  background: none; border: 0; padding: 4px 10px;
  color: rgba(243,239,230,.56);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
/* В макете активная вкладка золотая целиком — и иконка, и подпись. */
.ja-tab.is-active { color: var(--gold); }
.ja-tab-l {
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  font-family: var(--font-ui);
}
.ja-tab.is-active .ja-tab-l { color: var(--gold); }

/* Раздел, которого пока нет: притушен, но не выключен —
   по тапу объясняем, а не молчим */
.ja-tab.is-soon { opacity: .45; }

/* Аватар личного кабинета в верхней панели */
.ja-avatar-btn {
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.34);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-ui); font-size: 12px; font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ─── Индикатор play/pause для видео (§20) ─── */
.ja-playpause {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(10,10,20,.45);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.ja-playpause.is-shown { opacity: 1; }

/* ─── Bottom sheet (§10, §36) ─── */
.ja-sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6,6,12,.5);
  backdrop-filter: blur(2px);
  animation: ja-fade .2s ease;
}
@keyframes ja-fade { from { opacity: 0 } to { opacity: 1 } }

.ja-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 61;
  max-height: 82dvh;
  overflow-y: auto;
  background: #16162B;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-top: 1px solid var(--border-hi);
  padding: 10px 18px calc(env(safe-area-inset-bottom, 0px) + 22px);
  animation: ja-sheet-up .26s cubic-bezier(.2,.8,.25,1);
}
@keyframes ja-sheet-up { from { transform: translateY(100%) } to { transform: translateY(0) } }

.ja-sheet-grip {
  width: 38px; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.24);
  margin: 0 auto 16px;
}

.ja-thumbs { display: flex; gap: 9px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.ja-thumbs::-webkit-scrollbar { display: none; }
.ja-thumb {
  width: 64px; height: 64px; flex: 0 0 auto;
  border-radius: var(--r-sm);
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface);
}
.ja-thumb.is-active { border-color: var(--gold); }

.ja-sheet-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 15px 2px;
  background: none; border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-ui); font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.ja-sheet-row:last-child { border-bottom: 0; }
.ja-sheet-row .ja-chev { margin-left: auto; color: var(--faint); }

/* ─── Пустое состояние и загрузка (§33, §34) ─── */
.ja-feed-empty {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center;
  padding: 32px;
  color: var(--muted);
  font-family: var(--font-ui);
}
.ja-skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #15152A 30%, #1E1E38 50%, #15152A 70%);
  background-size: 220% 100%;
  animation: ja-shimmer 1.4s linear infinite;
}
@keyframes ja-shimmer { from { background-position: 180% 0 } to { background-position: -40% 0 } }

@media (prefers-reduced-motion: reduce) {
  .ja-pop, .ja-skeleton, .ja-sheet { animation: none; }
  .ja-feed { scroll-behavior: auto; }
}

/* Экраны вне ленты: освобождаем место под общую нижнюю навигацию. */
.ds-app.has-tabbar .ds-screen {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 104px);
}