/* ======= INKSIGNUM: Noir / TV-flicker entrance ======= */
:root{
/* Global defaults � tweak inline per-instance if needed */
--fx-duration: 9.1s; /* total rhythm of flicker/shake */
--fx-delay: 20s; /* delay before first reveal */
--fx-intensity: 0.5; /* 0.5-1.5 safe range */
--fx-gold-cycle: 5s; /* cykl zloty opacity 100%->50%->100% + rozswietlenia */
}


.ink-noir{ position:relative; display:inline-block; overflow:hidden; isolation:isolate; }


/* Zloty tylko: opacity 100%->50%->100%, trzesienie, krotkie rozswietlenia, dystopijnie */
.ink-noir__img{
display:block; width:100%; height:auto;
color: #917d52;
transform: translateZ(0);
animation:
noir-fade var(--fx-duration) ease-out forwards var(--fx-delay),
noir-shake 0.08s steps(3, end) infinite,
noir-gold-pulse var(--fx-gold-cycle) steps(18, end) infinite calc(var(--fx-delay) + var(--fx-duration));
will-change: transform, opacity, filter;
}


/* Removed vignette and overlay effects for full transparency */
.ink-noir::before,
.ink-noir::after {
display:none;
}


/* Vignette + occasional horizontal tear */
.ink-noir::after{ content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(ellipse at center, rgba(0,0,0,0) 5%, rgba(0,0,0,0.55) 10%),
linear-gradient( to bottom, rgba(0,0,0,0) 48%, rgba(255,255,255,0.08) 49%, rgba(0,0,0,0) 50%);
background-size: 100% 100%, 100% 4px; background-repeat:no-repeat;
opacity: 0.65; mix-blend-mode:multiply; animation: noir-tear calc(var(--fx-duration)*2.7) steps(40,end) infinite;
}


/* Keyframes */
@keyframes noir-fade{ 0%{opacity:0} 10%{opacity:0.2} 20%{opacity:0.05} 35%{opacity:0.6} 45%{opacity:0.9}
60%{opacity:0.85} 75%{opacity:0.55} 90%{opacity:0.95} 100%{opacity:1} }


/* Micro-jitter + micro-rotate to simulate shaky signal */
@keyframes noir-shake{
0%{ transform: translate(0,0) rotate(0.02deg) }
10%{ transform: translate(calc(1px*var(--fx-intensity)), calc(-1px*var(--fx-intensity))) rotate(-0.05deg) }
20%{ transform: translate(calc(-1px*var(--fx-intensity)), 1px) rotate(0.06deg) }
30%{ transform: translate(0.6px, -0.6px) rotate(-0.08deg) }
40%{ transform: translate(-0.8px, 0.4px) rotate(0.09deg) }
50%{ transform: translate(0.4px, 0.8px) rotate(-0.06deg) }
60%{ transform: translate(-0.6px, -0.2px) rotate(0.17deg) }
70%{ transform: translate(0.2px, -0.8px) rotate(-0.05deg) }
80%{ transform: translate(-0.4px, 0.6px) rotate(0.04deg) }
90%{ transform: translate(0.8px, -0.4px) rotate(-0.03deg) }
100%{ transform: translate(0,0) rotate(0.02deg) }
}


/* Zloty: opacity 100%->50%->100% + krotkie rozswietlenia, bez grayscale */
@keyframes noir-gold-pulse{
0%{ opacity: 1; filter: brightness(1) }
4%{ opacity: 0.85; filter: brightness(1) }
8%{ opacity: 0.6; filter: brightness(1.35) }
12%{ opacity: 0.5; filter: brightness(1) }
18%{ opacity: 0.55; filter: brightness(1) }
24%{ opacity: 0.5; filter: brightness(1.5) }
30%{ opacity: 0.6; filter: brightness(1) }
38%{ opacity: 0.7; filter: brightness(1) }
44%{ opacity: 0.85; filter: brightness(1.4) }
52%{ opacity: 0.9; filter: brightness(1) }
60%{ opacity: 1; filter: brightness(1.2) }
68%{ opacity: 0.95; filter: brightness(1) }
76%{ opacity: 0.7; filter: brightness(1.45) }
84%{ opacity: 0.8; filter: brightness(1) }
92%{ opacity: 0.95; filter: brightness(1) }
100%{ opacity: 1; filter: brightness(1) }

/* ======= Litery jak spadajace ksiazki z polki (nawiedzenie demoniczne) ======= */
/* Nadpisanie noir-fade - tytuly musza byc widoczne, zeby efekt spadania byl widoczny */
.ink-haunted.ink-noir__img {
  animation: noir-shake 0.08s steps(3, end) infinite,
             noir-gold-pulse var(--fx-gold-cycle) steps(18, end) infinite;
  opacity: 1;
}
.ink-haunted {
  overflow: visible !important;
  perspective: 600px;
  transform-style: preserve-3d;
}
.ink-haunted .ink-haunted-letter {
  display: inline-block;
  transform-origin: 50% 0%;
  opacity: 0;
  animation: none;
  backface-visibility: visible;
}
.ink-haunted.is-haunted .ink-haunted-letter {
  animation: ink-book-fall 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.ink-haunted .ink-haunted-letter.ink-haunted-space { width: 0.25em; }
.ink-haunted br { display: block; }
@keyframes ink-book-fall {
  0% {
    transform: translateY(-2em) rotateX(-80deg) rotateZ(-18deg);
    opacity: 0;
  }
  30% {
    transform: translateY(-0.5em) rotateX(-30deg) rotateZ(8deg);
    opacity: 0.95;
  }
  60% {
    transform: translateY(0.6em) rotateX(60deg) rotateZ(20deg);
    opacity: 1;
  }
  85% {
    transform: translateY(0.15em) rotateX(12deg) rotateZ(4deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotateX(0deg) rotateZ(0deg);
    opacity: 1;
  }
}