/* ============================================================
   Karina landing — comic panel system
   Tokens: see DESIGN_TOKENS.md
   ============================================================ */

:root {
  --paper:  #F1ECDF;
  --cream:  #F4EAD8; /* кофе с молоком / слоновая кость — текст hero */
  --ink:    #25222C;
  --sage:   #A9AE94;
  --neon:   #C92BE0;
  --violet: #5A2E8C;
  --brick:  #C44A3E;

  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px;
  --s5: 40px; --s6: 64px; --s7: 96px;

  --r-panel: 14px;
  --r-btn: 10px;
  --border: 3px solid var(--ink);
  --shadow: 6px 6px 0 var(--ink);

  --font-display: "Unbounded", sans-serif;
  --font-text: "Manrope", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: #2a2333;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
}

/* затемнённый звёздный фон на весь сайт (фиксированный слой) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #2a2333;
  background-image: url("assets/site-bg.jpg");
  background-image: image-set(url("assets/site-bg.webp") type("image/webp"), url("assets/site-bg.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
}

.display { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.01em; }
.mono { font-family: var(--font-mono); }

a { color: var(--violet); }

:focus-visible {
  outline: 3px solid var(--neon);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===== page = комикс-разворот ===== */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}


.panel {
  position: relative;
  border: var(--border);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
  background: #fff;
  padding: var(--s5) var(--s4);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.panel:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--ink); }

h2.display {
  margin: 0 0 var(--s4);
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
}

/* halftone-растр */
.halftone {
  position: absolute;
  pointer-events: none;
  background-image: radial-gradient(var(--ink) 1.2px, transparent 1.2px);
  background-size: 10px 10px;
  opacity: 0.18;
}

