/* =========================================================
   Кейс барбера (превью). Тёмная вставка среди светлого сайта.
   Путь клиента: таплинк → запись и предоплата в Telegram → у мастера.
   Анимации запускаются, когда карточка получает .visible
   (её ставит общий IntersectionObserver сайта).
   ========================================================= */

.case { padding-top: 0; }

.case__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 36px;
  padding: 80px 64px 0;
  color: #fff;
  background: linear-gradient(170deg, #121620 0%, #07090d 100%);
  box-shadow: 0 40px 100px rgba(12,27,57,0.30);
}
/* тонкая сетка + виньетка */
.case__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
}
/* Северное сияние: три пятна плывут в разные стороны */
.case__aurora {
  position: absolute;
  z-index: -2;
  inset: -20% -10% auto;
  height: 900px;
  opacity: 0.9;
  pointer-events: none;
}
.case__aurora i {
  position: absolute;
  border-radius: 50%;
}
.case__aurora i:nth-child(1) {
  width: 620px; height: 620px; left: 18%; top: 0;
  background: radial-gradient(closest-side, rgba(36,86,208,0.75), transparent);
  animation: aur-1 18s ease-in-out infinite alternate;
}
.case__aurora i:nth-child(2) {
  width: 520px; height: 520px; right: 12%; top: 80px;
  background: radial-gradient(closest-side, rgba(34,180,255,0.45), transparent);
  animation: aur-2 22s ease-in-out infinite alternate;
}
.case__aurora i:nth-child(3) {
  width: 480px; height: 480px; left: 42%; top: 260px;
  background: radial-gradient(closest-side, rgba(120,90,255,0.40), transparent);
  animation: aur-3 26s ease-in-out infinite alternate;
}
@keyframes aur-1 { to { transform: translate(180px, 120px) scale(1.2); } }
@keyframes aur-2 { to { transform: translate(-220px, 60px) scale(0.85); } }
@keyframes aur-3 { to { transform: translate(-140px, -160px) scale(1.25); } }

/* Световая полоса, которая иногда проходит по карточке */
.case__beam {
  /* Высота фиксированная (а не 140% карточки): на телефоне карточка ~3500px,
     и такой слой Safari не мог держать на видеокарте — полоса замирала на ходу.
     translate3d + will-change держат небольшой слой на видеокарте всё время. */
  position: absolute;
  z-index: -1;
  top: -100px;
  left: 0;
  width: 30%;
  max-width: 420px;
  height: 1100px;
  background: linear-gradient(90deg, transparent, rgba(157,192,255,0.07), transparent);
  transform: translate3d(-160%, 0, 0) skewX(-20deg);
  will-change: transform;
  backface-visibility: hidden;
  animation: case-beam 11s linear 2s infinite;
  pointer-events: none;
}
@keyframes case-beam {
  0%, 55% { transform: translate3d(-160%, 0, 0) skewX(-20deg); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  100%    { transform: translate3d(480%, 0, 0) skewX(-20deg); }
}

/* Живая рамка: по краю карточки бежит голубой блик */
@property --case-ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.case__ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--case-ang),
    rgba(255,255,255,0.06) 0deg,
    rgba(255,255,255,0.06) 250deg,
    rgba(157,192,255,0.9) 310deg,
    rgba(255,255,255,0.06) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: case-spin 8s linear infinite;
  pointer-events: none;
}
@keyframes case-spin { to { --case-ang: 360deg; } }

