/* CosmoMatch — промо 19 «Рукописный манифест» */

:root {
  --ground: #FBF7EF;
  --ink: #22201D;
  --accent: #2B4FE0;
  --secondary: #B4341F;
  --glow: #E7DCC6;
  --rule-line: rgba(34, 32, 29, 0.14);
  --hand: 'Caveat', 'Segoe Script', cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { overflow-x: hidden; }

body {
  background-color: var(--ground);
  /* линейчатый фон блокнота + поля с красной линейкой */
  background-image:
    linear-gradient(90deg, transparent 0 72px, rgba(180, 52, 31, 0.45) 72px 74px, transparent 74px),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--rule-line) 31px 32px);
  color: var(--ink);
  font-family: 'Golos Text', 'PT Sans', sans-serif;
  font-size: 17px;
  line-height: 32px;
  -webkit-font-smoothing: antialiased;
}

.paper {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px 48px;
}

/* ---------- header ---------- */

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0 10px;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}

.logo__mark {
  width: 42px;
  height: 42px;
  flex: none;
  align-self: center;
  color: var(--ink);
}

.asterisk path {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

html.js .asterisk path {
  stroke-dashoffset: 100;
  animation: star-draw 0.9s ease forwards;
}

html.js .asterisk path:nth-child(2) { animation-delay: 0.1s; }
html.js .asterisk path:nth-child(3) { animation-delay: 0.2s; }
html.js .asterisk path:nth-child(4) { animation-delay: 0.3s; }
html.js .asterisk path:nth-child(5) { animation-delay: 0.4s; }
html.js .asterisk path:nth-child(6) { animation-delay: 0.5s; }
html.js .asterisk path:nth-child(7) { animation-delay: 0.6s; }
html.js .asterisk path:nth-child(8) { animation-delay: 0.7s; }

@keyframes star-draw {
  to { stroke-dashoffset: 0; }
}

.wordmark {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
}

.wordmark__hand {
  font-family: var(--hand);
  font-weight: 600;
  font-size: 24px;
  color: var(--accent);
  transform: rotate(-4deg);
  display: inline-block;
}

.top__page {
  font-family: var(--hand);
  font-size: 20px;
  color: var(--secondary);
  transform: rotate(1.5deg);
}

/* ---------- hero ---------- */

.sheet { padding-top: 34px; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 28px;
  align-items: start;
  padding-bottom: 44px;
}

.column { min-width: 0; }

.kicker {
  font-family: var(--hand);
  font-weight: 600;
  font-size: 22px;
  color: var(--accent);
  transform: rotate(-1deg);
  display: inline-block;
  margin-bottom: 14px;
}

.headline {
  font-weight: 600;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 8px 0 26px;
}

.circled {
  position: relative;
  display: inline-block;
  color: var(--ink);
}

.circle-sketch {
  position: absolute;
  left: -4%;
  top: -6%;
  width: 108%;
  height: 112%;
  pointer-events: none;
}

.circle-sketch path {
  fill: none;
  stroke: var(--secondary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

[data-sketch].in .circle-sketch path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.3s cubic-bezier(0.4, 0, 0.3, 1) 0.35s;
}

.sub {
  max-width: 58ch;
  margin-bottom: 30px;
}

.cta {
  position: relative;
  display: inline-block;
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
  background: var(--glow);
  padding: 12px 26px 16px;
  transform: rotate(-1.2deg);
  box-shadow: 2px 3px 0 rgba(34, 32, 29, 0.25);
  transition: transform 0.18s ease;
}

.cta:hover, .cta:focus-visible { transform: rotate(-1.2deg) translateY(-2px); }

.cta .ul-sketch {
  position: absolute;
  left: 10px;
  bottom: 4px;
  width: calc(100% - 20px);
  height: 12px;
}

.ul-sketch path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.cta:hover .ul-sketch path,
.cta:focus-visible .ul-sketch path,
.page-card:hover .page-card__t .ul-sketch path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.45s ease;
}

/* ---------- margin notes ---------- */

.margin {
  padding-top: 96px;
  display: flex;
  flex-direction: column;
  gap: 54px;
}

.note-in { transform: rotate(2deg); }
.note-in--b { transform: rotate(-3deg); align-self: flex-end; margin-right: 8px; }

.note-hand {
  font-family: var(--hand);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.15;
  color: var(--accent);
}

.note-hand--red { color: var(--secondary); }

[data-sketch].in .note-hand {
  opacity: 1;
  transition: opacity 0.5s ease 0.5s;
}

.arrow-sketch {
  width: 110px;
  height: auto;
  display: block;
  margin-bottom: 4px;
}

.arrow-sketch--up { margin: 0 0 -6px auto; display: block; }

.arrow-sketch path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

[data-sketch].in .arrow-sketch path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s ease 0.15s;
}

