/* Constellation — mathematical golden spiral */

/* ── 1. Kill site chrome ── */
body.constellation-page {
  margin: 0;
  padding: 0;
  background: none !important;
  overflow-x: hidden;
}

body.constellation-page .site-shell {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

body.constellation-page .site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: none !important;
  border: none !important;
  padding: 1.2rem 2rem;
}

body.constellation-page .site-nav a {
  color: rgba(255, 248, 235, 0.88) !important;
  font-family: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: lowercase;
  transition: color 0.4s ease;
}

body.constellation-page .site-nav a:hover,
body.constellation-page .site-nav a:focus-visible {
  color: #fff8eb !important;
}

body.constellation-page .page-main {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── 2. Deep space field ── */
.c-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at center, #020d20 0%, #010818 40%, #00010a 100%);
}

.c-pool {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  mix-blend-mode: screen;
  opacity: 0;
  animation-fill-mode: both;
}

.c-pool--a {
  width: 90vw; height: 80vw;
  top: 10vh; left: -20vw;
  background: radial-gradient(circle, #0a3a4a 0%, transparent 68%);
  opacity: 0.6;
  animation: drift-a 90s ease-in-out infinite alternate;
}
.c-pool--b {
  width: 70vw; height: 60vw;
  top: -10vw; right: -15vw;
  background: radial-gradient(circle, #1a0a38 0%, transparent 68%);
  opacity: 0.7;
  animation: drift-b 100s ease-in-out infinite alternate;
}
.c-pool--core {
  width: 30vw; height: 30vw;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #3a1a0a 0%, transparent 80%);
  opacity: 0.45;
  filter: blur(80px);
}

@keyframes drift-a { to { transform: translate(6vw, 5vh) scale(1.1); } }
@keyframes drift-b { to { transform: translate(-5vw, 6vh) scale(0.95); } }

/* ── 3. Background stars ── */
.c-stars {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}

/* ── 4. Photos on the spiral ── */
.c-photos {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.c-photo {
  position: absolute;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  pointer-events: auto;
  transform: translate(-50%, calc(-100% - var(--hover-offset, 24px))) rotate(var(--rotation, 0deg));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42), 0 0 22px rgba(216, 181, 106, 0.18);
  animation: photo-float var(--float-duration, 16s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

.c-photo::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  width: 2px;
  height: calc(var(--hover-offset, 24px) - 6px);
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(239, 226, 188, 0.45), rgba(239, 226, 188, 0.04));
  pointer-events: none;
}

.c-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 220, 0.24);
  pointer-events: none;
}

.c-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

@keyframes photo-float {
  from {
    transform: translate(-50%, calc(-100% - var(--hover-offset, 24px) - 10px)) rotate(var(--rotation, 0deg));
  }
  to {
    transform: translate(-50%, calc(-100% - var(--hover-offset, 24px) + 6px)) rotate(calc(var(--rotation, 0deg) + 2deg));
  }
}

/* ── 5. Lightbox ── */
.c-lightbox {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
}

.c-lightbox[hidden] {
  display: none;
}

.c-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 14, 0.82);
  backdrop-filter: blur(10px);
}

.c-lightbox__dialog {
  position: relative;
  z-index: 1;
  width: min(92vw, 1100px);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.c-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 84vh;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58), 0 0 34px rgba(216, 181, 106, 0.2);
}

.c-lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  background: rgba(12, 18, 30, 0.78);
  color: rgba(255, 247, 230, 0.96);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}

.c-lightbox__close:hover {
  background: rgba(22, 30, 46, 0.9);
}

/* ── 6. Nautilus Spiral ── */
.c-nautilus {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  pointer-events: none;
}

.c-star {
  opacity: var(--star-opacity, 0.92);
  animation: point-twinkle var(--twinkle-duration, 3.6s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}

.c-point-core {
  fill: #fff8eb;
}

.c-point-glow {
  fill: rgba(239, 226, 188, 0.22);
}

.c-starburst {
  fill: none;
  stroke: rgba(255, 248, 235, 0.24);
  stroke-linecap: round;
}

.c-starburst--major {
  stroke-width: 0.82;
}

.c-starburst--minor {
  stroke-width: 0.5;
  opacity: 0.24;
}

@keyframes point-twinkle {
  from {
    opacity: 0.82;
    filter: drop-shadow(0 0 3px rgba(255, 248, 235, 0.2)) drop-shadow(0 0 7px rgba(239, 226, 188, 0.08));
  }
  to {
    opacity: 0.96;
    filter: drop-shadow(0 0 5px rgba(255, 248, 235, 0.32)) drop-shadow(0 0 11px rgba(239, 226, 188, 0.14));
  }
}

.c-spiral-group {
  transform-origin: 750px 750px;
  animation: slow-spin 420s linear infinite;
}

@keyframes slow-spin {
  to { transform: rotate(360deg); }
}

/* ── 7. Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .c-pool,
  .c-photo,
  .c-point,
  .c-spiral-group {
    animation: none !important;
  }
}