/* Silkroad fog/cloud overlays — appear above background but behind content */
.sr-clouds {
  position: absolute; /* placed inside header so it sits above canvas but behind header content */
  top: 0;
  left: 0;
  right: 0;
  height: 100%; /* match header height */
  pointer-events: none;
  z-index: 1; /* sits above canvas (0) but below header content */
  overflow: hidden;
}

.sr-cloud {
  position: absolute;
  left: -30%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.6) 35%, rgba(255,255,255,0.15) 65%, rgba(255,255,255,0) 100%);
  border-radius: 50%;
  filter: blur(18px);
  mix-blend-mode: screen;
  opacity: 0.14;
  transform: translateX(-10%);
  will-change: transform, opacity;
}

/* tiny firefly sparkles inside clouds */
.sr-firefly{
  position: fixed; /* allow free movement across viewport */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,245,200,1) 0%, rgba(255,210,100,0.95) 35%, rgba(201,155,59,0.8) 65%, rgba(201,155,59,0.0) 100%);
  box-shadow: 0 0 10px rgba(255,210,100,0.95), 0 0 26px rgba(201,155,59,0.32);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0,0,0) scale(0.9);
  will-change: transform, opacity;
  z-index: 3; /* sit above fog/clouds but below header content */
}

/* soft area glow to simulate light spill from firefly */
.sr-firefly::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: var(--ff-glow-size, 60px);
  height: var(--ff-glow-size, 60px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,245,180,var(--ff-glow-opacity,0.18)) 0%, rgba(255,200,90,0.09) 40%, rgba(255,200,90,0) 70%);
  filter: blur(var(--ff-glow-blur,10px));
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 0;
}

/* default glow variables */
.sr-firefly{ --ff-glow-opacity: 0.14; --ff-glow-size: 46px; --ff-glow-blur: 8px; }

/* brighter glow for ambient and flying variants */
.sr-firefly.ff-ambient{ --ff-glow-opacity: 0.22; --ff-glow-size: 56px; --ff-glow-blur: 10px; }
.sr-firefly.ff-glide, .sr-firefly.ff-fuzz, .sr-firefly.ff-zip, .sr-firefly.ff-zip-tr, .sr-firefly.ff-zip-tl, .sr-firefly.ff-zip-br, .sr-firefly.ff-zip-bl { --ff-glow-opacity: 0.34; --ff-glow-size: 78px; --ff-glow-blur: 14px; }
.sr-firefly.ff-boost, .sr-firefly.ff-spiral { --ff-glow-opacity: 0.42; --ff-glow-size: 92px; --ff-glow-blur: 16px; }

/* movement patterns */
@keyframes sr-firefly-fall {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(0.9); }
  8% { opacity: 1; }
  60% { transform: translate3d(20vw, 60vh, 0) scale(1.0); opacity: 0.9; }
  100% { transform: translate3d(40vw, 120vh, 0) scale(0.7); opacity: 0; }
}

@keyframes sr-firefly-zip {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(0.9); }
  10% { opacity: 1; }
  30% { transform: translate3d(-6vw, -18vh, 0) scale(1.0); }
  50% { transform: translate3d(10vw, -36vh, 0) scale(0.95); }
  70% { transform: translate3d(-12vw, -52vh, 0) scale(0.95); }
  100% { transform: translate3d(40vw, -90vh, 0) scale(0.6); opacity: 0; }
}

@keyframes sr-firefly-spiral {
  0% { opacity:0; transform: translate3d(0,0,0) scale(0.8); }
  12% { opacity:1; }
  40% { transform: translate3d(6vw,-18vh,0) scale(1.05) rotate(20deg); }
  70% { transform: translate3d(-8vw,-36vh,0) scale(0.95) rotate(-18deg); }
  100% { transform: translate3d(30vw,-80vh,0) scale(0.6); opacity:0; }
}

