/* Interactive Solar System Easter egg.
   This scene is deliberately isolated from the homepage palette so the
   transition can feel like leaving the paper atlas without introducing a
   second site-wide theme. */

body.cosmos-mode {
  overflow: hidden;
}

/* Fade the actual homepage away under the captured Earth. The transition is
   reversed before the captured Earth expands home, so light mode returns as
   one continuous move rather than after the overlay disappears. */
body.cosmos-mode > :not(.cosmos-experience):not(script) {
  transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.cosmos-returning-page > :not(.cosmos-experience):not(script) {
  transition-delay: 170ms;
}

body.cosmos-page-hidden > :not(.cosmos-experience):not(script) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Campus nodes are a different visual layer from the planet. Let them leave
   before the pullback instead of baking them into the space texture, and do
   not bring them back until the returning Earth is home at full size. */
#us-map,
.globe-readout {
  transition: opacity 280ms ease;
}

body.cosmos-dots-hidden #us-map,
body.cosmos-dots-hidden .globe-readout {
  opacity: 0 !important;
  pointer-events: none !important;
}

.cosmos-experience {
  --cosmos-ink: #f7f2df;
  --cosmos-muted: rgba(224, 231, 220, 0.62);
  --cosmos-line: rgba(223, 229, 209, 0.16);
  --cosmos-gold: #e0b95e;
  position: fixed;
  z-index: 600;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  color: var(--cosmos-ink);
  pointer-events: none;
}

.cosmos-experience::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 47% 52%, rgba(31, 65, 61, 0.24), transparent 34%),
    radial-gradient(circle at 76% 18%, rgba(36, 49, 70, 0.24), transparent 38%),
    #07100f;
  content: "";
  opacity: 0;
  transition: opacity 1700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cosmos-experience.is-visible {
  pointer-events: auto;
}

.cosmos-experience.is-visible::before { opacity: 1; }
.cosmos-experience.is-returning {
  z-index: 0;
}
.cosmos-experience.is-returning::before { opacity: 0; }

.cosmos-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  opacity: 0;
  transform: none;
  transition: opacity 900ms 260ms ease;
}

.cosmos-experience.is-ready .cosmos-canvas { opacity: 1; }
.cosmos-experience.is-returning .cosmos-canvas {
  opacity: 0;
  transition-duration: 1100ms;
  transition-delay: 0ms;
}

.cosmos-canvas.is-dragging {
  cursor: grabbing;
}

.cosmos-vignette {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(5, 13, 13, 0.76) 0, rgba(5, 13, 13, 0.16) 27rem, transparent 48%),
    radial-gradient(ellipse at center, transparent 46%, rgba(2, 7, 8, 0.48) 100%);
  transition: opacity 1350ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Keep the edge treatment stable after the camera finishes pulling back.
   Previously it had no transition state of its own, so the renderer handoff
   could make it read as a one-frame vignette cut. */
.cosmos-experience.is-visible .cosmos-vignette,
.cosmos-experience.is-overview-ready .cosmos-vignette {
  opacity: 1;
}

.cosmos-experience.is-returning .cosmos-vignette {
  opacity: 0;
  transition-duration: 1100ms;
}

.cosmos-earth-transition {
  position: absolute;
  z-index: 8;
  left: var(--earth-start-left, 50%);
  top: var(--earth-start-top, 50%);
  width: var(--earth-start-size, 20rem);
  height: var(--earth-start-size, 20rem);
  border-radius: 50%;
  clip-path: circle(49.8% at 50% 50%);
  overflow: hidden;
  background: transparent;
  opacity: 1;
  pointer-events: none;
  border: 0;
  box-shadow: none;
  transition: none;
  will-change: left, top, width, height;
}

.cosmos-experience.is-launched .cosmos-earth-transition {
  left: var(--earth-target-left, calc(50% - 0.7rem));
  top: var(--earth-target-top, calc(50% - 0.7rem));
  width: var(--earth-target-size, 1.4rem);
  height: var(--earth-target-size, 1.4rem);
}

