/* =====================================================================
   KAIJU — блоки главной после первого экрана: «Коллекция» (стикербук),
   «Технологии» (раскрытая бирка), «О создателях», подвал главной, пасхалки.
   Палитра брендбука: графит #353535, пыльно-розовый #E8C1D7, кирпичный
   #9D302B, бледно-розовый #FCE8F1, бетонный #E5E3E3; лёд бирки — только
   в Технологиях. Широкий капс подписей — Unbounded (OFL, Google Fonts):
   подключается отдельной строкой в index.html; уберёте её — подписи
   останутся на Montserrat, вёрстка не поедет.
   ===================================================================== */
:root {
  --font-wide: "Unbounded", "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --hb-concrete: #e5e3e3;
  --hb-ink: #353535;
  --hb-brick: #9d302b;
  --hb-pink: #e8c1d7;
  --hb-pink-pale: #fce8f1;
  --hb-flash: #ff659f;
  --hb-paper: #ffffff;
  --hb-shadow: rgba(53, 53, 53, 0.22);
  --hb-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hb-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hb-pad: clamp(16px, 2.8vw, 40px);
  /* зубчатый край брендбука — «клыки/сосульки», тянется плиткой по 720 px */
  --hb-fangs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 30' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H720 V30 L720 30 L710.4 20 L702 30 L684.5 22 L672 30 L660 16 L650 30 L640 16 L624 30 L611.3 12 L588 30 L571.6 22 L562 30 L552.5 22 L536 30 L518.9 16 L500 30 L483.3 2 L470 30 L453.7 8 L444 30 L428.3 18 L418 30 L404.5 22 L396 30 L383.1 18 L366 30 L348.8 22 L330 30 L319.3 20 L304 30 L288.7 18 L274 30 L259 20 L244 30 L236.1 12 L226 30 L208.8 12 L190 30 L180 12 L172 30 L164.1 20 L158 30 L147.3 22 L128 30 L121.4 12 L110 30 L95.6 2 L80 30 L71.9 22 L66 30 L48.4 12 L36 30 L27.3 12 L22 30 L10.3 0 L0 30 Z'/%3E%3C/svg%3E");
}

html[data-theme="dark"] {
  --hb-concrete: #161a23;
  --hb-ink: #eaf0f8;
  --hb-brick: #f0a29b;
  --hb-pink-pale: #24161f;
  --hb-paper: #f4f1f1;
  --hb-shadow: rgba(0, 0, 0, 0.55);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* общий заголовок блоков — как «Журнал»: Montserrat 900, капс */
.hb-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--hb-ink);
}

.hb-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* край-«клыки» поверх стыка с предыдущим блоком: цвет — фон текущего блока */
.hb-fangs-top,
.hb-fangs-bottom {
  position: relative;
}

.hb-fangs-top::before,
.hb-fangs-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  background: var(--edge-bg);
  -webkit-mask: var(--hb-fangs) 0 0 / 720px 100% repeat-x;
  mask: var(--hb-fangs) 0 0 / 720px 100% repeat-x;
  pointer-events: none;
  z-index: 2;
}

.hb-fangs-top::before {
  top: -25px;
  transform: scaleY(-1);
}

.hb-fangs-bottom::after {
  bottom: -25px;
  -webkit-mask-position: 260px 0;
  mask-position: 260px 0;
}

@media (max-width: 767px) {
  .hb-fangs-top::before { height: 18px; top: -17px; }
}

/* ============================ КОЛЛЕКЦИЯ =============================== */
.hb-sb {
  --edge-bg: var(--hb-concrete);
  background: var(--hb-concrete);
  color: var(--hb-ink);
  padding: clamp(56px, 6vw, 96px) 0 clamp(64px, 7vw, 112px);
  overflow-x: clip;
}

.sb-in {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--hb-pad);
}

.sb-head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 34ch) 1fr auto;
  align-items: end;
  gap: 12px 28px;
  margin-bottom: clamp(48px, 5vw, 72px);
}

.sb-lead {
  margin: 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.45;
  color: #5a5858;
}

html[data-theme="dark"] .sb-lead { color: var(--muted); }

.sb-lead .on-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .sb-lead .on-touch { display: inline; }
  .sb-lead .on-mouse { display: none; }
}

.sb-all {
  font-family: var(--font-wide);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hb-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
  display: inline-block;
  padding: 13px 0;
}

/* слоган-стикер брендбука; по нему (или набрав steezy) шлёпается штамп */
.sb-steezy {
  justify-self: start;
  align-self: center;
  transform: rotate(-4deg);
  padding: 7px 10px 6px;
  border: 0;
  border-radius: 4px;
  background: var(--hb-ink);
  color: var(--hb-concrete);
  font: 900 10px/1.05 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  box-shadow: 0 0 0 3px var(--hb-paper), 0 6px 14px var(--hb-shadow);
  cursor: pointer;
  transition: transform 0.35s var(--hb-pop);
}

.sb-steezy:hover { transform: rotate(-1deg) scale(1.04); }

