/* ==========================================================================
   Стики: секции под полкой. Тот же графитовый зал и тёплый свет полки,
   ровные строки с тонкими разделителями вместо карточек.
   ========================================================================== */
/* Цвета секций зарегистрированы как цвета, чтобы оттенок перетекал при смене вкуса и цвета устройства */
@property --flavor { syntax: '<color>'; inherits: true; initial-value: #d63b46; }
@property --dev { syntax: '<color>'; inherits: true; initial-value: #1ba57a; }

/* Тёмный зал с оттенком: у каждой секции своё пятно цветного света,
   на стыках все секции уходят в графит, поэтому границ между ними не видно */
.st-sec {
  --rule: rgba(242, 240, 234, .12);
  --sec-c: var(--st-bay);
  --sec-tint: color-mix(in srgb, var(--sec-c) 14%, var(--st-bay));
  background: linear-gradient(180deg, var(--st-bay) 0%, var(--sec-tint) 22%, var(--sec-tint) 78%, var(--st-bay) 100%);
  color: var(--st-bay-ink);
  padding: 120px 0;
}
#coo { --sec-c: var(--flavor); transition: --flavor 1s var(--st-ease); }
#sensio { --sec-c: var(--dev); transition: --dev 1s var(--st-ease); }
#kits { --sec-c: #8a5ad8; }
#market { --sec-c: #c08a5b; }
#retail { --sec-c: #3f6fd0; }
.st-wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px; }
.st-sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 64px; }
.st-h2 {
  margin: 0; font-weight: 400; font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.04; letter-spacing: -.03em; max-width: 22ch; color: inherit; text-wrap: balance;
}
.st-h2 span { color: var(--st-bay-ink-2); }
.st-h3 { margin: 0 0 16px; font-weight: 500; font-size: 20px; letter-spacing: -.01em; color: inherit; text-align: left; }
.st-h3 span { color: var(--st-bay-ink-2); font-weight: 400; }
.st-sec-text { margin: 18px 0 0; max-width: 60ch; color: var(--st-bay-ink-2); font-size: 17px; line-height: 1.55; }
.st-sec a:focus-visible, .st-sec button:focus-visible { outline: 2px solid var(--st-light); outline-offset: 3px; }

/* Кромка полки — общий элемент: под подиумом, устройством, Sentic и наборами */
.st-ledge-lit {
  margin-top: 0;
  border-top: 1px solid rgba(255, 246, 226, .5);
  box-shadow: 0 -18px 40px -22px var(--st-light), 0 10px 30px rgba(0, 0, 0, .5);
}

/* ---------- Прожектор: луч сверху и световое пятно внизу ----------
   Луч — трапеция (узкая у лампы, широкая у полки) с размытыми краями,
   поэтому на узком экране не видно прямоугольника блока.
   Включается, когда сцена попадает в экран (.is-lit из sticks-sections.js). */
.st-sec { overflow-x: clip; }
.st-spot { position: relative; isolation: isolate; }
/* Свет снизу вверх: источник — световое пятно под предметом, конус расширяется кверху.
   --sx/--sy — положение источника на сцене в процентах (число без единиц), по нему считается
   положение внутри блока-луча (он шире сцены в 1.6 раза и сдвинут вверх на 4%),
   --c — центральный угол конуса (0deg — строго вверх) */
.st-spot {
  --sx: 53; --sy: 88; --c: 0deg;
  --ax: calc((var(--sx) + 30) / 160 * 100%);
  --ay: calc((var(--sy) + 4) / 108 * 100%);
}
.st-device-stage.st-spot { --sx: 50; --sy: 95; }
.st-kit-hero.st-spot { --sx: 50; --sy: 80; }
.st-spot::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -4%; width: 160%; height: 108%;
  /* мягкие края дают сами переходы градиента (размытие с обрезкой дало бы жёсткий край) */
  background: conic-gradient(from calc(var(--c) - 25deg) at var(--ax) var(--ay),
    transparent 0deg, rgba(255, 246, 226, .24) 14deg, rgba(255, 246, 226, .34) 25deg,
    rgba(255, 246, 226, .24) 36deg, transparent 50deg 360deg);
  /* к верху свет рассеивается */
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 45%, rgba(0, 0, 0, .45) 80%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0, #000 45%, rgba(0, 0, 0, .45) 80%, transparent 100%);
  opacity: 0; transform: translateX(-50%) scaleY(.55); transform-origin: var(--ax) var(--ay);
  transition: opacity 1.4s var(--st-ease), transform 1.6s var(--st-ease);
}
.st-spot::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(var(--sx) * 1%); top: calc(var(--sy) * 1% - 8.5%); width: 70%; height: 17%;
  background: radial-gradient(closest-side, rgba(255, 246, 226, .5), rgba(255, 246, 226, .12) 55%, transparent);
  opacity: 0; transform: translateX(-50%) scaleX(.5);
  transition: opacity 1.4s var(--st-ease), transform 1.6s var(--st-ease);
}
.st-spot.is-lit::before { opacity: 1; transform: translateX(-50%) scaleY(1); }
.st-spot.is-lit::after { opacity: 1; transform: translateX(-50%) scaleX(1); }

