/* ═══════════════════════════════════════════════════════════════════
   SarahAndBran -- Ambience
   Shared animated romantic backdrop: drifting aurora, twinkling stars,
   rare shooting stars, falling hearts and rose petals, moon and glow.
   Used by the home, login and poems pages. Layers are inert.
   ═══════════════════════════════════════════════════════════════════ */

.sb-ambience {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.sb-ambience > * { position: absolute; }

/* ── Base gradient ───────────────────────────────────────────── */

.sb-ambience__base {
  inset: 0;
  background:
    radial-gradient(ellipse 140% 90% at 50% 0%, rgba(167, 139, 250, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 95% 70% at 12% 78%, rgba(244, 114, 182, 0.13) 0%, transparent 62%),
    radial-gradient(ellipse 75% 55% at 88% 62%, rgba(96, 165, 250, 0.09) 0%, transparent 58%),
    linear-gradient(180deg,
      #0a0611 0%,
      #0e0a18 14%,
      #150d24 32%,
      #1d1130 52%,
      #22132f 70%,
      #150d22 86%,
      #09050e 100%);
}

/* ── Drifting aurora ─────────────────────────────────────────── */

.sb-ambience__aurora {
  inset: -22%;
  background:
    radial-gradient(closest-side, rgba(244, 114, 182, 0.17), transparent 72%) 16% 24% / 56% 46% no-repeat,
    radial-gradient(closest-side, rgba(167, 139, 250, 0.16), transparent 72%) 80% 64% / 62% 52% no-repeat,
    radial-gradient(closest-side, rgba(96, 165, 250, 0.10), transparent 72%) 50% 92% / 52% 42% no-repeat;
  filter: blur(30px);
  animation: sbAuroraDrift 28s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes sbAuroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1);        opacity: 0.7; }
  50%  { transform: translate3d(2%, -1.6%, 0) scale(1.07); opacity: 1; }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.03);   opacity: 0.85; }
}

/* ── Star field ──────────────────────────────────────────────── */

.sb-ambience__stars,
.sb-ambience__shooting,
.sb-ambience__particles { inset: 0; }

.sb-ambience__star {
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
  opacity: var(--min-o, 0.28);
  animation: sbTwinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes sbTwinkle {
  0%, 100% { opacity: var(--min-o, 0.25); transform: scale(1); }
  50%      { opacity: var(--max-o, 1);    transform: scale(1.28); }
}

/* ── Shooting stars ──────────────────────────────────────────── */

.sb-ambience__shooting-star {
  position: absolute;
  width: 110px;
  height: 2px;
  opacity: 0;
  border-radius: 1px;
  transform-origin: right center;
  transform: rotate(var(--angle, 35deg));
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0.5) 70%,
    #ffffff 100%);
}

.sb-ambience__shooting-star::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  width: 4px;
  height: 4px;
  transform: translateY(-50%);
  background: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 8px 3px rgba(255, 255, 255, 0.9),
    0 0 16px 6px rgba(226, 210, 255, 0.5);
}

.sb-ambience__shooting-star.is-active {
  animation: sbShoot 0.85s ease-out forwards;
}

@keyframes sbShoot {
  0%   { opacity: 0; transform: rotate(var(--angle, 35deg)) translateX(0); }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle, 35deg)) translateX(var(--travel, 400px)); }
}

/* ── Falling hearts ──────────────────────────────────────────── */

