feat: entity panel CSS — fog, grain, vignette, flash and glitch keyframes

styles.css

@@ -362,3 +362,113 @@ footer { display: none !important; }
         animation: none !important;
     }
 }
+
+/* ── 15. Entity panel — the child in the fog ──── */
+.entity-stage {
+    position: relative;
+    aspect-ratio: 5 / 6;
+    overflow: hidden;
+    border-radius: 6px;
+    background: #0b0a10;
+    border: 1px solid #1c1528;
+}
+
+.entity-figure {
+    position: absolute;
+    inset: 0;
+}
+
+.entity-sway {
+    animation: entity-sway 9s ease-in-out infinite alternate;
+    transform-origin: 50% 100%;
+}
+
+@keyframes entity-sway {
+    from { transform: rotate(-0.5deg) translateX(-2px); }
+    to   { transform: rotate(0.5deg)  translateX(2px); }
+}
+
+.entity-img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* terror flash: one-shot animation, restarts on Gradio re-mount */
+.entity-flash-wrap {
+    position: absolute;
+    inset: 0;
+}
+
+.entity-flash {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    animation: entity-flash-anim 1.2s ease-out forwards;
+}
+
+.entity-flash-strong {
+    animation: entity-flash-anim 2s ease-out forwards,
+               entity-glitch 2s steps(2) forwards;
+}
+
+@keyframes entity-flash-anim {
+    0%   { opacity: 0; }
+    12%  { opacity: 1; }
+    70%  { opacity: 1; }
+    100% { opacity: 0; }
+}
+
+@keyframes entity-glitch {
+    0%, 100% { transform: translate(0, 0); }
+    20% { transform: translate(-3px, 1px); }
+    40% { transform: translate(2px, -2px); }
+    60% { transform: translate(-2px, 2px); }
+    80% { transform: translate(3px, -1px); }
+}
+
+/* atmosphere overlays, in front of the portrait */
+.entity-fog {
+    position: absolute;
+    inset: -15%;
+    pointer-events: none;
+    background:
+        radial-gradient(ellipse 50% 25% at 30% 75%, rgba(150,140,165,0.14) 0%, transparent 70%),
+        radial-gradient(ellipse 55% 30% at 75% 35%, rgba(120,110,140,0.10) 0%, transparent 70%);
+    filter: blur(10px);
+    animation: entity-fog-drift 16s ease-in-out infinite alternate;
+}
+
+@keyframes entity-fog-drift {
+    from { transform: translateX(-3%) translateY(1%); }
+    to   { transform: translateX(3%)  translateY(-1.5%); }
+}
+
+.entity-grain {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0.13;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
+}
+
+.entity-vig {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(5,4,9,0.82) 100%);
+}
+
+/* finale: struck-through treasure + decomposing type already inline;
+   reduced motion */
+@media (prefers-reduced-motion: reduce) {
+    .entity-sway, .entity-fog, .entity-flash, .entity-flash-strong {
+        animation: none !important;
+    }
+    .entity-flash, .entity-flash-strong { opacity: 0 !important; }
+}