/* ============================================================
   00-base.css · Студия красивых собак — v3
   Токены, сброс, контейнер, кнопки, утилиты, кастомный курсор,
   scroll-reveal, маркиза, блобы. ОБЩЕЕ ДЛЯ ВСЕХ АГЕНТОВ.
   Не переопределять эти классы в файлах агентов.
   ============================================================ */

:root{
  /* — цвета — */
  --ink:#1E2A26; --ink-soft:#2C3E35;
  --sage:#56766F; --sage-deep:#3A544D; --sage-soft:#E7EEEB; --sage-mist:#F1F5F3;
  --cream:#FBF7F0; --sand:#F3EADB; --sand-deep:#EADFC9;
  --gold:#E3A857; --gold-soft:#F6E4C4; --gold-deep:#C98F3F; --terra:#C97B5A;
  --white:#ffffff; --muted:#6E807A; --line:#E6E0D5;

  /* высота фикс-шапки (блок из v2) — для scroll-padding и hero */
  --header-h:84px;

  /* — типографика — */
  --font-display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* — геометрия — */
  --maxw:1240px; --pad:24px;
  --r-sm:14px; --r:22px; --r-lg:34px; --r-xl:46px; --r-pill:999px;

  /* — тени — */
  --sh-sm:0 2px 10px rgba(40,55,48,.06);
  --sh:0 14px 36px -14px rgba(40,55,48,.20);
  --sh-lg:0 36px 80px -28px rgba(40,55,48,.34);
  --sh-gold:0 16px 40px -14px rgba(227,168,87,.5);

  /* — изинги/тайминги — */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t:.4s var(--ease);
}

/* ───────── сброс ───────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--header-h) + 12px)}
/* v2-секции: возвращаем им «родной» дисплей-шрифт Unbounded */
.v2blk{--font-display:'Unbounded','Manrope',system-ui,sans-serif}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink-soft);
  background:var(--cream);
  line-height:1.65;
  font-size:clamp(15px,.5vw + 14px,17px);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
img{font-style:italic;color:var(--muted)} /* alt-текст до загрузки */
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--sage);outline-offset:3px;border-radius:4px}
::selection{background:var(--sage);color:#fff}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:560;
  line-height:1.06;
  letter-spacing:-.012em;
  color:var(--ink);
  font-optical-sizing:auto;
  text-wrap:balance;
}

/* ───────── контейнер / секции ───────── */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(64px,9vw,128px);position:relative;overflow-x:clip}
.section--tight{padding-block:clamp(48px,6vw,84px)}
.bg-cream{background:var(--cream)} .bg-sand{background:var(--sand)}
.bg-mist{background:var(--sage-mist)} .bg-sage-soft{background:var(--sage-soft)}
.bg-ink{background:var(--ink);color:#E9EFEC}

/* ───────── эйбрау / акценты ───────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-body);font-weight:700;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sage);
}
.eyebrow::before{
  content:"";width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--sage),var(--gold));
}
.eyebrow.is-center::after{
  content:"";width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--sage));
}
.accent-italic{font-style:italic;font-weight:440;color:var(--sage)}
.accent-gold{color:var(--gold)}
/* подчёркивание-«мазок» под словом: <span class="brush">слово</span> */
.brush{position:relative;white-space:nowrap}
.brush::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:.02em;height:.34em;
  background:var(--gold-soft);z-index:-1;border-radius:.3em;transform:rotate(-1deg);
}

.lead{font-size:clamp(1.05rem,.6vw + 1rem,1.28rem);color:var(--ink-soft);line-height:1.6}
.muted{color:var(--muted)}

/* ───────── кнопки ───────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.92em 1.65em;border-radius:var(--r-pill);
  font-family:var(--font-body);font-weight:700;font-size:1rem;line-height:1;
  letter-spacing:.005em;white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  will-change:transform;
}
.btn i,.btn svg{font-size:1.05em;transition:transform .35s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.99)}
/* блик-sweep */
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  transform:translateX(-130%);transition:transform .7s var(--ease);
}
.btn:hover::after{transform:translateX(130%)}

