/* ═══════════════════════════════════════════════
   HAND-DRAWN AMBIENT — Orbit
   Paper scene outside the core frame
   ═══════════════════════════════════════════════ */

.cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, #ffffff 0%, #f5f5f5 38%, #ededed 68%, #e3e3e3 100%),
    linear-gradient(180deg, #f8f8f8 0%, #ececec 100%);
}

.cosmos::before,
.cosmos::after {
  position: absolute;
  top: 50%;
  transform-origin: center;
  font-family: 'Caveat', var(--font-display);
  font-size: clamp(1.8rem, 1rem + 2.1vw, 3.1rem);
  letter-spacing: 0.02em;
  color: rgba(17, 17, 17, 0.14);
  white-space: nowrap;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9);
}

.cosmos::before {
  content: 'Семён';
  left: clamp(8px, calc(50% - var(--content-max) / 2 - 190px), 14vw);
  transform: translateY(-50%) rotate(-90deg);
}

.cosmos::after {
  content: 'Карина';
  right: clamp(8px, calc(50% - var(--content-max) / 2 - 190px), 14vw);
  transform: translateY(-50%) rotate(90deg);
}

.stars {
  position: absolute;
  inset: 0;
}

.stars-layer {
  position: absolute;
  inset: 0;
}

/* Paper grain */
.stars-sm {
  background-image:
    radial-gradient(rgba(17, 17, 17, 0.085) 0.9px, transparent 0.9px),
    radial-gradient(rgba(17, 17, 17, 0.045) 1.2px, transparent 1.2px);
  background-size: 12px 12px, 23px 23px;
  background-position: 0 0, 6px 8px;
  opacity: 0.38;
}

/* Edge hatching and sketch ornaments */
.stars-md {
  background-image:
    linear-gradient(90deg, rgba(17, 17, 17, 0.06) 0 2px, transparent 2px 100%),
    linear-gradient(-14deg, transparent 0 78%, rgba(17, 17, 17, 0.055) 78% 79.4%, transparent 79.4% 100%),
    linear-gradient(14deg, transparent 0 78%, rgba(17, 17, 17, 0.055) 78% 79.4%, transparent 79.4% 100%);
  background-size: 100% 100%, 140px 140px, 140px 140px;
  background-position: center, left top, right top;
  opacity: 0.42;
}

.stars-md::before,
.stars-md::after {
  content: '';
  position: absolute;
  width: 138px;
  height: 104px;
  border: 3px solid rgba(17, 17, 17, 0.27);
  border-radius: 58% 42% 63% 37% / 41% 53% 47% 59%;
  background:
    repeating-linear-gradient(
      -32deg,
      transparent 0 13px,
      rgba(17, 17, 17, 0.09) 13px 15px
    );
  box-shadow: 3px 3px 0 rgba(17, 17, 17, 0.15);
}

.stars-md::before {
  top: 19%;
  left: clamp(8px, calc(50% - var(--content-max) / 2 - 165px), 16vw);
  transform: rotate(-14deg);
  animation: doodleWobbleA 14s ease-in-out infinite;
}

.stars-md::after {
  top: 23%;
  right: clamp(8px, calc(50% - var(--content-max) / 2 - 165px), 16vw);
  transform: rotate(12deg);
  animation: doodleWobbleB 14s ease-in-out 0.6s infinite;
}

/* Soft vignette and floor lines */
.stars-lg {
  background-image:
    radial-gradient(ellipse 85% 70% at 50% 50%, transparent 52%, rgba(17, 17, 17, 0.08) 100%),
    repeating-linear-gradient(
      -10deg,
      transparent 0 120px,
      rgba(17, 17, 17, 0.05) 120px 122px,
      transparent 122px 240px
    );
  opacity: 0.3;
  animation: ambientDrift 22s ease-in-out infinite alternate;
}

/* Name tags */
.nebula {
  position: absolute;
  border: 2px solid rgba(17, 17, 17, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 3px 3px 0 rgba(17, 17, 17, 0.18);
}

.nebula::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Neucha', var(--font-body);
  color: rgba(17, 17, 17, 0.78);
  white-space: nowrap;
}

.nebula::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 8px;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(-7deg);
  border: 2px solid rgba(17, 17, 17, 0.28);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, 0.86);
}

