/* ============================================================
   closed.css — один стиль на все страницы-заглушки fsistudio.ru.

   Страницы отличаются только заголовком и парой строк текста,
   поэтому css один и тот же, а разметка собрана по шаблону.

   Фон — градиент FSI-Bkg, затемнённый слоем: без него белый текст
   на правой, розовой половине почти не читается.

   Сцена с обломками лежит отдельной картинкой над текстом. Белая
   подложка вырезана из самого снимка в альфа-канал, поэтому
   никакого режима наложения тут нет и картинка не темнеет.
   ============================================================ */

:root {
  --ink:       #ffffff;
  --ink-dim:   rgba(255, 255, 255, .76);
  --ink-mute:  rgba(255, 255, 255, .5);
  --acc:       #ff6b86;   /* ядро сферы */
  --acc-2:     #9a6cff;   /* крыло старого знака */

  --head: 'Geologica', 'Segoe UI', system-ui, sans-serif;
  --body: 'Onest', 'Segoe UI', system-ui, sans-serif;

  --snap: .34s cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: #140f1c;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 64px) clamp(18px, 5vw, 48px);
  background:
    linear-gradient(rgba(12, 8, 18, .52), rgba(12, 8, 18, .52)),
    url('/img/FSI-Bkg.webp') center / cover no-repeat fixed,
    #140f1c;
  font-family: var(--body);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ------------------------------------------------------------ сцена */

.scene {
  display: block;
  width: 100%;
  max-width: 580px;
  height: auto;
  margin: 0 auto clamp(8px, 1.6vw, 18px);
}

/* ------------------------------------------------------------ текст */

main {
  width: 100%;
  max-width: 680px;
  text-align: center;
}

main.wide { max-width: 760px; text-align: left; }

/* Затемнять колонку целиком нельзя — сцена лежит прямо над ней,
   поэтому читаемость держим тенью у самих букв. */
h1, .lede, .story p, .why {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 18px rgba(0, 0, 0, .6);
}

h1 {
  font-family: var(--head);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.08;
  font-size: clamp(1.75rem, 5.4vw, 3.2rem);
  margin: 0 0 14px;
  text-wrap: balance;
}

.lede {
  color: var(--ink-dim);
  font-size: clamp(1rem, 2.4vw, 1.1rem);
  margin: 0 auto;
  max-width: 54ch;
}

main.wide .lede { margin-left: 0; }

.story p {
  color: var(--ink-dim);
  margin: 0 0 16px;
  font-size: clamp(.98rem, 2.2vw, 1.06rem);
}

.story .fine {
  color: var(--ink-mute);
  font-size: .92rem;
  padding-left: 14px;
  border-left: 2px solid var(--acc);
  margin-top: 26px;
}

.date { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ кнопка-осколок

   Кнопка разбита на семь граней: сфалерит колется по спайности
   ровными кусками, отсюда и форма. В покое грани разлетаются,
   при наведении сходятся обратно в целое.

   Анимации появления у граней нет намеренно: она удерживала бы
   свой конечный кадр, и кнопка собиралась бы рывком, а
   разлеталась плавно — ровно наоборот тому, что нужно.          */

.shard {
  position: relative;
  display: inline-block;
  padding: 17px 34px;
  margin: 30px;              /* запас под разлетевшиеся грани */
  min-width: 240px;
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(.95rem, 2.2vw, 1.02rem);
  color: var(--ink);
  text-decoration: none;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

/* :not(.t) обязателен — иначе правило цепляет и слой с текстом,
   и под надписью появляется собственная подложка. */
.shard span:not(.t) {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--a, 140deg), rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 107, 134, .94), rgba(154, 108, 255, .9));
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  transition: transform var(--snap), filter var(--snap);
  /* drop-shadow считается уже после clip-path, поэтому обводит
     сам осколок — за счёт неё и видны трещины между гранями. */
  filter: brightness(.84) saturate(.82) drop-shadow(0 0 1.6px rgba(0, 0, 0, .75));
}

.shard .t {
  position: relative;
  z-index: 1;
  display: block;
  letter-spacing: .04em;
  transition: letter-spacing var(--snap);
}

/* грани: вместе закрывают весь прямоугольник, без зазоров */
.shard span:not(.t):nth-child(1) { clip-path: polygon(0 0, 22% 0, 16% 48%, 0 62%);                --x: -26px; --y: -17px; --r: -5deg;   --a: 120deg; }
.shard span:not(.t):nth-child(2) { clip-path: polygon(22% 0, 47% 0, 42% 55%, 16% 48%);            --x: -9px;  --y: -25px; --r: 3.5deg;  --a: 165deg; }
.shard span:not(.t):nth-child(3) { clip-path: polygon(47% 0, 72% 0, 69% 40%, 42% 55%);            --x: 11px;  --y: -21px; --r: -3.5deg; --a: 95deg; }
.shard span:not(.t):nth-child(4) { clip-path: polygon(72% 0, 100% 0, 100% 34%, 69% 40%);          --x: 27px;  --y: -14px; --r: 5deg;    --a: 200deg; }
.shard span:not(.t):nth-child(5) { clip-path: polygon(0 62%, 16% 48%, 42% 55%, 38% 100%, 0 100%); --x: -24px; --y: 18px;  --r: 3.5deg;  --a: 60deg; }
.shard span:not(.t):nth-child(6) { clip-path: polygon(42% 55%, 69% 40%, 74% 100%, 38% 100%);      --x: 2px;   --y: 27px;  --r: -3.5deg; --a: 150deg; }
.shard span:not(.t):nth-child(7) { clip-path: polygon(69% 40%, 100% 34%, 100% 100%, 74% 100%);    --x: 25px;  --y: 17px;  --r: 5deg;    --a: 30deg; }

/* Собираем: грани сходятся, и вместе с разлётом уходит обводка. */
.shard:hover span:not(.t),
.shard:focus-visible span:not(.t) {
  transform: none;
  filter: brightness(1.08) saturate(1.05) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
}

.shard:hover .t,
.shard:focus-visible .t { letter-spacing: .02em; }

.shard:focus-visible { outline: 2px solid var(--ink); outline-offset: 8px; }

.shard:active span:not(.t) { transform: scale(.985); }

/* ------------------------------------------------------------ прочее */

.why {
  display: inline-block;
  color: var(--ink-mute);
  font-size: .94rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  padding-bottom: 2px;
  transition: color var(--snap), border-color var(--snap);
}

.why:hover { color: var(--ink); border-color: var(--acc); }

/* ------------------------------------------------------------ узкие экраны */

@media (max-width: 560px) {
  body { align-items: flex-start; padding-top: 7vh; }
  main.wide { text-align: left; }
  /* ширину не задаём: блочная ссылка сама займёт строку, а поля
     по бокам нужны, чтобы разлетевшиеся грани не срезало краем */
  .shard { display: block; min-width: 0; padding: 16px 20px; margin: 24px 30px; }
}

/* На сенсорном экране наведения нет, поэтому разлёт держим
   поменьше — иначе кнопка так и остаётся грудой осколков. */
@media (hover: none) {
  .shard span:not(.t) {
    transform: translate(calc(var(--x, 0px) * .45), calc(var(--y, 0px) * .45))
               rotate(calc(var(--r, 0deg) * .45));
    filter: brightness(.95) saturate(.95) drop-shadow(0 0 1px rgba(0, 0, 0, .5));
  }
  .shard:active span:not(.t) {
    transform: none;
    filter: brightness(1.08) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
}

@media (prefers-reduced-motion: reduce) {
  .shard span:not(.t) { transform: none; filter: none; transition: none; }
  .shard .t { transition: none; }
}