/* ===== HERO: баннер-арт фоном ===== */
.hero {
  background: var(--paper) url("assets/hero-bg.jpg") center / cover no-repeat;
  background-image: image-set(url("assets/hero-bg.webp") type("image/webp"), url("assets/hero-bg.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center;
  color: var(--ink);
  display: grid;
  gap: var(--s4);
  padding: var(--s4);
}

/* аватар — полароидный снимок, приклеенный скотчем */
.hero-art {
  margin: 0;
  position: relative;
  background: #fff;
  border: var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 14px 14px 10px;
  transform: rotate(-2.5deg);
  animation: polaroid-drop 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.hero-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.hero-art figcaption {
  padding: 10px 4px 6px;
  font-size: 0.8rem;
  color: var(--ink);
  opacity: 0.65;
  text-align: center;
}

/* скотч: полоска сверху-справа и полоска слева-снизу */
.hero-art::before,
.hero-art::after {
  content: "";
  position: absolute;
  width: 112px;
  height: 34px;
  background: rgba(255, 244, 190, 0.72);
  border: 1px solid rgba(37, 34, 44, 0.22);
  box-shadow: 0 2px 5px rgba(37, 34, 44, 0.12);
  pointer-events: none;
}
.hero-art::before { top: -16px; right: 20px; transform: rotate(7deg); }
.hero-art::after { bottom: 96px; left: -58px; transform: rotate(105deg); }

.hero-copy, .hero-art { position: relative; z-index: 2; }
.hero-copy { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }

/* ===== маскоты — декоративные питомцы в углах панелей ===== */
.panel .mascot {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  display: block;
}
.mascot img { display: block; width: 100%; height: auto; }

.mascot-hero {
  width: clamp(120px, 17vw, 200px);
  right: -14px;
  bottom: -18px;
  transform: rotate(4deg);
  animation: mascot-bob 4.5s ease-in-out infinite;
}
/* маскоты donate/merch — инлайн в ряд справа от кнопок, в полный рост */
.donate-btns .mascot-goal,
.merch-cta .mascot-merch {
  position: static;
  z-index: auto;
  flex: 0 0 auto;
  transform: rotate(-3deg);
}
.donate-btns .mascot-goal { height: clamp(104px, 13vw, 148px); animation: mascot-bob 5.2s ease-in-out infinite 0.4s; }
.merch-cta .mascot-merch  { height: clamp(90px, 12vw, 128px); animation: mascot-bob 4.8s ease-in-out infinite 0.8s; }
.donate-btns .mascot-goal img,
.merch-cta .mascot-merch img { width: auto; height: 100%; }

.merch-cta { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }

/* каскадное появление текста hero */
.hero-copy > * { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-copy > *:nth-child(1) { animation-delay: 0.1s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.2s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.45s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.6s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.75s; }

/* «рукописный» лид — почерк художницы, чёрным поверх паутинки */
.about-lead {
  margin: 0;
  font-family: "Caveat", cursive;
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

/* буквы заголовка (оборачиваются скриптом) */
.ltr { display: inline-block; animation: letter-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* парящие искры */
.spark {
  position: absolute;
  color: var(--violet);
  opacity: 0.55;
  pointer-events: none;
  animation: spark-float 7s ease-in-out infinite;
}
.s1 { top: 12%; right: 8%; font-size: 1.6rem; }
.s2 { bottom: 18%; right: 24%; font-size: 1rem; animation-delay: -2.5s; animation-duration: 9s; }
.s3 { top: 30%; left: 46%; font-size: 1.2rem; animation-delay: -5s; animation-duration: 8s; }

.kicker {
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.85;
}

h1.display {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  line-height: 1.05;
  /* белый комикс-контур, чтобы чёрные буквы «выпрыгивали» с паутинного фона */
  text-shadow: 3px 3px 0 var(--paper), -1px -1px 0 var(--paper), 1px -1px 0 var(--paper), -1px 1px 0 var(--paper);
}

/* абзац «о себе» — моношрифт как у кикера сверху блока */
.about-body {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: 0;
  max-width: 46ch;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--ink);
  text-shadow: 0 1px 5px rgba(241, 236, 223, 0.9), 0 0 2px rgba(241, 236, 223, 0.9);
}
.about-body p { margin: 0; }
.about-body strong { font-weight: 700; }

.hero-socials { display: flex; gap: var(--s3); margin-top: var(--s2); }

.hero-socials a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--ink);
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.hero-socials a:hover { transform: translateY(-3px) rotate(-4deg); }
.hero-socials svg { width: 22px; height: 22px; fill: var(--paper); }

/* ===== стикер-кнопка (signature-мотив записок) ===== */
/* кнопка = ручная плашка художницы (btn-plate) с текстом поверх */
.sticker-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  color: #fff;
  background: url("assets/btn-plate.png") center / 100% 100% no-repeat;
  background-image: image-set(url("assets/btn-plate.webp") type("image/webp"), url("assets/btn-plate.png") type("image/png"));
  border: none;
  border-radius: 12px;
  padding: var(--s3) var(--s5);
  transform: rotate(-2deg);
  text-shadow: 1px 1px 0 rgba(37, 34, 44, 0.6);
  transition: transform 0.15s ease;
}
.sticker-btn:hover { transform: rotate(0deg) translateY(-3px) scale(1.03); }
.sticker-btn:active { transform: translateY(2px) scale(0.99); }
.cta-bmc { transform: rotate(1.5deg); }
.cta-bmc:hover { transform: rotate(0deg) translateY(-3px) scale(1.03); }

.donate-btns { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center; }

.sticker-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ===== GOAL: баннер-арт фоном ===== */
.goal {
  /* персонаж в правой части баннера — прижимаем фон вправо, слева чистая зона под текст (ПК и мобайл) */
  background: var(--paper) url("assets/goal-bg.jpg") right center / cover no-repeat;
  background-image: image-set(url("assets/goal-bg.webp") type("image/webp"), url("assets/goal-bg.jpg") type("image/jpeg"));
}

/* вуаль поверх баннера: текст читается, персонаж мягко проглядывает */
.goal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 238, 243, 0.68);
  pointer-events: none;
}
.goal > * { position: relative; z-index: 2; }
.goal .mascot { z-index: 1; }

.goal-sub {
  margin: calc(-1 * var(--s3)) 0 var(--s4);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.goal-text { max-width: 52ch; font-size: 1.1rem; font-weight: 600; margin: 0 0 var(--s4); }

.progress-wrap { position: relative; margin-bottom: var(--s4); margin-top: var(--s6); }

.progress-row { position: relative; }

/* приз-цель (планшет со стилусом) — крупный, слегка заходит на линию доната */
.goal-prize {
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-62%);
  width: clamp(128px, 19vw, 196px);
  z-index: 3;
  pointer-events: none;
}
.goal-prize img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 68% 92%;
  animation: prize-tap 1.8s ease-in-out infinite;
}

/* звёздочки, которые «выбивает» стилус */
.pop {
  position: absolute;
  color: var(--neon);
  font-size: 0.95rem;
  opacity: 0;
  pointer-events: none;
  animation: star-pop 1.8s ease-out infinite;
}
.p1 { top: 2%; right: 4%; --dx: 10px; animation-delay: 0s; }
.p2 { top: 18%; right: -8px; --dx: 16px; font-size: 0.7rem; animation-delay: 0.12s; }
.p3 { top: -6%; right: 22%; --dx: -6px; font-size: 0.8rem; animation-delay: 0.2s; }