/* насест маскота — в шапке справа, ногами на кромке сетки; текст шапки его не задевает */
.sb-head { padding-right: clamp(150px, 11vw, 170px); min-height: 150px; }

.sb-perch {
  position: absolute;
  right: 6px;
  bottom: -14px;
  z-index: 4;
  width: clamp(88px, 6.6vw, 100px);
}

.sb-mascot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 360 / 492;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 8px 10px var(--hb-shadow));
  -webkit-tap-highlight-color: transparent;
}

.sb-m {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  opacity: 0;
  transition: opacity 0.12s linear;
}

.sb-m.is-on { opacity: 1; }
.sb-mascot.is-flip .sb-m--side { transform: scaleX(-1); }
.sb-mascot.is-tapped { animation: sb-hop 0.62s var(--hb-ease); }

@keyframes sb-hop {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-18px) rotate(-4deg); }
  60% { transform: translateY(0) rotate(2deg); }
  78% { transform: translateY(-5px); }
}

.sb-tyk {
  position: absolute;
  left: -22px;
  top: 4%;
  width: 11px;
  height: auto;
  transform: rotate(-8deg);
  pointer-events: none;
  animation: sb-nudge 2.4s ease-in-out infinite;
}

@keyframes sb-nudge {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(-8deg) translateY(5px); }
}

/* --- сетка-стикербук --- */
.sb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 64px) clamp(18px, 2.2vw, 36px);
}

.sb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  cursor: pointer;
}

.sb-card--wide { grid-column: span 2; }

.sb-stage {
  position: relative;
  aspect-ratio: 3 / 4;
  transform: rotate(var(--r));
  opacity: 0;
  transform-origin: 50% 80%;
}

.sb-card--wide .sb-stage { aspect-ratio: 8 / 5; }

/* подложка цвета вещи: скруглённый «бумажный» лист с растровой точкой */
.sb-back {
  position: absolute;
  inset: 12% 4% 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--tone) 55%, #000 12%) 1px, transparent 1.6px) 0 0 / 9px 9px,
    var(--tone);
  box-shadow: 0 0 0 5px var(--hb-paper), 0 14px 24px -10px var(--hb-shadow);
}

.sb-look,
.sb-detail {
  position: absolute;
  display: block;
  transition: transform 0.55s var(--hb-pop), opacity 0.3s ease;
}

.sb-look {
  left: 0;
  right: 0;
  bottom: -2%;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
  height: 104%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 10px 12px var(--hb-shadow));
  transform-origin: 50% 100%;
}

.sb-detail {
  left: 9%;
  top: 22%;
  width: 82%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border: 6px solid var(--hb-paper);
  border-radius: 14px;
  box-shadow: 0 16px 28px -10px var(--hb-shadow);
  opacity: 0;
  transform: scale(1.08) rotate(7deg);
}

.sb-card--wide .sb-detail { left: 26%; width: 48%; top: 14%; }

