/* ===== ЭКРАН 4 — КЕЙСЫ =====
   Макет шириной 1440, масштабируется под ширину окна. Фон — сетка, как в редакторе;
   поверх неё полупрозрачные карточки кейсов в 3 колонки. Высота экрана растёт сама.
   При наведении спокойная картинка сменяется «заряженной», которая чуть выпрыгивает вперёд. */

.cases {
  /* — настройки — */
  --grid-x: 180;         /* отступ сетки карточек слева */
  --grid-w: 1080;        /* ширина сетки карточек */
  --gap: 48;             /* расстояние между карточками */
  --art-h: 240;          /* высота картинки в карточке */
  --card-bg: rgba(30, 28, 33, 0.8);  /* карточка: 80% — сетка чуть просвечивает */
  --swap-time: 0.45s;    /* смена картинки при наведении */
  /* картинка в покое и «заряженная» (для кейсов без отдельной картинки на оборот) */
  --calm: saturate(0.12) brightness(0.62) contrast(1.08);
  --charged: saturate(1.1) brightness(1.05);
  --figma-blue: #0D99FF;
  /* фоновая сетка «как в редакторе» */
  --cell: 18;            /* мелкая клетка */
  --major: 108;          /* крупная клетка */

  container-type: inline-size;
  position: relative;
  z-index: 1; /* рука в конце пути заезжает на экран 5 — поверх него */
  overflow-x: clip;
  background: var(--bg);
}

.cases__stage {
  --c: calc(100cqw / 1440);
  --u: var(--c); /* курсор и выделение считают размеры в --u */
  position: relative;
  padding: calc(350 * var(--c)) 0 calc(170 * var(--c));
}

/* — фоновая сетка во весь экран — */
.cases__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, transparent 1px calc(var(--major) * var(--c))),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.10) 0 1px, transparent 1px calc(var(--major) * var(--c))),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px calc(var(--cell) * var(--c))),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.035) 0 1px, transparent 1px calc(var(--cell) * var(--c)));
  background-position: calc(var(--grid-x) * var(--c)) 0;
  /* мягко растворяется сверху и снизу, чтобы не было резкой границы с соседними экранами */
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}

/* — заголовок «Кейсы»: прозрачное видео с надувными буквами — */
.cases__title {
  position: absolute;
  left: calc(860 * var(--c));
  top: calc(-13 * var(--c));
  width: calc(517 * var(--c));
  margin: 0;
  z-index: 1;
}
.cases__title video { display: block; width: 100%; height: auto; }

/* — сетка карточек — */
.cases__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(56 * var(--c)) calc(var(--gap) * var(--c));
  width: calc(var(--grid-w) * var(--c));
  margin: 0 0 0 calc(var(--grid-x) * var(--c));
  padding: 0;
  list-style: none;
}
.frame--main { grid-column: span 2; }