.progress {
  position: relative;
  height: 54px;
  border: var(--border);
  border-radius: var(--r-panel);
  background: var(--paper);
  overflow: visible;
}

.progress-fill {
  position: relative;
  height: 100%;
  width: 0%;
  /* заливка — лента из мини-артов; неон проглядывает на стыке */
  background: var(--neon) url("assets/goal-strip.jpg") left center repeat-x;
  background-image: image-set(url("assets/goal-strip.webp") type("image/webp"), url("assets/goal-strip.jpg") type("image/jpeg"));
  background-size: auto 100%;
  border-radius: 10px 0 0 10px;
  /* скошенный «мазок» на краю заливки */
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

/* стикер с суммой едет по краю заливки и слегка покачивается */
.note {
  animation: note-sway 5s ease-in-out infinite;
  position: absolute;
  top: -22px;
  left: 0;
  transform: translateX(-50%) rotate(-4deg);
  background: #FBF6A3; /* жёлтый стикер из артов */
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 2px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  transition: left 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.goal-numbers { font-size: 0.95rem; margin: var(--s3) 0 0; }
.goal-numbers span { font-weight: 700; }

.goal-updated { font-size: 0.75rem; opacity: 0.75; margin: var(--s3) 0 0; }

/* ===== MERCH: баннер-арт фоном ===== */
.merch {
  background: var(--paper) url("assets/merch-bg.jpg") center / cover no-repeat;
  background-image: image-set(url("assets/merch-bg.webp") type("image/webp"), url("assets/merch-bg.jpg") type("image/jpeg"));
  color: var(--ink);
}
.merch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 238, 243, 0.68);
  pointer-events: none;
}
.merch > * { position: relative; z-index: 2; }
.merch .mascot { z-index: 1; }
.merch-text { max-width: 48ch; margin: 0 0 var(--s4); }

/* ===== PORTFOLIO: баннер + бесконечный конвейер артов ===== */
.portfolio {
  background: var(--paper) url("assets/portfolio-bg.jpg") right center / cover no-repeat;
  background-image: image-set(url("assets/portfolio-bg.webp") type("image/webp"), url("assets/portfolio-bg.jpg") type("image/jpeg"));
}
.portfolio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 238, 243, 0.6);
  pointer-events: none;
}
.portfolio > * { position: relative; z-index: 2; }

.portfolio-sub {
  margin: calc(-1 * var(--s3)) 0 var(--s4);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* стрелка кнопки: вниз, разворачивается вверх при раскрытии */
.arts-arrow { display: inline-block; transition: transform 0.3s ease; }
.portfolio.open .arts-arrow { transform: rotate(180deg); }

/* кнопка My Arts + маскот в ряд */
.arts-cta { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.arts-cta .mascot-arts {
  position: static;
  z-index: auto;
  flex: 0 0 auto;
  height: clamp(96px, 13vw, 140px);
  animation: mascot-thwip 3.2s ease-in-out infinite;
}
.arts-cta .mascot-arts img { width: auto; height: 100%; }

/* конвейер свёрнут по умолчанию — блок компактный, как мерч */
.conveyor {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.6s ease, opacity 0.45s ease, margin 0.6s ease;
  /* мягкое затухание по краям */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.portfolio.open .conveyor {
  max-height: 900px;
  opacity: 1;
  margin: var(--s4) calc(-1 * var(--s4)) 0;
}

.belt {
  display: flex;
  width: max-content;
  will-change: transform;
}
.belt img {
  height: clamp(140px, 22vw, 210px);
  width: auto;
  margin-right: var(--s3); /* равномерный шаг = бесшовный цикл при -50% */
  border: var(--border);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--ink);
  flex: 0 0 auto;
  background: var(--paper);
}
/* ленты крутятся только когда блок раскрыт */
.belt-a { animation: belt-left 95s linear infinite; animation-play-state: paused; }
.belt-b { animation: belt-right 120s linear infinite; animation-play-state: paused; }
.portfolio.open .belt-a,
.portfolio.open .belt-b { animation-play-state: running; }
.conveyor:hover .belt { animation-play-state: paused; }

@keyframes belt-left  { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes belt-right { from { transform: translateX(-50%); }   to { transform: translateX(0); } }

/* ===== FOOTER ===== */
.footer {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-panel);
  padding: var(--s4);
  text-align: center;
  font-size: 0.9rem;
}
.footer p { margin: var(--s2) 0; }
.footer a { color: var(--paper); margin: 0 var(--s2); }
.footer-contact { font-size: 1rem; }
.footer-contact a { color: #FBF6A3; font-weight: 700; text-decoration-style: wavy; text-underline-offset: 4px; }
.footer-note { font-size: 0.72rem; opacity: 0.6; }

/* ===== блик на стикер-кнопках ===== */
.sticker-btn { position: relative; overflow: hidden; }
.sticker-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.sticker-btn:hover::after { left: 130%; }

/* ===== scroll-reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }

/* ===== keyframes ===== */
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

@keyframes letter-up {
  from { opacity: 0; transform: translateY(0.6em) rotate(5deg); }
  to   { opacity: 1; transform: none; }
}

@keyframes polaroid-drop {
  0%   { opacity: 0; transform: rotate(-9deg) translateY(-46px) scale(1.04); }
  65%  { opacity: 1; transform: rotate(-1deg) translateY(5px) scale(1); }
  100% { opacity: 1; transform: rotate(-2.5deg) translateY(0); }
}

@keyframes spark-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(12deg); }
}

@keyframes note-sway {
  0%, 100% { transform: translateX(-50%) rotate(-5deg); }
  50%      { transform: translateX(-50%) rotate(-1.5deg); }
}

/* стилус стукается о планшет */
@keyframes prize-tap {
  0%, 52%, 100% { transform: rotate(0deg) translateY(0); }
  60%           { transform: rotate(-4deg) translateY(3px); }
  68%           { transform: rotate(2.5deg) translateY(-2px); }
  76%           { transform: rotate(-1deg) translateY(1px); }
  84%           { transform: rotate(0deg) translateY(0); }
}

/* ...и выбивает звёздочки */
@keyframes star-pop {
  0%, 58%  { opacity: 0; transform: translate(0, 0) scale(0.3); }
  66%      { opacity: 1; transform: translate(calc(var(--dx, 8px) / 2), -9px) scale(1); }
  88%      { opacity: 0; transform: translate(var(--dx, 8px), -22px) scale(1.15); }
  100%     { opacity: 0; transform: translate(var(--dx, 8px), -22px) scale(1.15); }
}

/* маскоты мягко покачиваются */
@keyframes mascot-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}

