/*
  Неподвижная мрачная сцена. Движения нет: меняется только яркость,
  как у умирающей лампы. Мерцание редкое и слабое по контрасту.
*/

:root {
  --soot: #050404;
  --ash: #a89b8d;
  --ember: 132, 34, 22; /* RGB тусклого багрового света */
}

@font-face {
  font-family: "Mark";
  src: url("fonts/mark.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--soot);
  overflow: hidden;
}

/* ---------- Сцена: сырые пятна, тусклое свечение, мерцающий пул света ---------- */

.scene,
.film,
.film::before,
.film::after {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.scene > div {
  position: absolute;
  inset: 0;
}

.stain {
  background: url("stain.svg") center / cover no-repeat;
  opacity: 0.6;
}

.glow {
  background: radial-gradient(60% 50% at 50% 46%, rgba(var(--ember), 0.2) 0%, transparent 72%);
}

.pool {
  background:
    radial-gradient(46% 40% at 50% 46%, rgba(var(--ember), 0.46) 0%, rgba(80, 18, 12, 0.2) 55%, transparent 80%);
  will-change: opacity;
  animation: lamp 9.3s linear infinite;
}

/* ---------- Надпись ---------- */

main {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 5vw 6vh;
}

.mark {
  margin: 0;
  font-family: "Mark", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 11.5vw, 8.5rem);
  line-height: 1;
  letter-spacing: 0.07em;
  text-align: center;
  white-space: nowrap;
  color: var(--ash);
  text-shadow:
    0 0 0.3em rgba(var(--ember), 0.65),
    0 0 1.3em rgba(var(--ember), 0.35);
  will-change: opacity;
  animation: tube 13.1s linear infinite;
}

/* ---------- Плёнка: зерно и тёмные края ---------- */

.film::before {
  content: "";
  background: url("grain.svg");
  opacity: 0.1;
}

.film::after {
  content: "";
  background: radial-gradient(115% 95% at 50% 46%, transparent 32%, rgba(0, 0, 0, 0.9) 100%);
}

/* ---------- Мерцание ----------
   Две независимые лампы с разными периодами. В каждой не более двух
   провалов подряд и пауза в несколько секунд, так что вспышек не больше
   двух-трёх в секунду. */

@keyframes lamp {
  0%, 61%   { opacity: 1; }
  62%       { opacity: 0.42; }
  63.2%     { opacity: 0.95; }
  64.6%     { opacity: 0.3; }
  66%, 84%  { opacity: 1; }
  85%       { opacity: 0.68; }
  86.4%, 100% { opacity: 1; }
}

@keyframes tube {
  0%, 38%   { opacity: 1; }
  38.6%     { opacity: 0.38; }
  39.4%     { opacity: 0.92; }
  40.2%     { opacity: 0.2; }
  41.2%, 90% { opacity: 1; }
  90.6%     { opacity: 0.6; }
  91.4%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pool,
  .mark {
    animation: none;
  }
}