/* ============================================================
   SOFT DAYS — NIGHT V6
   Night-only visual refinement.
   IMPORTANT:
   - Does NOT replace Soft Days brand palette.
   - Uses the site's own Night theme underneath.
   - No daytime/sun styling in this file.
   ============================================================ */

/* Absolutely no experimental sun while Night V6 is being reviewed */
.sd-weather-sun{
  display:none !important;
}

/* Do not repaint the hero with a new brand colour.
   Let Soft Days' existing Night theme be the base. */
body.sd-night-v6 .sd-weather-sky{
  background:
    radial-gradient(
      52% 32% at 76% 14%,
      rgba(255,255,255,.045),
      transparent 72%
    ),
    radial-gradient(
      42% 28% at 18% 74%,
      rgba(255,255,255,.024),
      transparent 74%
    ) !important;

  opacity:1 !important;
}

/* Hide the older star layer — V6 owns its own stars */
body.sd-night-v6 .sd-weather-stars{
  opacity:0 !important;
  visibility:hidden !important;
}

.sd-night-stars-v6{
  position:absolute;
  inset:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
}

.sd-night-star-v6{
  --s:1px;
  --base:.28;

  position:absolute;
  width:var(--s);
  height:var(--s);

  border-radius:50%;
  background:rgba(255,252,248,.98);

  opacity:var(--base);

  box-shadow:
    0 0 4px rgba(255,250,244,.18);

  transform:translateZ(0);
  will-change:opacity,transform,filter;
}

/* Tiny percentage of stars get a refined cross-glint */
.sd-night-star-v6.is-bright::before,
.sd-night-star-v6.is-bright::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.sd-night-star-v6.is-bright::before{
  width:calc(var(--s) * 5.4);
  height:.55px;

  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,253,249,.72),
    transparent
  );
}

.sd-night-star-v6.is-bright::after{
  width:.55px;
  height:calc(var(--s) * 5.4);

  background:linear-gradient(
    180deg,
    transparent,
    rgba(255,253,249,.66),
    transparent
  );
}

/* A few stars are slightly pearl-toned, not a new site colour */
.sd-night-star-v6[data-tone="pearl"]{
  background:rgba(242,238,247,.98);
}

.sd-night-star-v6[data-tone="warm"]{
  background:rgba(255,249,239,.98);
}

/* ============================================================
   MOON V6
   Canvas does the actual phase + surface detail.
   ============================================================ */

body.sd-night-v6 .sd-weather-moon{
  opacity:1 !important;
  visibility:visible !important;
}

/* Kill the old simplified moon artwork */
body.sd-night-v6 .sd-weather-moon-disc{
  display:none !important;
}

.sd-night-moon-v6{
  position:absolute;

  left:7.2%;
  top:7.5%;

  width:96px;
  height:96px;

  border-radius:50%;

  filter:
    drop-shadow(0 0 6px rgba(255,250,245,.10))
    drop-shadow(0 0 24px rgba(255,248,239,.10))
    drop-shadow(0 12px 22px rgba(0,0,0,.16));

  opacity:.96;

  pointer-events:none;
  transform:translateZ(0);
}

.sd-night-moon-v6::before{
  content:"";

  position:absolute;
  inset:-70%;

  z-index:-1;
  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,252,246,.12) 0%,
      rgba(255,252,246,.045) 31%,
      rgba(255,255,255,.012) 53%,
      transparent 72%
    );

  filter:blur(15px);
}

.sd-night-moon-v6 canvas{
  display:block;
  width:100%;
  height:100%;

  border-radius:50%;
}

/* ============================================================
   METEOR V6
   One meteor at a time.
   ============================================================ */

.sd-night-meteor-layer-v6{
  position:absolute;
  inset:0;

  z-index:8;
  overflow:hidden;
  pointer-events:none;
}

.sd-night-meteor-v6{
  --angle:27deg;
  --travel:650px;

  position:absolute;

  width:170px;
  height:1.25px;

  border-radius:999px;

  opacity:0;

  transform-origin:100% 50%;
  transform:rotate(var(--angle));

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.025) 18%,
      rgba(255,250,244,.18) 54%,
      rgba(255,253,249,.78) 89%,
      rgba(255,255,255,.98) 100%
    );

  filter:
    blur(.18px)
    drop-shadow(0 0 4px rgba(255,250,245,.22));

  animation:
    sd-night-meteor-v6
    1.05s
    cubic-bezier(.18,.67,.21,1)
    forwards;
}

.sd-night-meteor-v6::after{
  content:"";

  position:absolute;
  right:-1px;
  top:50%;

  width:3px;
  height:3px;

  border-radius:50%;
  transform:translateY(-50%);

  background:#fffdf9;

  box-shadow:
    0 0 7px 2px rgba(255,250,244,.56),
    0 0 17px 5px rgba(255,250,244,.09);
}

@keyframes sd-night-meteor-v6{
  0%{
    opacity:0;
    transform:
      rotate(var(--angle))
      translate3d(0,0,0)
      scaleX(.64);
  }

  14%{
    opacity:.22;
  }

  32%{
    opacity:.90;
  }

  70%{
    opacity:.58;
  }

  100%{
    opacity:0;
    transform:
      rotate(var(--angle))
      translate3d(var(--travel),0,0)
      scaleX(1);
  }
}

/* ============================================================
   STAGING NIGHT PREVIEW CONTROL
   ============================================================ */

.sd-night-v6-preview{
  position:fixed;

  right:18px;
  bottom:18px;

  z-index:99999;

  display:flex;
  align-items:center;
  gap:6px;

  padding:8px;

  border-radius:15px;

  background:color-mix(
    in srgb,
    var(--card) 78%,
    transparent
  );

  border:1px solid var(--border);

  box-shadow:var(--shadow-soft);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  direction:ltr;
}

.sd-night-v6-preview button{
  appearance:none;

  border:1px solid transparent;
  border-radius:11px;

  min-width:56px;

  padding:7px 10px;

  color:var(--text);
  background:transparent;

  font:inherit;
  font-size:11px;
  font-weight:700;

  cursor:pointer;
}

.sd-night-v6-preview button.is-active{
  border-color:var(--border);
  background:var(--card);
}

@media(max-width:900px){
  .sd-night-moon-v6{
    width:78px;
    height:78px;

    left:6%;
    top:8%;
  }

  .sd-night-v6-preview{
    right:10px;
    bottom:82px;
    padding:6px;
  }

  .sd-night-v6-preview button{
    min-width:48px;
    padding:6px 8px;
    font-size:10px;
  }
}

@media(prefers-reduced-motion:reduce){
  .sd-night-meteor-v6{
    animation:none !important;
  }
}

/* ============================================================
   V6.1 STARS DEPTH PATCH
   Denser + larger near top, smaller + fewer toward bottom
   ============================================================ */

.sd-night-stars-v6{
  mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.98) 18%,
    rgba(0,0,0,.92) 38%,
    rgba(0,0,0,.72) 58%,
    rgba(0,0,0,.40) 74%,
    rgba(0,0,0,.12) 86%,
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-image:linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.98) 18%,
    rgba(0,0,0,.92) 38%,
    rgba(0,0,0,.72) 58%,
    rgba(0,0,0,.40) 74%,
    rgba(0,0,0,.12) 86%,
    rgba(0,0,0,0) 100%
  );
}

.sd-night-star-v6{
  box-shadow:
    0 0 4px rgba(255,250,244,.16),
    0 0 9px rgba(255,250,244,.05);
}

.sd-night-star-v6.is-bright::before{
  opacity:.55;
}

.sd-night-star-v6.is-bright::after{
  opacity:.50;
}