/* ============================================================
   MistriNow — sky.css
   Animated realistic sky background
   ============================================================ */

.sky-bg {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #E0F2FE 0%, #F0F9FF 40%, #FFFFFF 100%);
  overflow: hidden;
  pointer-events: none;
}

/* Drifting clouds (3 layers, parallax) */
.cloud-layer {
  position: absolute; top: 0; left: 0;
  width: 200%; height: 100%;
  will-change: transform;
}
.cloud-layer.l1 { animation: drift1 70s linear infinite; }
.cloud-layer.l2 { animation: drift2 110s linear infinite; top: 8%; opacity: .8; }
.cloud-layer.l3 { animation: drift1 160s linear infinite reverse; top: 18%; opacity: .6; }

@keyframes drift1 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes drift2 {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.cloud {
  position: absolute; background: rgba(255,255,255,.9);
  border-radius: 100px; filter: blur(14px);
}
.cloud::before, .cloud::after {
  content: ''; position: absolute;
  background: rgba(255,255,255,.9); border-radius: 100px;
}
.cloud.c1 { width: 180px; height: 55px; top: 10%; left: 5%; }
.cloud.c1::before { width: 90px; height: 90px; top: -40px; left: 22px; }
.cloud.c1::after  { width: 70px; height: 70px; top: -30px; left: 95px; }

.cloud.c2 { width: 220px; height: 65px; top: 25%; left: 30%; opacity: .85; }
.cloud.c2::before { width: 110px; height: 110px; top: -50px; left: 30px; }
.cloud.c2::after  { width: 85px; height: 85px; top: -35px; left: 120px; }

.cloud.c3 { width: 150px; height: 45px; top: 15%; left: 55%; opacity: .75; }
.cloud.c3::before { width: 80px; height: 80px; top: -35px; left: 20px; }
.cloud.c3::after  { width: 60px; height: 60px; top: -25px; left: 82px; }

.cloud.c4 { width: 200px; height: 55px; top: 35%; left: 75%; opacity: .7; }
.cloud.c4::before { width: 100px; height: 100px; top: -45px; left: 28px; }
.cloud.c4::after  { width: 78px; height: 78px; top: -32px; left: 108px; }

/* Gradient blobs */
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.blob.b1 {
  width: 420px; height: 420px; top: -120px; left: -120px;
  background: rgba(56,189,248,.35);
  animation: float1 18s ease-in-out infinite alternate;
}
.blob.b2 {
  width: 380px; height: 380px; bottom: -120px; right: -100px;
  background: rgba(2,132,199,.22);
  animation: float2 22s ease-in-out infinite alternate;
}
.blob.b3 {
  width: 300px; height: 300px; top: 40%; left: 55%;
  background: rgba(224,242,254,.7);
  animation: float1 26s ease-in-out infinite alternate;
}
@keyframes float1 {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.15); }
}
@keyframes float2 {
  0%   { transform: translate(0,0) scale(1.05); }
  100% { transform: translate(-40px, -30px) scale(1); }
}

/* Particle canvas */
#sky-canvas {
  position: absolute; inset: 0;
  pointer-events: none;
}

/* Compact variant — used on app pages */
.sky-bg.compact { height: 220px; bottom: auto; }
.sky-bg.compact .cloud-layer.l2,
.sky-bg.compact .cloud-layer.l3 { display: none; }