@keyframes sr-firefly-boost {
  0% { opacity:0; transform: translate3d(0,0,0) scale(1); }
  5% { opacity:1; }
  40% { transform: translate3d(20vw,-40vh,0) scale(1.1); }
  100% { transform: translate3d(80vw,-120vh,0) scale(0.5); opacity:0; }
}

/* utility classes to pick an animation */
.ff-fall { animation-name: sr-firefly-fall; animation-timing-function: cubic-bezier(.2,.9,.3,1); }
.ff-zip  { animation-name: sr-firefly-zip;  animation-timing-function: cubic-bezier(.4,.7,.2,1); }
.ff-spiral { animation-name: sr-firefly-spiral; animation-timing-function: cubic-bezier(.4,.6,.2,1); }
.ff-boost { animation-name: sr-firefly-boost; animation-timing-function: cubic-bezier(.2,.6,.3,1); }

/* quick pop so firefly appears to emerge from cloud */
@keyframes sr-firefly-pop {
  0% { opacity: 0; transform: scale(0.5); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes sr-firefly-glide {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(0.9); }
  8% { opacity: 1; }
  30% { transform: translate3d(6vw,-3vh,0) rotate(6deg) scale(1); }
  60% { transform: translate3d(18vw,-9vh,0) rotate(-6deg) scale(1); }
  90% { transform: translate3d(32vw,-14vh,0) rotate(3deg) scale(0.95); }
  100% { transform: translate3d(46vw,-20vh,0) rotate(0deg) scale(0.9); opacity: 0; }
}

@keyframes sr-firefly-fuzz {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(0.9); }
  10% { opacity: 1; }
  25% { transform: translate3d(3vw,-1vh,0) rotate(4deg); }
  45% { transform: translate3d(1vw,-3vh,0) rotate(-6deg); }
  65% { transform: translate3d(4vw,-6vh,0) rotate(8deg); }
  85% { transform: translate3d(6vw,-9vh,0) rotate(-4deg); }
  100% { transform: translate3d(12vw,-14vh,0) rotate(0deg); opacity: 0; }
}

/* ambient flicker (small life, subtle drift) */
@keyframes sr-firefly-ambient {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(0.9); }
  10% { opacity: 1; }
  40% { transform: translate3d(2vw,-1vh,0) scale(1); }
  70% { transform: translate3d(-2vw,1vh,0) scale(0.95); opacity: 0.8; }
  100% { transform: translate3d(0,-2vh,0) scale(0.9); opacity: 0; }
}

.ff-ambient { animation-name: sr-firefly-ambient; animation-timing-function: ease-in-out; }

/* gliding and fuzz flight utilities, use --ff-dur if set */
.ff-glide {
  animation-name: sr-firefly-glide;
  animation-timing-function: cubic-bezier(.25,.8,.25,1);
  animation-duration: var(--ff-dur, 2600ms);
}
.ff-fuzz {
  animation-name: sr-firefly-fuzz;
  animation-timing-function: cubic-bezier(.35,.8,.3,1);
  animation-duration: var(--ff-dur, 2400ms);
}

@keyframes sr-cloud-move {
  from { transform: translateX(-40vw); }
  to   { transform: translateX(140vw); }
}

/* while moving, slightly pulse the opacity for life */
@keyframes sr-cloud-pulse {
  0% { opacity: .06; }
  50% { opacity: .12; }
  100% { opacity: .06; }
}

/* make sure main content stacks above clouds */
.container, header .container, footer { position: relative; z-index: 4; }

/* front fog overlay sitting above clouds but behind content */
.sr-clouds::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* above clouds (1) */
  background: radial-gradient(ellipse at 50% 16%, rgba(255,255,255,0.06), rgba(255,255,255,0.03) 35%, rgba(255,255,255,0.01) 60%, rgba(255,255,255,0) 100%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
  filter: blur(6px);
}

/* small screens: smaller clouds */
@media (max-width: 768px){
  .sr-cloud { filter: blur(12px); }
}