/* ===================================================================
   Background Logo - Constellation Field
   Scattered SVG logo instances with organic placement, size/opacity
   variation, radial mask fading, and gentle float animation.

   Replaces the old tiled background-repeat approach.
   Generated by background-logo.js at runtime.
   =================================================================== */

/* ===================================================================
   Container - Fixed viewport overlay behind all content
   =================================================================== */

#logo-constellation {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;

  /* Radial mask: logos fade to transparent toward edges.
     Ellipse is slightly wider than tall to match landscape viewports.
     The 70%/65% radii keep the center well-populated while
     creating a soft ~15-20% fade band at every edge. */
  -webkit-mask-image: radial-gradient(
    ellipse 70% 65% at 50% 50%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6) 55%,
    rgba(0, 0, 0, 0.2) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: radial-gradient(
    ellipse 70% 65% at 50% 50%,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.6) 55%,
    rgba(0, 0, 0, 0.2) 80%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* ===================================================================
   Individual Logo Instances
   =================================================================== */

.constellation-logo {
  position: absolute;
  color: var(--md-default-fg-color);
  will-change: transform;
  animation: constellationFloat linear infinite;
}

/* Gentle organic float: small vertical drift + subtle rotation
   oscillation. The var(--base-rotation) preserves each instance's
   initial random rotation so the animation adds to it rather
   than overriding it. */
@keyframes constellationFloat {
  0% {
    transform: rotate(var(--base-rotation, 0deg)) translateY(0);
  }
  25% {
    transform: rotate(calc(var(--base-rotation, 0deg) + 2deg)) translateY(-8px);
  }
  50% {
    transform: rotate(var(--base-rotation, 0deg)) translateY(-3px);
  }
  75% {
    transform: rotate(calc(var(--base-rotation, 0deg) - 1.5deg)) translateY(-10px);
  }
  100% {
    transform: rotate(var(--base-rotation, 0deg)) translateY(0);
  }
}

/* ===================================================================
   Dark Mode - Boost visibility slightly
   =================================================================== */

[data-md-color-scheme="slate"] #logo-constellation {
  filter: brightness(1.4);
}

/* ===================================================================
   Content Z-Index - Keep interactive elements above background
   =================================================================== */

.md-content__inner {
  position: relative;
  z-index: 1;
}

.md-typeset,
.project-card,
.card,
.kanban-card {
  position: relative;
  z-index: 1;
}

/* ===================================================================
   Accessibility - Reduced Motion
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
  .constellation-logo {
    animation: none !important;
  }
}

/* ===================================================================
   Mobile Adjustments
   On smaller screens, the mask is tighter (smaller visible area)
   so the field feels less cluttered on cramped viewports.
   =================================================================== */

@media screen and (max-width: 60rem) {
  #logo-constellation {
    -webkit-mask-image: radial-gradient(
      ellipse 65% 60% at 50% 50%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0) 90%
    );
    mask-image: radial-gradient(
      ellipse 65% 60% at 50% 50%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.4) 50%,
      rgba(0, 0, 0, 0) 90%
    );
  }
}

@media screen and (max-width: 30rem) {
  #logo-constellation {
    -webkit-mask-image: radial-gradient(
      ellipse 60% 55% at 50% 45%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.3) 45%,
      rgba(0, 0, 0, 0) 85%
    );
    mask-image: radial-gradient(
      ellipse 60% 55% at 50% 45%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 0.3) 45%,
      rgba(0, 0, 0, 0) 85%
    );
  }
}