:root {
  color-scheme: dark;
  --red: #ce2f39;
  --ink: #e4434c;
  --cream: #eee9df;
  --gold: #b99137;
  --blue: #b8d4e8;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 45% 38%, rgba(239, 230, 211, 0.16), transparent 30rem),
    linear-gradient(135deg, #231616, #0d0b0d 72%);
  font-family: Georgia, "Times New Roman", serif;
}

.stage {
  width: min(92vw, 720px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.manuscript {
  position: relative;
  width: min(88vmin, 650px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: var(--red);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    inset 0 0 0 2px rgba(255, 240, 224, 0.12);
  isolation: isolate;
}

.source-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.05);
  transform: scale(1.002);
  z-index: 0;
}

.paper-restore {
  position: absolute;
  left: 16.8%;
  top: 16.3%;
  width: 68.2%;
  height: 68.2%;
  z-index: 1;
  background:
    radial-gradient(circle at 45% 44%, rgba(228, 227, 220, 0.9), rgba(232, 231, 224, 0.94) 52%, rgba(219, 219, 211, 0.94)),
    #e7e6df;
  opacity: 0;
  animation: restorePaper 24s ease-in-out infinite;
  pointer-events: none;
}

.moving-assemblage,
.foreground-keeper {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.moving-assemblage {
  z-index: 2;
  opacity: 0;
  clip-path: polygon(
    24% 28%,
    31% 36%,
    39% 30%,
    44% 34%,
    48% 49%,
    55% 31%,
    69% 28%,
    76% 36%,
    77% 73%,
    66% 78%,
    43% 78%,
    21% 70%,
    12% 61%,
    23% 52%
  );
  animation: assemblageSlide 24s ease-in-out infinite;
}

.foreground-keeper {
  z-index: 3;
  opacity: 0;
  clip-path: polygon(65% 62%, 78% 58%, 83% 70%, 80% 83%, 67% 82%, 61% 72%);
  animation: keeperVisible 24s ease-in-out infinite;
}

.moving-assemblage img,
.foreground-keeper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.14) contrast(1.05);
}

.vellum-glow {
  position: absolute;
  inset: 15% 16% 17% 15%;
  background:
    radial-gradient(circle at 44% 52%, rgba(255, 250, 232, 0.36), transparent 27%),
    radial-gradient(circle at 64% 45%, rgba(255, 235, 185, 0.16), transparent 32%);
  mix-blend-mode: screen;
  opacity: 0.42;
  animation: candle 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}

.border-light {
  position: absolute;
  inset: 2.7%;
  border: clamp(5px, 1.4vmin, 10px) solid transparent;
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 0 14%, rgba(255, 248, 226, 0.62) 24%, transparent 36% 100%) top / 260% 10px no-repeat,
    linear-gradient(180deg, transparent 0 18%, rgba(255, 248, 226, 0.5) 30%, transparent 42% 100%) right / 10px 260% no-repeat,
    linear-gradient(270deg, transparent 0 13%, rgba(192, 145, 48, 0.66) 25%, transparent 38% 100%) bottom / 260% 10px no-repeat,
    linear-gradient(0deg, transparent 0 18%, rgba(255, 248, 226, 0.48) 30%, transparent 42% 100%) left / 10px 260% no-repeat;
  opacity: 0.28;
  filter: blur(0.2px);
  pointer-events: none;
  z-index: 10;
}

.border-sequence {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
}

.border-sequence i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(14px, 3.4vmin, 24px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.16;
  transform: translate(-50%, -50%) scale(0.72);
  background:
    radial-gradient(circle, rgba(255, 250, 234, 1) 0 15%, transparent 17% 29%, rgba(255, 250, 234, 0.92) 31% 39%, transparent 41%),
    radial-gradient(circle at 50% 0, rgba(255, 250, 234, 0.95) 0 18%, transparent 20%),
    radial-gradient(circle at 100% 50%, rgba(255, 250, 234, 0.95) 0 18%, transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(255, 250, 234, 0.95) 0 18%, transparent 20%),
    radial-gradient(circle at 0 50%, rgba(255, 250, 234, 0.95) 0 18%, transparent 20%);
  filter: drop-shadow(0 0 1px rgba(255, 248, 220, 0.5));
  animation: beadLight 12.8s linear infinite;
  animation-delay: calc(var(--d) * 0.4s);
}

.border-sequence i:nth-child(4n + 2) {
  background:
    radial-gradient(circle, rgba(190, 143, 42, 1) 0 34%, transparent 37%),
    radial-gradient(circle at 50% 0, rgba(255, 246, 216, 0.8) 0 18%, transparent 20%),
    radial-gradient(circle at 100% 50%, rgba(255, 246, 216, 0.8) 0 18%, transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(255, 246, 216, 0.8) 0 18%, transparent 20%),
    radial-gradient(circle at 0 50%, rgba(255, 246, 216, 0.8) 0 18%, transparent 20%);
}