/* загнутый уголок с бликом плёнки */
.sb-peel {
  position: absolute;
  right: 4%;
  bottom: 0;
  width: 34px;
  height: 34px;
  border-radius: 0 0 18px 0;
  background: linear-gradient(135deg, transparent 50%, rgba(255, 255, 255, 0.95) 50%, #d9d6d6 78%, #f7f5f5);
  box-shadow: -3px -3px 6px rgba(0, 0, 0, 0.08);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transform-origin: 100% 100%;
  transform: scale(0.35);
  transition: transform 0.45s var(--hb-pop);
  pointer-events: none;
}

.sb-card.is-detail .sb-look,
.sb-card:focus-within .sb-look {
  opacity: 0.18;
  transform: translate(-6%, 3%) rotate(-5deg) scale(0.94);
}

.sb-card.is-detail .sb-detail {
  opacity: 1;
  transform: scale(1) rotate(calc(var(--r) * -1.4));
}

.sb-card.is-detail .sb-peel { transform: scale(1); }

/* бирка с названием: на ней транслит-имя крупно, ниже вещи и цены из каталога */
.sb-tag {
  position: relative;
  z-index: 3;
  margin: -18px 8% 0 6%;
  padding: 14px 14px 12px;
  border-radius: 10px;
  background: var(--hb-paper);
  color: #353535;
  box-shadow: 0 10px 22px -12px var(--hb-shadow);
  transform: rotate(calc(var(--r) * -0.35));
  opacity: 0;
}

.sb-tag::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hb-concrete);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.sb-name {
  margin: 0 18px 8px 0;
  font-family: var(--font-wide);
  font-weight: 700;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.sb-name::after {
  content: "";
  display: block;
  width: 38px;
  height: 5px;
  margin-top: 8px;
  border-radius: 3px;
  background: var(--tone);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* подменная буква: 4 ↔ Ч, $ ↔ С. Обе лежат друг на друге, смена — сжатием по вертикали
   и прозрачностью, без 3D (одинаково в Safari и Chrome, в покое видна только исходная). */
.sb-flip {
  position: relative;
  display: inline-block;
}

.sb-f-a,
.sb-f-b {
  display: inline-block;
  transition: transform 0.18s ease-in, opacity 0.18s ease-in;
}

.sb-f-b {
  position: absolute;
  left: 50%;
  top: 0;
  color: var(--hb-brick);
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
}

html[data-theme="dark"] .sb-f-b { color: #9d302b; }
.sb-flip.is-alt .sb-f-a { opacity: 0; transform: scaleY(0); }
.sb-flip.is-alt .sb-f-b { opacity: 1; transform: translateX(-50%) scaleY(1); transition: transform 0.26s var(--hb-pop) 0.16s, opacity 0.1s linear 0.16s; }

/* строки вещей: вся строка — ссылка (название слева, цена справа) */
.sb-items {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.3;
}

.sb-items a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  color: #353535;
  text-decoration: none;
}

.sb-items li + li a { border-top: 1px dashed #e2dede; }
.sb-items a:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.sb-price { flex: none; font-family: var(--font-mono); font-size: 12.5px; color: #353535; }
.sb-price s { color: #6f6b6b; }
.sb-items .is-out a { color: #6f6b6b; }
.sb-price em { font-family: var(--font-ui); font-size: 12px; font-style: normal; color: #6f6b6b; }

@media (hover: none), (pointer: coarse) {
  .sb-items a { min-height: 44px; }
}

/* --- появление «шлепком»: больше и сильнее повёрнут → в свой наклон с отдачей --- */
.sb-card.is-in .sb-stage {
  animation: sb-slap 0.62s var(--hb-pop) both;
  animation-delay: calc(var(--i) * 60ms);
}

.sb-card.is-in .sb-tag {
  animation: sb-tag-in 0.5s var(--hb-ease) both;
  animation-delay: calc(var(--i) * 60ms + 160ms);
}

@keyframes sb-slap {
  from { opacity: 0; transform: rotate(calc(var(--r) + 6deg)) scale(1.07); }
  60% { opacity: 1; }
  to { opacity: 1; transform: rotate(var(--r)) scale(1); }
}

@keyframes sb-tag-in {
  from { opacity: 0; transform: translateY(10px) rotate(calc(var(--r) * -0.35)); }
  to { opacity: 1; transform: rotate(calc(var(--r) * -0.35)); }
}

.sb-card:hover .sb-tag { box-shadow: 0 14px 26px -12px var(--hb-shadow), 0 0 0 2px var(--tone); }

.sb-card--ph { cursor: default; }
.sb-card--ph .sb-stage,
.sb-card--ph .sb-tag { opacity: 1; }
.sb-card--ph .sb-back { opacity: 0.55; }
.sb-ph-line {
  display: block;
  width: 58%;
  height: 14px;
  margin: 4px 0 10px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--tone) 55%, #fff);
}
.sb-ph-line--short { width: 34%; height: 8px; margin-bottom: 4px; }
@media not all {
  .sb-card--ph .sb-back { animation: sb-ph-breathe 1.8s ease-in-out infinite alternate; }
}
@keyframes sb-ph-breathe { from { opacity: 0.4; } to { opacity: 0.7; } }

.sb-empty a { font-family: var(--font-wide); font-weight: 700; color: var(--hb-ink); }

/* планшет и телефон: маскот — в шапке блока справа, текст шапки его не задевает */
@media (max-width: 1100px) {
  .sb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb-head {
    grid-template-columns: auto 1fr;
    padding-right: 128px;
    margin-bottom: 40px;
  }
  .sb-head .hb-title { grid-column: 1 / -1; }
  .sb-lead { grid-column: 1 / -1; grid-row: 2; max-width: 44ch; }
  .sb-steezy { grid-column: 1; grid-row: 3; margin-top: 6px; }
  .sb-all { grid-column: 2; grid-row: 3; justify-self: start; align-self: center; }
  .sb-perch { bottom: 0; width: 92px; }
}

/* узкий телефон: стикер-лозунг и «Весь каталог» друг под другом — строка не вылезает под маскота и «тык» */
@media (max-width: 400px) {
  .sb-head { column-gap: 12px; }
  .sb-all { grid-column: 1; grid-row: 4; justify-self: start; }
}

/* неполный последний ряд: последняя карточка растягивается (stickerbook.js ставит is-fill), пустых ячеек нет */
@media (min-width: 768px) {
  .sb-grid { grid-auto-flow: row dense; }
  .sb-card.is-fill { grid-column: span var(--fill, 1); }
  .sb-card.is-fill:not(.sb-card--wide) .sb-stage { aspect-ratio: 8 / 5; }
}

/* телефон: горизонтальная лента со scroll-snap, видно карточку и край следующей */
@media (max-width: 767px) {
  .hb-sb { padding-bottom: 48px; position: relative; z-index: 5; } /* выше белой плашки первого экрана (.reel-ui, z-index 4), иначе не видно клыков */
  .sb-head {
    grid-template-columns: auto 1fr;
    margin-bottom: 0;
    padding-right: 112px;
    min-height: 0;
  }
  .sb-lead { max-width: 30ch; font-size: 13px; }
  .sb-steezy { font-size: 9px; }
  .sb-all { font-size: 11px; justify-self: end; }
  .sb-perch { right: 2px; bottom: 4px; width: 68px; }
  .sb-grid {
    display: flex;
    gap: 14px;
    margin: 0 calc(var(--hb-pad) * -1);
    padding: 26px var(--hb-pad) 30px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--hb-pad);
    scrollbar-width: none;
  }
  .sb-grid::-webkit-scrollbar { display: none; }
  .sb-card {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }
  .sb-card--wide { flex-basis: 86%; }
  .sb-card--wide .sb-stage { aspect-ratio: 1 / 1.05; height: auto; }
  .sb-name { font-size: 18px; }
}

@media all {
  .sb-stage,
  .sb-tag { opacity: 1; }
  .sb-card.is-in .sb-stage,
  .sb-card.is-in .sb-tag { animation: none; }
  .sb-look, .sb-detail, .sb-peel { transition: opacity 0.2s linear; }
  .sb-card.is-detail .sb-look { transform: none; }
  .sb-card.is-detail .sb-detail { transform: rotate(calc(var(--r) * -1)); }
  .sb-tyk, .sb-mascot.is-tapped { animation: none; }
}

/* журнал (механика не трогается): свой белый край-«клыки» сверху и отступ под ним, чтобы зубцы не задевали заголовок */
.sc-magazine.hb-fangs-top {
  --edge-bg: var(--bg);
  padding-top: clamp(28px, 3vw, 44px);
}

/* ============================ ТЕХНОЛОГИИ ============================== */
/* Блок — сама бирка «KAIJU TECHNOLOGY»: лёд #C9E0EF, линии и текст кирпичные #9E312A. */
.hb-tk {
  --tk-ice: #c9e0ef;
  --tk-ice-hi: #d4e9f5;
  --tk-bg: #e6eff5;
  --tk-ink: #9e312a;
  --tk-light: #e6ecef;
  --tk-text: #5b2a26;
  --edge-bg: var(--tk-bg);
  position: relative;
  background: var(--tk-bg);
  color: var(--tk-ink);
  padding: clamp(64px, 7vw, 112px) 0 clamp(72px, 8vw, 128px);
  overflow-x: clip;
}

html[data-theme="dark"] .hb-tk {
  --tk-ice: #16283a;
  --tk-ice-hi: #1d3349;
  --tk-bg: #0d1722;
  --tk-ink: #f2aaa2;
  --tk-light: #24384d;
  --tk-text: #e8d6d3;
}

.tk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.tk-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--hb-pad);
}

.tk-head {
  display: grid;
  grid-template-columns: auto minmax(0, 52ch);
  align-items: end;
  gap: 12px 40px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.hb-tk .hb-title { color: var(--tk-ink); }

.tk-intro {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tk-text);
}

/* бирка-разворот: две половины кубика льда, пунктир сгиба посередине */
.tk-tag {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  perspective: 2200px;
  border-radius: 42px 56px 48px 60px / 52px 40px 58px 46px;
  background:
    radial-gradient(120% 70% at 18% 0%, var(--tk-ice-hi), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, var(--tk-ice-hi), transparent 55%),
    var(--tk-ice);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.55), 0 30px 60px -36px rgba(30, 70, 100, 0.45);
}

html[data-theme="dark"] .tk-tag { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.7); }

.tk-tag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 28px;
  bottom: 28px;
  border-left: 1.5px dashed color-mix(in srgb, var(--tk-ink) 45%, transparent);
  pointer-events: none;
}

