/* lineage-slideshow.css — cross-fading hero slideshow that rides the narration.
   Sits above a lineage gallery; cycles striking plates while David narrates. */
.lin-slideshow{
  position:relative; width:100%; aspect-ratio:16/7; background:#050505;
  border:1px solid var(--rule); overflow:hidden; margin:6px 0 8px;
}
.lin-slideshow .ls-slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease;
  background-size:cover; background-position:center; will-change:opacity;
}
.lin-slideshow .ls-slide.is-on{ opacity:1; }
/* PORTRAIT (tall) plates: CONTAIN so the WHOLE vertical image is always visible on the
   dark frame — never cropped. (A background-pan shows only a horizontal band at any one
   instant; if the slide advances before the pan finishes the bottom is "cut off", which
   is what was happening. contain guarantees nothing is ever cut off.) A soft blurred
   copy fills the letterbox margins so it doesn't read as hard black bars. */
.lin-slideshow .ls-slide.ls-portrait{
  background-size:contain; background-position:center center; background-repeat:no-repeat;
}
/* Letterbox fill for tall plates. Heavily darkened + desaturated so it reads as ambient
   FRAMING, not a "blurry image" — the sharp contained plate is the clear subject. */
.lin-slideshow .ls-slide.ls-portrait::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:inherit; background-size:cover; background-position:center;
  filter:blur(40px) brightness(.32) saturate(.6); transform:scale(1.15);
}
/* a flat dark scrim over the blurred fill so the wings sit back further still */
.lin-slideshow .ls-slide.ls-portrait::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(5,5,5,.5);
}
/* slow ken-burns drift on the active slide */
@media (prefers-reduced-motion: no-preference){
  .lin-slideshow .ls-slide.is-on{ animation:lsDrift 9s ease-out both; }
  @keyframes lsDrift{ from{ transform:scale(1.0);} to{ transform:scale(1.07);} }
  /* portrait: gentle vertical breathing that stays WITHIN the contained image (no crop) */
  .lin-slideshow .ls-slide.ls-portrait.is-on{ animation:lsPortraitBreathe 12s ease-in-out both; }
  @keyframes lsPortraitBreathe{
    from{ background-position:center 46%; }
    to{ background-position:center 54%; }
  }
}
.lin-slideshow .ls-vign{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(180deg, rgba(5,5,5,.18) 0%, rgba(5,5,5,0) 26%, rgba(5,5,5,0) 64%, rgba(5,5,5,.72) 100%);
}
.lin-slideshow .ls-cap{
  position:absolute; left:18px; bottom:16px; z-index:3; max-width:78%;
  font-family:"Crimson Pro",serif; color:var(--ink); font-size:15px; line-height:1.4;
  text-shadow:0 1px 12px #050505,0 0 10px #050505;
}
.lin-slideshow .ls-cap .ls-k{
  display:block; font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--accent); margin-bottom:5px;
}
.lin-slideshow .ls-dots{
  position:absolute; right:14px; bottom:14px; z-index:3; display:flex; gap:6px;
}
.lin-slideshow .ls-dots i{
  width:6px; height:6px; border-radius:50%; background:var(--ink-faint); opacity:.5;
  transition:opacity .2s ease, background .2s ease;
}
.lin-slideshow .ls-dots i.on{ background:var(--accent); opacity:1; }
.lin-slideshow .ls-sync{
  position:absolute; left:18px; top:14px; z-index:3;
  font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--rule);
  padding:3px 8px; background:rgba(10,10,11,.6);
}
.lin-slideshow .ls-sync.live{ color:var(--accent); border-color:rgba(47,179,184,.4); }
@media (max-width:760px){ .lin-slideshow{ aspect-ratio:16/10; } .lin-slideshow .ls-cap{ font-size:13px; } }