/* ============================================================
   pedigree-graph.css
   The pedigree graph (public/js/pedigree-graph.js), on the public
   pedigree page. Namespace .pg-*.

   The graph sits on its own Mica surface: a violet tint, the film
   grain the panels use, and the IAGD mark as a watermark. Both
   pseudo-elements sit under the SVG and take no taps.
   ============================================================ */

.pg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    min-height: 320px;
    border-radius: 16px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(124, 58, 237, 0.22), rgba(17, 8, 43, 0) 60%),
        #11082b;
}
.pg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("../assets/textures/noise.png");
    background-repeat: repeat;
    background-size: 128px 128px;
    opacity: 0.07;
}
.pg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url("../images/iagd_logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: min(78%, 400px);
    opacity: 0.05;
}
.pg__svg,
.pg__legend,
.pg__empty,
.pg__card {
    position: relative;
    z-index: 1;
}
/* The display rules below would beat a bare [hidden] on a page whose
   reset carries no !important; the empty note covers the whole graph and
   would swallow every tap. */
.pg__empty[hidden],
.pg__card[hidden] {
    display: none;
}
.pg__svg {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}
/* Inside a page that scrolls: the page keeps the vertical swipe. */
.pg__svg--embedded { touch-action: pan-y; }
.pg__node { cursor: pointer; }

/* Legend: what the outline of a node says. */
.pg__legend {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    pointer-events: none;
}
.pg__key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(220, 210, 255, 0.72);
}

.pg__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    font-size: 12px;
    color: rgba(220, 210, 255, 0.5);
}

/* The selected pet's card, at the foot of the graph. */
.pg__card {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(16, 12, 38, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: pg-card-in 200ms cubic-bezier(0.1, 0.9, 0.2, 1) both;
}
@keyframes pg-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pg__card-photo {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    display: grid;
    place-items: center;
    color: #c4a8ff;
    font-size: 22px;
    font-weight: 700;
}
.pg__card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg__card-body { min-width: 0; flex: 1 1 auto; }
.pg__card-rel {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(220, 210, 255, 0.5);
}
.pg__card-pending {
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 196, 0, 0.16);
    color: #ffd66b;
    letter-spacing: 0.5px;
}
.pg__card-name {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg__card-gender {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 500;
    color: rgba(220, 210, 255, 0.6);
}
.pg__card-detail {
    font-size: 10px;
    color: rgba(220, 210, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg__card-detail.is-number {
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c4a8ff;
}
.pg__card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: 6px;
}
.pg__action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #c4a8ff;
    text-decoration: none;
    cursor: pointer;
}
.pg__action:hover { text-decoration: underline; color: #c4a8ff; }
.pg__card-close {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(220, 210, 255, 0.72);
    cursor: pointer;
}
.pg__card-close:hover { color: #ffffff; }

/* The entrance. Each node drops in from above and bounces once as it
   lands, one ripple spreads from where it landed, its label fades in
   after it, and each line fades in behind its later node. The script
   sets the delay per element. Reduced motion: the script skips the
   classes. The transforms run in graph units inside the zoomed group. */
@keyframes pg-node-in {
    0%   { transform: translateY(-46px) scale(0.35); opacity: 0; }
    55%  { transform: translateY(0) scale(1.14); opacity: 1; }
    74%  { transform: translateY(-7px) scale(0.96); }
    88%  { transform: translateY(0) scale(1.03); }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
.pg-node-in {
    transform-box: fill-box;
    transform-origin: center;
    animation: pg-node-in 640ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pg-node-ripple {
    0%   { transform: scale(1); opacity: 0; }
    8%   { opacity: 0.6; }
    100% { transform: scale(3.2); opacity: 0; }
}
.pg-node-ripple {
    transform-box: fill-box;
    transform-origin: center;
    pointer-events: none;
    animation: pg-node-ripple 900ms cubic-bezier(0.1, 0.9, 0.2, 1) both;
}
@keyframes pg-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* `backwards`, not `both`: once the fade ends, a line goes back to its
   own opacity attribute, which dims it when another node is selected. */
.pg-label-in { animation: pg-fade-in 360ms cubic-bezier(0.1, 0.9, 0.2, 1) backwards; }
.pg-link-in  { animation: pg-fade-in 480ms cubic-bezier(0.1, 0.9, 0.2, 1) backwards; }