/* ============================================================
   ШАРПЕЙ — франшиза с любовью
   Премиальный минимализм: ivory, шоколад, графит, кожа
   ============================================================ */

:root{
  --ivory:      #F7F2E9;
  --ivory-2:    #EFE7D9;
  --ivory-3:    #E6DBC8;
  --chocolate:  #2B1E16;
  --graphite:   #34322E;
  --cognac:     #A5643A;
  --caramel:    #C08B52;
  --tobacco:    #6E4B2E;
  --burgundy:   #6E1F2B;
  --ink:        #2B1E16;
  --ink-60:     rgba(43,30,22,.62);
  /* Для мелких подписей: на ivory даёт контраст 6:1, тогда как прежний
     --ink-40 давал 2.5:1 — ниже порога WCAG даже для крупного текста. */
  --ink-70:     rgba(43,30,22,.72);
  --ink-40:     rgba(43,30,22,.42);
  --line:       rgba(43,30,22,.14);
  --line-soft:  rgba(43,30,22,.08);

  --serif: "Playfair Display", "PT Serif", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1320px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.65,.05,.36,1);
}

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

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

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* тёплая бумажная текстура фона */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(192,139,82,.10), transparent 60%),
    radial-gradient(90% 70% at 92% 100%, rgba(110,31,43,.06), transparent 62%);
}

img,video,svg{ display:block; max-width:100%; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.015em;
  line-height:1.02;
  margin:0;
}
p{ margin:0 0 1.1em; }
em{ font-style:italic; }

::selection{ background:var(--caramel); color:#fff; }

/* ── курсор ───────────────────────────────────────── */
.cursor{
  position:fixed; top:0; left:0; z-index:200;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid rgba(43,30,22,.38);
  border-radius:50%;
  pointer-events:none; opacity:0;
  transition:opacity .3s, width .35s var(--ease), height .35s var(--ease),
             margin .35s var(--ease), background-color .35s, border-color .35s;
  mix-blend-mode:multiply;
}
.cursor i{
  position:absolute; inset:0; margin:auto;
  width:4px; height:4px; border-radius:50%;
  background:var(--chocolate);
  transition:opacity .3s;
}
.cursor.is-on{ opacity:1; }
.cursor.is-hot{
  width:74px; height:74px; margin:-37px 0 0 -37px;
  background:rgba(192,139,82,.14);
  border-color:transparent;
}
.cursor.is-hot i{ opacity:0; }

/* ── навигация ────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:clamp(16px,4vw,54px);
  /* 12px, а не 18: на ноутбуке 1366×768 шапка отъедала высоту у первого
     экрана и подходила к надчерку вплотную (зазор был 11 px). */
  padding:12px var(--gutter);
  transition:background-color .5s var(--ease), backdrop-filter .5s, padding .5s var(--ease),
             box-shadow .5s;
}
.nav.is-stuck{
  background:rgba(247,242,233,.82);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  padding-top:12px; padding-bottom:12px;
  box-shadow:0 1px 0 var(--line-soft);
}

.brand{
  display:flex; align-items:center;
  text-decoration:none; margin-right:auto;
}
/* Логотип бренда с sharpeyshop.ru. Ширина задана в CSS, а width/height
   в разметке — чтобы браузер зарезервировал место и шапка не дёргалась. */
.brand__logo{
  display:block; height:auto;
  width:clamp(160px,16vw,210px);
}

/* Телефон и кнопка держатся вместе: по отдельности кнопка выглядела
   отдельным плавающим элементом в правом углу. */
.nav__actions{
  display:flex; align-items:center; gap:clamp(12px,1.6vw,22px);
}
.nav__phone{
  color:var(--chocolate); text-decoration:none;
  font-size:15px; letter-spacing:.04em; white-space:nowrap;
  transition:color .35s;
}
.nav__phone:hover{ color:var(--cognac); }

/* ── кнопки ───────────────────────────────────────── */
.btn{
  --bg:var(--chocolate);
  position:relative; overflow:hidden;
  /* Обязательно: делает кнопку контекстом наложения, и заливка ::before
     с z-index:-1 ложится поверх фона кнопки, но ПОД её подпись. Без этого
     позиционированный ::before рисуется после строчного текста и при
     наведении закрашивал подпись — кнопка становилась пустым прямоугольником. */
  isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 34px; border:0; cursor:pointer;
  background:var(--bg); color:var(--ivory);
  font-family:var(--sans); font-size:13px;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; border-radius:2px;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), color .4s;
  box-shadow:0 10px 26px -18px rgba(43,30,22,.9);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,var(--tobacco),var(--cognac));
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -20px rgba(43,30,22,.85); }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:translateY(0); }
.btn--sm{ padding:11px 22px; font-size:11px; }
.btn--ghost{
  background:transparent; color:var(--chocolate);
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn--ghost:hover{ color:var(--ivory); }

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

/* ── общие мелочи ─────────────────────────────────── */
.eyebrow{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  /* табак вместо коньяка: 6.9:1 против 4.2:1 на ivory */
  color:var(--tobacco); margin:0 0 22px;
}
/* Декоративная чёрточка перед надчерком убрана: смысла не несла, а текст
   из-за неё начинался на 26+12 px правее заголовка — единственный элемент
   левой колонки, выпадавший из общей вертикали. */
/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  /* Верхний отступ обязан быть больше высоты фиксированной шапки (~96 px),
     иначе на 768-пиксельном ноутбуке надчерк подъезжает к логотипу вплотную. */
  padding:clamp(108px,12vh,132px) var(--gutter) clamp(56px,7vh,80px);
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(65% 55% at 50% 42%, rgba(230,219,200,.9), transparent 70%),
    linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%);
}

