/* «Эту страницу я сделал промптом» — реклама Landing Studio в конце каждого
   лэндинга проекта. Один файл на все лэндинги, а языки у них разные, поэтому
   своего у блока немного: автор, растр за ним, реплика и брызги кита на
   наведении. Текст реплики — шрифтом самой страницы, одним размером.
   Разметку вставляет _tools/made_with.py.

   Блок стоит последним в последнем разделе страницы, на его фоне и в его
   выравнивании, а раздел (.made-host) отдаёт нижний отступ: низ блока — верх
   подвала, и автор ложится обрезом по поясу на его черту. Два кадра сменяют друг друга —
   «вот эта страница» (палец вверх) и «вот сюда» (палец на реплику). Весь блок —
   одна ссылка; под курсором и без анимации он замирает на втором кадре. */

.made-host { padding-bottom: 0 !important; }

.made {
  --me: clamp(132px, 21vw, 300px);
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--me) minmax(0, 1fr);
  column-gap: clamp(14px, 2.2vw, 34px);
  margin-top: clamp(48px, 6vw, 96px);
  color: #111; text-decoration: none; text-align: left;
}
/* В разделе, где всё по центру, блок тоже встаёт по центру. */
.made--center { grid-template-columns: var(--me) minmax(0, max-content); justify-content: center; }

.made__me {
  position: relative; display: block; align-self: end;
  width: var(--me);   /* пропорции кадра ставит разметка */
  clip-path: inset(-60px -60px 0 -60px);   /* тень не уходит под черту подвала */
}
.made__raster {
  position: absolute; left: 20%; right: 8%; top: 34%; bottom: 0;
  background: radial-gradient(#ff5a1f 2.1px, transparent 2.25px) 0 0 / 6px 6px;
}
.made__f {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 4px 10px rgba(30, 20, 10, 0.16));
}
.made__f--up    { animation: made-up 3.2s steps(1, end) infinite; }
.made__f--right { animation: made-right 3.2s steps(1, end) infinite; }
@keyframes made-up    { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes made-right { 0% { opacity: 0; } 50% { opacity: 1; } }
.made:hover .made__f, .made:focus-visible .made__f { animation: none; }
.made:hover .made__f--up, .made:focus-visible .made__f--up { opacity: 0; }
.made:hover .made__f--right, .made:focus-visible .made__f--right { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .made__f { animation: none; }
  .made__f--up { opacity: 0; }
}

/* Реплика: белый лист в чёрную линию, как рамки кита, хвост — к автору.
   Стоит на высоте его рта, туда же показывает палец второго кадра. */
.made__say {
  position: relative; align-self: start; justify-self: start;
  margin-top: calc(var(--me) * 0.2); max-width: 24em;
  padding: clamp(14px, 1.6vw, 22px) clamp(16px, 1.9vw, 26px);
  background: #fff; box-shadow: inset 0 0 0 1.5px #111; border-radius: 18px;
  font-size: clamp(15px, 1.45vw, 20px); line-height: 1.45; text-wrap: pretty;
}
.made__say::before {
  content: ""; position: absolute; left: -7px; top: calc(var(--me) * 0.14);
  width: 13px; height: 13px; background: #fff;
  border-left: 1.5px solid #111; border-bottom: 1.5px solid #111;
  transform: rotate(45deg);
}

/* Брызги кита, чёрные: чёрточки по всему периметру реплики, каждая смотрит от неё
   наружу — на верхнем и нижнем краях стоя, на боковых лёжа, на углах по
   диагонали, чуть вразнобой по месту и длине, как в ките. Слева вверху их нет:
   там хвост. Лежат под репликой (z-index -1; у самой реплики нет ни
   transform, ни z-index, иначе она стала бы своим слоем и брызги остались бы
   сверху): в покое спрятаны за ней, на наведении
   вылетают из-под края, на нажатии вытягиваются и уходят дальше. Только при
   настоящем курсоре. */
@media (hover: hover) and (pointer: fine) {
  .made__say::after {
    content: ""; position: absolute; z-index: -1; inset: 12px; pointer-events: none;
    opacity: 0; --spark: 1;
    transition: opacity 0.16s ease, inset 0.26s cubic-bezier(0.18, 0.9, 0.32, 1.2),
                background-size 0.16s cubic-bezier(0.2, 0.8, 0.3, 1);
    background-repeat: no-repeat;
    background-size:
      calc(22px * var(--spark)) calc(22px * var(--spark)),
      calc(18px * var(--spark)) calc(18px * var(--spark)),
      calc(21px * var(--spark)) calc(21px * var(--spark)),
      calc(20px * var(--spark)) calc(20px * var(--spark)),
      calc(19px * var(--spark)) calc(19px * var(--spark)),
      calc(22px * var(--spark)) calc(22px * var(--spark)),
      calc(17px * var(--spark)) calc(17px * var(--spark)),
      calc(21px * var(--spark)) calc(21px * var(--spark)),
      calc(19px * var(--spark)) calc(19px * var(--spark)),
      calc(20px * var(--spark)) calc(20px * var(--spark)),
      calc(18px * var(--spark)) calc(18px * var(--spark));
    background-position:
      14% 2%,
      47% 0%,
      83% 4%,
      100% 0%,
      99% 52%,
      100% 100%,
      78% 97%,
      44% 100%,
      17% 96%,
      0% 100%,
      1% 76%;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10.3' y='5' width='3.4' height='14' fill='%23111111'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10.3' y='5' width='3.4' height='14' fill='%23111111'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10.3' y='5' width='3.4' height='14' fill='%23111111'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10.3' y='5' width='3.4' height='14' fill='%23111111' transform='rotate(45 12 12)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10.3' y='5' width='3.4' height='14' fill='%23111111' transform='rotate(90 12 12)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10.3' y='5' width='3.4' height='14' fill='%23111111' transform='rotate(-45 12 12)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10.3' y='5' width='3.4' height='14' fill='%23111111'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10.3' y='5' width='3.4' height='14' fill='%23111111'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10.3' y='5' width='3.4' height='14' fill='%23111111'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10.3' y='5' width='3.4' height='14' fill='%23111111' transform='rotate(45 12 12)'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10.3' y='5' width='3.4' height='14' fill='%23111111' transform='rotate(90 12 12)'/%3E%3C/svg%3E");
  }
  .made:hover .made__say::after, .made:focus-visible .made__say::after { opacity: 1; inset: -30px; }
  .made:active .made__say::after { opacity: 1; --spark: 1.6; inset: -42px; }
}
/* Название — как ссылка кита: терракотой, с подчёркиванием. Сама ссылка — весь блок. */
.made__go {
  color: #e8460a; white-space: nowrap;
  text-decoration: underline; text-decoration-color: rgba(255, 90, 31, 0.5);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.made:hover .made__go { text-decoration-color: #e8460a; }
.made:focus-visible { outline: none; }
.made:focus-visible .made__say { box-shadow: inset 0 0 0 1.5px #111, 0 0 0 3px #e8460a; }