/* TED BAND – Brand palette */
:root {
  --brand-blue: #4E73C7;
  --brand-pink: #DD4B97;
  --brand-green: #529F6C;
  --brand-teal: #4E73C7;
  --brand-surface: #081c2e;
  --brand-deep: #040a12;
  --brand-border: rgba(78, 115, 199, 0.45);
  --brand-glass: rgba(8, 28, 46, 0.88);
}

/* Starry night background - gradient + animated stars */

.starry-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Blue gradient (lighter overall, darker at bottom) */
.starry-bg__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    #1e6b8a 0%,
    #1a5a75 20%,
    #154a62 40%,
    #113a50 60%,
    #0d2a3a 80%,
    #0a1c28 100%
  );
}

.starry-bg__stars {
  position: absolute;
  inset: 0;
}

.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: star-float 8s ease-in-out infinite;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

.star--small {
  width: 2px;
  height: 2px;
  animation-duration: 12s;
  animation-delay: 0s;
  opacity: 0.8;
}

.star--medium {
  width: 3px;
  height: 3px;
  animation-duration: 10s;
  opacity: 0.95;
}

.star--large {
  width: 4px;
  height: 4px;
  animation-duration: 7s;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.5);
}

@keyframes star-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  25% {
    transform: translate(4px, -6px) scale(1.08);
    opacity: 1;
  }
  50% {
    transform: translate(-3px, -10px) scale(0.95);
    opacity: 0.5;
  }
  75% {
    transform: translate(5px, -4px) scale(1.03);
    opacity: 1;
  }
}

/* Ensure page content sits above the background */
.starry-bg + .layout-container,
.starry-bg ~ .layout-container,
body.has-starry-bg .layout-container {
  position: relative;
  z-index: 1;
}

body.has-starry-bg {
  background: transparent !important;
}

/* Responsive: prevent horizontal scroll and improve touch targets */
@media (max-width: 640px) {
  body.has-starry-bg {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
}