/* ==========================================================================
   Arquillena — лендинг коллагенового желе
   Брейкпоинты: десктоп > 1024 · планшет 601–1024 · мобильный ≤ 600 (макет 390)
   ========================================================================== */

:root {
  /* Бренд */
  --ink: #1E2326;
  --ink-soft: #4E5357;
  --ink-mute: #7A7F83;
  --cream: #FBF8F5;
  --sand: #F2ECE6;
  --line: #E7DDD6;
  /* Бренд: пыльная слива. Цвет несут только вкусы */
  --brand: #5E4A5C;
  --brand-deep: #413440;
  --brand-soft: #EEECEE;
  --brand-on-dark: #E2DFE1;
  --brand-g1: #725A70;
  --brand-g2: #3F313D;
  --radius-img: 28px;

  /* Текущий вкус (переписывается из JS) */
  --accent: #4A8226;
  --accent-deep: #3F7420;
  --tint: #EEF3E4;
  --cube: #8BC34A;

  /* Типографика */
  --f-body: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Montserrat', 'Onest', system-ui, sans-serif;
  --f-serif: 'Montserrat', 'Onest', system-ui, sans-serif;

  /* Ритм */
  --gutter: 32px;
  --radius-l: 40px;
  --radius-m: 20px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* Запасные палитры: чтобы переключить, задайте <html data-theme="mocha"> или "graphite" */
:root[data-theme="graphite-warm"] {
  --brand: #3D3935;
  --brand-deep: #2A2724;
  --brand-soft: #EEEAE5;
  --brand-on-dark: #DDD7D0;
  --brand-g1: #4D4843;
  --brand-g2: #262321;
}
:root[data-theme="mocha"] {
  --brand: #6B5344;
  --brand-deep: #4A382D;
  --brand-soft: #EFE5DA;
  --brand-on-dark: #EADDD0;
  --brand-g1: #86695A;
  --brand-g2: #4A382D;
}
:root[data-theme="graphite"] {
  --brand: #3A3633;
  --brand-deep: #24211F;
  --brand-soft: #ECE6DE;
  --brand-on-dark: #D9D1C7;
  --brand-g1: #4A4541;
  --brand-g2: #221F1D;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .6s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s;
}
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease-out); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); }
.btn:hover svg { transform: translateX(4px); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn--sm { min-height: 44px; padding: 0 22px; font-size: 15px; }
.btn--accent { background: var(--accent); }

/* ---------- Шапка ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--cream) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 76px;
}
.header__logo img { height: 34px; width: auto; }
.header__nav {
  display: flex;
  gap: 28px;
  margin: 0 auto;
  font-size: 15px;
  font-weight: 500;
}
.header__nav a {
  position: relative;
  padding: 8px 0;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .2s;
}
.header__nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out), background-color .6s;
}
.header__nav a:hover { color: var(--ink); }
.header__nav a:hover::after { transform: scaleX(1); }
.header__cta { background: var(--brand); }
.header__burger {
  display: none;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: #fff;
  cursor: pointer;
  position: relative;
}
.header__burger span {
  position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease-out), top .3s var(--ease-out);
}
.header__burger span:first-child { top: 17px; }
.header__burger span:last-child { top: 25px; }
.header__burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.header__burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* ==========================================================================
   Первый экран
   ========================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(60% 70% at 85% 30%, var(--tint) 0%, transparent 70%),
    var(--cream);
  transition: background-color .8s var(--ease-out);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-areas:
    "text   stage"
    "picker stage"
    "buy    stage";
  grid-template-rows: auto auto 1fr;
  column-gap: 56px;
  padding-top: 32px;
  padding-bottom: 48px;
}

/* Текст */
.hero__text { grid-area: text; padding-top: 24px; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
.hero__eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  transition: background-color .6s, box-shadow .6s;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); } }