.tk-half {
  position: relative;
  min-width: 0;
  padding: clamp(28px, 3.4vw, 52px);
}

.tk-scheme {
  aspect-ratio: 194 / 186;
  max-width: 460px;
  margin: 0 auto;
  color: var(--tk-ink);
}

.tk-scheme svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tk-scheme [data-l] { transition: transform 0.12s linear; }

/* капли катятся по верхнему слою, воздух и пар — дышат */
.hb-tk.is-live .tk-drops { animation: tk-roll 2.8s ease-in infinite; }
.hb-tk.is-live .tk-air { animation: tk-breathe 3.2s ease-in-out infinite; }

@keyframes tk-roll {
  0% { transform: translate(-4px, -6px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(8px, 9px); opacity: 0; }
}

@keyframes tk-breathe {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(-5px); opacity: 1; }
}

.tk-caption {
  margin: 22px 0 0;
  font-family: var(--font-wide);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}

.tk-specs {
  display: grid;
  gap: clamp(16px, 1.8vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-spec {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
}

.tk-ico {
  width: 44px;
  height: 44px;
  color: var(--tk-ink);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--hb-ease) 0.1s;
}

.tk-spec.is-in .tk-ico,
.no-vector .tk-ico { clip-path: inset(0 0 0 0); }

.tk-spec > div {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.6s var(--hb-ease);
}

.tk-spec.is-in > div { opacity: 1; transform: none; }

.tk-spec-title {
  margin: 0;
  font-family: var(--font-wide);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.tk-spec-value {
  margin: 4px 0 2px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.tk-spec-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--tk-text);
}

/* обложка бирки на правой половине; раскрывается по сгибу (rotateY ведёт tech-tag.js) */
.tk-cover {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 50%;
  z-index: 3;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  will-change: transform;
}

.tk-cover-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 12px;
  padding: clamp(28px, 3.4vw, 52px);
  border-radius: 0 56px 48px 0 / 0 40px 58px 0;
  background:
    radial-gradient(90% 70% at 100% 0%, var(--tk-ice-hi), transparent 60%),
    var(--tk-ice);
  box-shadow: -12px 0 30px -18px rgba(30, 70, 100, 0.35);
  opacity: var(--face, 1);
}