[data-sketch].in .arrow-sketch path:nth-child(2) {
  transition-delay: 0.85s;
}

/* ---------- torn pages ---------- */

.pages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  padding: 42px 0 64px;
}

.page-card {
  position: relative;
  background: #FFFDF7;
  padding: 26px 22px 34px;
  transform: rotate(-1deg);
  box-shadow: 4px 6px 0 rgba(34, 32, 29, 0.12);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 92% 100%, 84% calc(100% - 12px), 72% 100%, 60% calc(100% - 14px), 48% 100%, 36% calc(100% - 10px), 24% 100%, 12% calc(100% - 14px), 0 100%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-card:nth-child(2) { transform: rotate(0.8deg); margin-top: 14px; }
.page-card:nth-child(3) { transform: rotate(-1.6deg); }

.page-card:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 6px 10px 0 rgba(34, 32, 29, 0.16);
}

.page-card__t {
  position: relative;
  display: inline-block;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 12px;
}

.page-card__t .ul-sketch {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 10px;
}

.page-card__d {
  font-size: 16px;
  line-height: 1.5;
}

.tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255, 209, 102, 0.55);
  border-left: 1px dashed rgba(34, 32, 29, 0.18);
  border-right: 1px dashed rgba(34, 32, 29, 0.18);
}

.corner-sketch {
  position: absolute;
  right: 6px;
  bottom: 2px;
  width: 54px;
  height: 54px;
}

.star-sketch {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 38px;
  height: 38px;
}

.corner-sketch path,
.star-sketch path {
  fill: none;
  stroke: var(--secondary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.page-card.in .corner-sketch path,
.page-card.in .star-sketch path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.8s ease 0.5s;
}

/* ---------- quote ---------- */

.quote-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 28px;
  align-items: start;
  padding: 10px 0 56px;
}

.quote {
  max-width: 62ch;
}

.quote__main {
  font-family: var(--hand);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.22;
  color: var(--ink);
}

.quote__squiggle {
  width: min(300px, 70%);
  height: 26px;
  margin-top: 8px;
  display: block;
}

.quote__squiggle path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.quote-block.in .quote__squiggle path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s ease 0.3s;
}

.margin--quote {
  padding-top: 26px;
}

/* ---------- P.S. ---------- */

.ps {
  padding: 6px 0 60px;
}

.ps__text {
  display: inline-block;
  font-family: var(--hand);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.25;
  color: var(--secondary);
  background: rgba(231, 220, 198, 0.55);
  padding: 14px 24px;
  transform: rotate(1deg);
}

/* ---------- footer ---------- */

.foot {
  border-top: 2px solid var(--ink);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.foot__brand {
  font-family: var(--hand);
  font-size: 22px;
  color: var(--ink);
}

.promo-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.promo-nav a {
  font-family: var(--hand);
  font-weight: 600;
  font-size: 20px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid rgba(43, 79, 224, 0.35);
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}

.promo-nav a:hover, .promo-nav a:focus-visible {
  border-color: var(--accent);
}

/* ---------- reveal ---------- */

html.js [data-reveal] { opacity: 0; }

html.js [data-reveal].in {
  opacity: 1;
  animation: hand-rise 0.6s ease;
}

@keyframes hand-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; }
}

/* sketch strokes stay hidden only while JS is waiting for inview */

html.js [data-sketch]:not(.in) .circle-sketch path,
html.js [data-sketch]:not(.in) .arrow-sketch path,
html.js .page-card:not(.in) .corner-sketch path,
html.js .page-card:not(.in) .star-sketch path,
html.js .quote-block:not(.in) .quote__squiggle path {
  stroke-dashoffset: 100;
}

html.js [data-sketch]:not(.in) .note-hand { opacity: 0; }

/* ---------- adaptive ---------- */

@media (max-width: 900px) {
  .hero, .quote-block { grid-template-columns: 1fr; }
  .margin { flex-direction: row; padding-top: 10px; gap: 30px; }
  .note-in--b { margin: 0; }
  .pages { grid-template-columns: 1fr; }
  .page-card, .page-card:nth-child(2), .page-card:nth-child(3) { transform: rotate(0deg); margin-top: 0; }
  body { background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--rule-line) 31px 32px); }
}

@media (max-width: 480px) {
  .paper { padding: 0 16px 36px; }
  .top { flex-wrap: wrap; }
  .margin { flex-wrap: wrap; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html.js .asterisk path {
    stroke-dashoffset: 0;
    animation: none;
  }
  html.js [data-reveal] {
    opacity: 1;
  }
  html.js [data-reveal].in { animation: none; }
  .circle-sketch path,
  .arrow-sketch path,
  .ul-sketch path,
  .corner-sketch path,
  .star-sketch path,
  .quote__squiggle path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .note-hand { opacity: 1 !important; }
  .cta, .page-card, .promo-nav a { transition: none; }
}