.hero__title {
  margin: 24px 0 0;
  font-weight: 400;
  font-size: clamp(28px, 2.9vw, 44px);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.t-bold {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.t-serif {
  font-family: var(--f-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 1.08em;
  color: var(--accent-deep);
  transition: color .6s var(--ease-out);
}
.hero__lead {
  max-width: 440px;
  margin: 22px 0 0;
  font-size: 18px;
  color: var(--ink-soft);
}

/* ---------- Сцена с банкой ---------- */
.hero__stage {
  --mx: 0;
  --my: 0;
  /* Геометрия сцены: слово над плашкой с отступом 40 px, банка выходит за верх плашки,
     крышка слегка заходит на слово. --wf подгоняется скриптом под ширину сцены */
  --jw: clamp(260px, 29vw, 400px);   /* размер банки */
  --jb: 48px;                         /* отступ банки от низа плашки */
  --wf: 108px;                        /* кегль слова-вкуса (итоговый, из JS) */
  --word-top: 16px;
  --panel-top: calc(var(--word-top) + var(--wf) + 40px);
  --jar-top: calc(var(--panel-top) - var(--jw) * .08 - 28px);
  grid-area: stage;
  position: relative;
  height: calc(var(--jar-top) + var(--jw) + var(--jb));
  align-self: end;
  margin-top: 8px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.stage__panel {
  position: absolute;
  inset: var(--panel-top) 0 0 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  z-index: 0;
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--accent-deep) 70%, transparent);
  transition: box-shadow .8s;
}
.panel__layer {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 90% at 50% 25%, rgba(255,255,255,.22) 0%, transparent 60%),
    linear-gradient(160deg, var(--g1) 0%, var(--g2) 100%);
}
.panel__layer.is-revealing {
  clip-path: circle(0% at var(--ox, 50%) var(--oy, 50%));
  animation: reveal .9s var(--ease-out) forwards;
}
@keyframes reveal { to { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); } }

/* Огромное слово-вкус */
.stage__word {
  position: absolute;
  left: 0; right: 0;
  top: var(--word-top);
  z-index: 1;
  display: flex;
  justify-content: center;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--wf);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.03em;
  color: color-mix(in srgb, var(--accent) 18%, transparent);
  transition: color .6s;
  overflow: hidden;
  padding: 0;
  white-space: nowrap;
  translate: calc(var(--mx) * -10px) 0;
  pointer-events: none;
}
.stage__word span { display: inline-block; }

.stage__badge {
  position: absolute;
  z-index: 4;
  left: 24px;
  top: calc(var(--panel-top) + 20px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Банка */
.stage__jar {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: var(--jar-top);
  width: var(--jw);
  height: var(--jw);
  margin-left: calc(var(--jw) / -2);
  translate: calc(var(--mx) * 14px) calc(var(--my) * 10px);
  transition: translate .4s var(--ease-out);
}
.jar__float { width: 100%; height: 100%; animation: float 6s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}
.jar__slot { position: relative; width: 100%; height: 100%; }
.jar__slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.28));
  will-change: transform, opacity;
}
.jar__shadow {
  position: absolute;
  left: 18%; right: 18%; bottom: -4%;
  height: 7%;
  border-radius: 50%;
  background: rgba(0,0,0,.28);
  filter: blur(12px);
  animation: shadow 6s ease-in-out infinite;
  z-index: -1;
}
@keyframes shadow { 50% { transform: scaleX(.86); opacity: .7; } }

/* Желейные кубики */
.cube {
  --d: 1;
  position: absolute;
  z-index: 2;
  overflow: visible;
  translate: calc(var(--mx) * var(--d) * 12px) calc(var(--my) * var(--d) * 12px);
  transition: translate .5s var(--ease-out);
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.18));
}
.cube__body { fill: var(--cube); fill-opacity: .88; transition: fill .7s var(--ease-out); }
.cube__shine { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 4; stroke-linecap: round; }
.cube__shade { fill: rgba(0,0,0,.12); }
.cube--1 { --d: 1.6; width: 64px; left: 14%; top: 14%; animation: bob 7s ease-in-out infinite; }
.cube--2 { --d: -1.2; width: 46px; right: 18%; top: 6%; animation: bob 5.5s ease-in-out -2s infinite; }
.cube--3 { --d: 2.2; width: 78px; right: 6%; bottom: 20%; z-index: 4; animation: bob 8s ease-in-out -4s infinite; }
.cube--4 { --d: -.8; width: 40px; left: 7%; bottom: 30%; z-index: 4; animation: bob 6.5s ease-in-out -1s infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-16px) rotate(10deg); }
}

