/* alexv.ru — страница проекта «Удача — хоккейная клюшка».
   Общая основа (шапка, подвал, колонка текста, авторы, теги) — в site.css и project.css.
   Размеры картинок заданы в долях ширины окна так же, как на прежней странице Readymag (страница 1024 = 100vw):
   одна доля --u = 1/1024 ширины окна. */
.luck {
  --u: calc(100vw / 1024);
  font-weight: 400;
  /* поле «текст — древко клюшки» и «древко — текст»: такое же, как от ряда фотографий на белом до следующего абзаца
     (подпись к ряду + два шага текста) — решение владельца 13.10.2026 */
  --g: calc(2 * var(--p-s) + var(--l-small) + 8px);
}

/* ---------- 1. Надпись УДАЧА в начале ---------- */
/* Пока страницу прокручивают на высоту экрана, надпись стоит в центре свободной части экрана и уменьшается
   от крупного фрагмента до целого слова шириной 81,25 % окна (832 из 1024, как на Readymag).
   Высоту блока (--hin) считает скрипт: середина слова + половина его высоты + поле до названия (176 долей, как на Readymag),
   поэтому к концу уменьшения снизу въезжает текст, а слово дальше уходит вверх вместе со страницей. */
.l-hero { position: relative; height: calc(var(--hin, 60vh) + 100vh); background: #000; overflow: clip; }
@supports (height: 100svh) { .l-hero { height: calc(var(--hin, 60vh) + 100svh); } }
.l-hero-in { position: sticky; top: var(--hh, 0px); height: var(--hin, 60vh); }
.l-word {
  position: absolute;
  left: 50%;
  top: var(--cy, 40%);
  width: calc(832 * var(--u));
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%) scale(var(--k, 1));
  transform-origin: 51% 40%;
  will-change: transform;
}
/* без скрипта и при отключённом движении — сразу целое слово, без лишней высоты */
.no-js .l-hero, html:not(.fx) .l-hero { height: auto; }
.no-js .l-hero-in, html:not(.fx) .l-hero-in { position: static; height: auto; padding: calc(3 * var(--p-s)) 0 calc(176 * var(--u)); }
.no-js .l-word, html:not(.fx) .l-word { position: static; display: block; margin: 0 auto; transform: none; }

/* ---------- 2. Текст ---------- */
.luck .prose { padding-top: calc(2 * var(--p-s)); }
.luck .l-intro { padding-top: 0; }
/* Система текстов страницы (13.10.2026, переверстка по просьбе владельца):
   — заголовки разделов («Хоккейная клюшка…», «Вариации в чёрном исполнении») — крупное название сайта,
     полужирное, как названия работ на главной; по левому краю колонки текста;
   — два высказывания сценария: «…Тоска!» (проблема) и «В твоих руках!» (ответ) — тот же крупный кегль, но обычного начертания;
   — основной текст — текст проекта (18 / 22 / 26);
   — подсказки и служебное (подсказка к клюшкам, счётчик, подписи) — мелкий кегль, приглушённые;
   — авторы: роль мелким приглушённым, имя — основным кеглем сайта (16 / 18 / 20); список стоит в колонке текста
     (общее правило страниц проектов — в project.css). */
