/* Живые блоки: значок записи, бегущие ленты, купон, прайс с фото, киноплёнка, большая кнопка */

/* ---------- Крутящийся значок на красной черте ---------- */
.badge {
  position: absolute; left: 50%; top: 74%;
  width: clamp(116px, 10vw, 150px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--green-deep); border: 2px solid var(--red); color: var(--bone);
  text-decoration: none; transition: background .3s, color .3s;
}
.badge svg:first-child { position: absolute; inset: 6%; width: 88%; height: 88%; animation: spin 16s linear infinite; }
.badge text { font: 700 17px var(--display); fill: currentColor; }
.badge__icon { width: 30%; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; transition: stroke .3s, transform .4s; }
.badge:hover { background: var(--red); color: #fff; }
.badge:hover .badge__icon { stroke: #fff; transform: rotate(-30deg) scale(1.1); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Бегущие ленты крест-накрест ---------- */
.tapes { position: relative; height: clamp(170px, 17vw, 250px); overflow: hidden; }
.tape { position: absolute; left: -5%; right: -5%; top: 50%; padding: 16px 0; overflow: hidden; white-space: nowrap; }
.tape--red { background: var(--red); color: #fff; transform: translateY(-62%) rotate(-3deg); z-index: 2; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.tape--bone { background: var(--bone); color: var(--green-deep); transform: translateY(-38%) rotate(2.5deg); }
.tape__track, .bigcta__track { display: inline-flex; will-change: transform; }
.tape span {
  display: inline-flex; align-items: center;
  font: 800 clamp(22px, 2.8vw, 38px)/1 var(--display); font-stretch: 80%;
}
.tape span::after, .bigcta span::after {
  content: ""; width: .42em; height: .48em; margin-inline: .7em; background: currentColor;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); /* шестигранник из логотипа */
}

/* ---------- Купон ---------- */
.coupon-wrap { padding-top: clamp(56px, 8vw, 104px); }
.coupon {
  --stub: 330px;
  position: relative; display: grid; grid-template-columns: 1fr var(--stub);
  background: var(--red); color: #fff; overflow: hidden;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease-out;
  -webkit-mask: radial-gradient(circle 20px at calc(100% - var(--stub)) 0, transparent 97%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 20px at calc(100% - var(--stub)) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 20px at calc(100% - var(--stub)) 0, transparent 97%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 20px at calc(100% - var(--stub)) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
}
.coupon::after { /* блик пробегает по купону */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .28) 50%, transparent 60%);
  transform: translateX(-100%);
}
.coupon__main { padding: clamp(28px, 4vw, 52px); }
.coupon__label { font-weight: 600; opacity: .85; }
.coupon__value { font: 900 clamp(96px, 15vw, 220px)/.82 var(--display); letter-spacing: -.02em; margin-block: 10px 14px; }
.coupon__text { font: 700 clamp(19px, 2.1vw, 28px)/1.15 var(--display); max-width: 18ch; }
.coupon__stub {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: 32px; border-left: 3px dashed rgba(255, 255, 255, .55); font-size: 15px;
}
.coupon__stub p { opacity: .85; }
.btn--light { background: #fff; border-color: #fff; color: var(--red); }
.btn--light:hover { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }

/* ---------- Прайс: строка подсвечивается, фото меняется ---------- */
.menu li { position: relative; cursor: pointer; transition: padding-left .35s cubic-bezier(.2, .7, .2, 1); outline: none; }
.menu li::before {
  content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px;
  background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform .35s;
}
.menu li.is-active { padding-left: 20px; }
.menu li.is-active::before { transform: scaleY(1); }
.menu li.is-active .menu__price { color: var(--bone); }
.menu li:focus-visible { box-shadow: inset 0 0 0 2px var(--red); }
.prices__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--green); }
.prices__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto;
  transition: opacity .5s, transform .9s cubic-bezier(.2, .7, .2, 1);
}
.prices__frame img.is-entering { opacity: 0; transform: scale(1.08); }
/* заглушка для услуг без своего фото */
.prices__empty {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  padding: clamp(24px, 3vw, 40px); background: var(--green); border: 1px solid var(--green-line);
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
.prices__empty b { font: 400 clamp(28px, 3vw, 42px)/1.05 var(--display); color: var(--bone); }
.prices__empty span { max-width: 28ch; color: var(--bone-dim); }
.prices__empty a { color: var(--bone); }
.prices__frame.is-empty .prices__empty { opacity: 1; pointer-events: auto; }

/* ---------- Работы: киноплёнка ---------- */
.works { position: relative; border-top: 1px solid var(--green-line); }
.works__sticky { padding-block: clamp(72px, 10vw, 120px); overflow: hidden; }
.works__track {
  display: flex; gap: 16px; align-items: stretch;
  padding-inline: max(var(--gutter), (100vw - var(--max)) / 2);
  transform: translateX(var(--wx, 0px)); will-change: transform;
}
.works__intro { flex: 0 0 min(420px, 38vw); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; padding-right: 32px; }
.works__intro .sub { margin: 0; }
.works__track button {
  flex: 0 0 auto; position: relative; height: min(68vh, 620px); aspect-ratio: 3 / 4;
  border: 0; padding: 0; overflow: hidden; background: var(--green); cursor: zoom-in;
  transform: skewX(var(--skew, 0deg)); transition: transform .2s ease-out;
}
.works__track img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.works__track button:hover img { transform: scale(1.06); }
.works__track button span {
  position: absolute; left: 0; bottom: 0; padding: 10px 14px;
  font: 700 15px var(--display); background: var(--green-deep); color: var(--bone);
}
.works.is-pinned .works__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-block: 0; }

/* ---------- Большая бегущая кнопка ---------- */
.bigcta {
  display: block; overflow: hidden; white-space: nowrap; text-decoration: none;
  border-block: 1px solid var(--green-line); padding-block: clamp(20px, 3vw, 40px);
}
.bigcta span {
  display: inline-flex; align-items: center;
  font: 900 clamp(64px, 11vw, 170px)/1 var(--display);
  color: transparent; -webkit-text-stroke: 2px var(--bone);
  transition: color .35s, -webkit-text-stroke-color .35s;
}
.bigcta span::after { -webkit-text-stroke: 0; background: var(--red); }
.bigcta:hover span, .bigcta:focus-visible span { color: var(--red); -webkit-text-stroke-color: var(--red); }

/* ---------- Появление при прокрутке ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { clip-path: inset(0 0 100% 0); transform: translateY(40px); transition: clip-path 1s cubic-bezier(.7, 0, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1); }
  .js [data-wipe] { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }
  .js [data-wipe] img { transform: scale(1.18); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
  .js .is-in[data-reveal] { clip-path: inset(0 0 -10% 0); transform: none; }
  .js .is-in[data-wipe] { clip-path: inset(0 0 0 0); }
  .js .is-in[data-wipe] img { transform: none; }
  .coupon::after { animation: shine 5s 2s infinite; }
}
@keyframes shine { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .badge svg:first-child { animation: none; }
}