/* ============================================================================
   cgi-cinematic.css — the estate's ambient hero treatment
   ONE owner for the look the homepage established: deep navy field, drifting
   aurora, rising motes, film grain, and a moving particle canvas.
   Apply to any band:  <section class="cgi-cine" data-cgi-cinematic> ... </section>
   The canvas is DECORATIVE ONLY. It encodes no data and carries no labels:
   the homepage's field maps charter-migration routes, which would be a factual
   claim anywhere else, so this shared version drifts along abstract arcs.
   ========================================================================== */
.cgi-cine{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(1000px 560px at 80% 8%, rgba(217,101,68,0.10), transparent 60%),
    radial-gradient(900px 700px at 10% 88%, rgba(38,80,150,0.26), transparent 65%),
    linear-gradient(165deg,#0d2242 0%,#0a1e3a 48%,#081729 100%);
  color:#fdfaf3}
.cgi-cine__layer{position:absolute;inset:0;pointer-events:none;z-index:0}
.cgi-cine__canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.cgi-cine__grain{position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E")}
.cgi-cine__aur{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.5;z-index:0;
  animation:cgi-cine-aur 30s ease-in-out infinite alternate}
@keyframes cgi-cine-aur{from{transform:translate(0,0) scale(.94)}to{transform:translate(3vw,-2vh) scale(1.16)}}
.cgi-cine__mote{position:absolute;bottom:-6%;border-radius:50%;background:rgba(217,150,90,0.5);
  pointer-events:none;z-index:0;animation:cgi-cine-rise linear infinite}
@keyframes cgi-cine-rise{0%{transform:translateY(0);opacity:0}8%{opacity:.65}88%{opacity:.3}
  100%{transform:translateY(-120%);opacity:0}}
.cgi-cine>*:not(.cgi-cine__layer):not(.cgi-cine__canvas):not(.cgi-cine__grain):not(.cgi-cine__aur):not(.cgi-cine__mote){position:relative;z-index:1}
@media (prefers-reduced-motion: reduce){
  .cgi-cine__aur,.cgi-cine__mote{animation:none}
  .cgi-cine__mote{display:none}
}
@media print{
  .cgi-cine{background:#fff;color:#000}
  .cgi-cine__canvas,.cgi-cine__grain,.cgi-cine__aur,.cgi-cine__mote{display:none}
}