/* Анимации. Подключается отложенно. Всё живое — только под классом .js-anim,
   который ставит скрипт: без JS страница остаётся полностью читаемой. */

/* ——— первый экран: дышащий фон и медленный наезд на фото ——— */
.hero{position:relative;overflow:hidden}
.hero__bg{position:absolute;inset:-12%;z-index:0;pointer-events:none}
.hero__bg::before,.hero__bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(48% 42% at 28% 32%,#f7dfe0 0%,transparent 62%),
             radial-gradient(46% 40% at 74% 66%,#efd3d8 0%,transparent 64%);
  animation:breathe 19s cubic-bezier(.22,.61,.24,1) infinite alternate;will-change:transform}
.hero__bg::after{animation-duration:26s;animation-delay:-8s;opacity:.7;
  background:radial-gradient(52% 46% at 68% 26%,#fae6e2 0%,transparent 60%),
             radial-gradient(44% 38% at 22% 72%,#f2d9dd 0%,transparent 62%)}
@keyframes breathe{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(2%,-2%,0)}}
.hero__in,.crumbs ol{position:relative;z-index:1}
.hero__img{will-change:transform}
.js-anim .hero__img{animation:ken 26s cubic-bezier(.22,.61,.24,1) infinite alternate}
@keyframes ken{from{transform:scale(1.03)}to{transform:scale(1.13) translate3d(-2%,-2%,0)}}
.par{will-change:transform;transform:translate3d(0,calc(var(--y,0) * 1px),0)}

/* ——— заголовок собирается по словам ——— */
.rise{display:inline-block;overflow:hidden;vertical-align:bottom}
.rise>span{display:inline-block;transform:translateY(105%);opacity:0;
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.is-in .rise>span{transform:translateY(0);opacity:1}

/* ——— появление блоков со стаггером ——— */
.js-anim .rv{opacity:0;transform:translate3d(0,24px,0);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d,0s);will-change:transform,opacity}
.js-anim .rv.is-in{opacity:1;transform:none}

/* ——— прогресс-линия чтения ——— */
#prog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));z-index:99}

/* ——— микровзаимодействия ——— */
.btn{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1)}
.btn:active{transform:scale(.96);transition-duration:.12s}
.btn--mag{transform:translate3d(calc(var(--mx,0)*1px),calc(var(--my,0)*1px),0)}
.rel a,.cards--links h3 a{position:relative}
.rel a::after,.cards--links h3 a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .55s cubic-bezier(.16,1,.3,1)}
.rel a:hover::after,.cards--links h3 a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.rel a:hover,.cards--links h3 a:hover{text-decoration:none}
.tiltable{transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s cubic-bezier(.16,1,.3,1);
  transform-style:preserve-3d;will-change:transform}
.tiltable:hover{box-shadow:0 24px 50px -26px rgba(58,46,46,.26)}

/* ——— закреплённый сценарий сеанса ——— */
.pin-outer{position:relative}
.pin{position:sticky;top:0;min-height:100vh;display:grid;place-items:center;overflow:hidden;padding:2rem 0}
.pin__grid{display:grid;gap:2.2rem;align-items:center;width:100%;max-width:var(--wrap);padding:0 20px}
@media(min-width:860px){.pin__grid{grid-template-columns:.85fr 1.15fr;gap:3.5rem}}
.clock{position:relative;width:min(230px,54vw);aspect-ratio:1;margin:0 auto}
.clock svg{width:100%;height:100%;transform:rotate(-90deg)}
.clock__t{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.clock__t b{display:block;font-size:2.4rem;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.clock__t small{color:var(--ink-2);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.pin__steps{position:relative;min-height:300px}
.pin__steps .step{position:absolute;inset:0;display:block;background:none;border:0;padding:0;opacity:0;
  transform:translate3d(0,22px,0);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
  pointer-events:none}
.pin__steps .step.on{opacity:1;transform:none;pointer-events:auto}
.pin__steps .step__time{position:static;display:inline-flex;min-width:0;height:auto;background:none;color:var(--brand-dark);
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:0;margin-bottom:.5rem}
.pin__steps .step h3{font-size:clamp(1.35rem,3.2vw,1.9rem);margin-bottom:.7rem}
.pin__steps .step p{font-size:1.02rem;max-width:48ch}
.ticks{display:flex;gap:.4rem;margin-top:1.5rem;position:absolute;left:0;right:0;bottom:0}
.ticks i{height:3px;flex:1;background:var(--line);border-radius:2px;position:relative;overflow:hidden}
.ticks i::after{content:"";position:absolute;inset:0;background:var(--brand);transform:scaleX(0);
  transform-origin:0 50%;transition:transform .5s cubic-bezier(.22,.61,.24,1)}
.ticks i.done::after{transform:scaleX(1)}

/* ——— иконки услуг: линия дорисовывается ——— */
.ico{width:44px;height:44px;margin-bottom:.7rem;display:block}
.ico *{fill:none;stroke:var(--brand);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,180);stroke-dashoffset:var(--len,180);
  transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.is-in .ico *{stroke-dashoffset:0}

/* ——— мягкая подгрузка фото ——— */
.js-anim .shot{position:relative;overflow:hidden;background:var(--brand-soft);border-radius:inherit}
.js-anim .shot::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.6) 50%,transparent 80%);
  transform:translateX(-100%);animation:shine 1.6s infinite}
@keyframes shine{to{transform:translateX(100%)}}
.js-anim .shot.ready::before{display:none}
.js-anim .shot img{opacity:0;transform:scale(1.03);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1)}
.js-anim .shot.ready img{opacity:1;transform:none}