.sb-ambience__heart {
  position: absolute;
  top: -8vh;
  opacity: 0;
  color: var(--tint, #f472b6);
  line-height: 1;
  animation: sbHeartFall var(--dur, 18s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

.sb-ambience__heart::before {
  content: '\2665';
  font-size: inherit;
  text-shadow: 0 0 10px currentColor;
}

@keyframes sbHeartFall {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  6%   { opacity: 0.78; }
  50%  { transform: translate3d(var(--sway1, 30px), 56vh, 0) rotate(14deg) scale(0.92); }
  92%  { opacity: 0.4; }
  100% { opacity: 0;    transform: translate3d(var(--sway2, -20px), 118vh, 0) rotate(-12deg) scale(0.78); }
}

/* ── Falling rose petals ─────────────────────────────────────── */

.sb-ambience__petal {
  position: absolute;
  top: -8vh;
  opacity: 0;
  animation: sbPetalFall var(--dur, 22s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

.sb-ambience__petal::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--tint, #f9a8d4);
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.35),
    inset -2px -2px 4px rgba(0, 0, 0, 0.12);
}

@keyframes sbPetalFall {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) rotate(0deg); }
  6%   { opacity: 0.7; }
  25%  { transform: translate3d(var(--sway1, 25px), 30vh, 0) rotate(120deg); }
  60%  { transform: translate3d(var(--sway2, -25px), 68vh, 0) rotate(260deg); }
  92%  { opacity: 0.36; }
  100% { opacity: 0;   transform: translate3d(var(--sway1, 25px), 118vh, 0) rotate(400deg); }
}

/* ── Moon ────────────────────────────────────────────────────── */

.sb-ambience__moon-wrap {
  top: 7%;
  right: 9%;
  width: 72px;
  height: 72px;
}

.sb-ambience__moon {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #f7f2e2 0%, #eae2c8 28%, #d9cfae 58%, #c7bd9c 100%);
  box-shadow:
    inset -10px -6px 20px rgba(0, 0, 0, 0.22),
    0 0 15px 5px rgba(255, 250, 226, 0.35),
    0 0 40px 15px rgba(255, 250, 226, 0.18),
    0 0 90px 34px rgba(233, 214, 255, 0.10);
}

.sb-ambience__moon::before {
  content: '';
  position: absolute;
  top: 18%;
  left: 22%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(158, 150, 122, 0.32);
  box-shadow:
    20px 12px 0 5px rgba(158, 150, 122, 0.26),
    8px 30px 0 3px rgba(158, 150, 122, 0.30),
    32px 34px 0 7px rgba(158, 150, 122, 0.20);
}

.sb-ambience__moon-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(255, 250, 226, 0.22) 0%,
    rgba(233, 214, 255, 0.10) 42%,
    transparent 72%);
  animation: sbMoonPulse 9s ease-in-out infinite;
}

@keyframes sbMoonPulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.14); }
}

/* ── Bottom ambient glow ─────────────────────────────────────── */

.sb-ambience__glow {
  left: 50%;
  bottom: -30%;
  width: 132vw;
  height: 58vh;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse,
    rgba(244, 114, 182, 0.16) 0%,
    rgba(167, 139, 250, 0.08) 42%,
    transparent 72%);
  animation: sbGlowPulse 10s ease-in-out infinite;
}

@keyframes sbGlowPulse {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.9;  transform: translateX(-50%) scale(1.06); }
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 768px) {
  .sb-ambience__moon-wrap { top: 5%; right: 7%; width: 52px; height: 52px; }

  .sb-ambience__moon::before {
    width: 7px;
    height: 7px;
    box-shadow:
      14px 8px 0 3px rgba(158, 150, 122, 0.26),
      6px 22px 0 2px rgba(158, 150, 122, 0.30),
      22px 25px 0 5px rgba(158, 150, 122, 0.20);
  }

  .sb-ambience__moon-glow { width: 130px; height: 130px; }
  .sb-ambience__shooting-star { width: 70px; }
  .sb-ambience__glow { height: 42vh; }
  .sb-ambience__aurora { filter: blur(22px); }
}

/* ── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sb-ambience *,
  .sb-ambience *::before,
  .sb-ambience *::after { animation: none !important; }

  .sb-ambience__heart,
  .sb-ambience__petal,
  .sb-ambience__shooting { display: none; }

  .sb-ambience__star { opacity: var(--max-o, 0.8); }
}