.btn-primary{background:var(--sage);color:#fff;box-shadow:var(--sh)}
.btn-primary:hover{background:var(--sage-deep);box-shadow:var(--sh-lg)}
.btn-gold{background:var(--gold);color:#3a2a12;box-shadow:var(--sh-gold)}
.btn-gold:hover{background:#d99a45;box-shadow:0 22px 52px -16px rgba(227,168,87,.65)}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--sage),var(--sh)}
.btn-outline{background:transparent;color:var(--sage);box-shadow:inset 0 0 0 1.6px var(--sage)}
.btn-outline:hover{background:var(--sage);color:#fff}
.btn-light{background:#fff;color:var(--ink);box-shadow:var(--sh)}
.btn-light:hover{background:var(--cream)}
.btn-lg{padding:1.05em 2em;font-size:1.06rem}
.btn-sm{padding:.7em 1.2em;font-size:.9rem}
.btn:hover i.fa-arrow-right,.btn:hover i.fa-arrow-right-long{transform:translateX(4px)}

/* пилюли/чипы */
.chip{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.5em .95em;border-radius:var(--r-pill);
  background:#fff;box-shadow:var(--sh-sm);
  font-size:.86rem;font-weight:600;color:var(--ink-soft);
}
.chip i{color:var(--sage)}

/* ───────── scroll-reveal ───────── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .85s var(--ease), transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-reveal-delay="1"]{transition-delay:.09s}
.reveal[data-reveal-delay="2"]{transition-delay:.18s}
.reveal[data-reveal-delay="3"]{transition-delay:.27s}
.reveal[data-reveal-delay="4"]{transition-delay:.36s}
.reveal[data-reveal-delay="5"]{transition-delay:.45s}
.reveal[data-reveal-delay="6"]{transition-delay:.54s}

/* ───────── маркиза (бесконечная лента) ───────── */
.marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;will-change:transform;animation:sks-marquee var(--mrq-dur,34s) linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes sks-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ───────── органичные блобы (декор) ───────── */
.blob{position:absolute;z-index:0;pointer-events:none;filter:blur(2px);opacity:.5}
.deco{position:absolute;z-index:0;pointer-events:none}

/* ───────── кастомный курсор — ЛАПКА (десктоп, pointer:fine) ───────── */
.sks-cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;
  width:33px;height:33px;color:var(--sage);
  --paw-rot:-20deg;   /* наклон против часовой — лапка «идёт», а не стоит столбом */
  transition:width .25s var(--ease), height .25s var(--ease), opacity .3s ease}
html.cursor-ready.has-cursor .sks-cursor{opacity:1}
/* Лапка — ИНЛАЙНОВЫЙ SVG (глиф fa-paw, как на кнопке «Записаться»), а НЕ
   CSS-маска: маска это чистая альфа, цвета она не знает, поэтому обвести
   её белым было принципиально невозможно. Отсюда переезд на настоящий stroke. */
.sks-cursor__paw{width:100%;height:100%;display:block;overflow:visible;
  transform:rotate(var(--paw-rot));
  transition:transform .25s var(--ease), opacity .25s var(--ease);
  filter:drop-shadow(0 1px 2px rgba(30,42,38,.45))}
.sks-cursor__paw path{
  fill:currentColor;
  stroke:var(--cream);
  stroke-width:3;                    /* видимая толщина 1.5px — ровно половина, */
  paint-order:stroke;                /* т.к. обводка лежит ПОД заливкой */
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;  /* 1.5px при ЛЮБОМ размере курсора */
}
/* hover по ссылкам/кнопкам — лапка крупнее, золотится и доворачивается
   ещё на 8° (как было раньше, но теперь относительно базового наклона) */
.sks-cursor.is-hover{width:42px;height:42px;color:var(--gold)}
.sks-cursor.is-hover .sks-cursor__paw{transform:rotate(calc(var(--paw-rot) - 8deg))}
/* спец-режим «Смотреть/Тяни» — лапка прячется, вместо неё круг с подписью */
.sks-cursor__disc{position:absolute;inset:0;border-radius:50%;background:var(--sage);
  box-shadow:var(--sh);opacity:0;transition:opacity .2s ease}
.sks-cursor__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:700;font-size:.72rem;color:#fff;opacity:0;
  letter-spacing:.02em;transition:opacity .25s ease;text-align:center;line-height:1}
.sks-cursor.is-view{width:84px;height:84px}
.sks-cursor.is-view .sks-cursor__paw{opacity:0}
.sks-cursor.is-view .sks-cursor__disc,
.sks-cursor.is-view .sks-cursor__label{opacity:1}
@media (pointer:fine){
  /* !important — чтобы никакой компонент (grab/grabbing карусели, zoom-in
     плиток, ew-resize ползунка «до/после» и т.п.) не мог по специфичности
     «пробить» скрытие системного курсора. Действует на ВСЁМ сайте. */
  html.cursor-ready, html.cursor-ready *{cursor:none !important}
}

/* ───────── общие утилиты ───────── */
.center{text-align:center}
.sec-head{max-width:680px}
.sec-head.is-center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.35rem);margin-top:.5rem}
.sec-head p{margin-top:1rem}
.grid{display:grid;gap:clamp(16px,2vw,26px)}
.stack-sm{display:flex;flex-direction:column;gap:.6rem}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.divider-squiggle{display:block;width:100%;height:24px;color:var(--line)}

/* плейсхолдер фото (если картинка не загрузилась) */
.ph-broken{position:relative;background:linear-gradient(135deg,var(--sage-soft),var(--sand));overflow:hidden}
.ph-broken::after{
  content:"🐾 фото скоро";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:600;font-size:.85rem;color:var(--sage-deep);letter-spacing:.02em;
}

/* ───────── reduced motion ───────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .marquee__track{animation:none}
  .sks-cursor{display:none}
  html.cursor-ready, html.cursor-ready *{cursor:auto}
}