/* тёплое пятно света — идёт за курсором и просвечивает
   сквозь белый фон видео благодаря multiply */
.hero__spot{
  position:absolute; top:0; left:0; z-index:0;
  width:min(70vw,720px); aspect-ratio:1;
  margin:-35vw 0 0 -35vw;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(199,142,79,.30), rgba(199,142,79,0) 72%);
  will-change:transform; pointer-events:none;
  opacity:0; transition:opacity 1.2s var(--ease) .4s;
}
.hero.is-ready .hero__spot{ opacity:1; }

/* Вертикальные метки по краям убраны: 10 px в вертикальной строке никто не
   читает, а внимание от оффера они оттягивали. */

/* без z-index: иначе блок стал бы границей изоляции
   и mix-blend-mode видео «не увидел» бы фон первого экрана */
.hero__content{
  position:relative;
  max-width:var(--maxw); width:100%; margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  grid-template-areas:
    "head stage"
    "body stage";
  align-content:center; align-items:start;
  column-gap:clamp(24px,4vw,72px);
}
.hero__head{ grid-area:head; align-self:end; }
.hero__body{ grid-area:body; padding-top:clamp(20px,3vh,36px); }

.hero h1{
  position:relative; z-index:2;
  font-size:clamp(38px,5.6vw,88px);
  line-height:.94;
  margin:0;
  mix-blend-mode:multiply;
}
.hero h1 .line{
  display:block; overflow:hidden;
  padding-bottom:.08em; margin-bottom:-.08em;
}
.hero h1 .line i{ display:block; font-style:normal; }
/* Вторая строка — контуром, как «выбитая» на коже. Чистый контур в 1 px
   терялся, поэтому линия толще, а внутрь добавлена лёгкая заливка: буквы
   читаются как слово, а не как орнамент. */
.hero h1 .line--out i{
  color:rgba(110,75,46,.16);
  -webkit-text-stroke:1.6px var(--tobacco);
  font-style:italic;
}

/* — вступительная анимация первого экрана — */
.js .anim,.js .anim-up,.js .anim-media{ opacity:0; }
.hero.is-ready .anim{
  animation:fadeUp 1.1s var(--ease) both; animation-delay:var(--d,0s);
}
.hero.is-ready .anim-up{
  animation:riseIn 1.25s var(--ease-soft) both; animation-delay:var(--d,0s);
}
.hero.is-ready .anim-media{
  animation:mediaIn 1.6s var(--ease) both; animation-delay:var(--d,0s);
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
@keyframes riseIn{
  from{ opacity:0; transform:translateY(105%); }
  to{ opacity:1; transform:none; }
}
/* анимируется само видео, а не рамка: transform на рамке
   разорвал бы её mix-blend-mode с фоном */
@keyframes mediaIn{
  from{ opacity:0; transform:translate(-58.8%,-92.7%) scale(1.06); }
  to{ opacity:1; transform:translate(-58.8%,-94.7%) scale(1); }
}

/* без perspective: свойство создаёт 3D-контекст и изолирует
   mix-blend-mode видео — перспектива задаётся внутри transform в app.js */
.hero__stage{
  grid-area:stage; position:relative;
  display:flex; flex-direction:column; align-items:center;
  align-self:center;
}
.hero__glow{
  position:absolute; z-index:0; top:46%; left:50%;
  width:min(64vw,660px); height:min(58vh,560px);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(192,139,82,.32), rgba(192,139,82,0) 74%);
  filter:blur(16px);
}
/* Видео вписано в фон: белый кадр «умножается» на ivory и исчезает.
   Собака в кадре стоит на месте (лапы на y≈94.7%, центр по x≈58.8%),
   а голова поднимается и опускается — поэтому привязываем кадр
   по лапам, и подъём головы остаётся видимым движением. */