/* оборот обложки — чистый лёд, повёрнут к зрителю, когда обложка перевалила за 90° */
.tk-cover-back {
  position: absolute;
  inset: 0;
  border-radius: 56px 0 0 48px / 40px 0 0 58px;
  background:
    radial-gradient(80% 60% at 0% 0%, var(--tk-ice-hi), transparent 60%),
    var(--tk-ice);
  transform: rotateY(180deg);
  opacity: var(--back, 0);
  box-shadow: 12px 0 30px -18px rgba(30, 70, 100, 0.35);
}

.tk-cover-face::before {
  content: "";
  position: absolute;
  top: 34px;
  right: 34px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1c1d1d;
  box-shadow: 0 0 0 3px var(--tk-ice-hi);
}

.tk-cover-mascot { width: 100%; max-width: 220px; aspect-ratio: 1; color: var(--tk-ink); justify-self: center; }

.tk-cover-word {
  margin: 0;
  font-family: var(--font-wide);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 36px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--tk-ink);
}

/* --- конструкция: реальные детали лукбука с красной выноской --- */
.tk-build-wrap { margin-top: clamp(56px, 6vw, 96px); }

.tk-sub {
  margin: 0 0 20px;
  font-family: var(--font-wide);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tk-ink);
}

.tk-build {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-part { min-width: 0; }

.tk-part-media {
  position: relative;
  margin: 0 0 12px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  background: var(--tk-ice);
  box-shadow: 0 0 0 4px var(--hb-paper);
}

html[data-theme="dark"] .tk-part-media { box-shadow: 0 0 0 4px #1d3349; }

.tk-part-media > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.2s var(--hb-ease);
}

.tk-part.is-in .tk-part-media > img:first-child { transform: scale(1); }

.tk-inset {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 44%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 3px solid var(--hb-paper);
  border-radius: 10px;
  transform: rotate(4deg);
  box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.35);
}

.tk-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #9e312a;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1s var(--hb-ease) 0.35s;
}

.tk-mark ellipse { stroke-width: 0.9; }
.tk-part.is-in .tk-mark { stroke-dashoffset: 0; }

.tk-part--scheme .tk-part-media { display: grid; place-items: center; color: var(--tk-ink); }
.tk-seam { width: 92%; height: auto; }
.tk-seam .tk-draw path { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.4s var(--hb-ease) 0.2s; }
.tk-seam .tk-draw path[stroke-dasharray="6 7"] { stroke-dasharray: 6 7; stroke-dashoffset: 0; opacity: 0; transition: opacity 0.6s ease 1.1s; }
.tk-part.is-in .tk-seam .tk-draw path { stroke-dashoffset: 0; }
.tk-part.is-in .tk-seam .tk-draw path[stroke-dasharray="6 7"] { opacity: 1; }
.tk-seam-note { font-family: var(--font-mono); font-size: 13px; fill: currentColor; }
.hb-tk.is-live .tk-rain path { animation: tk-drop 2.2s ease-in infinite; }
.hb-tk.is-live .tk-rain path:nth-child(2) { animation-delay: 0.5s; }
.hb-tk.is-live .tk-rain path:nth-child(3) { animation-delay: 1.1s; }
.tk-bounce { opacity: 0.55; }

@keyframes tk-drop {
  0% { transform: translateY(-14px); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: translateY(46px); opacity: 1; }
  100% { transform: translateY(46px); opacity: 0; }
}

.tk-part-title {
  margin: 0 0 4px;
  font-family: var(--font-wide);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tk-ink);
}

.tk-part-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--tk-text);
}

/* --- принцип коллекций: буквы KAIJU цветами вещей + сочетания --- */
.tk-caps {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "text letters" "text combos";
  gap: 28px clamp(32px, 5vw, 80px);
  margin-top: clamp(64px, 7vw, 112px);
  padding-top: clamp(32px, 3vw, 48px);
  border-top: 1.5px dashed color-mix(in srgb, var(--tk-ink) 40%, transparent);
}

.tk-caps-text { grid-area: text; }
.tk-caps-text p { margin: 0 0 12px; max-width: 54ch; font-size: 15px; line-height: 1.55; color: var(--tk-text); }

.tk-letters {
  grid-area: letters;
  display: flex;
  gap: clamp(2px, 0.6vw, 8px);
  align-items: flex-end;
}