.nebula-a {
  width: 128px;
  height: 54px;
  top: 11%;
  left: clamp(10px, calc(50% - var(--content-max) / 2 - 174px), 16vw);
  transform: rotate(-8deg);
  animation: tagFloatA 8.5s ease-in-out infinite;
}

.nebula-a::before {
  content: 'Семён';
  font-size: 1.08rem;
}

.nebula-b {
  width: 130px;
  height: 54px;
  top: 11%;
  right: clamp(10px, calc(50% - var(--content-max) / 2 - 174px), 16vw);
  transform: rotate(8deg);
  animation: tagFloatB 8.5s ease-in-out 0.7s infinite;
}

.nebula-b::before {
  content: 'Карина';
  font-size: 1.08rem;
}

.nebula-c {
  width: 196px;
  height: 62px;
  bottom: calc(var(--nav-height) + var(--safe-bottom) + 14px);
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  animation: tagFloatC 9s ease-in-out 1s infinite;
}

.nebula-c::before {
  content: 'Семён + Карина';
  font-size: 1.02rem;
  letter-spacing: 0.04em;
}

.nebula-c::after {
  width: 30px;
  height: 9px;
}

@keyframes ambientDrift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-12px); }
}

@keyframes doodleWobbleA {
  0%, 100% {
    transform: rotate(-14deg) translateY(0);
  }
  50% {
    transform: rotate(-12deg) translateY(-6px);
  }
}

@keyframes doodleWobbleB {
  0%, 100% {
    transform: rotate(12deg) translateY(0);
  }
  50% {
    transform: rotate(10deg) translateY(-6px);
  }
}

@keyframes tagFloatA {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(-8deg) translateY(-4px); }
}

@keyframes tagFloatB {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(8deg) translateY(-4px); }
}

@keyframes tagFloatC {
  0%, 100% { transform: translateX(-50%) rotate(-3deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(-3deg) translateY(-3px); }
}

[data-theme="dark"] .cosmos {
  background:
    radial-gradient(circle at 12% 8%, #2a2a2a 0%, #242424 36%, #1d1d1d 68%, #171717 100%),
    linear-gradient(180deg, #252525 0%, #161616 100%);
}

[data-theme="dark"] .cosmos::before,
[data-theme="dark"] .cosmos::after {
  color: rgba(255, 255, 255, 0.2);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .stars-sm {
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.13) 0.9px, transparent 0.9px),
    radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.2px);
}

[data-theme="dark"] .stars-md {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 100%),
    linear-gradient(-14deg, transparent 0 78%, rgba(255, 255, 255, 0.07) 78% 79.4%, transparent 79.4% 100%),
    linear-gradient(14deg, transparent 0 78%, rgba(255, 255, 255, 0.07) 78% 79.4%, transparent 79.4% 100%);
}

[data-theme="dark"] .stars-md::before,
[data-theme="dark"] .stars-md::after {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
  background:
    repeating-linear-gradient(
      -32deg,
      transparent 0 13px,
      rgba(255, 255, 255, 0.12) 13px 15px
    );
}

[data-theme="dark"] .stars-lg {
  background-image:
    radial-gradient(ellipse 85% 70% at 50% 50%, transparent 52%, rgba(255, 255, 255, 0.08) 100%),
    repeating-linear-gradient(
      -10deg,
      transparent 0 120px,
      rgba(255, 255, 255, 0.06) 120px 122px,
      transparent 122px 240px
    );
}

[data-theme="dark"] .nebula {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(24, 24, 24, 0.62);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .nebula::before {
  color: rgba(255, 255, 255, 0.84);
}

[data-theme="dark"] .nebula::after {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(34, 34, 34, 0.8);
}

@media (max-width: 980px) {
  .cosmos::before,
  .cosmos::after,
  .stars-md::before,
  .stars-md::after {
    display: none;
  }

  .nebula-a {
    top: 7.5%;
    left: 12px;
  }

  .nebula-b {
    top: 7.5%;
    right: 12px;
  }
}

@media (max-width: 640px) {
  .nebula-a,
  .nebula-b {
    display: none;
  }

  .nebula-c {
    width: 148px;
    height: 52px;
    bottom: calc(var(--nav-height) + var(--safe-bottom) + 8px);
  }

  .nebula-c::before {
    font-size: 0.9rem;
  }

  .stars-md {
    opacity: 0.34;
  }

  .stars-lg {
    opacity: 0.22;
  }
}