.border-sequence i:nth-child(7n) {
  background:
    radial-gradient(circle, rgba(184, 212, 232, 1) 0 34%, transparent 37%),
    radial-gradient(circle at 50% 0, rgba(255, 246, 216, 0.8) 0 18%, transparent 20%),
    radial-gradient(circle at 100% 50%, rgba(255, 246, 216, 0.8) 0 18%, transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(255, 246, 216, 0.8) 0 18%, transparent 20%),
    radial-gradient(circle at 0 50%, rgba(255, 246, 216, 0.8) 0 18%, transparent 20%);
}

.wing {
  position: absolute;
  top: 30.8%;
  width: 14%;
  height: 21%;
  opacity: 0;
  z-index: 5;
  background:
    repeating-linear-gradient(128deg, rgba(238, 70, 78, 0.84) 0 4px, rgba(255, 232, 218, 0.62) 5px 7px, transparent 8px 13px);
  clip-path: polygon(8% 95%, 20% 42%, 0 4%, 46% 26%, 68% 0, 70% 38%, 100% 36%, 76% 60%, 88% 92%, 48% 72%);
  mix-blend-mode: multiply;
  transform-origin: 72% 82%;
  animation: awaken 24s ease-in-out infinite, wingBeat 1.3s ease-in-out 6.2s infinite;
}

.wing-left {
  left: 26.5%;
  transform: rotate(-8deg);
}

.wing-right {
  left: 36.5%;
  transform: scaleX(-0.78) rotate(-3deg);
}

.finger-scene {
  position: absolute;
  left: 36%;
  top: 55%;
  width: 22%;
  height: 12%;
  z-index: 6;
  opacity: 0;
  transform: translateY(8%) scale(0.92);
  animation: fingersArrive 24s ease-in-out infinite;
}

.finger {
  position: absolute;
  top: 42%;
  width: 35%;
  height: 13%;
  border-radius: 999px 999px 55% 55%;
  background: rgba(238, 64, 72, 0.78);
  box-shadow: 0 0 0 1px rgba(255, 230, 210, 0.28);
  mix-blend-mode: multiply;
  transform-origin: 16% 50%;
  animation: playFinger 1.25s ease-in-out infinite;
}

.finger::after {
  content: "";
  position: absolute;
  right: 7%;
  top: 14%;
  width: 24%;
  height: 54%;
  border-radius: 50%;
  background: rgba(255, 232, 216, 0.34);
}

.finger-left {
  left: 4%;
  rotate: 7deg;
}

.finger-right {
  left: 42%;
  rotate: -8deg;
  animation-delay: 0.42s;
}

.music-note {
  position: absolute;
  color: rgba(247, 232, 203, 0.86);
  font-size: clamp(13px, 3vmin, 22px);
  text-shadow: 0 0 8px rgba(197, 148, 53, 0.6);
  opacity: 0;
  animation: notes 4s ease-out infinite;
}

.note-one { left: 16%; top: -24%; }
.note-two { left: 52%; top: -35%; animation-delay: 0.55s; }
.note-three { left: 74%; top: -18%; animation-delay: 1.1s; }

.snail-journey {
  position: absolute;
  left: 14%;
  top: 18%;
  width: 72%;
  height: 66%;
  z-index: 8;
  opacity: 0;
  transform-origin: 46% 58%;
  animation: snailTrip 24s ease-in-out infinite;
}

.angel-echo {
  position: absolute;
  left: 22%;
  top: 25%;
  width: 18%;
  height: 24%;
  opacity: 0;
  transform-origin: 50% 100%;
  animation: angelCarried 24s ease-in-out infinite;
}

.echo-wing {
  position: absolute;
  top: 0;
  width: 45%;
  height: 68%;
  background: repeating-linear-gradient(128deg, rgba(238, 70, 78, 0.76) 0 3px, rgba(255, 232, 218, 0.5) 4px 5px, transparent 6px 10px);
  clip-path: polygon(6% 96%, 24% 38%, 0 2%, 44% 24%, 64% 0, 72% 42%, 100% 34%, 78% 60%, 88% 94%, 48% 70%);
  mix-blend-mode: multiply;
}

.echo-wing-left {
  left: 0;
  rotate: -16deg;
}

.echo-wing-right {
  right: 4%;
  transform: scaleX(-0.82);
  rotate: 12deg;
}

.echo-head {
  position: absolute;
  left: 41%;
  top: 28%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 232, 201, 0.75);
  box-shadow: 0 0 0 2px rgba(238, 64, 72, 0.55);
}

.echo-body {
  position: absolute;
  left: 37%;
  top: 46%;
  width: 26%;
  height: 38%;
  border-radius: 55% 55% 45% 45%;
  background: rgba(238, 64, 72, 0.74);
  mix-blend-mode: multiply;
}