/* ---------- Заголовок ---------- */
.case__head {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
/* Плашка мастера: аватар, имя, галочка, ник */
.case__who {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 6px 6px;
  margin-bottom: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  text-align: left;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.case__who img {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12);
}
.case__who-text { display: flex; flex-direction: column; line-height: 1.2; }
.case__who-text b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.case__verified { width: 15px; height: 15px; }
.case__who-text > span { font-size: 12px; color: rgba(255,255,255,0.55); }
@media (hover: hover) {
  .case__who:hover { background: rgba(255,255,255,0.08); border-color: rgba(157,192,255,0.3); }
}
.case__title {
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.case__title-accent {
  background: linear-gradient(100deg, #b9d3ff 0%, #6fa6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.case__lead {
  max-width: 620px;
  margin: 20px auto 0;
  font-size: clamp(15px, 1.7vw, 17.5px);
  line-height: 1.6;
  color: rgba(255,255,255,0.66);
  text-wrap: pretty;
}
.case__lead a { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.35); }

/* ---------- Цифры: одна строка с разделителями ---------- */
.case__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 56px auto 0;
  max-width: 960px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.case__stat {
  padding: 28px 20px;
  text-align: center;
}
.case__stat + .case__stat { border-left: 1px solid rgba(255,255,255,0.08); }
.case__num {
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 30%, #9dc0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.case__lbl {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255,255,255,0.55);
}

/* ---------- Путь клиента: три экрана ---------- */
.case__flow {
  position: relative;
  margin-top: 72px;
}
.case__steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 940px;
}
.case-step { min-width: 0; }
.case-step__shot {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #16181d;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.10),
    0 24px 48px rgba(0,0,0,0.5),
    0 50px 100px rgba(0,0,0,0.3);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform .6s var(--ease), box-shadow .45s var(--ease);
  will-change: transform;
}
.case-step.is-tilting .case-step__shot { transition: transform .12s linear, box-shadow .45s var(--ease); }
/* блик, который идёт за курсором */
.case-step__shot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,0.16), transparent 45%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.case-step.is-tilting .case-step__shot::before { opacity: 1; }
.case-step__shot img {
  width: 100%;
  aspect-ratio: 1206 / 2144;
  object-fit: cover;
  display: block;
}
/* блик по стеклу */
.case-step__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.10) 0%, transparent 35%);
  pointer-events: none;
}
.case-step--master .case-step__shot {
  box-shadow:
    0 0 0 1.5px rgba(157,192,255,0.55),
    0 24px 48px rgba(0,0,0,0.5),
    0 40px 110px rgba(61,126,255,0.40);
}

.case-step__cap { margin-top: 26px; }
.case-step__n {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #9dc0ff;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(77,143,240,0.12);
  border: 1px solid rgba(157,192,255,0.16);
}
.case-step--master .case-step__n { color: #fff; background: var(--grad); border-color: transparent; }
.case-step__cap h3 {
  margin-top: 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.case-step__cap p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.58);
}