/* карточки в ряду — одной высоты */
.frame { display: flex; }
.frame__link {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.frame__link:focus-visible { outline: none; }

/* имя фрейма, как в Figma */
.frame__name {
  display: block;
  margin: 0 0 calc(8 * var(--c)) calc(2 * var(--c));
  font-weight: 300;
  font-size: calc(12 * var(--c));
  color: #8d8d92;
  transition: color 0.2s ease;
}

/* — карточка — */
.frame__flip {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: calc(14 * var(--c));
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* внутренности карточки */
.frame__face { flex: 1; display: flex; flex-direction: column; }

/* — картинка: в покое спокойная, при наведении «заряженная» выпрыгивает вперёд — */
.frame__art {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(var(--art-h) * var(--c));
}
.frame__art img {
  grid-area: 1 / 1;
  max-width: 78%;
  max-height: 86%;
  transition: opacity var(--swap-time) ease, transform var(--swap-time) cubic-bezier(.2,1.25,.4,1), filter var(--swap-time) ease;
}
.frame__art--frame img { max-width: none; max-height: none; width: 104%; } /* кадр в рамке из молний: поля по краям под молнии — показываем крупнее */
.frame__art--wide img { max-width: none; max-height: none; width: 116%; translate: 0 calc(-10 * var(--c)); } /* в файле много пустого поля — увеличиваем */
.frame__art img:first-child { filter: var(--calm); }
/* у кейса своя спокойная картинка (data-hover — заряженная): в покое она уже цветная, не обесцвечиваем */
.frame__art img[data-hover]:first-child { filter: none; }
.frame__art .frame__charged {
  opacity: 0;
  transform: scale(0.94);
  filter: var(--charged);
}
.frame__link:hover .frame__art img:first-child,
.frame__link:focus-visible .frame__art img:first-child { opacity: 0; transform: scale(0.97); }
.frame__link:hover .frame__charged,
.frame__link:focus-visible .frame__charged {
  opacity: 1;
  transform: scale(1.06) translateY(calc(-8 * var(--c)));
  animation: charge 0.5s steps(1, end);
}
/* «электрический разряд»: несколько вспышек в момент появления */
@keyframes charge {
  0%   { filter: saturate(1.6) brightness(1.8); }
  18%  { filter: saturate(0.4) brightness(0.8); }
  36%  { filter: saturate(1.5) brightness(1.5); }
  54%  { filter: saturate(0.7) brightness(0.95); }
  72%  { filter: var(--charged); }
}

/* — текст: логотип кейса, строка о сути, метки — */
.frame__text {
  display: block;
  padding: 0 calc(20 * var(--c)) calc(18 * var(--c));
}
.frame__logo {
  display: block;
  width: var(--logo-w, 70%);
  height: auto;
  max-height: calc(96 * var(--c));
  object-fit: contain;
  object-position: left center;
  margin-bottom: calc(8 * var(--c));
  filter: saturate(0.55) brightness(0.9);
  transition: filter 0.3s ease;
}
.frame__link:hover .frame__logo { filter: none; }
.frame__text span {
  display: block;
  margin-bottom: calc(10 * var(--c));
  font-weight: 300;
  font-size: calc(12 * var(--c));
  line-height: 1.5;
  color: #b9b9be;
}
.frame__text i {
  display: inline-block;
  margin: 0 calc(6 * var(--c)) calc(4 * var(--c)) 0;
  padding: calc(3 * var(--c)) calc(9 * var(--c));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: calc(20 * var(--c));
  font-style: normal;
  font-weight: 300;
  font-size: calc(10 * var(--c));
  color: #cfcfcf;
}

/* — выделение как в Figma и «Открыть кейс →» — не крутятся вместе с карточкой — */
.frame__sel {
  position: absolute;
  left: -1px; right: -1px; bottom: -1px;
  top: calc(26 * var(--c) - 1px); /* под именем фрейма */
  border: 1.5px solid var(--figma-blue);
  border-radius: calc(14 * var(--c));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 2;
}
.frame__sel i {
  position: absolute;
  width: calc(8 * var(--c));
  height: calc(8 * var(--c));
  background: #fff;
  border: 1.5px solid var(--figma-blue);
}
.frame__sel i:nth-child(1) { left: 0;  top: 0;    translate: -50% -50%; }
.frame__sel i:nth-child(2) { right: 0; top: 0;    translate: 50% -50%; }
.frame__sel i:nth-child(3) { left: 0;  bottom: 0; translate: -50% 50%; }
.frame__sel i:nth-child(4) { right: 0; bottom: 0; translate: 50% 50%; }

.frame__open {
  position: absolute;
  right: calc(18 * var(--c));
  top: calc(44 * var(--c));
  padding: calc(6 * var(--c)) calc(12 * var(--c));
  border-radius: calc(20 * var(--c));
  background: var(--figma-blue);
  color: #fff;
  font-weight: 400;
  font-size: calc(11 * var(--c));
  opacity: 0;
  translate: 0 calc(-6 * var(--c));
  transition: opacity 0.2s ease, translate 0.3s cubic-bezier(.2,.9,.1,1);
  z-index: 3;
}

.frame__link:hover .frame__name,
.frame__link:focus-visible .frame__name { color: var(--figma-blue); }
.frame__link:hover .frame__sel,
.frame__link:focus-visible .frame__sel { opacity: 1; }
.frame__link:hover .frame__open,
.frame__link:focus-visible .frame__open { opacity: 1; translate: 0 0; }

/* — раскладка: пока курсор не принёс карточку на место, её не видно (js/cases.js) — */
.frame.is-pending { opacity: 0; }

/* — в работе: одна строка логотипов — */
.cases__wip {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(28 * var(--c));
  margin: calc(70 * var(--c)) 0 0 calc(var(--grid-x) * var(--c));
}
.cases__wip-label {
  font-weight: 300;
  font-size: calc(13 * var(--c));
  color: #8d8d92;
  white-space: nowrap;
}
.cases__wip ul {
  display: flex;
  align-items: center;
  gap: calc(34 * var(--c));
  margin: 0;
  padding: 0;
  list-style: none;
}
.cases__wip img {
  display: block;
  height: calc(46 * var(--c));
  width: auto;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.cases__wip li:hover img { opacity: 1; }

/* — заметка «как на MacBook»: курсор открывает её и печатает текст (js/cases.js) — */
.note {
  /* — настройки — */
  --x: 180; --y: 78; --w: 450;

  position: absolute;
  left: calc(var(--x) * var(--c));
  top: calc(var(--y) * var(--c));
  width: calc(var(--w) * var(--c));
  border-radius: calc(12 * var(--c));
  background: rgba(30, 30, 32, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 calc(20 * var(--c)) calc(50 * var(--c)) rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transform-origin: 30% 0;
  translate: var(--dx, 0px) var(--dy, 0px); /* перетаскивание (js/note.js) */
  z-index: 4;
}
.note.is-dragging { box-shadow: 0 calc(30 * var(--c)) calc(70 * var(--c)) rgba(0, 0, 0, 0.6); }

/* свёрнутая заметка — маленькая плашка */
.note.is-min { display: none; }
.note-pill {
  position: absolute;
  left: calc(180 * var(--c));
  top: calc(78 * var(--c));
  padding: calc(7 * var(--c)) calc(14 * var(--c)) calc(7 * var(--c)) calc(28 * var(--c));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: calc(20 * var(--c));
  background: rgba(30, 30, 32, 0.96) radial-gradient(circle at calc(14 * var(--c)) 50%, #febc2e calc(4 * var(--c)), transparent calc(4.5 * var(--c)));
  color: #d6d6da;
  font: 400 calc(12 * var(--c)) var(--font);
  cursor: pointer;
  z-index: 4;
}
.note-pill[hidden] { display: none; }
.note__bar {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--c));
  height: calc(30 * var(--c));
  padding: 0 calc(12 * var(--c));
  background: #2a2a2c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.note__bar { cursor: grab; touch-action: none; user-select: none; }
.note.is-dragging .note__bar { cursor: grabbing; }
.note__btn {
  width: calc(11 * var(--c)); height: calc(11 * var(--c));
  padding: 0; border: 0; border-radius: 50%;
  background: #ff5f57; cursor: pointer;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2);
}
.note__btn:nth-child(2) { background: #febc2e; }
.note__btn:nth-child(3) { background: #28c840; }
.note__bar:hover .note__btn { filter: brightness(1.1); }
.note__bar span { margin-left: auto; margin-right: auto; translate: calc(-20 * var(--c)) 0; font-weight: 400; font-size: calc(11 * var(--c)); color: #9a9aa0; }
.note__body { padding: calc(16 * var(--c)) calc(20 * var(--c)) calc(18 * var(--c)); }
.note__title {
  display: block;
  margin-bottom: calc(8 * var(--c));
  font-weight: 600;
  font-size: calc(17 * var(--c));
  color: #f2f2f2;
}
.note__text {
  margin: 0;
  min-height: calc(42 * var(--c) * 1.55);
  font-weight: 300;
  font-size: calc(13 * var(--c));
  line-height: 1.55;
  color: #d6d6da;
}
/* каретка при печати */
.note__text.is-typing::after {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: #febc2e;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.cases.is-note-pending .note { opacity: 0; pointer-events: none; }

/* «скоро будет здесь» — пока у кейса нет своей страницы (js/cases.js) */
.cases__soon {
  position: absolute;
  left: 0; top: 0;
  padding: calc(9 * var(--c)) calc(14 * var(--c));
  border-radius: calc(12 * var(--c)) calc(12 * var(--c)) calc(12 * var(--c)) calc(3 * var(--c));
  background: rgba(30, 28, 32, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 calc(10 * var(--c)) calc(30 * var(--c)) rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: 300;
  font-size: calc(13 * var(--c));
  white-space: nowrap;
  opacity: 0;
  translate: 0 calc(6 * var(--c));
  pointer-events: none;
  transition: opacity 0.2s ease, translate 0.3s cubic-bezier(.2,.9,.1,1);
  z-index: 5;
}
.cases__soon.is-on { opacity: 1; translate: 0 0; }

/* курсор и выделение на этом экране */
.cases__stage > .intro-select,
.cases__stage > .intro-cursor { position: absolute; left: 0; top: 0; }

@media (prefers-reduced-motion: reduce) {
  .frame__link:hover .frame__charged { animation: none; transform: none; }
}

/* — рука слева: ползёт вниз за прокруткой, «коза» → в конце пути средний палец (js/hand.js) — */
.cases__hand {
  /* — настройки — */
  --hand-x: -50;      /* левый край (ед. макета; минус — заходит за край экрана) */
  --hand-bottom: 430; /* исходное место: нижний край от низа экрана кейсов */
  --hand-w: 220;      /* ширина */
  --hand-rot: 14deg;  /* наклон */
  --hand-speed: 0.55; /* скорость сползания относительно прокрутки (0 — стоит, 1 — едет вместе с экраном) */
  --hand-travel: 560; /* длина пути вниз (ед. макета); в конце чуть заезжает на экран 5 */

  position: absolute;
  left: calc(var(--hand-x) * var(--c));
  bottom: calc(var(--hand-bottom) * var(--c));
  width: calc(var(--hand-w) * var(--c));
  aspect-ratio: 767 / 1024;
  rotate: var(--hand-rot);
  translate: 0 var(--ty, 0px);
  z-index: 2;
  pointer-events: none;
  will-change: translate;
  animation: hand-float 5.5s ease-in-out infinite; /* лёгкое покачивание */
}
.cases__hand-img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 90%; /* «пружинит» от запястья */
  animation: hand-hum 3.2s steps(1) infinite; /* молнии иногда вспыхивают */
}
@keyframes hand-float {
  0%, 100% { transform: none; }
  50% { transform: translateY(calc(-10 * var(--c))); }
}
@keyframes hand-hum {
  0%, 100% { filter: none; }
  71% { filter: brightness(1.35) saturate(1.2); }
  73% { filter: none; }
  76% { filter: brightness(1.2); }
  78% { filter: none; }
}

/* облачко «пук» — вылетает из запястья */
.cases__puff {
  position: absolute;
  left: 22%;
  bottom: -4%;
  width: 56%;
  aspect-ratio: 1;
  pointer-events: none;
}
.cases__puff i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(206, 255, 220, 0.75), rgba(150, 235, 205, 0.28) 50%, transparent 70%);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cases__hand, .cases__hand-img { animation: none; }
}