.tk-letter {
  position: relative;
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  opacity: 0;
  transform: translateY(14px) rotate(calc((var(--k) - 2) * 4deg));
  transition: transform 0.6s var(--hb-pop), opacity 0.4s ease;
  transition-delay: calc(var(--k) * 70ms);
}

/* буква логотипа — сама цветовое пятно (как на странице цветов брендбука), с белой вырубкой стикера */
.tk-letter b {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(56px, 6.6vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--c);
  text-shadow:
    3px 0 0 #fff, -3px 0 0 #fff, 0 3px 0 #fff, 0 -3px 0 #fff,
    2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff,
    0 14px 18px rgba(0, 0, 0, 0.18);
}

.tk-letter i {
  font: 11px/1.2 var(--font-mono);
  font-style: normal;
  color: var(--tk-text);
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
}

@media (max-width: 400px) {
  .tk-letter i { font-size: 10px; letter-spacing: -0.03em; }
}

html[data-theme="dark"] .tk-letter b {
  text-shadow:
    4px 0 0 #fff, -4px 0 0 #fff, 0 4px 0 #fff, 0 -4px 0 #fff,
    3px 3px 0 #fff, -3px 3px 0 #fff, 3px -3px 0 #fff, -3px -3px 0 #fff,
    0 0 18px rgba(255, 255, 255, 0.25);
}

.tk-caps.is-in .tk-letter { opacity: 1; transform: rotate(calc((var(--k) - 2) * 4deg)); }

.tk-combos {
  grid-area: combos;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.tk-combo { margin: 0; text-align: center; }

.tk-combo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(150px, 15vw, 230px);
  margin: 0 auto 8px;
  object-fit: contain;
  object-position: 50% 100%;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18));
  transform: rotate(calc((var(--k) - 1) * 3deg));
}

.tk-combo figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.3;
  color: var(--tk-text);
}

/* планшет и телефон: обложка — шапка бирки сверху, схема и пункты друг под другом, детали — лентой */
@media (max-width: 899px) {
  .tk-head { grid-template-columns: 1fr; }
  .tk-intro { font-size: 14px; }
  .tk-tag {
    grid-template-columns: 1fr;
    border-radius: 34px 40px 36px 44px / 40px 32px 44px 36px;
  }
  .tk-tag::after { left: 28px; right: 28px; top: 150px; bottom: auto; border-left: 0; border-top: 1.5px dashed color-mix(in srgb, var(--tk-ink) 45%, transparent); }
  .tk-cover {
    position: relative;
    left: auto;
    width: auto;
    height: 150px;
    order: -1;
    transform: none !important;
    visibility: visible !important;
  }
  .tk-cover-face { border-radius: 34px 40px 0 0 / 40px 32px 0 0; box-shadow: none; grid-template-columns: 96px 1fr; padding: 22px 26px; }
  .tk-cover-face::before { top: 24px; right: 24px; width: 12px; height: 12px; }
  .tk-cover-mascot { max-width: 96px; }
  .tk-cover-word { font-size: 22px; }
  .tk-half { padding: 22px 22px 26px; }
  .tk-half--scheme { padding-bottom: 6px; }
  .tk-build {
    display: flex;
    gap: 12px;
    margin: 0 calc(var(--hb-pad) * -1);
    padding: 4px var(--hb-pad) 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--hb-pad);
    scrollbar-width: none;
  }
  .tk-build::-webkit-scrollbar { display: none; }
  .tk-part { flex: 0 0 min(62%, 280px); scroll-snap-align: start; }
  .tk-letter b { font-size: clamp(48px, 13vw, 96px); }
  .tk-scheme { max-width: 420px; }
  .tk-caps { grid-template-columns: 1fr; grid-template-areas: "text" "letters" "combos"; }
  .tk-caps-text p { font-size: 14px; }
}

@media all {
  .hb-tk.is-live .tk-drops, .hb-tk.is-live .tk-air, .hb-tk.is-live .tk-rain path { animation: none; }
  .tk-ico { clip-path: none; transition: none; }
  .tk-spec > div, .tk-letter { opacity: 1; transform: none; transition: none; }
  .tk-mark, .tk-seam .tk-draw path { transition: none; stroke-dashoffset: 0; }
  .tk-cover { display: none; }
}
@media (max-width: 899px) {
  .tk-cover { display: block; }
}

/* =========================== О СОЗДАТЕЛЯХ ============================= */
.hb-fd {
  --fd-bg: var(--hb-pink-pale);
  --edge-bg: var(--fd-bg);
  position: relative;
  background: var(--fd-bg);
  color: var(--hb-ink);
  padding: clamp(72px, 8vw, 128px) 0 clamp(80px, 8vw, 128px);
  margin-top: clamp(40px, 4vw, 64px);
  overflow-x: clip;
}