/* Линия, которая соединяет экраны (видна в промежутках) */
.case__line {
  position: absolute;
  z-index: 0;
  left: 12%; right: 12%;
  top: 34%;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
}
.case__line-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(77,143,240,0.2), #4d8ff0 50%, #9dc0ff);
  transform-origin: left center;
}
/* во всю ширину линии: сдвиг на 100% своей ширины = от начала линии до конца */
.case__line-dot {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.case__line-dot::before {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(77,143,240,0.35), 0 0 18px 4px rgba(77,143,240,0.8);
}

/* ---------- Отзывы: бегущая лента ---------- */
.case__reviews {
  margin: 72px -64px 0;
  padding: 36px 0 44px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.015);
}
.case__reviews-head {
  text-align: center;
  font-size: 14.5px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 22px;
}
.case__reviews-head b { color: #fff; margin: 0 2px 0 8px; }
.case__stars { color: #f5c54a; letter-spacing: 2px; }

.rv-marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.rv-track {
  flex: none;
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 8px;
  list-style: none;
  animation: rv-scroll 48s linear infinite;
}
.rv-marquee:hover .rv-track { animation-play-state: paused; }
@keyframes rv-scroll {
  to { transform: translateX(-100%); }
}
.rv-track li {
  flex: none;
  width: 300px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
}
.rv-stars { color: #f5c54a; font-size: 13px; letter-spacing: 2px; }
.rv-track p {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
}
.rv-track b {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
}

/* ---------- Анимация появления ---------- */
.js .case__card .case__head > *,
.js .case__card .case__stat,
.js .case__card .case-step {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .case__card .case-step { transform: translateY(60px) scale(.96); }
.js .case__card .case__line-fill { transform: scaleX(0); transition: transform 1.4s var(--ease) .9s; }

.js .case__card.visible .case__head > *,
.js .case__card.visible .case__stat,
.js .case__card.visible .case-step { opacity: 1; transform: none; }

.js .case__card.visible .case__head > :nth-child(1) { transition-delay: .05s; }
.js .case__card.visible .case__head > :nth-child(2) { transition-delay: .15s; }
.js .case__card.visible .case__head > :nth-child(3) { transition-delay: .25s; }
.js .case__card.visible .case__stat:nth-child(1) { transition-delay: .35s; }
.js .case__card.visible .case__stat:nth-child(2) { transition-delay: .43s; }
.js .case__card.visible .case__stat:nth-child(3) { transition-delay: .51s; }
.js .case__card.visible .case__stat:nth-child(4) { transition-delay: .59s; }
.js .case__card.visible .case-step:nth-child(1) { transition-delay: .55s; }
.js .case__card.visible .case-step:nth-child(2) { transition-delay: .75s; }
.js .case__card.visible .case-step:nth-child(3) { transition-delay: .95s; }
.js .case__card.visible .case__line-fill { transform: scaleX(1); }
.case__card.visible .case__line-dot { animation: case-travel 3.2s cubic-bezier(.6,0,.4,1) 2.2s infinite; }
@keyframes case-travel {
  0%   { transform: translateX(0);    opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@media (hover: hover) {
  .case-step:hover .case-step__shot { --ty: -10px; }
}

/* Заголовок появляется по словам (слова оборачивает скрипт) */
.case__title .w { display: inline-block; }
.js .case__card .case__title-accent { opacity: 0; }
.js .case__card.visible .case__title-accent { opacity: 1; transition: opacity 1s var(--ease); transition-delay: calc(.12s + var(--i, 6) * 55ms); }
.js .case__card .case__title.is-split { opacity: 1; transform: none; }
.js .case__card .case__title.is-split .w {
  opacity: 0;
  transform: translateY(0.5em) rotate(2deg);
  filter: blur(8px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  transition-delay: calc(.12s + var(--i) * 55ms);
}
.js .case__card.visible .case__title.is-split .w { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .case__aurora i, .case__beam, .case__ring, .case__line-dot { animation: none !important; }
  .js .case__card .case__title.is-split .w { opacity: 1; transform: none; filter: none; }
  .js .case__card .case__title-accent { opacity: 1; }
  .case__line-dot { display: none; }
  .rv-track { animation: none; }
  .rv-marquee { overflow-x: auto; }
  .js .case__card .case__head > *,
  .js .case__card .case__stat,
  .js .case__card .case-step { opacity: 1; transform: none; }
  .js .case__card .case__line-fill { transform: none; }
}

/* ---------- Адаптив ---------- */
@media (max-width: 960px) {
  .case__card { padding: 64px 36px 0; }
  .case__reviews { margin-inline: -36px; }
  .case__steps { gap: 28px; }
}

@media (max-width: 768px) {
  .case__card { padding: 48px 20px 0; border-radius: 28px; }
  .case__aurora { height: 700px; }
  .case__ring { animation: none; }
  .case__aurora i:nth-child(1) { width: 380px; height: 380px; left: 0; }
  .case__aurora i:nth-child(2) { width: 320px; height: 320px; right: -10%; }
  .case__aurora i:nth-child(3) { display: none; }
  .case__who { margin-bottom: 22px; }

  .case__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px; }
  .case__stat { padding: 22px 10px; }
  .case__stat:nth-child(3) { border-left: 0; }
  .case__stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,0.08); }
  .case__lbl { font-size: 12px; }

  /* шаги листаются пальцем вбок */
  .case__flow { margin-top: 44px; }
  .case__line { display: none; }
  .case__steps {
    display: flex;
    gap: 16px;
    margin: 0 -20px;
    padding: 0 20px 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    scrollbar-width: none;
  }
  .case__steps::-webkit-scrollbar { display: none; }
  .case-step { flex: 0 0 72%; scroll-snap-align: start; }
  .case-step__shot { border-radius: 20px; }
  .case-step__cap { margin-top: 18px; }
  .case-step__cap h3 { font-size: 16px; }
  .case-step__cap p { font-size: 13.5px; }

  .case__reviews { margin: 48px -20px 0; padding: 28px 0 32px; }
  .rv-track li { width: 250px; padding: 16px; }
  .rv-track { animation-duration: 36s; }
}