/* ===========================================================
   Материалы альбома: скотч, булавки, поляроиды, стикеры,
   рукописный слой, дудлы, билет
   =========================================================== */

/* -----------------------------------------------------------
   Наклеенные вещи.
   Один transform на всех, собранный из независимых слагаемых:
     --tilt    угол «как приклеилось» (покой)
     --settle  угол сейчас (hover выпрямляет)
     --rise    смещение появления при скролле
     --hover-y подъём под курсором
   Слагаемые не конфликтуют, поэтому reveal и hover не спорят
   за один transform и не требуют войны специфичностей.
   ----------------------------------------------------------- */

.polaroid,
.path-card,
.ai-slip,
.me-card,
.me-note,
.me-mem,
.about-card,
.plango-card,
.finale-card,
.scrap,
.sticker,
[data-reveal] {
  transform:
    translateY(calc(var(--rise, 0px) + var(--hover-y, 0px)))
    rotate(var(--settle, var(--tilt, 0deg)));
  transition: transform .35s ease, opacity .7s ease;
}

.polaroid:hover,
.path-card:hover,
.ai-slip:hover,
.me-card:hover,
.me-note:hover,
.me-mem:hover,
.scrap:hover {
  --settle: 0deg;
  --hover-y: -3px;
}

/* -----------------------------------------------------------
   Клочок крафта — короткая справка, приклеенная сбоку от текста
   ----------------------------------------------------------- */

.scrap {
  position: relative;
  padding: 20px 26px 22px;
  background-color: var(--kraft);
  background-image: var(--grain);
  background-size: 240px 240px;
  box-shadow: var(--lift-card);
}

.scrap__label {
  display: block;
  font-family: var(--hand);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--marker);
  margin-bottom: 10px;
}

.scrap ul { list-style: none; }

.scrap li {
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--ink-soft);
  padding: 5px 0 5px 16px;
  position: relative;
}

.scrap li::before {
  content: "·";
  position: absolute;
  left: 2px;
  color: var(--orange);
  font-weight: 700;
}

/* стикер не выпрямляется, а «отклеивается» — кренится сильнее */
.sticker:hover {
  --settle: calc(var(--tilt, 0deg) * -1.5);
  --hover-y: -3px;
}

.js [data-reveal]         { opacity: 0; --rise: 16px; }
.js [data-reveal].in-view { opacity: 1; --rise: 0px; }

/* -----------------------------------------------------------
   Скотч и булавки
   ----------------------------------------------------------- */

.tape {
  position: absolute;
  width: 92px;
  height: 26px;
  background: linear-gradient(100deg, rgba(240, 225, 185, .85), rgba(228, 210, 168, .7));
  box-shadow: 0 1px 3px rgba(46, 50, 38, .18);
  border-left: 1px dashed rgba(46, 50, 38, .12);
  border-right: 1px dashed rgba(46, 50, 38, .12);
  pointer-events: none;
}

.tape--tl  { top: -12px; left: -26px;  transform: rotate(-40deg); }
.tape--tr  { top: -12px; right: -26px; transform: rotate(40deg); }
.tape--top { top: -13px; left: 50%;    transform: translateX(-50%) rotate(-2deg); }

.pin {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E8896A, #B4452F 55%, #7D2B1C);
  box-shadow: 0 2px 4px rgba(46, 50, 38, .35);
  pointer-events: none;
}

/* -----------------------------------------------------------
   Поляроид
   ----------------------------------------------------------- */

.polaroid {
  position: relative;
  background: var(--card);
  padding: 12px 12px 14px;
  box-shadow: var(--lift-photo);
}

.polaroid img { width: 100%; height: 100%; object-fit: cover; }

.polaroid figcaption {
  font-family: var(--hand);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--ink-soft);
  padding-top: 10px;
  text-align: center;
}

/* -----------------------------------------------------------
   Стикер-ссылка
   ----------------------------------------------------------- */

.sticker {
  display: inline-block;
  font-family: var(--mono);
  font-size: .8rem;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 7px 16px 8px;
  box-shadow: 0 3px 0 rgba(46, 50, 38, .16);
  text-decoration: none;
}

/* -----------------------------------------------------------
   Рукописный слой: пометки, подчёркивания, стрелки
   ----------------------------------------------------------- */

.note {
  font-family: var(--hand);
  color: var(--marker);
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  line-height: 1.1;
}

/* волнистое подчёркивание под заголовком */
.scribble { display: block; margin-top: 6px; width: min(210px, 60%); height: 12px; }
.scribble path { fill: none; stroke: var(--orange); stroke-width: 3.6; stroke-linecap: round; }

/* подчёркивание внутри строки текста */
.hand-u { position: relative; white-space: nowrap; }
.hand-u svg { position: absolute; left: 0; bottom: -6px; width: 100%; height: 10px; overflow: visible; }
.hand-u path { fill: none; stroke: var(--orange); stroke-width: 3.2; stroke-linecap: round; opacity: .9; }

/* обводка от руки вокруг элемента */
.arrow { position: absolute; pointer-events: none; overflow: visible; }
.arrow path { fill: none; stroke: var(--marker); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* стрелка с подписью рядом с кнопкой */
.cta-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
  vertical-align: middle;
  transform: translateY(5px) rotate(-3deg);
  font-family: var(--hand);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--marker);
  pointer-events: none;
}

.cta-hint svg { width: 46px; height: 28px; overflow: visible; flex: none; }
.cta-hint path { fill: none; stroke: var(--marker); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

/* -----------------------------------------------------------
   Дудлы увлечений — одна чернильная линия
   ----------------------------------------------------------- */

.doodle {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 58px;
  height: auto;
  transform: rotate(5deg);
  opacity: .85;
  pointer-events: none;
}

.doodle path,
.doodle circle,
.doodle line {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doodle .fill { fill: var(--ink-soft); stroke: none; }

/* -----------------------------------------------------------
   Кофейное кольцо — след от кружки, которую поставили на бумагу
   ----------------------------------------------------------- */

.coffee {
  position: absolute;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .5;
  border: 7px solid rgba(140, 92, 45, .22);
  box-shadow: inset 0 0 0 3px rgba(140, 92, 45, .07);
  transform: rotate(-8deg) scaleY(.93);
}

/* -----------------------------------------------------------
   Скрепка — цепляется за верхний край карточки
   ----------------------------------------------------------- */

.clip {
  position: absolute;
  top: -19px;
  width: 26px;
  height: 62px;
  pointer-events: none;
}

.clip path {
  fill: none;
  stroke: #8A8E80;
  stroke-width: 3;
  stroke-linecap: round;
}

.clip .back { stroke: #6F7365; }

/* -----------------------------------------------------------
   Штамп
   ----------------------------------------------------------- */

.stamp {
  font-family: var(--hand);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--marker);
  border: 2.5px solid var(--marker);
  border-radius: 8px;
  padding: 8px 10px 9px;
  max-width: 106px;
  text-align: center;
  transform: rotate(-8deg);
  opacity: .88;
}

/* -----------------------------------------------------------
   Кнопка
   ----------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  background: var(--navy);
  color: var(--card);
  padding: 14px 30px 15px;
  border-radius: 6px;
  box-shadow: 0 5px 0 rgba(30, 42, 74, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(30, 42, 74, .35); }