/* «Мармелад»: желейные флаконы в финале ролика (assets/features/jelly.js).
   Слой над страницей, но под шапкой (50) и меню (45); сам холст касаний не ловит — ловят невидимые рамки флаконов */
.jelly {
  position: fixed; inset: 0; z-index: 44;
  pointer-events: none;
  contain: strict;
}
.jelly__gl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.jelly__hit {
  position: absolute; left: 0; top: 0;
  border-radius: 24%;
  pointer-events: auto;
  touch-action: pan-y;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
html.is-jelly-drag, html.is-jelly-drag * { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; }

/* Подпись: какой аромат стал мармеладом. Как плашка «Аромат сезона»: бумага, надпись капсом, имя антиквой */
.jelly-cap {
  position: fixed; left: 0; top: 0; z-index: 44;
  display: grid; gap: 6px; justify-items: start;
  max-width: min(300px, calc(100vw - 32px));
  padding: 12px 16px 13px;
  border: 0; border-radius: 0;
  background: rgba(250, 248, 244, .96); color: var(--ink, #12110f);
  box-shadow: 0 1px 0 rgba(18, 17, 15, .06), 0 14px 34px -18px rgba(18, 17, 15, .45);
  font: inherit; text-align: left;
  cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease, ease), visibility 0s .28s, background-color .35s, color .35s;
}
.jelly-cap.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .28s var(--ease, ease), visibility 0s, background-color .35s, color .35s; }
.jelly-cap__kick { font-size: .6875rem; color: var(--mute, #6d675e); transition: color .35s; }
.jelly-cap__name { font: 400 1.0625rem/1.15 var(--f-display, Georgia, serif); }
.jelly-cap__name em { font-style: italic; }
.jelly-cap__toss { font-size: .8125rem; line-height: 1.35; color: var(--mute, #6d675e); transition: color .35s; }
.jelly-cap:hover .jelly-cap__toss { color: var(--mute-inv, #a29e97); }
.jelly-cap__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-size: .6875rem; }
.jelly-cap__go .ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .35s var(--ease, ease); }
.jelly-cap:hover { background: var(--ink, #12110f); color: var(--white, #faf8f4); }
.jelly-cap:hover .jelly-cap__kick { color: var(--mute-inv, #a29e97); }
.jelly-cap:hover .jelly-cap__go .ico { transform: translateX(4px); }
.jelly-cap:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

@media (max-width: 699px) {
  .jelly-cap { padding: 10px 13px 11px; gap: 5px; }
  .jelly-cap__name { font-size: 1rem; }
}
@media print { .jelly, .jelly-cap { display: none !important; } }

/* Разбитый флакон: облачко пара цвета самого мармелада и ноты — фото-вырезка из атласа витрины с подписью капсом,
   а ноты без вырезки — словом антиквой. Двигает их jelly.js (Web Animations), здесь только вид */
.jelly__fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.jelly-mist {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--c), .46), rgba(var(--c), .22) 48%, rgba(var(--c), 0));
  opacity: 0; will-change: transform, opacity;
}
.jelly-note {
  position: absolute; left: 0; top: 0;
  display: grid; justify-items: center; gap: 4px;
  opacity: 0; will-change: transform, opacity;
  color: var(--ink, #12110f);
}
.jelly-note__img {
  display: block; width: 76px; aspect-ratio: 1;
  background-position: center; background-size: contain; background-repeat: no-repeat;
  filter: drop-shadow(0 10px 12px rgba(51, 36, 20, .16));
}
.jelly-note__img.is-atlas { background-position: var(--nx) var(--ny); background-size: 400% 400%; }
/* подпись — как на органе «Лаборатории»: строчными, коротко, длинное имя — в две строки */
.jelly-note__t {
  max-width: 128px; text-align: center;
  font: 500 .8125rem/1.15 var(--f-text, system-ui, sans-serif); letter-spacing: .01em;
  text-shadow: 0 0 10px #fff, 0 0 4px #fff, 0 0 2px #fff;
}
.jelly-note.is-word .jelly-note__t {
  font: italic 300 1.375rem/1.1 var(--f-display, Georgia, serif); letter-spacing: -.01em; text-transform: none;
}
@media (max-width: 699px) {
  .jelly-note__img { width: 58px; }
  .jelly-note.is-word .jelly-note__t { font-size: 1.125rem; }
}

/* Финал ролика с мармеладом: кадр с пряностями уходит под белую «студию» (#heroStudio) на весь экран, без рамки;
   флаконы падают и стоят на полке, которую считает app.js (низ кнопки «Перейти в лабораторию»).
   Выноски нот и подпись «Аромат сезона» прячутся: они про кадр, которого больше нет */
.hero__studio {
  position: absolute; z-index: 3; inset: 0;
  background: #fff; opacity: 0; pointer-events: none;
  transition: opacity .55s var(--ease, ease);
}
.hero.is-jelly .hero__studio { opacity: 1; }
.hero.is-jelly .anno { opacity: 0 !important; pointer-events: none !important; }
.hero .plate-cap { transition: opacity .4s, transform .6s var(--ease, ease), background-color .4s, color .4s; }
.hero.is-jelly .plate-cap { opacity: 0 !important; pointer-events: none; }