.ink-spark {
  position: absolute;
  width: clamp(18px, 4vmin, 30px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 62, 71, 0.8) 0 14%, transparent 18% 26%, rgba(244, 226, 197, 0.5) 28% 31%, transparent 34%);
  opacity: 0;
  z-index: 7;
  animation: spark 12s ease-in-out infinite;
}

.spark-one { left: 50%; top: 47%; }
.spark-two { left: 28%; top: 35%; animation-delay: 0.7s; }
.spark-three { left: 70%; top: 35%; animation-delay: 1.25s; }

@keyframes candle {
  0%, 100% { opacity: 0.27; transform: scale(0.985); }
  50% { opacity: 0.52; transform: scale(1.025); }
}

@keyframes restorePaper {
  0%, 36% { opacity: 0; }
  42%, 93% { opacity: 0.92; }
  100% { opacity: 0; }
}

@keyframes assemblageSlide {
  0%, 36% { opacity: 0; transform: translateX(0) translateY(0) scale(1); }
  42% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
  58% { opacity: 1; transform: translateX(-34%) translateY(-1%) scale(1.01); }
  66% { opacity: 0; transform: translateX(-52%) translateY(-2%) scale(0.98); }
  73% { opacity: 0; transform: translateX(44%) translateY(1%) scale(0.98); }
  78% { opacity: 1; transform: translateX(44%) translateY(1%) scale(0.98); }
  88%, 93% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(0) translateY(0) scale(1); }
}

@keyframes keeperVisible {
  0%, 36% { opacity: 0; }
  42%, 93% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes beadLight {
  0%, 7%, 100% {
    opacity: 0.16;
    transform: translate(-50%, -50%) scale(0.72);
    filter: drop-shadow(0 0 1px rgba(255, 248, 220, 0.3));
  }
  2.5% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
    filter:
      drop-shadow(0 0 5px rgba(255, 248, 220, 0.95))
      drop-shadow(0 0 12px rgba(204, 158, 55, 0.55));
  }
  4.5% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.94);
    filter:
      drop-shadow(0 0 3px rgba(255, 248, 220, 0.7))
      drop-shadow(0 0 8px rgba(204, 158, 55, 0.38));
  }
}

@keyframes awaken {
  0%, 23% { opacity: 0; filter: blur(2px); }
  28%, 82% { opacity: 0.7; filter: blur(0); }
  88%, 100% { opacity: 0; filter: blur(2px); }
}

@keyframes wingBeat {
  0%, 100% { scale: 1; }
  50% { scale: 1.08 0.92; }
}

@keyframes fingersArrive {
  0%, 18% { opacity: 0; transform: translateY(8%) scale(0.92); }
  24%, 41% { opacity: 0.7; transform: translateY(0) scale(1); }
  48%, 100% { opacity: 0; transform: translateY(6%) scale(0.96); }
}

@keyframes playFinger {
  0%, 100% { transform: translateY(-4%) rotate(-5deg); }
  45% { transform: translateY(20%) rotate(8deg); }
  70% { transform: translateY(4%) rotate(-2deg); }
}

@keyframes notes {
  0%, 18% { opacity: 0; transform: translateY(12px) scale(0.82); }
  28% { opacity: 0.86; }
  48%, 100% { opacity: 0; transform: translateY(-36px) scale(1.12); }
}

@keyframes snailTrip {
  0%, 37% { opacity: 0; transform: translateX(0) translateY(0) scale(0.88); }
  43% { opacity: 0.9; transform: translateX(0) translateY(0) scale(1); }
  58% { opacity: 0.88; transform: translateX(-34%) translateY(-1%) scale(1.01); }
  66% { opacity: 0; transform: translateX(-52%) translateY(-2%) scale(0.96); }
  73% { opacity: 0; transform: translateX(44%) translateY(1%) scale(0.92); }
  78% { opacity: 0.88; transform: translateX(44%) translateY(1%) scale(0.92); }
  88% { opacity: 0.88; transform: translateX(0) translateY(0) scale(1); }
  93% { opacity: 0.88; transform: translateX(0) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(0) translateY(0) scale(0.94); }
}

@keyframes angelCarried {
  0%, 40% { opacity: 0; transform: translateY(12%) rotate(-3deg); }
  47%, 62% { opacity: 0.78; transform: translateY(0) rotate(8deg); }
  74% { opacity: 0.42; transform: translateY(6%) rotate(-4deg); }
  84%, 92% { opacity: 0.72; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(4%) rotate(0deg); }
}

@keyframes spark {
  0%, 48%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  55% { opacity: 0.88; transform: scale(1.2) rotate(40deg); }
  68% { opacity: 0; transform: scale(1.8) rotate(100deg); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}