/* брендбук: аниме-горы розовым дуотоном — едва заметно за коллажем (картинка ставится, когда блок близко) */
.hb-fd::after {
  content: "";
  position: absolute;
  inset: 0 45% 0 0;
  background: var(--fd-art, none) 85% 40% / cover no-repeat;
  opacity: 0.16;
  mix-blend-mode: multiply;
  -webkit-mask: radial-gradient(70% 70% at 45% 50%, #000 30%, transparent 75%);
  mask: radial-gradient(70% 70% at 45% 50%, #000 30%, transparent 75%);
  pointer-events: none;
}

.hb-fd.is-ready { --fd-art: url("../img/journal/zine/bb-anime-mountains.webp"); }
/* в тёмной теме горы на сливовом дают грязное пятно — убираем */
html[data-theme="dark"] .hb-fd::after { display: none; }

.fd-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--hb-pad);
}

/* --- коллаж --- */
.fd-collage {
  position: relative;
  aspect-ratio: 1 / 1.02;
  min-height: 420px;
}

.fd-collage [data-sway] {
  translate: var(--sx, 0) var(--sy, 0);
}

.fd-duo {
  position: absolute;
  left: 20%;
  top: 2%;
  width: 54%;
  aspect-ratio: 4 / 5;
  padding: 10px 10px 34px;
  background: #fff;
  box-shadow: 0 24px 44px -24px rgba(53, 53, 53, 0.45);
  transform: rotate(-3deg);
}

.fd-duo-media { display: block; width: 100%; height: 100%; object-fit: cover; }

.fd-tape {
  position: absolute;
  top: -12px;
  width: 84px;
  height: 26px;
  background: rgba(232, 193, 215, 0.78);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  z-index: 1;
}

.fd-tape--l { left: -18px; transform: rotate(-28deg); }
.fd-tape--r { right: -18px; transform: rotate(24deg); }

.fd-person {
  position: absolute;
  margin: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.8s var(--hb-pop);
}

.fd-person img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 16px rgba(53, 53, 53, 0.28));
}

.fd-person--a { left: -2%; bottom: 0; width: 36%; transform: translateY(24px) rotate(6deg); }
.fd-person--b { right: -1%; bottom: 4%; width: 31%; transform: translateY(24px) rotate(-6deg); }
.hb-fd.is-in .fd-person { opacity: 1; }
.hb-fd.is-in .fd-person--a { transform: rotate(3deg); }
.hb-fd.is-in .fd-person--b { transform: rotate(-3deg); transition-delay: 0.15s; }

.fd-person figcaption {
  position: absolute;
  left: 8%;
  bottom: -14px;
  display: grid;
  gap: 2px;
  padding: 7px 10px 6px;
  border-radius: 6px;
  background: var(--hb-ink);
  color: var(--fd-bg);
  transform: rotate(-3deg);
  box-shadow: 0 0 0 3px #fff;
}

.fd-person--b figcaption { left: auto; right: 6%; transform: rotate(4deg); }
.fd-person figcaption b { font: 700 14px/1 var(--font-wide); letter-spacing: 0.01em; }
.fd-person figcaption span { font: 11px/1.1 var(--font-mono); opacity: 0.8; }
html[data-theme="dark"] .fd-person figcaption { background: #fce8f1; color: #353535; }

/* пропуск фестиваля: перфорация по краю, кирпичный текст как на бирках */
.fd-pass {
  position: absolute;
  left: 44%;
  bottom: 13%;
  z-index: 5;
  display: grid;
  justify-items: start;
  gap: 1px;
  padding: 12px 16px 12px 22px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 50%, transparent 7px, #e8c1d7 7.5px) 0 0 / 100% 100% no-repeat;
  color: #9d302b;
  box-shadow: 0 0 0 3px #fff, 0 14px 22px -12px rgba(53, 53, 53, 0.4);
  transform: rotate(7deg) scale(0.9);
  opacity: 0;
  transition: opacity 0.4s ease 0.45s, transform 0.7s var(--hb-pop) 0.45s;
}

.fd-pass::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  border-left: 1.5px dashed rgba(157, 48, 43, 0.5);
}