.hero__media{
  position:relative; z-index:1; margin:0;
  height:clamp(280px,60vh,620px);
  aspect-ratio:.9 / 1;
  width:auto; max-width:100%;
  overflow:hidden;
  mix-blend-mode:multiply;
  will-change:transform;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.hero__media video{
  position:absolute; top:96%; left:50%;
  height:104%; width:auto; max-width:none;
  transform-origin:58.8% 94.7%;
  transform:translate(-58.8%,-94.7%);
  /* brightness добивает фон кадра до чистого белого, чтобы
     после multiply не было видно границ прямоугольника */
  filter:brightness(1.07) saturate(.96) contrast(1.05);
}
/* мягкая тень под лапами */
.hero__media::after{
  content:""; position:absolute;
  left:50%; bottom:2.5%; transform:translateX(-50%);
  width:52%; height:22px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(43,30,22,.20), transparent);
  filter:blur(8px);
}
.hero__grain{
  position:absolute; inset:0; opacity:.10; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.7) .5px, transparent .5px);
  background-size:3px 3px;
}
.hero__cap{
  position:relative; z-index:2;
  margin:6px 0 0; text-align:center;
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--tobacco);
}
.hero__lead{
  max-width:38ch; margin:0 0 36px;   /* 28 px читалось как «текст упирается в кнопку» */
  color:var(--ink-60); font-size:clamp(15px,1.15vw,17px);
}
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; }
/* Главное действие экрана — заметно крупнее прочих кнопок. */
.hero__actions .btn{ padding:19px 42px; font-size:14px; }
@media (min-width:821px){
  /* Телефон уже есть в шапке — на десктопе вторая кнопка только спорила
     с главным CTA. Ниже 821 px телефон из шапки скрыт, и кнопка нужна. */
  .btn--phone{ display:none; }
}

.hero__meta{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; padding:0 var(--gutter) 24px;
}
.hero__meta-l{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-70);
}
.hero__contacts{
  display:flex; align-items:center; gap:clamp(12px,2vw,26px);
  flex-wrap:wrap; justify-content:flex-end;
  font-style:normal;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-70);
}
.hero__contacts a{ color:var(--tobacco); text-decoration:none; transition:color .35s; }
.hero__contacts a:hover{ color:var(--chocolate); }
.hero__contacts-geo{ color:var(--ink-60); }

/* цифры в левой колонке */
.hero__facts{
  display:flex; gap:clamp(20px,3vw,46px);
  margin:clamp(20px,3vh,34px) 0 0; padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.hero__facts dt{
  font-family:var(--serif); font-size:clamp(24px,2vw,30px);
  line-height:1; color:var(--chocolate);
}
.hero__facts dd{
  margin:8px 0 0;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-70);
}

/* Марки, которые сеть возит с 2000 года. Строка намеренно тихая:
   это доказательство, а не заголовок. */
/* Сетка, а не строка с точками: при переносе разделитель всё равно оказывался
   в начале или в конце строки. Три колонки читаются как витрина марок. */
/* Бренды прижаты к цифрам и отделены от них только волоском: вместе они
   читаются как один блок доказательств, а не как два независимых списка. */
.hero__brands{
  display:grid; grid-template-columns:repeat(3,minmax(0,auto));
  justify-content:start; gap:9px clamp(16px,2.2vw,30px);
  margin:14px 0 0; padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-size:11px; letter-spacing:.12em; line-height:1.4;
  text-transform:uppercase; color:var(--ink-70);
}
.hero__brands span{ white-space:nowrap; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
/* Порог 900, а не 1040: на 1024×768 одна колонка уводила собаку под сгиб,
   хотя две колонки там ещё помещаются. */
@media (max-width:900px){
  /* Одна колонка в порядке продажи: заголовок → описание → CTA → цифры →
     собака. Раньше собака стояла между заголовком и кнопкой и отодвигала
     оффер за нижний край экрана. */
  .hero__content{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "body" "stage";
    text-align:center;
  }
  .hero__stage{ margin-top:clamp(24px,4vh,44px); }
  .hero__head{ align-self:auto; }
  .hero__lead{ margin-left:auto; margin-right:auto; }
  .hero__actions{ justify-content:center; }
  .hero__facts{ justify-content:center; }
  .hero__body{ padding-top:clamp(16px,2vh,26px); }
  .hero__media{ height:clamp(220px,31vh,340px); }
  .hero__glow{ width:min(80vw,440px); height:min(36vh,340px); }
  .hero__facts{ margin-top:clamp(20px,3vh,32px); padding-top:16px; }
  .hero__brands{ justify-content:center; }
}

@media (max-width:820px){
  .nav__phone{ display:none; }   /* телефон остаётся кнопкой в первом экране */
  .hero{
    min-height:0;
    padding:92px var(--gutter) 40px;
  }
  .hero__media{ height:clamp(240px,38vh,340px); }
  /* на узких экранах нижняя строка встаёт в поток, а не поверх кнопок */
  .hero__meta{
    position:static; padding:0; margin-top:38px;
    flex-direction:column; align-items:center; gap:14px;
  }
  .hero__contacts{ justify-content:center; }
  .hero__facts{ flex-wrap:wrap; justify-content:center; gap:14px 26px; }
  .cursor{ display:none; }
}
@media (max-width:560px){
  /* Логотип и кнопка в полный рост уже не встают в строку — ужимаем оба,
     иначе кнопка уезжает за правый край экрана. */
  .nav{ gap:12px; }
  .brand__logo{ width:118px; }
  .nav .btn--sm{ padding:10px 14px; font-size:10px; letter-spacing:.08em; }
}
@media (max-width:520px){
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .btn{ justify-content:center; }
  /* «SPIKES & SPARROW» в три колонки на телефоне уже не помещается */
  .hero__brands{ grid-template-columns:repeat(2,minmax(0,auto)); }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}