/* Кровь: подтёки под шапкой, подтёки на краях секций, брызги, появление при скролле.
   Формы рисует js/blood.js, здесь — только положение и анимации. */

.curtain { display: block; overflow: visible; pointer-events: none; }
.site-header .curtain { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; z-index: -1; }

/* капли, сорвавшиеся с подтёков */
.drop-layer { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.drop {
  position: absolute;
  width: var(--s, 8px);
  height: calc(var(--s, 8px) * 1.25);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 35% 30%, #d8434b 0 18%, #9b111b 45%, #5a0710 100%);
  animation: drop-fall var(--t, 1.1s) cubic-bezier(.5, 0, .9, .4) forwards;
}
@keyframes drop-fall {
  0% { transform: translateY(0) scaleY(.6); opacity: 1; }
  12% { transform: translateY(4px) scaleY(1.25); }
  85% { opacity: 1; }
  100% { transform: translateY(var(--fall, 360px)) scaleY(1.45); opacity: 0; }
}

/* край секции, с которого течёт кровь */
.bleed { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 2; pointer-events: none; }
.bleed .curtain { position: absolute; left: 0; top: -1px; width: 100%; }

/* брызги */
.splat {
  position: absolute;
  width: var(--size, 180px);
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transform: scale(.25) rotate(var(--rot, 0deg));
  transition: transform .55s cubic-bezier(.2, 1.5, .4, 1), opacity .25s;
}
.splat.is-in { opacity: var(--alpha, .9); transform: scale(1) rotate(var(--rot, 0deg)); }
.splat svg { width: 100%; height: 100%; overflow: visible; }

/* мазок под заголовком секции */
.smear { display: block; width: min(320px, 70%); height: 34px; margin-top: 10px; overflow: visible; }
.smear .stroke { fill: none; stroke: var(--blood); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease-out); }
.smear .tear { fill: var(--blood); transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 0; transition: transform 1.4s cubic-bezier(.3, .7, .2, 1); }
.is-in .smear .stroke, .smear.is-in .stroke { stroke-dashoffset: 0; }
.is-in .smear .tear, .smear.is-in .tear { transform: scaleY(1); }

/* появление блоков */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* кровавая заливка текста при появлении */
.blood-text {
  background: linear-gradient(180deg, #ff4a52 0%, var(--blood) 55%, #4d060c 100%) 0 0 / 100% 0% no-repeat, linear-gradient(var(--text), var(--text));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-size 1.2s cubic-bezier(.5, 0, .2, 1) .2s;
}
.is-in .blood-text, .blood-text.is-in { background-size: 100% 100%, 100% 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .splat, .smear .stroke, .smear .tear, .blood-text { transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .splat { opacity: var(--alpha, .9); transform: rotate(var(--rot, 0deg)); }
  .smear .stroke { stroke-dashoffset: 0; }
  .smear .tear { transform: none; }
  .blood-text { background-size: 100% 100%, 100% 100%; }
  .drop { display: none; }
}