/* Silk threads — the CSS half of the data-rain port.
 * The canvases sit behind the hero copy; the gradient panel keeps the text
 * legible over whatever the threads are doing underneath. */
.sr-root{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  pointer-events:auto;                    /* the hero itself tracks the pointer */
  background:var(--plum-950,#060109);
  --sr-grain:0.02;
  --sr-bloom-blur:10px;
  --sr-bloom-opacity:0.95;
  --sr-vignette:0.45;
}
.sr-main,.sr-bloom{position:absolute; inset:0; width:100%; height:100%; display:block}
.sr-bloom{
  filter:blur(var(--sr-bloom-blur)) saturate(1.1);
  opacity:var(--sr-bloom-opacity);
  transform:scale(1.02);
}
.sr-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 60% 45%,transparent 35%,rgba(6,1,9,var(--sr-vignette)) 100%);
}
.sr-grain{
  position:absolute; inset:0; pointer-events:none; opacity:var(--sr-grain);
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* A soft plum panel behind the copy column, so the headline never has to
   compete with a bright thread passing under it. */
.hero--silk .wrap{position:relative; z-index:1}
.hero--silk .wrap>div:first-child{position:relative}
.hero--silk .wrap>div:first-child::before{
  content:""; position:absolute; inset:-28px -40px -28px -40px; z-index:-1; pointer-events:none;
  background:radial-gradient(95% 80% at 22% 50%,rgba(6,1,9,.93) 0%,rgba(6,1,9,.8) 45%,rgba(6,1,9,0) 100%);
}
@media (max-width:900px){
  .hero--silk .wrap>div:first-child::before{
    inset:-20px -24px; 
    background:linear-gradient(180deg,rgba(6,1,9,.9) 0%,rgba(6,1,9,.82) 60%,rgba(6,1,9,.5) 100%);
  }
}
@media (prefers-reduced-motion:reduce){ .sr-bloom{opacity:.5} }

/* With the photo gone the threads and the dancer set the hero's height. */
.hero--silk{min-height:min(88vh,860px); display:flex; align-items:center}
.hero--silk .wrap{display:block; width:100%}
.hero--silk .wrap>div:first-child{max-width:620px}
@media (max-width:900px){ .hero--silk{min-height:min(84vh,720px)} }