.l-t, .l-h2, .l-say, .luck .l-hands {
  font-size: var(--t-big);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.l-t, .l-h2 { margin: 0 0 var(--p-s); font-weight: 700; }
/* «Тоска!» закрывает рассказ о проблеме: от неё до предложения — два шага, как между разделами */
.luck .prose p.l-say { margin: 0 0 calc(2 * var(--p-s)); font-weight: 400; }
/* абзац проявляется один раз, когда въезжает на экран */
.fx .l-fade { opacity: 0; transition: opacity .9s ease-out; }
.fx .l-fade.on { opacity: 1; }

/* ---------- 3. Чужие клюшки ---------- */
.l-others { margin: calc(2 * var(--p-s)) 0 0; }
.l-others ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.l-others img { display: block; width: 100%; height: auto; }
.l-others figcaption { padding-top: 8px; font-size: var(--t-small); line-height: var(--l-small); color: #8a8a8a; text-align: right; }
/* на узком экране ряд не мельчится, а двигается пальцем; следующая клюшка выглядывает */
@media (max-width: 639.98px) {
  .l-others ul { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .l-others ul::-webkit-scrollbar { display: none; }
  .l-others li { flex: 0 0 62vw; scroll-snap-align: start; }
}

/* ---------- 4. Надписи на клюшке: полосы шире экрана, концы уходят за края ---------- */
/* Поля считаются от древка, а не от края картинки: над древком в картинке прозрачное поле.
   Числа — где проходят древки в видимой части полос (замер по прозрачности картинок, доли страницы 1024). */
.l-strip { overflow: hidden; pointer-events: none; }  /* прозрачная часть полосы заходит на текст выше — текст остаётся доступен */
.l-strip-1 { margin: calc(var(--g) - 205.6 * var(--u)) 0 calc(var(--g) - 6.6 * var(--u)); }
.l-strip-2 { margin: calc(var(--g) - 195.8 * var(--u)) 0 calc(-17.9 * var(--u)); }
.luck .l-strip + .prose, .luck .l-ride + .prose { padding-top: 0; }
.l-strip img { display: block; max-width: none; height: auto; }
.l-strip-1 img:first-child { width: calc(1643 * var(--u)); margin-left: calc(-332 * var(--u)); }
.l-strip-1 img + img { width: calc(1632 * var(--u)); margin: calc(16 * var(--u)) 0 0 calc(-322 * var(--u)); }
.l-strip-2 img { width: calc(1634 * var(--u)); margin-left: calc(-320 * var(--u)); }

/* ---------- 5. Вариации в чёрном исполнении: по нажатию — следующий вариант ---------- */
.l-black { padding-top: calc(3 * var(--p-s)); }
.luck .l-black .prose { padding-top: 0; }
.l-slides {
  position: relative;
  display: block;
  width: min(calc(100% - var(--fl) - var(--fr)), 1100px);
  aspect-ratio: 5000 / 1414;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.l-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s; }
.l-slides img.on { opacity: 1; }
.no-js .l-slides { cursor: default; }
.l-count { margin: 8px 0 0; font-size: var(--t-small); line-height: var(--l-small); color: #8a8a8a; text-align: center; font-variant-numeric: tabular-nums; }
.no-js .l-count { display: none; }

/* ---------- 6. Клюшки крупно: двигаются пальцем, прокруткой или по нажатию ---------- */
/* Поле считается от верхнего древка (в начальном положении); крюк соседней клюшки выше и может заходить на текст — так решил владелец */
.l-ride {
  position: relative;
  /* от подсказки до верхнего древка — один шаг: подсказка относится к клюшкам, к ним она и прижата */
  margin: calc(var(--p-s) - 449.2 * var(--u)) 0 calc(var(--g) - 41.7 * var(--u));
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  overscroll-behavior-x: contain;
}
.l-ride::-webkit-scrollbar { display: none; }
.l-hint { margin: 0; font-size: var(--t-small); line-height: var(--l-small); opacity: .6; }
.l-ride.drag { cursor: grabbing; }
/* прозрачный верх блока клюшек заходит на текст выше; текст лежит поверх, поэтому нажатия на него достаются тексту.
   Раньше верх блока был «прозрачен» для нажатий; после этого на iPhone клюшки перестали двигаться пальцем. */
.luck .l-black, .luck .l-ride-before, .luck .l-hint-box { position: relative; z-index: 2; }
.l-ride:focus-visible { outline: 1px solid #f1f1f1; outline-offset: -1px; }
.l-ride-in { position: relative; width: calc(3962 * var(--u)); height: calc(1078 * var(--u)); }
.l-ride-in img { position: absolute; max-width: none; height: auto; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.l-ride .r1 { left: calc(392 * var(--u)); top: 0; width: calc(3570 * var(--u)); }
.l-ride .r2 { left: 0; top: calc(365 * var(--u)); width: calc(3712 * var(--u)); }
.l-ride .r3 { left: calc(410 * var(--u)); top: calc(572 * var(--u)); width: calc(3552 * var(--u)); }

/* ---------- 7. Конец ---------- */
/* Знак внизу — того же размера, что слово УДАЧА в конце уменьшения; поля — как на Readymag (118 и 93 доли) */
.luck .l-logo { margin: calc(118 * var(--u)) 0 0; }
/* по центру страницы при любой ширине колонки: от левого края колонки на её половину, затем назад на половину знака */
.l-logo img { display: block; width: calc(832 * var(--u)); max-width: none; height: auto; margin: 0; position: relative; left: 50%; transform: translateX(-50%); }
.luck .l-hands { margin: calc(93 * var(--u)) 0 0; font-weight: 400; text-align: center; }
/* от «В твоих руках!» до авторов — на 20 % больше, чем от знака до «В твоих руках!» (93 × 1,2 доли) — решение владельца 13.10.2026 */
.luck .l-credits { padding-top: calc(111.6 * var(--u)); }

@media (prefers-reduced-motion: reduce) {
  .l-slides img { transition: none; }
}