.hb-fd.is-in .fd-pass { opacity: 1; transform: rotate(7deg); }
.fd-pass-top { font: 10px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.fd-pass-name { font: 700 clamp(18px, 1.8vw, 24px)/1 var(--font-wide); text-transform: uppercase; }
.fd-pass-city { font: 900 13px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; }
.fd-pass-note { margin-top: 3px; font: 10.5px/1 var(--font-mono); color: #353535; }

/* розовая рукописная линия «встречи» — рисуется один раз */
.fd-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}

.fd-line path {
  fill: none;
  stroke: #fc9ab9;
  stroke-width: 0.42;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}

.hb-fd.is-in .fd-line path { stroke-dashoffset: 0; }

/* --- текст --- */
.fd-text { max-width: 560px; }
.fd-text .hb-title { margin-bottom: 18px; }

.fd-lead {
  margin: 0 0 14px;
  font-family: var(--font-wide);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.25;
}

.fd-short p,
.fd-full p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.fd-toggle {
  margin: 0;
  padding: 13px 0;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  background: none;
  color: var(--hb-ink);
  font: 700 12px/1.4 var(--font-wide);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}

.fd-quote {
  position: relative;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 18px 0 0;
  border-top: 1.5px solid color-mix(in srgb, var(--hb-ink) 18%, transparent);
}

.fd-quote p {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.fd-quote cite {
  font: 12px/1.3 var(--font-mono);
  font-style: normal;
  letter-spacing: 0.04em;
  color: #5f595c;
}

html[data-theme="dark"] .fd-quote cite { color: #b9a9b1; }

@media (max-width: 899px) {
  .fd-in { grid-template-columns: 1fr; }
  /* высота коллажа — от ширины, чтобы стикеры не налезали на текст ниже */
  .fd-collage { width: 100%; max-width: 560px; aspect-ratio: 1 / 1.08; min-height: 0; margin: 0 auto 30px; }
  .fd-duo { left: 18%; width: 60%; padding: 8px 8px 26px; }
  .fd-person--a { width: 38%; left: 2%; }
  .fd-person--b { width: 32%; right: 3%; bottom: 7%; }
  .fd-text { max-width: 640px; margin: 0 auto; }
  .fd-pass { left: 30%; bottom: 20%; padding: 9px 11px 9px 19px; }
  .hb-fd.is-in .fd-pass { transform: rotate(7deg) scale(0.86); }
  .fd-person--b figcaption { right: 2%; }
  .fd-person figcaption b { font-size: 12px; }
  .fd-short p, .fd-full p { font-size: 14px; }
  .hb-fd::after { display: none; }
}

@media all {
  .fd-person, .fd-pass { opacity: 1; transition: none; }
  .fd-person--a { transform: rotate(3deg); }
  .fd-person--b { transform: rotate(-3deg); }
  .fd-pass { transform: rotate(7deg); }
  .fd-line path { transition: none; stroke-dashoffset: 0; }
}

/* ============================== ПОДВАЛ ================================ */
/* Подвал общий для сайта (js/site.js); на главной сверху — графитовая полоса с лозунгом и стикером. */
.site-footer.sf--home {
  --edge-bg: #353535;
  position: relative;
  margin-top: 25px;
  border-top: 0;
}

.sf--home::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -25px;
  height: 26px;
  background: var(--edge-bg);
  -webkit-mask: var(--hb-fangs) 140px 0 / 720px 100% repeat-x;
  mask: var(--hb-fangs) 140px 0 / 720px 100% repeat-x;
  transform: scaleY(-1);
  pointer-events: none;
}

html[data-theme="dark"] .site-footer.sf--home { --edge-bg: #1a1e28; }

.hf-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(28px, 4vw, 56px) max(var(--gutter), env(safe-area-inset-right, 0px)) clamp(32px, 4vw, 56px) max(var(--gutter), env(safe-area-inset-left, 0px));
  background: var(--edge-bg);
  color: #fce8f1;
}

.hf-slogan {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 5.4vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.hf-go {
  flex: none;
  display: block;
  width: clamp(130px, 15vw, 220px);
  transform: translate(var(--go-x, 0), var(--go-y, 0)) rotate(var(--go-r, -6deg));
  transition: transform 0.5s var(--hb-ease);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
  -webkit-tap-highlight-color: transparent;
}

.hf-go img { display: block; width: 100%; height: auto; }

.hf-go:active { transform: translate(var(--go-x, 0), var(--go-y, 0)) rotate(var(--go-r, -6deg)) scale(0.96); }
.hf-go:focus-visible { outline: 2px solid #fc9ab9; outline-offset: 6px; border-radius: 50%; }

@media (max-width: 767px) {
  .hf-band { flex-direction: column; align-items: flex-start; gap: 18px; }
  .hf-go { align-self: flex-end; margin-top: -6px; width: 124px; }
}

/* =============================== ШТАМП ================================ */
.hb-stamp {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 140;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--st-r, -6deg)) scale(1.7);
}

.hb-stamp span {
  display: block;
  padding: 18px 26px 16px;
  border: 5px solid #9d302b;
  border-radius: 14px;
  color: #9d302b;
  font: 900 clamp(22px, 4.4vw, 54px)/0.92 var(--font-display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: center;
  background: rgba(252, 232, 241, 0.86);
  box-shadow: inset 0 0 0 3px rgba(252, 232, 241, 0.9), inset 0 0 0 6px #9d302b;
  -webkit-mask: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, 0.82) 61%) ;
  mask: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, 0.82) 61%);
}

.hb-stamp b { display: block; font-size: 1.5em; color: #ff659f; -webkit-text-stroke: 1px #9d302b; }

.hb-stamp.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--st-r, -6deg)) scale(1);
  transition: transform 0.32s cubic-bezier(0.5, 1.8, 0.6, 1), opacity 0.12s linear;
}

.hb-stamp.is-off {
  opacity: 0;
  transition: opacity 0.5s ease;
}

@media all {
  .hb-stamp, .hb-stamp.is-on { transform: translate(-50%, -50%) rotate(var(--st-r, -6deg)); transition: opacity 0.25s linear; }
  .hf-go { transition: none; }
}