/* маскот My Arts — «выстреливает паутиной»: покачивание + периодический выпад */
@keyframes mascot-thwip {
  0%, 60%, 100% { transform: translateY(0) rotate(0deg); }
  68%           { transform: translateY(-6px) rotate(-5deg) scale(1.05); }
  76%           { transform: translateY(0) rotate(2deg); }
  84%           { transform: translateY(-2px) rotate(-1deg); }
}

/* ===== breakpoints ===== */
@media (min-width: 768px) {
  .hero {
    grid-template-columns: 44% 1fr;
    align-items: center;
    padding: var(--s5);
    gap: var(--s5);
  }
  .panel { padding: var(--s6) var(--s5); }
  .portfolio.open .conveyor { margin-inline: calc(-1 * var(--s5)); }
  /* на десктопе свёрнутый блок по высоте сопоставим с блоком мерча */
  .portfolio { min-height: 25rem; }
}

@media (max-width: 767px) {
  /* мобильная версия: тот же характер, что и на ПК */
  .hero-art { max-width: 430px; margin-inline: auto; transform: rotate(-2deg); }
  .hero-art::after { bottom: 60px; left: -50px; }
  .donate-btns { gap: var(--s4); }
  .progress { height: 48px; }
  .s3 { left: 8%; top: 4%; }
}

@media (min-width: 1280px) {
  .page { padding: var(--s5); }
}

/* ===== LIGHTBOX: просмотр арта в масштабе ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--s4);
  background: rgba(37, 34, 44, 0.9);
  backdrop-filter: blur(3px);
}
.lightbox[hidden] { display: none; }
.lb-img {
  max-width: min(94vw, 1100px);
  max-height: 90vh;
  border: var(--border);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
  background: var(--paper);
}
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: var(--border);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.15s ease;
}
.lb-btn:hover { transform: scale(1.08); }
.lb-close { top: var(--s4); right: var(--s4); }
.lb-prev { left: var(--s3); top: 50%; transform: translateY(-50%); }
.lb-next { right: var(--s3); top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) scale(1.08); }
.lb-next:hover { transform: translateY(-50%) scale(1.08); }

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .progress-fill, .note, .sticker-btn, .hero-socials a, .sticker-btn::after, .panel { transition: none; }
  .hero-art, .hero-copy > *, .ltr, .spark, .note, .goal-prize img, .pop, .mascot, .belt, .mascot-arts { animation: none; }
  .pop { opacity: 0; }
  .reveal { opacity: 1; transform: none; transition: none; }
}