/* lineage-polish.css — world-class finishing layer for the lineage pages:
   (1) a unified film grain + vignette so varied plates read as one graded world,
   (2) blur-up: gallery images fade in from soft+dim to sharp as they load,
   (3) scroll-reveal: cards rise into place as they enter the viewport.
   All progressive-enhancement; respects prefers-reduced-motion. */

/* (1) GRADE — fixed grain + vignette over the whole page, below the UI, non-interactive */
.gm-grade {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
}
.gm-grade::before {           /* vignette */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 42%, transparent 58%, rgba(5,5,5,.42) 100%);
}
.gm-grade::after {            /* fine film grain (tiny tiled SVG noise) */
  content: ""; position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* keep real content above the grade layer. NOTE: do NOT include #lb-overlay here — it
   manages its own fixed/z-index:9999 stacking and is already above the grade; overriding
   it would break the fullscreen lightbox. Same for #am-toggle (fixed). */
header.top, section, footer, .lin-slideshow { position: relative; z-index: 2; }

/* (2) BLUR-UP — images start soft + slightly dim, resolve to sharp on load */
@media (prefers-reduced-motion: no-preference) {
  .gcard img.gm-lazy { filter: blur(12px) brightness(.85); transform: scale(1.02);
    transition: filter .6s ease, transform .6s ease, opacity .6s ease; opacity: .6; }
  .gcard img.gm-lazy.gm-loaded { filter: none; transform: none; opacity: 1; }
}

/* (3) SCROLL-REVEAL — cards rise + fade as they enter view */
@media (prefers-reduced-motion: no-preference) {
  .gcard.gm-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
  .gcard.gm-reveal.gm-in { opacity: 1; transform: none; }
}

/* Chain MOTION RUNG — inline looping video as the terminal cell of a lineage chain. */
.chain-cell video.chain-motion {
  display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10;
}
.stage-pill.motion { border-color: var(--accent, #2fb3b8); color: var(--accent, #2fb3b8); }
.stage-pill.motion .dot { background: var(--accent, #2fb3b8); }