/* ── GREY-TO-DARK aurora variant (with a touch of dark blue), more faded.
   Same DOM hooks, same animations as aurora-bg.css — only the RGB
   triplets and the alpha values change. Palette: charcoal → slate →
   steel-blue → smoke-blue. Alphas are dialled down ~40-50% so the
   effect is moodier and more subtle than the colourful variants.
   Drop-in: swap the <link href=...> to /css/aurora-bg_grey.css. ─── */

.bg-aurora{
 position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;
}

.aurora-blob{display:none}

/* Main silk — wide, wavy clip-path edges */
.aurora-silk{
 position:absolute;
 width:20%;
 height:250%;
 top:-55%;
 left:73%;

 transform-origin:center center;
 animation:silkFlow 16s ease-in-out infinite, fadeA 9s ease-in-out infinite;
 background:linear-gradient(90deg,
  rgba(40,50,70,.22) 0%,
  rgba(60,75,100,.28) 15%,
  rgba(80,95,125,.30) 30%,
  rgba(110,125,160,.32) 45%,
  rgba(85,100,135,.30) 60%,
  rgba(60,75,105,.28) 75%,
  rgba(45,55,80,.22) 90%,
  rgba(30,40,60,.18) 100%
 );
 clip-path:url(#silk1);
}

/* Second layer — offset, different wave */
.aurora-silk-2{
 position:absolute;
 width:16%;
 height:220%;
 top:-49%;
 left:72%;

 transform-origin:center center;
 filter:blur(8px);
 animation:silkFlow2 20s ease-in-out infinite, fadeB 9s ease-in-out infinite;
 background:linear-gradient(90deg,
  rgba(30,40,60,.18) 0%,
  rgba(65,85,115,.25) 25%,
  rgba(95,115,150,.24) 50%,
  rgba(55,70,100,.22) 75%,
  rgba(35,45,70,.18) 100%
 );
 clip-path:url(#silk2);
}

/* Inner core — sharp, brighter highlight (still muted) */
.aurora-silk-3{
 position:absolute;
 width:14%;
 height:190%;
 top:-46%;
 left:73%;
 transform-origin:center center;
 filter:blur(2px);
 animation:silkFlow3 14s ease-in-out infinite, fadeC 9s ease-in-out infinite;
 background:linear-gradient(90deg,
  rgba(130,140,160,.18) 0%,
  rgba(95,110,140,.32) 30%,
  rgba(150,160,180,.36) 50%,
  rgba(85,100,135,.34) 70%,
  rgba(50,65,95,.38) 100%
 );
 clip-path:url(#silk3);
}

/* Fourth layer — soft wide glow */
.aurora-silk-4{
 position:absolute;
 width:22%;
 height:230%;
 top:-52%;
 left:68%;
 transform-origin:center center;
 filter:blur(12px);
 animation:silkFlow4 22s ease-in-out infinite, fadeD 11s ease-in-out infinite;
 background:linear-gradient(90deg,
  rgba(45,55,80,.14) 0%,
  rgba(80,95,125,.18) 25%,
  rgba(110,125,155,.17) 50%,
  rgba(65,80,110,.15) 75%,
  rgba(35,45,70,.12) 100%
 );
 clip-path:url(#silk4);
}

/* Fifth layer — straight band, very low opacity */
.aurora-silk-5{
 position:absolute;
 width:28%;
 height:260%;
 top:-58%;
 left:65%;
 transform-origin:center center;
 filter:blur(6px);
 opacity:.04;
 animation:silkFlow5 18s ease-in-out infinite;
 background:linear-gradient(90deg,
  rgba(50,65,90,1) 0%,
  rgba(75,90,120,1) 25%,
  rgba(105,120,150,1) 50%,
  rgba(65,80,110,1) 75%,
  rgba(35,45,70,1) 100%
 );
 clip-path:url(#silk5);
}

/* Sixth layer — straight band, very low opacity */
.aurora-silk-6{
 position:absolute;
 width:24%;
 height:240%;
 top:-54%;
 left:70%;
 transform-origin:center center;
 filter:blur(4px);
 opacity:.04;
 animation:silkFlow6 24s ease-in-out infinite;
 background:linear-gradient(90deg,
  rgba(70,85,115,1) 0%,
  rgba(55,70,100,1) 25%,
  rgba(40,50,80,1) 50%,
  rgba(65,80,115,1) 75%,
  rgba(30,40,65,1) 100%
 );
 clip-path:url(#silk6);
}

@keyframes silkFlow{
 0%,100%{transform:rotate(-37deg) translateX(0) translateY(0)}
 25%{transform:rotate(-35deg) translateX(1vw) translateY(1vh)}
 50%{transform:rotate(-38deg) translateX(-1vw) translateY(-1vh)}
 75%{transform:rotate(-36deg) translateX(-1vw) translateY(1vh)}
}
@keyframes silkFlow2{
 0%,100%{transform:rotate(-34deg) translateX(0) translateY(0)}
 33%{transform:rotate(-32deg) translateX(-2vw) translateY(-1vh)}
 66%{transform:rotate(-36deg) translateX(1vw) translateY(1vh)}
}
@keyframes silkFlow3{
 0%,100%{transform:rotate(-39deg) translateX(0) translateY(0)}
 25%{transform:rotate(-37deg) translateX(2vw) translateY(-1vh)}
 50%{transform:rotate(-40deg) translateX(-1vw) translateY(2vh)}
 75%{transform:rotate(-38deg) translateX(-1vw) translateY(-1vh)}
}

/* Faded fade keyframes — peak opacity reduced to keep the band moody.
   Originals went up to .75 / .7 / .68 — here we cap around .5 max. */
@keyframes fadeA{
 0%,100%{opacity:.50}
 50%{opacity:.28}
}
@keyframes fadeB{
 0%,100%{opacity:.25}
 50%{opacity:.45}
}
@keyframes silkFlow4{
 0%,100%{transform:rotate(-32deg) translateX(0) translateY(0)}
 25%{transform:rotate(-30deg) translateX(-1vw) translateY(2vh)}
 50%{transform:rotate(-34deg) translateX(2vw) translateY(-1vh)}
 75%{transform:rotate(-31deg) translateX(1vw) translateY(-1vh)}
}

@keyframes fadeC{
 0%,100%{opacity:.35}
 33%{opacity:.50}
 66%{opacity:.22}
}
@keyframes fadeD{
 0%,100%{opacity:.22}
 50%{opacity:.40}
}
@keyframes silkFlow5{
 0%,100%{transform:rotate(-35deg) translateX(0) translateY(0)}
 50%{transform:rotate(-33deg) translateX(1vw) translateY(1vh)}
}
@keyframes silkFlow6{
 0%,100%{transform:rotate(-40deg) translateX(0) translateY(0)}
 50%{transform:rotate(-38deg) translateX(-1vw) translateY(-1vh)}
}

.aurora-ribbons{display:none}