/* Плашки-факты */
.stage__chips { list-style: none; margin: 0; padding: 0; }
.chip {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.35);
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  translate: calc(var(--mx) * var(--d, 1) * 8px) calc(var(--my) * var(--d, 1) * 8px);
  transition: translate .5s var(--ease-out);
}
.chip b { display: block; font-weight: 700; font-size: 15px; }
.chip small { color: var(--ink-mute); font-size: 12px; }
.chip__icon {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  color: var(--accent-deep);
  font-weight: 700;
  font-size: 13px;
}
.chip--1 { --d: 1.4; left: 2%; top: 44%; }
.chip--2 { --d: -1.1; right: 2%; top: 54%; }
.chip--3 { --d: .9; left: 6%; bottom: 7%; }

/* Стрелки */
.stage__arrow {
  position: absolute;
  z-index: 6;
  bottom: 24px;
  width: 48px; height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .2s, transform .2s var(--ease-out);
}
.stage__arrow:hover { background: rgba(255,255,255,.34); transform: scale(1.06); }
.stage__arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.stage__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stage__arrow--prev { right: 84px; }
.stage__arrow--next { right: 24px; }

/* ---------- Выбор вкуса ---------- */
.hero__picker { grid-area: picker; margin-top: 36px; }
.picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.picker__item {
  --p: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px 10px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  transition: background-color .3s;
}
.picker__item:hover { background: var(--sand); }
.picker__item:focus-visible { outline: 3px solid var(--accent); outline-offset: 0; }
.picker__item[aria-selected="true"] { background: color-mix(in srgb, var(--fc) 10%, #fff); }
.picker__thumb {
  position: relative;
  width: 56px; height: 56px;
}
.picker__thumb img {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  transition: transform .4s var(--ease-spring);
}
.picker__item:hover .picker__thumb img,
.picker__item[aria-selected="true"] .picker__thumb img { transform: scale(1.08); }
.picker__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.picker__ring circle { fill: none; stroke-width: 3; }
.picker__ring .bg { stroke: var(--line); }
.picker__ring .fg {
  stroke: var(--fc);
  stroke-linecap: round;
  stroke-dasharray: 163.4;
  stroke-dashoffset: calc(163.4 * (1 - var(--p)));
  opacity: 0;
  transition: opacity .3s;
}
.picker__item[aria-selected="true"] .fg { opacity: 1; }
.picker__name { font-weight: 600; font-size: 15px; line-height: 1.2; }
.picker__line { font-size: 12px; color: var(--ink-mute); line-height: 1.2; }

/* ---------- Покупка ---------- */
.hero__buy {
  grid-area: buy;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "info    price"
    "actions actions";
  align-items: center;
  gap: 16px 20px;
  margin-top: 20px;
  padding: 20px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.buy__info { grid-area: info; padding-left: 4px; }
.buy__name { font-weight: 600; font-size: 17px; line-height: 1.3; }
.buy__meta { font-size: 14px; color: var(--ink-mute); }
.buy__price {
  grid-area: price;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.buy__actions { grid-area: actions; display: flex; gap: 10px; }
.buy__actions .btn { flex: 1 1 auto; }


/* ---------- Бегущая лента ---------- */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.ticker__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 28px;
  padding: 18px 0;
  animation: ticker 36s linear infinite;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.ticker__track i { font-style: normal; color: var(--accent); transition: color .6s; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

.placeholder { padding: 80px var(--gutter); color: var(--ink-mute); text-align: center; }

/* ==========================================================================
   Планшет: 601–1024
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --gutter: 28px; }

  .header__nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--cream);
    box-shadow: 0 20px 30px -20px rgba(0,0,0,.2);
    font-size: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s, transform .25s var(--ease-out), visibility .25s;
  }
  .header__nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .header__nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .header__nav a::after { display: none; }
  .header__cta { margin-left: auto; }
  .header__burger { display: block; }

  .hero__inner { column-gap: 32px; padding-top: 16px; }
  .hero__text { padding-top: 8px; }
  .hero__stage { --jw: clamp(240px, 31vw, 320px); --jb: 40px; }
  .picker__thumb { width: 50px; height: 50px; }
}

/* Планшет в портрете: 601–899 — всё в одну колонку */
@media (max-width: 899px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "text"
      "stage"
      "picker"
      "buy";
    grid-template-rows: none;
  }
  .hero__title { font-size: clamp(32px, 5.6vw, 48px); }
  .hero__lead { max-width: 560px; }
  .hero__stage { --jw: clamp(260px, 46vw, 360px); --jb: 36px; margin-top: 12px; }
  .chip--1 { left: auto; right: 2%; top: 30%; }
  .chip--2 { top: auto; right: auto; left: 20px; bottom: 20px; }
  .chip--3 { left: 4%; top: 46%; bottom: auto; }
  .cube--1 { left: 8%; top: 26%; }
  .cube--3 { bottom: 30%; }
  .hero__picker { margin-top: 20px; }
}

/* ==========================================================================
   Мобильный: ≤ 600 (макет 390)
   ========================================================================== */
@media (max-width: 600px) {
  :root { --gutter: 20px; --radius-l: 28px; }
  body { font-size: 16px; }

  .header__inner { height: 64px; gap: 12px; }
  .header__logo img { height: 26px; }
  .header__cta { min-height: 40px; padding: 0 16px; font-size: 14px; }

  .hero__eyebrow { font-size: 12px; padding: 6px 12px 6px 10px; }
  .hero__title { margin-top: 18px; font-size: clamp(28px, 8vw, 36px); }
  .br-desk { display: none; }
  .hero__lead { font-size: 16px; margin-top: 14px; }

  .hero__stage { --jw: 256px; --jb: 18px; --word-top: 8px; margin-top: 8px; }
  .stage__badge { left: 14px; top: calc(var(--panel-top) + 14px); font-size: 11px; padding: 6px 10px; }
  .cube--1 { width: 40px; left: 6%; top: 26%; }
  .cube--2 { width: 28px; right: 30%; top: 2%; }
  .cube--3 { width: 44px; right: 6%; bottom: 34%; }
  .cube--4 { display: none; }

  .chip { padding: 7px 12px 7px 7px; gap: 8px; font-size: 12px; border-radius: 12px; }
  .chip b { font-size: 13px; }
  .chip small { font-size: 11px; }
  .chip__icon { flex-basis: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
  .chip--1 { left: auto; right: 0; top: 30%; }
  .chip--2 { top: auto; right: auto; left: 12px; bottom: 14px; }
  .chip--3 { display: none; }

  .stage__arrow { width: 40px; height: 40px; bottom: 14px; }
  .stage__arrow--prev { right: 60px; }
  .stage__arrow--next { right: 12px; }

  .picker { gap: 2px; padding: 4px; border-radius: 20px; }
  .picker__item { padding: 10px 2px 8px; border-radius: 16px; }
  .picker__thumb { width: 50px; height: 50px; }
  .picker__name { font-size: 13px; }
  .picker__line { font-size: 11px; }

  .hero__buy { padding: 16px; gap: 14px 12px; }
  .buy__price { font-size: 22px; }

  .ticker__track { font-size: 15px; gap: 20px; padding: 14px 0; }
}

/* ---------- Меньше движения ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ticker__track { animation: none; }
}