/* Новые блоки: как проходит визит, детские стрижки, вход с вывеской, полоса с логотипом */

/* ---------- Как проходит визит: фото меняются по шагам ---------- */
.visit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: 48px; align-items: start; }
.visit__frame { position: sticky; top: 100px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--green); }
.visit__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .visit__frame img { clip-path: inset(100% 0 0 0); transform: scale(1.12); transition: clip-path .9s cubic-bezier(.7, 0, .2, 1), transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.js .visit__frame img.is-on, .js .visit__frame img:first-child { clip-path: inset(0); transform: none; }
.visit__steps { list-style: none; }
.visit__steps li {
  min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding-left: 28px; border-left: 3px solid var(--green-line);
  transition: border-color .4s, opacity .4s;
}
.js .visit__steps li { opacity: .35; }
.js .visit__steps li.is-on { opacity: 1; border-color: var(--red); }
.visit__num {
  font: 400 clamp(56px, 7vw, 104px)/1 var(--display);
  color: transparent; -webkit-text-stroke: 1.5px var(--graphite); transition: color .4s, -webkit-text-stroke-color .4s;
}
.visit__steps li.is-on .visit__num { color: var(--red); -webkit-text-stroke-color: var(--red); }
.visit__steps h3 { font: 400 clamp(24px, 2.4vw, 32px)/1.1 var(--display); }
.visit__steps p { max-width: 38ch; color: var(--bone-dim); }

/* ---------- Детские стрижки: веер из фото ---------- */
.kids__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.kids__price { margin-top: 18px; font: 400 clamp(30px, 3.6vw, 48px)/1 var(--display); color: var(--oak); }
.kids .btn { margin-top: 28px; }
.kids__fan { position: relative; height: clamp(380px, 42vw, 580px); }
.kids__fan img {
  position: absolute; top: 50%; left: 50%; width: 44%; aspect-ratio: 4 / 5; object-fit: cover;
  border: 6px solid var(--bone); box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%) translateX(var(--x, 0)) rotate(var(--r, 0deg)) translateY(var(--lift, 0));
  transition: transform 1s cubic-bezier(.2, .9, .3, 1.15);
}
.kids__fan img:nth-child(1) { --x: -64%; --r: -9deg; }
.kids__fan img:nth-child(2) { --x: 0%; --r: 2deg; z-index: 2; }
.kids__fan img:nth-child(3) { --x: 64%; --r: 10deg; }
.kids__fan img:hover { --lift: -6%; --r: 0deg; z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .js .kids__fan:not(.is-in) img { --x: 0%; --r: 0deg; }
}

/* ---------- Вход с вывеской ---------- */
.storefront { position: relative; margin-top: 40px; overflow: hidden; }
.storefront img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 40%; }
.storefront figcaption {
  position: absolute; left: 0; bottom: 0; margin: 0; padding: 10px 14px;
  background: rgba(14, 26, 21, .88); color: var(--bone); font-size: 15px;
}

/* ---------- Полоса с объёмным логотипом ---------- */
/* чёрное в картинке «растворяется» в зелёном фоне (режим lighten), края уходят в зелёный виньеткой */
.brandband { position: relative; overflow: hidden; background: var(--green-deep); isolation: isolate; }
.brandband::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 75% at 50% 42%, transparent 35%, rgba(14, 26, 21, .75) 75%, var(--green-deep) 100%);
}
.brandband img {
  width: 100%; max-height: 520px; object-fit: cover;
  mix-blend-mode: lighten; filter: brightness(.82) contrast(1.15);
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}

/* ---------- Телефон ---------- */
@media (max-width: 860px) {
  .visit__grid { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .visit__frame { top: 64px; aspect-ratio: auto; height: 44vh; z-index: 2; }
  .visit__steps li { min-height: 46vh; padding-left: 20px; }

  .kids__grid { grid-template-columns: 1fr; }
  .kids__fan { height: 340px; }
  .kids__fan { height: 300px; }
  .kids__fan img { width: 42%; border-width: 4px; }
  .kids__fan img:nth-child(1) { --x: -50%; --r: -7deg; }
  .kids__fan img:nth-child(3) { --x: 50%; --r: 7deg; }

  .storefront img { aspect-ratio: 4 / 3; }
  .storefront figcaption { font-size: 13px; }
}