/* ---------- COO ---------- */
/* Свет над пачкой COO окрашен в цвет вкуса; белое пятно из рендера становится горячим центром */
.st-coo .st-spot::before {
  background: conic-gradient(from calc(var(--c) - 25deg) at var(--ax) var(--ay),
    transparent 0deg, color-mix(in srgb, var(--flavor) 50%, rgba(255, 246, 226, .26)) 14deg,
    color-mix(in srgb, var(--flavor) 58%, rgba(255, 246, 226, .36)) 25deg,
    color-mix(in srgb, var(--flavor) 50%, rgba(255, 246, 226, .26)) 36deg, transparent 50deg 360deg);
  opacity: 0;
}
.st-coo .st-spot.is-lit::before { opacity: .8; }
.st-coo .st-spot::after {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--flavor) 55%, transparent), color-mix(in srgb, var(--flavor) 18%, transparent) 60%, transparent);
}
.st-coo-grid { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: 64px; align-items: start; }
.st-flavors { display: grid; border-top: 1px solid var(--rule); }
.st-flavor {
  display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; column-gap: 16px;
  align-items: baseline; text-align: left;
  padding: 16px 12px 16px 0; border: 0; border-bottom: 1px solid var(--rule);
  background: none; color: var(--st-bay-ink-2); font: inherit; cursor: pointer;
  transition: color .25s, padding .35s var(--st-ease), box-shadow .35s;
}
.st-flavor-n { grid-row: 1 / 3; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--c); }
.st-flavor-name { font-size: 19px; color: var(--st-bay-ink); }
.st-flavor-short { grid-column: 2; font-size: 14px; }
.st-flavor:hover { color: var(--st-bay-ink); }
/* выбранная строка: отступ и тонкая метка цвета вкуса (1px, не полоса-бордер) */
.st-flavor[aria-selected="true"] { padding-left: 14px; box-shadow: inset 1px 0 0 var(--c); }
.st-flavor[aria-selected="true"] .st-flavor-name { font-weight: 500; }

