/**
 * Force Graph Block — pd-blk-fg-* layout. Auto-loaded from assets/blocks/forcegraph/.
 * v1.0.0 — "Constellation of relationships" stage chrome. Background colour
 * is painted by the JS runtime as a radial vignette so it can re-tint live.
 */
.pd-blk-fg { position: relative; width: 100%; }
.pd-blk-fg-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 38%, #15182b 0%, #0a0a14 70%, #06060c 100%);
    isolation: isolate;
}
.pd-blk-fg-mount {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    z-index: 1;
}
.pd-blk-fg-mount canvas { display: block; outline: none; }
/* Soft inner vignette painted over the WebGL canvas for cinematic edge falloff. */
.pd-blk-fg-vignette {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(6,6,12,0.65) 100%);
    mix-blend-mode: multiply;
}
/* Film grain — feTurbulence noise via inline SVG data-URI, blended over the scene.
   Lifts perceived production value without paying a network request. */
.pd-blk-fg-stage::after {
    content: ''; position: absolute; inset: 0;
    pointer-events: none; z-index: 3;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    mix-blend-mode: overlay;
    opacity: 0.13;
}
.pd-blk-fg-hint {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    padding: 4px 10px; z-index: 4;
    font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', Menlo, Consolas, monospace;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(220, 226, 245, 0.74);
    background: rgba(10, 10, 20, 0.62);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    border: 1px solid rgba(140, 170, 220, 0.18);
    border-radius: 3px;
    opacity: 0; transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.pd-blk-fg-stage:hover .pd-blk-fg-hint { opacity: 1; }
[data-gjs-type="pd-forcegraph"] { min-height: 220px; }
@media (prefers-reduced-motion: reduce) {
    .pd-blk-fg-hint { transition: none; }
}
@media (hover: none) {
    .pd-blk-fg-hint { opacity: 0.85; }
}