/* ============ База ============ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.2;          /* 120% для всего текста */
  letter-spacing: -.05em;    /* −5% для всего текста */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, textarea, button, select { letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: 100%; padding: 0 var(--page-x); }

/* ---------- Заголовки секций ---------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.2;
  letter-spacing: -.05em;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.section-title b { font-weight: 800; }

/* Подчёркивание «от руки» под выделенным словом */
.hl { position: relative; display: inline-block; font-weight: 800; white-space: nowrap; }
.hl svg {
  position: absolute; left: -4%; bottom: -.32em; width: 108%; height: .42em;
  overflow: visible; pointer-events: none;
}
.hl path {
  fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  transition: stroke-dashoffset 1.1s var(--ease-out) .35s, stroke var(--t-theme) ease;
}
.is-in .hl path, .hl.is-in path { stroke-dashoffset: 0; }

/* ---------- Кнопки ---------- */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 24px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 14px; letter-spacing: -.05em;
  transition: background-color .3s, color .3s, transform .3s var(--ease-out);
}
.btn-pill:active { transform: scale(.97); }
.btn-pill--light { background: #fff; color: var(--ink); }

.btn-accent {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 60px; padding: 8px 8px 8px 28px; border-radius: var(--r-pill);
  background: var(--accent-deep); color: #fff;
  font-weight: 700; font-size: 16px;
  transition: background-color var(--t-theme) ease, transform .3s var(--ease-out), opacity .3s;
}
.btn-accent:hover .btn-accent__arrow svg { transform: translateX(3px); }
.btn-accent:active { transform: scale(.98); }
.btn-accent:disabled { opacity: .45; cursor: not-allowed; }
.btn-accent--wide { width: 100%; }
.btn-accent__arrow {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: var(--accent-deep);
  transition: color var(--t-theme) ease;
}
.btn-accent__arrow svg { width: 20px; height: 20px; transition: transform .35s var(--ease-out); }

/* ---------- Крупный заголовок (hero + второй экран — один кегль) ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5.2vw, 72px);
  line-height: 1.2;
  letter-spacing: -.05em;
}

/* ---------- Переключатель «Для собак / Для кошек» ---------- */
.pet-switch {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: 5px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}
.pet-switch button {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 18px; border-radius: var(--r-pill);
  color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: color .45s ease;
}
.pet-switch button svg { width: 26px; height: 26px; flex: none; transition: transform .5s var(--ease-out); }
.pet-switch button[aria-checked="true"] { color: var(--ink); }
.pet-switch button[aria-checked="true"] svg { transform: rotate(-10deg) scale(1.1); }
/* неактивный вариант слегка «машет», чтобы было видно, что это кнопка */
.pet-switch button[aria-checked="false"] svg { animation: nudge 3.6s ease-in-out infinite 2s; }
@keyframes nudge { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-14deg); } 90% { transform: rotate(12deg); } 95% { transform: rotate(-6deg); } }
.pet-switch__knob {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
  border-radius: var(--r-pill); background: #fff;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .25);
  transition: transform .6s var(--ease-in-out);
}
body[data-pet="cat"] .pet-switch__knob { transform: translateX(100%); }

.pet-switch--light { background: #fff; box-shadow: inset 0 0 0 1px var(--line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pet-switch--light button { color: var(--ink-2); height: 40px; padding: 0 14px; font-size: 13px; }
.pet-switch--light button svg { width: 22px; height: 22px; }
.pet-switch--light button[aria-checked="true"] { color: #fff; }
.pet-switch--light .pet-switch__knob { background: var(--accent); transition: transform .6s var(--ease-in-out), background-color var(--t-theme); }

/* ---------- Летающая еда с ощущением глубины ---------- */
.floats { position: absolute; inset: 0; pointer-events: none; }
.float { position: absolute; height: auto; will-change: transform; animation: drift var(--dur, 7s) ease-in-out infinite var(--delay, 0s); }
.f-far  { opacity: .55; --amp: 8px; }
.f-mid  { --amp: 14px; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .14)); }
.f-near { --amp: 22px; opacity: .95; }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r0, 0deg)); }
  33% { transform: translate3d(calc(var(--amp) * .4), calc(var(--amp) * -1), 0) rotate(calc(var(--r0, 0deg) + 6deg)); }
  66% { transform: translate3d(calc(var(--amp) * -.3), calc(var(--amp) * .5), 0) rotate(calc(var(--r0, 0deg) - 4deg)); }
}

/* ---------- Поле с «плавающим» лейблом ---------- */
.field { position: relative; }
.field input {
  width: 100%; height: 64px; padding: 26px 20px 8px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: #fff; color: var(--ink);
  font: 600 16px/1 var(--font-body);
  transition: border-color .25s, box-shadow .25s;
  -moz-appearance: textfield;
}
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field label {
  position: absolute; left: 21px; top: 50%; transform: translateY(-50%);
  color: var(--ink-3); font-size: 15px; font-weight: 500; pointer-events: none;
  transform-origin: left center;
  transition: transform .25s var(--ease-out), color .25s;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  transform: translateY(-112%) scale(.78);
  color: var(--ink-2);
}

/* ---------- Появление при скролле ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ease-out) var(--d, 0s), transform .9s var(--ease-out) var(--d, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Выпадающий список с поиском (порода) ---------- */
.combo {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none; text-align: left;
  background: #fff; border-radius: var(--r-md);
  box-shadow: 0 20px 50px -18px rgba(35, 48, 30, .35), 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .25s var(--ease-out), visibility 0s .25s;
}
.combo.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.combo li { padding: 11px 14px; border-radius: 12px; font-size: 15px; font-weight: 500; cursor: pointer; }
.combo li:hover, .combo li.is-active { background: var(--accent-soft); }
.combo__custom { color: var(--accent-deep); font-weight: 700 !important; }