/* ——— переходы между страницами ——— */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .28s ease both}
::view-transition-new(root){animation:vtIn .42s cubic-bezier(.16,1,.3,1) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}

/* ——— полное отключение движения ——— */
@media (prefers-reduced-motion:reduce){
  .js-anim .rv,.rise>span,.pin__steps .step{opacity:1!important;transform:none!important}
  .js-anim .hero__img,.hero__bg::before,.hero__bg::after{animation:none!important}
  .ico *{stroke-dashoffset:0!important}
  .par{transform:none!important}
  .js-anim .shot img{opacity:1!important;transform:none!important}
  .js-anim .shot::before{display:none}
  @view-transition{navigation:none}
}

/* ——— подборщик по зонам тела ——— */
.bm{display:grid;gap:2rem}
@media(min-width:900px){.bm{grid-template-columns:.72fr 1.28fr;gap:3.2rem;align-items:start}}
.bm__tabs{display:flex;gap:.4rem;justify-content:center;margin-bottom:1.4rem}
.bm__tab{min-height:44px;padding:.45rem 1.15rem;border:1px solid var(--line);background:#fff;
  border-radius:999px;font:inherit;font-size:.9rem;color:var(--ink-2);cursor:pointer;
  transition:background .35s ease,color .35s ease,border-color .35s ease}
.bm__tab.is-on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:650}
.bm__fig{width:min(250px,60vw);margin:0 auto;filter:drop-shadow(0 22px 40px rgba(140,70,85,.16))}
.bm__fig svg{width:100%;height:auto;display:block}
.bm-base *{fill:#f4e7e3}
.bm-line *{fill:none;stroke:#e3cdc9;stroke-width:1.6}
.bm-zone{fill:#ecd6d7;cursor:pointer;stroke:none;
  transition:fill .35s cubic-bezier(.22,.61,.24,1)}
.bm-zone:hover{fill:#dcabb4}
.bm-zone.is-on{fill:var(--brand)}
/* фокус: рамка вокруг всей фигуры плюс подсветка полосы.
   Обводку на самой полосе не рисуем — обрезка превращала её в линии поперёк тела. */
.bm-zone:focus{outline:none}
.bm-zone:focus-visible{outline:none;fill:#dcabb4}
.bm__fig:focus-within{outline:2.5px solid var(--brand);outline-offset:10px;border-radius:24px}
.bm__out{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.9rem 1.8rem;box-shadow:var(--sh-1);min-height:340px;display:flex;flex-direction:column}
.bm__eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-dark);margin-bottom:.5rem}
.bm__out h3{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;margin-bottom:.6rem}
.bm__lead{color:var(--ink-2);font-size:.98rem;max-width:52ch}
.bm__sub{font-size:.84rem;color:var(--ink-3);margin:1.4rem 0 .7rem;font-weight:600}
.bm__chips{display:flex;flex-wrap:wrap;gap:.5rem}
.bm__chip{min-height:44px;padding:.45rem 1.05rem;border:1px solid var(--line);background:var(--bg-alt);
  border-radius:999px;font:inherit;font-size:.92rem;color:var(--ink-2);cursor:pointer;
  transition:border-color .3s ease,color .3s ease,background .3s ease}
.bm__chip:hover{border-color:var(--brand);color:var(--brand-dark);background:#fff}
.bm__list{list-style:none;display:grid;gap:.6rem;margin:1.3rem 0 0}
.bm__list li{opacity:0;transform:translate3d(0,12px,0);animation:bmPop .55s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--d,0s)}
@keyframes bmPop{to{opacity:1;transform:none}}
.bm__list a{display:block;border:1px solid var(--line);border-radius:14px;padding:.95rem 1.1rem;
  text-decoration:none;color:inherit;background:var(--bg-alt);
  transition:border-color .35s ease,background .35s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.bm__list a:hover{border-color:var(--brand);background:#fff;transform:translateX(4px)}
.bm__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.bm__row b{font-weight:650;color:var(--ink);font-size:.98rem}
.bm__row em{font-style:normal;font-weight:750;color:var(--brand-dark);white-space:nowrap}
.bm__note{display:block;font-size:.87rem;color:var(--ink-3);margin-top:.2rem}
.bm__foot{margin-top:auto;padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.bm__cta{flex:1 1 200px}
.bm__reset{min-height:52px;padding:.7rem 1.2rem;border:0;background:none;font:inherit;font-size:.92rem;
  color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bm__reset:hover{color:var(--brand-dark)}
@media (prefers-reduced-motion:reduce){.bm__list li{opacity:1;transform:none;animation:none}}