/* ============================================================
   CLOUD BACKGROUND ANIMATION — dark variant
   ------------------------------------------------------------
   Adapted from the supplied cloud-animation.html for BECCA
   Cloud's dark UI. The dark ink tone is used only as a
   background wash here: it sits fixed behind every page,
   full-bleed, with drifting cloud shapes moving across it.
   Foreground panels, cards and nav keep their own solid
   colors on top so text stays readable.
============================================================ */

.cloud-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:-1;
  background:
    radial-gradient(circle at 78% 6%, rgba(201,161,90,0.10), transparent 42%),
    radial-gradient(circle at 12% 92%, rgba(76,174,156,0.08), transparent 46%),
    linear-gradient(180deg, #060A14 0%, #0B1120 46%, #0F1728 100%);
  pointer-events:none;
}

.cloud-layer{
  position:absolute;
  top:0;
  left:0;
  width:220%;
  height:100%;
  display:flex;
  align-items:center;
  will-change:transform;
}

.cloud-layer.back{
  animation:cloud-drift 130s linear infinite;
  opacity:0.16;
  filter:blur(1.5px);
}
.cloud-layer.mid{
  animation:cloud-drift 85s linear infinite;
  opacity:0.24;
  filter:blur(0.5px);
}
.cloud-layer.front{
  animation:cloud-drift 52s linear infinite;
  opacity:0.34;
}

@keyframes cloud-drift{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.cloud-bg .cloud{
  position:relative;
  flex-shrink:0;
  background:#DCE6F2;
  border-radius:100px;
}
.cloud-bg .cloud::before,
.cloud-bg .cloud::after{
  content:"";
  position:absolute;
  background:#DCE6F2;
  border-radius:50%;
}

.cloud-bg .cloud.sm{ width:110px; height:40px; margin:0 90px; }
.cloud-bg .cloud.sm::before{ width:58px; height:58px; top:-26px; left:12px; }
.cloud-bg .cloud.sm::after{ width:46px; height:46px; top:-18px; left:52px; }

.cloud-bg .cloud.md{ width:170px; height:54px; margin:0 130px; }
.cloud-bg .cloud.md::before{ width:82px; height:82px; top:-38px; left:18px; }
.cloud-bg .cloud.md::after{ width:64px; height:64px; top:-26px; left:76px; }

.cloud-bg .cloud.lg{ width:250px; height:70px; margin:0 170px; }
.cloud-bg .cloud.lg::before{ width:118px; height:118px; top:-54px; left:24px; }
.cloud-bg .cloud.lg::after{ width:94px; height:94px; top:-36px; left:118px; }

.cloud-bg .cloud i{
  position:absolute;
  display:block;
  background:#DCE6F2;
  border-radius:50%;
  font-style:normal;
}
.cloud-bg .cloud.lg i{ width:70px; height:70px; top:-24px; left:70px; }
.cloud-bg .cloud.md i{ width:52px; height:52px; top:-16px; left:46px; }

.cloud-layer.back .cloud{ animation:cloud-bob 9s ease-in-out infinite; }
.cloud-layer.mid  .cloud{ animation:cloud-bob 7.5s ease-in-out infinite; }
.cloud-layer.front .cloud{ animation:cloud-bob 6s ease-in-out infinite; }
.cloud-layer .cloud:nth-child(2n){ animation-delay:-2.5s; }
.cloud-layer .cloud:nth-child(3n){ animation-delay:-5s; }

@keyframes cloud-bob{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}

@media (prefers-reduced-motion: reduce){
  .cloud-layer,
  .cloud-layer .cloud{ animation:none !important; }
}

@media (max-width: 720px){
  .cloud-layer.back{ opacity:0.10; }
  .cloud-layer.mid{ opacity:0.16; }
}