.st-podium { position: sticky; top: 40px; }
.st-podium-stage {
  position: relative; height: min(56vh, 520px); display: grid; place-items: end center;
  /* конус тёплого света сверху и лёгкий отсвет цвета вкуса */
  /* за пачкой — лёгкий отсвет цвета вкуса; сам свет даёт .st-spot */
  background: radial-gradient(40% 40% at 50% 70%, color-mix(in srgb, var(--flavor, #d63b46) 18%, transparent), transparent 75%);
}
.st-podium-pack {
  grid-area: 1 / 1; width: min(440px, 80%); margin-bottom: -8px;
  opacity: 0; transform: translateY(18px) rotate(-3deg); filter: blur(4px);
  transition: opacity .7s var(--st-ease), transform .9s var(--st-ease), filter .7s;
}
.st-podium-pack.is-on { opacity: 1; transform: none; filter: none; }
.st-coo-detail { padding-top: 28px; }
.st-coo-detail p { margin: 0 0 8px; color: var(--st-bay-ink-2); font-size: 16px; line-height: 1.5; max-width: 52ch; }
.st-coo-detail .st-meta { font-size: 14px; }

/* ---------- Sensio ---------- */
.st-sensio-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.st-device-stage {
  position: relative; height: min(46vh, 420px); display: grid; place-items: end center;
}
.st-device-img {
  /* процент от высоты сцены в grid не считается, задаём от той же формулы */
  grid-area: 1 / 1; height: calc(min(46vh, 420px) * .86); width: auto; margin-bottom: 10px;
  opacity: 0; transform: translateY(14px); transition: opacity .6s var(--st-ease), transform .8s var(--st-ease);
}
.st-device-img.is-on { opacity: 1; transform: none; }
.st-swatches { display: flex; gap: 8px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.st-swatch {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
  border-radius: 999px; border: 1px solid var(--rule); background: none; color: var(--st-bay-ink-2);
  font: inherit; font-size: 14px; cursor: pointer; transition: border-color .2s, color .2s;
}
.st-swatch i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.st-swatch:hover, .st-swatch[aria-pressed="true"] { color: var(--st-bay-ink); border-color: rgba(242, 240, 234, .5); }

.st-points { margin: 0 0 48px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.st-points div { padding: 20px 0; border-top: 1px solid var(--rule); }
.st-points dt { font-weight: 500; font-size: 17px; margin-bottom: 6px; }
.st-points dd { margin: 0; color: var(--st-bay-ink-2); font-size: 15px; line-height: 1.5; }
.st-specs { width: 100%; border-collapse: collapse; }
.st-specs caption { caption-side: top; }
.st-specs th, .st-specs td { padding: 13px 0; border-top: 1px solid var(--rule); font-size: 15px; font-weight: 400; text-align: left; }
.st-specs th { color: var(--st-bay-ink-2); }
.st-specs td { text-align: right; font-variant-numeric: tabular-nums; }

/* Sentic: ряд пачек на одной кромке, подписи под ней */
.st-sentic { margin-top: 96px; }
.st-sentic-row, .st-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.st-sentic-row { align-items: end; margin-top: 32px; padding: 0 12px; }
.st-sentic-row img { width: 84%; height: auto; justify-self: center; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); }
.st-caps { padding: 0; font-size: 14px; color: var(--st-bay-ink-2); line-height: 1.5; }
.st-caps p { margin: 0; }
.st-caps span { display: block; }
.st-caps b { display: block; color: var(--st-bay-ink); font-weight: 500; font-size: 17px; margin-bottom: 4px; }

/* ---------- Наборы ---------- */
.st-kits-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.st-kit-hero { position: relative; margin: 0; display: grid; place-items: center; padding-top: 40px; }
.st-kit-hero img { width: min(440px, 100%); height: auto; }
.st-contents { list-style: none; margin: 0 0 56px; padding: 0; }
.st-contents li { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--rule); }
.st-contents b { font-weight: 300; font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.st-contents span { font-size: 17px; color: var(--st-bay-ink-2); }
.st-kit-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: end; justify-items: center; }
.st-kit-colors img { height: 176px; width: auto; }
.st-kit-info .st-caps { grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.st-note { margin: 32px 0 0; color: var(--st-bay-ink-2); font-size: 15px; }

/* ---------- Рынок ---------- */
/* Доля на полке: цифра, под ней полка, где подсвечена ровно доля стиков */
.mk-share { margin-bottom: 88px; }
.mk-top { margin: 0; display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; }
.mk-big { font-weight: 300; font-size: clamp(64px, 8vw, 120px); line-height: 1; letter-spacing: -.045em; color: #d9a574; font-variant-numeric: tabular-nums; }
.mk-cap { display: grid; gap: 4px; font-size: 17px; line-height: 1.5; color: var(--st-bay-ink); }
.mk-cap i { font-style: normal; font-size: 14px; color: var(--st-bay-ink-2); }
.mk-shelf {
  position: relative; margin-top: 30px; height: 16px; border-top: 1px solid rgba(255, 246, 226, .18);
  background: linear-gradient(rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
}
.mk-shelf i {
  position: absolute; left: 0; top: -1px; height: 16px; width: 12.13%;
  background: linear-gradient(rgba(255, 246, 226, .55), rgba(255, 246, 226, .12)); border-top: 1px solid #fff6e2;
  box-shadow: 0 -18px 40px -14px rgba(255, 246, 226, .55);
}
.mk-scale { margin-top: 10px; display: flex; justify-content: space-between; font-size: 13px; color: var(--st-bay-ink-2); }
.mk-heets { margin: 36px 0 0; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.mk-heets b { font-weight: 400; font-size: 40px; letter-spacing: -.02em; color: var(--st-bay-ink); font-variant-numeric: tabular-nums; }
.mk-heets span { color: var(--st-bay-ink-2); font-size: 16px; }
.mk-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.mk-cols > div { padding-top: 20px; border-top: 1px solid var(--rule); }
.mk-cols h3 { margin: 0 0 8px; font-weight: 500; font-size: 20px; letter-spacing: -.01em; }
.mk-cols p { margin: 0; color: var(--st-bay-ink-2); font-size: 15px; line-height: 1.55; }
@media (prefers-reduced-motion: no-preference) {
  /* подсветка доли разгорается слева направо вместе с появлением блока */
  html.st-js .mk-share:not(.is-lit) .mk-shelf i { clip-path: inset(0 100% 0 0); opacity: .4; }
  .mk-shelf i { transition: clip-path 1.6s var(--st-ease), opacity 1.2s var(--st-ease); }
  .mk-share.is-lit .mk-shelf i { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* ---------- Розница ---------- */
.st-retail-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
/* сверху у растра запечена подпись на русском — обрезаем её полосу (≈7% высоты) */
.st-map { margin: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 1920 / 1004; }
.st-map img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; filter: brightness(.9) saturate(.9); clip-path: inset(8px 0 0 0); }
.st-channel { padding: 22px 0; border-top: 1px solid var(--rule); }
.st-channel:first-child { padding-top: 0; border-top: 0; }
.st-channel .st-h3 { margin-bottom: 6px; }
.st-channel p { margin: 0; color: var(--st-bay-ink-2); font-size: 15px; line-height: 1.5; }
.st-channel .st-names { margin-top: 10px; color: var(--st-bay-ink); }

/* ---------- Контакты: светлая панель, как свет в зале ---------- */
/* светлая панель выезжает тем же жестом: округлая кромка поверх графитового низа розницы */
.st-sec.st-contact { position: relative; z-index: 2; margin-top: -32px; padding-top: 152px; background: var(--st-stage); color: var(--st-ink); border-top: 0; border-radius: 32px 32px 0 0; }
.st-contact .st-sec-text { color: var(--st-ink-2); }
.st-contact-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: start; }
.st-reach { margin: 48px 0 0; }
.st-reach div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--st-line); font-size: 16px; }
.st-reach dt { color: var(--st-ink-2); }
.st-reach dd { margin: 0; }
.st-reach a { color: var(--st-ink); text-underline-offset: 4px; text-decoration-color: var(--st-line); }
.st-reach a:hover { text-decoration-color: var(--st-ink); }
.st-form { display: grid; gap: 18px; }
.st-form label { display: grid; gap: 8px; font-size: 14px; color: var(--st-ink-2); }
.st-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.st-form input[type="text"], .st-form input[type="tel"], .st-form input[type="email"], .st-form textarea {
  font: inherit; font-size: 16px; color: var(--st-ink); background: #fff;
  border: 1px solid var(--st-line); border-radius: 10px; padding: 14px 16px; resize: vertical;
  transition: border-color .2s;
}
.st-form input:hover, .st-form textarea:hover { border-color: #b9b9b4; }
.st-form ::placeholder { color: #8d8c87; }
.st-form .st-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.5; }
.st-consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--st-ink); flex: none; }
.st-form .st-btn { justify-self: start; border: 0; cursor: pointer; padding: 15px 28px; }
.st-contact a:focus-visible, .st-contact button:focus-visible,
.st-form input:focus-visible, .st-form textarea:focus-visible { outline: 2px solid var(--st-ink); outline-offset: 2px; }

.st-footer { background: var(--st-stage); color: var(--st-ink-2); border-top: 1px solid var(--st-line); font-size: 14px; }
.st-footer-inner { display: flex; justify-content: space-between; gap: 24px; padding-top: 28px; padding-bottom: 28px; }
.st-footer nav { display: flex; gap: 24px; }
.st-footer a { color: inherit; text-decoration: none; }
.st-footer a:hover { color: var(--st-ink); }

.st-page { scrollbar-color: #3a3b3e var(--st-bay); }

@media (prefers-reduced-motion: reduce) {
  .st-spot::before, .st-spot::after { transition: none; }
  .st-podium-pack, .st-device-img, .st-flavor { transition: none; }
}

@media (max-width: 1100px) {
  .st-coo-grid, .st-sensio-grid, .st-kits-grid, .st-retail-grid, .st-contact-grid { grid-template-columns: 1fr; gap: 48px; }
  /* на узком экране пачка над списком: выбор вкуса сразу виден */
  .st-podium { position: static; order: -1; }
}
@media (max-width: 760px) {
  .st-sec { padding: 72px 0; }
  .st-wrap { padding: 0 20px; }
  .st-sec-head { flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
  .st-podium-stage { height: 300px; }
  .st-device-stage { height: 300px; }
  .st-device-img { height: 258px; }
  .st-points { grid-template-columns: 1fr; }
  .st-sentic-row, .st-sentic .st-caps { grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0; }
  .st-sentic .st-caps { font-size: 12px; }
  .st-sentic .st-caps b { font-size: 14px; }
  .st-sentic .st-caps span { display: none; }
  .mk-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .mk-share { margin-bottom: 56px; }
  .mk-heets b { font-size: 32px; }
  .st-kit-colors img { height: 130px; }
  .st-form-row { grid-template-columns: 1fr; }
  .st-reach div { grid-template-columns: 1fr; gap: 4px; }
  .st-footer-inner { flex-direction: column; }
}

/* Плавающие кнопки: в палитре зала (без фирменных синего и зелёного), 44px,
   прижаты к краю так, чтобы не заходить на колонку контента (край контента — 56px) */
.st-page .floating-buttons { right: 4px; bottom: 16px; gap: 8px; }
.st-page .telegram-btn, .st-page .whatsapp-btn, .st-page .scroll-top-btn {
  width: 44px; height: 44px; right: auto;
  background: rgba(23, 24, 26, .86); color: var(--st-bay-ink);
  border: 1px solid rgba(242, 240, 234, .18);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3); text-shadow: none;
}
.st-page .telegram-btn:hover, .st-page .whatsapp-btn:hover, .st-page .scroll-top-btn:hover {
  background: #26272a; box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.st-page .telegram-btn svg, .st-page .whatsapp-btn svg { width: 20px; height: 20px; }
.st-page .scroll-top-btn { bottom: 120px; right: 4px; }
.st-page .floating-buttons a::before, .st-page .floating-buttons a::after { display: none; }
@media (max-width: 760px) {
  /* на телефоне остаётся одна кнопка WhatsApp: Telegram и «наверх» перекрывали контент */
  .st-page .telegram-btn, .st-page .scroll-top-btn { display: none; }
}
.st-page .scroll-top-btn svg, .st-page .scroll-top-btn i { color: var(--st-bay-ink); stroke: currentColor; }


/* ==========================================================================
   Анимации: сообщают о состоянии (свет включился, вкус сменился), без декора.
   Всё внутри no-preference: при «уменьшить движение» страница статична.
   ========================================================================== */
.st-bay { position: relative; isolation: isolate; }
/* Фонарик по полке: тёплое пятно под курсором */
.st-flash {
  position: absolute; inset: -24px 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(300px 260px at var(--mx, 50%) var(--my, 50%), rgba(255, 246, 226, .2), transparent 70%);
  mix-blend-mode: screen; transition: opacity .45s var(--st-ease);
}
.st-bay.is-hover .st-flash { opacity: 1; }

@keyframes st-arrive { from { opacity: 0; transform: translateY(22px); } }
@keyframes st-swap { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: no-preference) {
  /* Товары выходят на полку по очереди, когда зажглась подсветка */
  .st-range:not(.is-arrived) .st-item { opacity: 0; }
  .st-range.is-arrived .st-item { animation: st-arrive .9s var(--st-ease) calc(var(--i, 0) * 55ms) backwards; }

  /* Секции: заголовок и строки списков появляются один раз */
  html.st-js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
  [data-reveal] { transition: opacity .9s var(--st-ease), transform 1s var(--st-ease); }
  html.st-js [data-reveal-stagger]:not(.is-in) > * { opacity: 0; }
  [data-reveal-stagger].is-in > * { animation: st-rise .8s var(--st-ease) backwards; }
  [data-reveal-stagger].is-in > :nth-child(2) { animation-delay: 70ms; }
  [data-reveal-stagger].is-in > :nth-child(3) { animation-delay: 140ms; }
  [data-reveal-stagger].is-in > :nth-child(4) { animation-delay: 210ms; }
  [data-reveal-stagger].is-in > :nth-child(5) { animation-delay: 280ms; }
  [data-reveal-stagger].is-in > :nth-child(6) { animation-delay: 350ms; }
  [data-reveal-stagger].is-in > :nth-child(7) { animation-delay: 420ms; }
  [data-reveal-stagger].is-in > :nth-child(8) { animation-delay: 490ms; }

  /* Описание вкуса COO мягко сменяется */
  .st-coo-detail.swap { animation: st-swap .55s var(--st-ease); }
}

/* Ряды на кромке (Sentic, цвета набора): предметы встают по очереди, потом подписи, и загорается линия света */
@keyframes st-land { from { opacity: 0; transform: translateY(44px) rotate(-3deg) scale(.95); filter: blur(6px); } }
@media (prefers-reduced-motion: no-preference) {
  html.st-js .st-lands:not(.is-in) :is(.st-sentic-row, #stKitColors) img,
  html.st-js .st-lands:not(.is-in) .st-caps p { opacity: 0; }
  .st-lands:not(.is-in) .st-ledge-lit { border-top-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
  .st-lands.is-in :is(.st-sentic-row, #stKitColors) img { animation: st-land 1s var(--st-ease) backwards; }
  .st-lands.is-in .st-caps p { animation: st-rise .8s var(--st-ease) backwards; }
  .st-lands.is-in :is(.st-sentic-row, #stKitColors) img:nth-child(2) { animation-delay: 140ms; }
  .st-lands.is-in :is(.st-sentic-row, #stKitColors) img:nth-child(3) { animation-delay: 280ms; }
  .st-lands.is-in :is(.st-sentic-row, #stKitColors) img:nth-child(4) { animation-delay: 420ms; }
  .st-lands.is-in .st-caps p { animation-delay: 300ms; }
  .st-lands.is-in .st-caps p:nth-child(2) { animation-delay: 440ms; }
  .st-lands.is-in .st-caps p:nth-child(3) { animation-delay: 580ms; }
  .st-lands.is-in .st-caps p:nth-child(4) { animation-delay: 720ms; }
}

/* Подписи внутри подиума: кромка становится цоколем с табличкой */
.st-plinth { display: block; height: auto; padding: 18px 12px 20px; }
.st-kit-info .st-plinth { padding: 12px; }
@media (max-width: 760px) { .st-plinth { padding: 12px 6px 14px; } }

/* Sentic: подпись по центру под своей пачкой (колонки подписей и пачек совпадают) */
.st-sentic .st-caps { text-align: center; }
.st-sentic .st-caps span { max-width: 26ch; margin: 0 auto; text-wrap: balance; }

/* ==========================================================================
   Полка с глубиной: перед передней кромкой видна столешница, предметы стоят на ней
   и отбрасывают контактную тень. Столешница — ::before плинта (полоса над линией света).
   ========================================================================== */
.st-plinth { position: relative; }
.st-ledge-lit::before {
  content: ''; position: absolute; left: 0; right: 0; top: -30px; height: 30px; pointer-events: none;
  /* к заднему краю столешница растворяется, у передней кромки теплеет — свет лежит на стекле */
  background:
    var(--cast, none),
    linear-gradient(to top, rgba(255, 246, 226, .2), rgba(255, 246, 226, .06) 60%, rgba(255, 246, 226, 0));
  /* лёгкий уход в перспективу: задний край уже переднего */
  clip-path: polygon(2.2% 0, 97.8% 0, 100% 100%, 0 100%);
}
/* предметы стоят на столешнице: поднимаем их над передней кромкой и ставим поверх неё */
.st-sentic-row, #stKitColors { padding-bottom: 5px; }
.st-sentic-row img, #stKitColors img { position: relative; z-index: 1; }
/* контактные тени: эллипсы в центрах колонок, по одному под предметом */
.st-sentic .st-plinth { --cast:
  radial-gradient(ellipse 10% 26% at 12.5% 84%, rgba(0, 0, 0, .65), transparent),
  radial-gradient(ellipse 10% 26% at 37.5% 84%, rgba(0, 0, 0, .65), transparent),
  radial-gradient(ellipse 10% 26% at 62.5% 84%, rgba(0, 0, 0, .65), transparent),
  radial-gradient(ellipse 10% 26% at 87.5% 84%, rgba(0, 0, 0, .65), transparent); }
.st-kit-info .st-plinth { --cast:
  radial-gradient(ellipse 10% 28% at 16.7% 84%, rgba(0, 0, 0, .6), transparent),
  radial-gradient(ellipse 10% 28% at 50% 84%, rgba(0, 0, 0, .6), transparent),
  radial-gradient(ellipse 10% 28% at 83.3% 84%, rgba(0, 0, 0, .6), transparent); }
@media (prefers-reduced-motion: no-preference) {
  /* столешница загорается вместе с линией света, когда ряд попал в экран */
  .st-lands .st-plinth::before { opacity: 0; transition: opacity 1.2s var(--st-ease) .15s; }
  .st-lands.is-in .st-plinth::before { opacity: 1; }
}
@media (max-width: 760px) { .st-ledge-lit::before { top: -22px; height: 22px; } .st-sentic-row, #stKitColors { padding-bottom: 4px; } .st-sentic-row img { width: 92%; } .st-kit-colors img { height: 120px; } }

/* Sensio: контактная тень под устройством на столешнице */
.st-device .st-ledge-lit { --cast: radial-gradient(ellipse 13% 26% at 50% 84%, rgba(0, 0, 0, .65), transparent); }

/* ==========================================================================
   Наведение на предметы в рядах (Sentic, цвета набора): предмет приподнимается,
   на столешнице под ним разгорается пятно света в его цвете, подпись в цоколе ярче,
   остальные предметы слегка приглушаются. Только для устройств с мышью.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .st-sentic-row img, #stKitColors img { transition: transform .5s var(--st-ease), filter .4s, opacity .4s; }
  .st-sentic-row img:hover, #stKitColors img:hover {
    transform: translateY(-10px) scale(1.04);
    filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .5));
  }
  .st-sentic-row:has(img:hover) img:not(:hover), #stKitColors:has(img:hover) img:not(:hover) { opacity: .55; filter: saturate(.7) drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); }

  /* пятно света на столешнице: позиция и цвет зависят от наведённой колонки */
  .st-sentic .st-plinth::after, .st-kit-info .st-plinth::after {
    content: ''; position: absolute; left: var(--gx, 50%); top: -42px; width: 34%; height: 46px; pointer-events: none;
    transform: translateX(-50%) scaleX(.6);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--gc, #fff6e2) 90%, #fff6e2 10%), color-mix(in srgb, var(--gc, #fff6e2) 42%, transparent) 55%, transparent);
    opacity: 0; transition: opacity .35s var(--st-ease), transform .5s var(--st-ease), left .4s var(--st-ease);
  }
  .st-sentic:has(.st-sentic-row img:hover) .st-plinth::after, .st-kit-info:has(#stKitColors img:hover) .st-plinth::after { opacity: 1; transform: translateX(-50%) scaleX(1); }
  .st-sentic:has(.st-sentic-row img:nth-child(1):hover) { --gx: 12.5%; --gc: #b8793f; }
  .st-sentic:has(.st-sentic-row img:nth-child(2):hover) { --gx: 37.5%; --gc: #f29a45; }
  .st-sentic:has(.st-sentic-row img:nth-child(3):hover) { --gx: 62.5%; --gc: #6d68b8; }
  .st-sentic:has(.st-sentic-row img:nth-child(4):hover) { --gx: 87.5%; --gc: #2fb0e0; }
  .st-kit-info:has(#stKitColors img:nth-child(1):hover) { --gx: 16.7%; --gc: #8f5bd6; }
  .st-kit-info:has(#stKitColors img:nth-child(2):hover) { --gx: 50%; --gc: #e0473f; }
  .st-kit-info:has(#stKitColors img:nth-child(3):hover) { --gx: 83.3%; --gc: #e07a94; }

  /* подпись в цоколе: наведённая ярче, остальные приглушены */
  .st-caps p { transition: opacity .35s, transform .45s var(--st-ease); }
  .st-sentic:has(.st-sentic-row img:hover) .st-caps p { opacity: .45; }
  .st-sentic:has(.st-sentic-row img:nth-child(1):hover) .st-caps p:nth-child(1),
  .st-sentic:has(.st-sentic-row img:nth-child(2):hover) .st-caps p:nth-child(2),
  .st-sentic:has(.st-sentic-row img:nth-child(3):hover) .st-caps p:nth-child(3),
  .st-sentic:has(.st-sentic-row img:nth-child(4):hover) .st-caps p:nth-child(4) { opacity: 1; transform: translateY(-2px); }
  .st-kit-info:has(#stKitColors img:hover) .st-caps p { opacity: .45; }
  .st-kit-info:has(#stKitColors img:nth-child(1):hover) .st-caps p:nth-child(1),
  .st-kit-info:has(#stKitColors img:nth-child(2):hover) .st-caps p:nth-child(2),
  .st-kit-info:has(#stKitColors img:nth-child(3):hover) .st-caps p:nth-child(3) { opacity: 1; transform: translateY(-2px); }
}