.cosmos-loading {
  position: absolute;
  z-index: 10;
  left: clamp(1.25rem, 4vw, 4rem);
  top: clamp(5.5rem, 15vh, 9rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  color: var(--cosmos-muted);
  font: 600 0.72rem/1.2 var(--font-text);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: opacity 320ms ease;
}

.cosmos-loading::before {
  width: 0.48rem;
  height: 0.48rem;
  border: 1px solid var(--cosmos-gold);
  border-radius: 50%;
  content: "";
  animation: cosmos-pulse 1.1s ease-in-out infinite;
}

.cosmos-experience.is-ready .cosmos-loading {
  opacity: 0;
}

.cosmos-copy {
  position: absolute;
  z-index: 6;
  top: clamp(1.4rem, 4vw, 3.5rem);
  left: clamp(1.25rem, 4vw, 4rem);
  max-width: min(30rem, 48vw);
  opacity: 0;
  translate: 0 0.7rem;
  pointer-events: none;
  transition: opacity 620ms 260ms ease, translate 780ms 260ms ease;
}

.cosmos-experience.is-overview-ready .cosmos-copy {
  opacity: 1;
  translate: 0 0;
}

.cosmos-kicker {
  margin: 0 0 0.75rem;
  color: var(--cosmos-gold);
  font: 700 0.68rem/1.2 var(--font-text);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.cosmos-title {
  display: grid;
  max-width: 11.8em;
  margin: 0;
  color: var(--cosmos-ink);
  font: 500 clamp(1.85rem, 3.65vw, 4rem)/1.02 var(--font-display);
  letter-spacing: -0.035em;
  text-wrap: pretty;
}

.cosmos-reel-line {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.16em;
  align-items: center;
  min-width: 0;
  color: var(--cosmos-gold);
  white-space: nowrap;
}

.cosmos-reel-window {
  position: relative;
  display: inline-block;
  width: min(7.8em, 44vw);
  height: 1.15em;
  margin-inline: 0 0.02em;
  overflow: hidden;
  perspective: 9em;
  vertical-align: -0.06em;
  mask-image: linear-gradient(transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(transparent 0%, #000 22%, #000 78%, transparent 100%);
}

.cosmos-reel-cell {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  overflow: hidden;
  color: var(--cosmos-gold);
  line-height: 1;
  text-overflow: ellipsis;
  transform:
    translate3d(0, calc(-50% + var(--cosmos-slot-y, 0em)), var(--cosmos-slot-z, 0em))
    rotateX(var(--cosmos-slot-angle, 0deg));
  transform-origin: 50% 50% -1.62em;
  opacity: var(--cosmos-slot-opacity, 0);
  will-change: transform, opacity;
}

.cosmos-acausal {
  color: rgba(224, 185, 94, 0.58);
  font-size: 0.68rem;
}

.cosmos-planet-card {
  position: absolute;
  z-index: 7;
  display: grid;
  gap: 0.22rem;
  right: clamp(1rem, 3vw, 2.8rem);
  bottom: clamp(1rem, 3vw, 2.6rem);
  width: min(21rem, calc(100vw - 2rem));
  box-sizing: border-box;
  padding: 0.78rem 0.88rem 0.82rem;
  border: 1px solid rgba(229, 234, 216, 0.16);
  border-radius: 3px;
  background: rgba(8, 18, 18, 0.94);
  box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.26);
  opacity: 0;
  translate: 0 0.8rem;
  transition: opacity 520ms 480ms ease, translate 700ms 480ms ease;
}

.cosmos-experience.is-overview-ready .cosmos-planet-card {
  opacity: 1;
  translate: 0 0;
}

.cosmos-planet-detail-kicker,
.cosmos-planet-detail-context,
.cosmos-planet-detail-heading {
  margin: 0;
}

.cosmos-planet-detail-kicker {
  color: rgba(224, 185, 94, 0.72);
  font: 700 0.56rem/1 var(--font-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cosmos-planet-detail-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem 0.65rem;
  align-items: baseline;
}

.cosmos-planet-detail-name {
  margin: 0;
  color: var(--cosmos-ink);
  font: 600 1.08rem/1.12 var(--font-display);
  letter-spacing: -0.01em;
}

.cosmos-planet-detail-status {
  color: rgba(224, 231, 220, 0.5);
  font: 600 0.64rem/1.2 var(--font-text);
}

.cosmos-planet-detail-context {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(224, 231, 220, 0.66);
  font: 500 0.7rem/1.34 var(--font-text);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cosmos-planet-action {
  justify-self: start;
  margin-top: 0.38rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(224, 185, 94, 0.46);
  background: transparent;
  color: var(--cosmos-gold);
  font: 700 0.66rem/1.5 var(--font-text);
  cursor: pointer;
}

.cosmos-planet-action:hover,
.cosmos-planet-action:focus-visible {
  outline: none;
  border-bottom-color: #fff1bb;
  color: #fff1bb;
}

.cosmos-close {
  position: absolute;
  z-index: 9;
  top: clamp(1rem, 2.5vw, 2rem);
  right: clamp(1rem, 2.5vw, 2rem);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.7rem;
  padding: 0.62rem 0.86rem;
  border: 1px solid rgba(237, 241, 219, 0.2);
  border-radius: 2px;
  background: rgba(7, 16, 15, 0.68);
  color: rgba(247, 242, 223, 0.8);
  font: 650 0.74rem/1 var(--font-text);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px);
  transition: opacity 320ms ease, color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.cosmos-experience.is-overview-ready .cosmos-close {
  opacity: 1;
  pointer-events: auto;
}

.cosmos-earth-style-control {
  position: absolute;
  z-index: 9;
  top: clamp(7.55rem, 9vw, 8.45rem);
  right: clamp(1rem, 2.5vw, 2rem);
  display: grid;
  gap: 0.3rem;
  color: rgba(224, 231, 220, 0.46);
  font: 650 0.6rem/1 var(--font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.cosmos-earth-style-control[hidden] { display: none; }

.cosmos-earth-style-select {
  min-width: 8.6rem;
  padding: 0.42rem 1.8rem 0.42rem 0.55rem;
  border: 1px solid rgba(237, 241, 219, 0.18);
  border-radius: 2px;
  background: rgba(7, 16, 15, 0.78);
  color: rgba(247, 242, 223, 0.8);
  font: 600 0.68rem/1.1 var(--font-text);
  text-transform: none;
}

.cosmos-experience.is-overview-ready .cosmos-earth-style-control {
  opacity: 1;
  pointer-events: auto;
}

.cosmos-scale-info {
  position: absolute;
  z-index: 9;
  top: clamp(4.25rem, 7vw, 5.6rem);
  right: clamp(1rem, 2.5vw, 2rem);
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(237, 241, 219, 0.2);
  border-radius: 50%;
  background: rgba(7, 16, 15, 0.68);
  color: rgba(247, 242, 223, 0.72);
  font: 650 0.78rem/1 var(--font-text);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: opacity 320ms ease, color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.cosmos-scale-info:hover,
.cosmos-scale-info:focus-visible,
.cosmos-scale-info[aria-expanded="true"] {
  outline: none;
  border-color: rgba(224, 185, 94, 0.58);
  background: rgba(21, 43, 39, 0.84);
  color: #fff9e5;
}

.cosmos-experience.is-overview-ready .cosmos-scale-info {
  opacity: 1;
  pointer-events: auto;
}

.cosmos-scale-popover {
  position: absolute;
  z-index: 10;
  top: clamp(7.1rem, 10vw, 8.3rem);
  right: clamp(1rem, 2.5vw, 2rem);
  width: min(22rem, calc(100vw - 2rem));
  box-sizing: border-box;
  padding: 1.05rem 2.6rem 1.05rem 1.15rem;
  border: 1px solid rgba(237, 241, 219, 0.18);
  border-radius: 3px;
  background: rgba(7, 16, 15, 0.94);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.34);
  color: rgba(224, 231, 220, 0.72);
  font: 500 0.78rem/1.45 var(--font-text);
  backdrop-filter: blur(14px);
}

.cosmos-scale-popover[hidden] { display: none; }

.cosmos-scale-popover h3 {
  margin: 0 0 0.55rem;
  color: var(--cosmos-ink);
  font: 600 1rem/1.15 var(--font-display);
  letter-spacing: -0.01em;
}

.cosmos-scale-popover p { margin: 0; }

.cosmos-scale-caveat {
  margin-top: 0.65rem !important;
  color: rgba(224, 185, 94, 0.76);
  font-weight: 650;
}

.cosmos-scale-example {
  margin-top: 0.55rem !important;
  color: rgba(224, 231, 220, 0.46);
  font-size: 0.69rem;
}

.cosmos-scale-popover-close {
  position: absolute;
  top: 0.62rem;
  right: 0.62rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(247, 242, 223, 0.58);
  font: 400 1.15rem/1 var(--font-text);
  cursor: pointer;
}

.cosmos-scale-popover-close:hover,
.cosmos-scale-popover-close:focus-visible {
  outline: 1px solid rgba(224, 185, 94, 0.58);
  color: #fff9e5;
}

.cosmos-experience.is-returning-ui .cosmos-copy,
.cosmos-experience.is-returning-ui .cosmos-planet-card,
.cosmos-experience.is-returning-ui .cosmos-controls-hint,
.cosmos-experience.is-returning-ui .cosmos-close {
  opacity: 0;
  pointer-events: none;
  translate: 0 0.45rem;
  transition-duration: 190ms;
  transition-delay: 0ms;
}

.cosmos-experience.is-returning-ui .cosmos-earth-style-control {
  opacity: 0;
  pointer-events: none;
}

.cosmos-experience.is-returning-ui .cosmos-scale-info,
.cosmos-experience.is-returning-ui .cosmos-scale-popover {
  opacity: 0;
  pointer-events: none;
}

.cosmos-close:hover,
.cosmos-close:focus-visible {
  outline: none;
  border-color: rgba(224, 185, 94, 0.58);
  background: rgba(21, 43, 39, 0.84);
  color: #fff9e5;
}

.cosmos-controls-hint {
  position: absolute;
  z-index: 6;
  left: clamp(1.25rem, 4vw, 4rem);
  bottom: clamp(1.1rem, 3vw, 2.7rem);
  margin: 0;
  color: rgba(224, 231, 220, 0.38);
  font: 550 0.67rem/1.3 var(--font-text);
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 500ms 700ms ease;
}

.cosmos-experience.is-overview-ready .cosmos-controls-hint {
  opacity: 1;
}

.cosmos-experience.is-overview-ready.is-returning-ui .cosmos-controls-hint {
  opacity: 0;
  transition-delay: 0ms;
}

.cosmos-error {
  position: absolute;
  z-index: 12;
  inset: 50% auto auto 50%;
  max-width: 24rem;
  margin: 0;
  color: var(--cosmos-muted);
  font: 500 0.9rem/1.5 var(--font-text);
  text-align: center;
  transform: translate(-50%, -50%);
}

@keyframes cosmos-pulse {
  0%, 100% { opacity: 0.35; scale: 0.78; }
  50% { opacity: 1; scale: 1; }
}

/* A compact desktop is still interactive, but cannot afford the wide-screen
   copy and directory widths simultaneously. Keep both fully inside the
   viewport until the actual mobile composition takes over. */
@media (min-width: 761px) and (max-width: 1100px) {
  .cosmos-copy {
    left: 1.5rem;
    max-width: min(25rem, 52vw);
  }

  .cosmos-title {
    max-width: 10.8em;
    font-size: clamp(1.75rem, 4vw, 2.8rem);
  }

  .cosmos-reel-window { width: min(7.2em, 38vw); }

  .cosmos-planet-card {
    right: 1rem;
    width: min(18rem, 34vw);
  }
}

@media (max-width: 760px) {
  .cosmos-earth-style-control { display: none; }
  .cosmos-scale-info {
    top: 4.15rem;
    right: 0.75rem;
  }
  .cosmos-scale-popover {
    top: 6.8rem;
    right: 0.75rem;
    width: min(22rem, calc(100vw - 1.5rem));
  }
  .cosmos-vignette {
    background:
      linear-gradient(180deg, rgba(5, 13, 13, 0.82) 0, rgba(5, 13, 13, 0.08) 43%, rgba(5, 13, 13, 0.58) 100%),
      radial-gradient(ellipse at center, transparent 42%, rgba(2, 7, 8, 0.46) 100%);
  }

  .cosmos-copy {
    top: 4.8rem;
    max-width: calc(100vw - 2.5rem);
  }

  .cosmos-title {
    max-width: 11em;
    font-size: clamp(1.7rem, 8.2vw, 2.8rem);
  }

  .cosmos-reel-window { width: min(7.4em, 62vw); }

  .cosmos-planet-card {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    width: auto;
    padding: 0.65rem 0.75rem 0.68rem;
  }

  .cosmos-planet-detail-context {
    -webkit-line-clamp: 1;
  }

  .cosmos-controls-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cosmos-experience,
  .cosmos-earth-transition,
  .cosmos-copy,
  .cosmos-planet-card,
  .cosmos-controls-hint {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .cosmos-loading::before {
    animation: none;
  }
}