/* ============================================================
   Happy Atelier · первые два блока
   Токены и рецепты — из Style Guide 4.0 (мягко, тепло, объёмно)
   ============================================================ */

:root{
  /* цвет */
  --cocoa:#5A3A2D; --choc:#6F4A3A; --muted:#7E5E4C;
  --apricot:#A05C27; --rose:#9E4E40; --sage:#5E7350; --clay:#A8453A;
  --milk:#FFFBF7; --white:#FFFFFF; --cream:#FBF2E7; --sand:#F4E3D0; --butter:#FAE7C4;
  --peach:#F7CDAC; --blush:#EFC6BC; --caramel:#EBBE98;
  --hero-bg:#E0AE86;                 /* фон видео — подобран по кадру */
  --line:rgba(122,80,56,.11); --line-strong:rgba(122,80,56,.2);

  /* типографика */
  --font:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* материал */
  --pile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='5' seed='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeGaussianBlur stdDeviation='0.4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E");
  --inner:inset 0 2px 3px rgba(255,255,255,.72), inset 0 -10px 18px rgba(160,110,70,.18);
  --inner-s:inset 0 1.5px 2px rgba(255,255,255,.7), inset 0 -5px 10px rgba(160,110,70,.16);
  --inner-dark:inset 0 2px 3px rgba(255,246,236,.26), inset 0 -6px 12px rgba(40,22,15,.34);
  --sunk:inset 0 3px 6px rgba(140,95,60,.17), inset 0 -2px 0 rgba(255,255,255,.75);
  --drop-0:drop-shadow(0 0 0 rgba(0,0,0,0));
  --drop-1:drop-shadow(0 2px 3px rgba(122,80,56,.10)) drop-shadow(0 7px 14px rgba(122,80,56,.11));
  --drop-2:drop-shadow(0 3px 4px rgba(122,80,56,.11)) drop-shadow(0 13px 24px rgba(122,80,56,.15));
  --drop-3:drop-shadow(0 4px 6px rgba(122,80,56,.12)) drop-shadow(0 22px 40px rgba(122,80,56,.17));
  --sh1:0 2px 3px rgba(122,80,56,.07), 0 7px 16px rgba(122,80,56,.09);
  --sh2:0 3px 5px rgba(122,80,56,.08), 0 13px 28px rgba(122,80,56,.13), 0 28px 52px rgba(122,80,56,.07);

  --skin-white:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 42%,#FCF5EC 100%);
  --skin-cream:linear-gradient(180deg,#FFF9EF 0%,#FBF2E7 52%,#F3E7D6 100%);
  --skin-sand:linear-gradient(180deg,#FDF1E1 0%,#F4E3D0 52%,#EBD7BE 100%);
  --skin-peach:linear-gradient(180deg,#FFEBD8 0%,#F7CDAC 52%,#F0BE97 100%);
  --skin-caramel:linear-gradient(180deg,#F8DBBC 0%,#EBBE98 52%,#DFAE85 100%);
  --skin-dark:linear-gradient(180deg,#7A5342 0%,#5A3A2D 55%,#4A2E23 100%);
  --skin-dark-h:linear-gradient(180deg,#8A6150 0%,#684433 55%,#573829 100%);
  --skin-dark-a:linear-gradient(180deg,#52342A 0%,#46291F 100%);

  /* форма */
  --r-sm:12px; --r-md:19px; --r-lg:26px; --r-xl:34px; --r-2xl:40px;

  /* движение */
  --t-instant:90ms; --t-fast:200ms; --t-base:280ms; --t-slow:420ms; --t-reveal:640ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in:cubic-bezier(.55,.06,.68,.19);
  --ease-plush:cubic-bezier(.34,1.3,.5,1);

  /* сетка */
  --container:1200px; --pad:20px;
  --header-h:56px; --header-top:12px;
}
@media (min-width:640px){ :root{ --pad:24px } }
@media (min-width:960px){ :root{ --pad:48px; --header-h:72px; --header-top:16px } }
@media (min-width:1440px){ :root{ --pad:80px } }

/* ---------- база ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  margin:0; font-family:var(--font); font-size:15px; line-height:1.65; color:var(--cocoa);
  background:var(--milk); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,p{ margin:0 }
img,video{ display:block; max-width:100% }
a{ color:inherit }
button{ font:inherit; color:inherit }
.defs{ position:absolute; width:0; height:0; overflow:hidden }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad) }

/* ---------- плюшевая поверхность ---------- */
.plush{
  position:relative; isolation:isolate;
  border-radius:var(--r-xl); corner-shape:squircle;
  --skin:var(--skin-cream); --fur:url(#furM); --drop:var(--drop-2); --inr:var(--inner);
}
.plush::before{
  content:''; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; corner-shape:squircle;
  background-image:var(--pile),var(--skin); background-blend-mode:soft-light,normal;
  box-shadow:var(--inr); filter:var(--fur) var(--drop);
}

/* ---------- кнопки ---------- */
.btn{
  position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center;
  height:46px; min-width:120px; padding:0 24px; border:0; border-radius:var(--r-md); corner-shape:squircle;
  font-weight:500; font-size:14px; line-height:1; letter-spacing:-.005em; white-space:nowrap;
  color:var(--choc); text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  --skin:var(--skin-white); --fur:url(#furS); --drop:var(--drop-1); --inr:var(--inner-s);
  transition:transform var(--t-fast) var(--ease-plush);
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; corner-shape:squircle;
  background-image:var(--pile),var(--skin); background-blend-mode:soft-light,normal;
  box-shadow:var(--inr); filter:var(--fur) var(--drop);
  transition:filter var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.btn--lg{ height:56px; padding:0 32px; border-radius:23px; font-size:16px; --fur:url(#furM) }
.btn--primary{
  color:#F6E6D6; --skin:var(--skin-dark); --inr:var(--inner-dark);
  text-shadow:0 -1px 1px rgba(28,14,8,.65), 0 1px 0 rgba(255,246,236,.22);   /* теснение: буквы утоплены в плюш */
}
.btn--float{ margin-bottom:14px }
.btn--float::after{
  /* естественная тень: плотное ядро под кнопкой и широкий мягкий ореол, слегка размытые */
  content:''; position:absolute; z-index:-2; left:-4%; right:-4%; bottom:-22px; height:30px; border-radius:50%;
  background:
    radial-gradient(52% 55% at 50% 32%,rgba(110,70,48,.46) 0,rgba(110,70,48,.22) 48%,rgba(110,70,48,0) 100%),
    radial-gradient(90% 100% at 50% 40%,rgba(122,80,56,.16) 0,rgba(122,80,56,.06) 55%,rgba(122,80,56,0) 100%);
  filter:blur(5px);
  transition:transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
@media (hover:hover){ .btn--float:hover::after{ transform:translateY(3px) scaleX(1.04); opacity:.9 } }
.btn--float:active::after{ transform:translateY(-4px) scaleX(.94); opacity:.5 }
@media (hover:hover){
  .btn:hover{ transform:translateY(-2px) }
  .btn:hover::before{ filter:var(--fur) var(--drop-2) }
  .btn--primary:hover{ --skin:var(--skin-dark-h) }
}
.btn:active{ transform:scale(.97,.93); transition-duration:var(--t-instant) }
.btn:active::before{ filter:var(--fur) var(--drop-0); box-shadow:inset 0 3px 7px rgba(30,16,10,.5) }
.btn:focus-visible{ outline:2px solid var(--peach); outline-offset:3px }

/* ---------- шапка · плавающая подушка ---------- */
.top{ position:fixed; z-index:50; top:var(--header-top); left:var(--header-top); right:var(--header-top); display:flex; justify-content:center; pointer-events:none }
.top__bar{
  pointer-events:auto; width:100%; max-width:var(--container); height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 10px 0 18px;
  border-radius:var(--r-lg); --skin:var(--skin-white); --fur:url(#furS); --drop:var(--drop-1); --inr:var(--inner-s);
  transition:height var(--t-base) var(--ease-out);
}
.is-scrolled .top__bar{ --drop:var(--drop-2) }
@media (min-width:960px){
  .top__bar{ padding:0 14px 0 22px }
  .is-scrolled .top__bar{ height:60px }
}
.logo{ display:inline-flex; align-items:center; align-self:stretch; text-decoration:none; line-height:1 }
.logo__name{
  display:block; transform:translateY(1.5px);                 /* оптическая поправка: капитель чуть ниже геометрического центра */
  font-weight:600; font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color:#8C6A58;                                             /* чуть светлее Cocoa: надпись лежит в тени углубления */
  text-shadow:0 -1px 0 rgba(90,58,45,.32), 0 1px 0 rgba(255,255,255,.95), 0 2px 2px rgba(255,255,255,.6);  /* теснение в мягкой подушке */
}
@media (min-width:960px){ .logo__name{ font-size:16px; transform:translateY(2px) } }

/* переключатель языка · вдавленная дорожка + пухлая пилюля */
.lang{ position:relative; display:flex; padding:4px; border-radius:16px; corner-shape:squircle; background:var(--cream); box-shadow:var(--sunk) }
.lang__btn{
  position:relative; z-index:1; height:36px; min-width:44px; padding:0 10px; border:0; background:none; border-radius:12px;
  font-weight:500; font-size:13px; line-height:1; letter-spacing:.04em; color:var(--muted); cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:color var(--t-fast) var(--ease-out);
}
.lang__btn[aria-pressed="true"]{ color:var(--cocoa) }
.lang__btn:focus-visible{ outline:2px solid var(--peach); outline-offset:-2px }
.lang__pill{
  position:absolute; top:4px; left:4px; height:36px; width:44px; border-radius:12px; corner-shape:squircle;
  background-image:var(--pile),var(--skin-white); background-blend-mode:soft-light,normal;
  box-shadow:var(--inner-s), 0 2px 4px rgba(122,80,56,.12), 0 6px 12px rgba(122,80,56,.10);
  transition:transform var(--t-base) var(--ease-plush), width var(--t-base) var(--ease-out);
}

/* ---------- блок 1 · hero ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden; background:var(--hero-bg); color:var(--cocoa);
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  padding-top:calc(var(--header-top) + var(--header-h) + 28px);
}
.hero__inner{ position:relative; z-index:2; flex:0 0 auto; padding-top:20px; padding-bottom:8px }
.hero__text{ max-width:none }
.hero__title{
  font-size:clamp(31px,4.4vw,68px); line-height:1.04; letter-spacing:-.005em; font-weight:600; text-transform:uppercase;
  margin:0 0 16px; white-space:nowrap;
}
.hero__lead{ font-size:clamp(17px,1.6vw,22px); line-height:1.4; font-weight:500; color:var(--choc); margin:0 0 28px }

.hero__media{ position:relative; z-index:1; flex:1 1 auto; min-height:46svh; min-height:46vh }
.hero__video,.hero__poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%); mask-image:linear-gradient(to bottom,transparent 0,#000 7%);
}
@media (min-width:640px) and (max-width:959px){
  /* планшет: кадр 16:9, медведь справа сверху — голова целиком */
  .hero__video,.hero__poster{ object-position:100% 0 }
}
@media (min-width:960px){
  .hero{ display:block; padding:0 }
  .hero__inner{
    min-height:100vh; min-height:100svh; display:flex; align-items:center;
    padding-top:calc(var(--header-top) + var(--header-h) + 56px); padding-bottom:56px;
  }
  .hero__title{ margin-bottom:22px }
  .hero__lead{ margin-bottom:36px; white-space:nowrap }
  .hero__media{ position:absolute; inset:0; min-height:0 }
  .hero__video,.hero__poster{
    object-position:100% 50%;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%); mask-image:linear-gradient(to right,transparent 0,#000 24%);
  }
}

/* ---------- блок 2 · как это работает ---------- */
.how{ padding:40px 0 104px }
.how__pillow{ padding:28px 20px 32px; --skin:var(--skin-cream); --fur:url(#furM); --drop:var(--drop-2) }
.overline{ font-size:11px; line-height:16px; letter-spacing:.13em; text-transform:uppercase; font-weight:600; color:var(--apricot); margin-bottom:12px }
.how__title{ font-size:clamp(28px,3vw,36px); line-height:1.12; letter-spacing:-.022em; font-weight:600; margin-bottom:14px; text-wrap:balance }
.how__lead{ font-size:17px; line-height:1.55; font-weight:500; color:var(--choc); max-width:56ch; text-wrap:pretty }
.how__body{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin-top:16px; touch-action:pan-y }
.how__cta{ display:flex; justify-content:center; margin-top:40px }
.how__cta .btn{ width:100%; max-width:420px }
@media (min-width:640px){
  .how__pillow{ padding:40px 36px 44px }
  .how__cta .btn{ width:auto }
}
@media (min-width:960px){
  .how{ padding:64px 0 128px }
  .how__pillow{ padding:56px 64px 60px }
  .how__lead{ font-size:19px; line-height:1.5 }
  .how__body{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:56px; align-items:center; margin-top:48px }
  .how__cta{ margin-top:48px }
}

/* сцена с медведем */
.stage{
  position:relative; display:grid; justify-items:center; align-items:end;
  height:min(54vh,520px); cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.stage.is-drag{ cursor:grabbing }
.how__body{ cursor:grab }
.how__body.is-drag{ cursor:grabbing }
.stage__pic{ position:absolute; inset:0; display:flex; justify-content:center; align-items:flex-end; opacity:var(--o,0); will-change:transform,opacity; transform-origin:50% 100% }
.stage__pic img{ height:100%; width:auto; max-width:100%; object-fit:contain; object-position:center bottom; pointer-events:none; -webkit-user-drag:none }
.stage__shadow{
  position:absolute; left:24%; right:24%; bottom:-1%; height:7%; border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(122,80,56,.22) 0,rgba(122,80,56,.10) 45%,rgba(122,80,56,0) 72%);
}
.stage__chip{
  position:absolute; z-index:2; top:0; left:0; height:30px; padding:0 12px; display:inline-flex; align-items:center;
  border-radius:12px; corner-shape:squircle; font-weight:600; font-size:12px; letter-spacing:.06em; color:var(--cocoa);
  background-image:var(--pile),var(--skin-sand); background-blend-mode:soft-light,normal; box-shadow:var(--inner-s), 0 2px 4px rgba(122,80,56,.08);
  font-variant-numeric:tabular-nums;
}
@media (min-width:960px){ .stage{ height:min(64vh,600px) } }

/* ползунок · вдавленная дорожка, шар-бегунок */
.slider{ position:relative; height:56px; margin-top:12px; --thumb:40px; --p:0 }
.slider__track{
  position:absolute; left:calc(var(--thumb)/2 - 8px); right:calc(var(--thumb)/2 - 8px); top:50%; height:14px; margin-top:-7px;
  border-radius:7px; background:var(--sand); box-shadow:var(--sunk); overflow:hidden;
}
.slider__fill{
  position:absolute; top:0; bottom:0; left:0; width:calc(8px + var(--p)*(100% - 16px)); border-radius:7px;
  background:linear-gradient(90deg,var(--peach),var(--caramel)); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6);
}
.slider__tick{ position:absolute; top:50%; left:calc(8px + var(--t)*(100% - 16px)); width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:rgba(122,80,56,.26); transition:background var(--t-fast) }
.slider__tick.is-passed{ background:rgba(255,255,255,.9) }
.slider__thumb{
  position:absolute; top:50%; left:calc(var(--p)*(100% - var(--thumb))); width:var(--thumb); height:var(--thumb); margin-top:calc(var(--thumb)/-2);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 32% 22%,#FFFFFF 0,#FFF3E6 16%,#F7CDAC 52%,#E9B88F 100%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.85), inset 0 -8px 12px rgba(160,110,70,.24), 0 3px 5px rgba(122,80,56,.12), 0 10px 20px rgba(122,80,56,.18);
  transition:transform var(--t-fast) var(--ease-plush), box-shadow var(--t-fast) var(--ease-out);
}
.slider.is-active .slider__thumb{
  transform:scale(1.12);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.85), inset 0 -8px 12px rgba(160,110,70,.24), 0 4px 6px rgba(122,80,56,.14), 0 16px 30px rgba(122,80,56,.22);
}
.slider__input{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:grab;
  -webkit-appearance:none; appearance:none; background:transparent; touch-action:pan-y;
}
.slider__input:active{ cursor:grabbing }
.slider__input::-webkit-slider-thumb{ -webkit-appearance:none; width:var(--thumb); height:var(--thumb); border-radius:50%; cursor:grab }
.slider__input::-moz-range-thumb{ width:var(--thumb); height:var(--thumb); border:0; border-radius:50%; cursor:grab }
.slider__input::-webkit-slider-runnable-track{ height:100% }
.slider__input::-moz-range-track{ height:100%; background:transparent }
.slider__input:focus-visible ~ .slider__thumb,
.slider:has(.slider__input:focus-visible) .slider__thumb{ outline:2px solid var(--peach); outline-offset:3px }

/* этапы · список справа, на мобильном — одна активная карточка */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:8px }
.step{
  display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; align-items:start;
  padding:14px 16px; border-radius:var(--r-md); corner-shape:squircle; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:transparent; transition:background var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease-out);
}
.step.is-active{ background:rgba(255,255,255,.72) }
.step__num{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:15px;
  color:var(--muted); background:radial-gradient(circle at 32% 22%,#FFFFFF 0,var(--sand) 60%,#EBD7BE 100%);
  box-shadow:var(--inner-s); transition:background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-slow) var(--ease-plush);
}
.step.is-active .step__num{
  color:var(--cream); background:radial-gradient(circle at 32% 22%,#8A6150 0,#5A3A2D 60%,#4A2E23 100%);
  box-shadow:var(--inner-dark), 0 3px 6px rgba(122,80,56,.18); transform:scale(1.06);
}
.step__title{ font-weight:600; font-size:18px; line-height:1.3; letter-spacing:-.01em; color:var(--cocoa); padding-top:8px }
.step__text{ font-size:15px; line-height:1.55; color:var(--muted); margin-top:4px; text-wrap:pretty }
@media (max-width:959px){
  .how__stagecol{ display:contents }
  .stage{ order:1; z-index:2 }
  .steps{ order:2; min-height:0; margin-top:-44px; padding-top:0 }
  .slider{ order:3; margin-top:4px }
  .step{ grid-area:1/1; opacity:0; transform:translateY(10px); pointer-events:none; padding:16px 18px; background:rgba(255,255,255,.72) }
  .step.is-active{ opacity:1; transform:none; pointer-events:auto }
  .step__body{ padding-top:0 }
  .step .step__title{ padding-top:8px }
  .steps .step{ padding-top:40px }   /* место под лапы медведя, которые заходят на карточку */
}
@media (hover:hover){
  .step:not(.is-active):hover{ background:rgba(255,255,255,.4) }
}
.step:focus-visible{ outline:2px solid var(--peach); outline-offset:2px }

/* ---------- появление при скролле ---------- */
.js .reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay:calc(var(--i,0)*80ms) }
.js .reveal.in{ opacity:1; transform:none }

/* ---------- уважение к настройкам ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
  .js .reveal{ opacity:1; transform:none }
}

/* ---------- Safari и сенсорные экраны ----------
   Safari (особенно на iOS) растрирует SVG-фильтр ворса плитками: на больших подушках видны полосы,
   чёрные квадраты и обрезанный край. Там ворс отключаем, объём держат градиент и тени. */
@media (hover:none), (max-width:959px){
  .plush, .btn{ --fur: ; }
  .plush::before{ filter:none; box-shadow:var(--inr), var(--sh2) }
  .top__bar::before, .btn::before{ filter:none; box-shadow:var(--inr), var(--sh1) }
  .btn:active::before{ filter:none; box-shadow:inset 0 3px 7px rgba(30,16,10,.5) }
}
@supports (-webkit-touch-callout:none){
  .plush, .btn{ --fur: ; }
  .plush::before{ filter:none; box-shadow:var(--inr), var(--sh2) }
  .top__bar::before, .btn::before{ filter:none; box-shadow:var(--inr), var(--sh1) }
  .btn:active::before{ filter:none; box-shadow:inset 0 3px 7px rgba(30,16,10,.5) }
}