/* ============================================================
   Space page — full-screen WebGL particle field behind the bar.
   (Bar + custom cursor styling come from landing.css.)
   ============================================================ */

#space-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;            /* behind the bar (z-index 1) and the cursor (z-index 9999) */
  display: block;
  /* three.js sets the inline size to innerWidth × innerHeight (the visual viewport,
     short of the screen under the iOS toolbar). Force the full large-viewport size so
     the field fills the whole screen — no black bands. */
  width: 100vw !important;
  height: 100lvh !important;
  touch-action: none;    /* let OrbitControls handle touch drag/zoom/pan */
}

/* ---- Typewriter intro (centre) ---- */
.space-intro {
  position: fixed;
  inset: 0;
  z-index: 3;                  /* above the canvas + bar, below the catalogue */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8vw;
  text-align: center;
  pointer-events: none;        /* let drags reach the canvas */
  color: var(--ink);
  font-size: var(--fs-body);   /* same type + line-height as the rest of the site */
  font-weight: 400;
  line-height: 1.15;
  mix-blend-mode: difference;  /* readable over the white field or a dark image */
  transition: opacity 0.6s ease;
}
.space-intro.is-done { opacity: 0; }

.space-intro__caret {
  margin-left: 0.06em;
  animation: space-caret 1s steps(1, start) infinite;
}
@keyframes space-caret { 50% { opacity: 0; } }

/* ---- Hovered project name (top centre) ---- */
.space-title {
  position: fixed;
  top: clamp(20px, 4vh, 34px);
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  font-size: var(--fs-body);
  color: var(--ink);
  mix-blend-mode: difference;   /* readable over the white field or a dark image */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.space-title.is-on { opacity: 1; }

/* ---- Bottom trigger ---- */
.catalogue-toggle {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(18px, 4vh, 32px));
  transform: translateX(-50%);
  z-index: 7;                   /* above the catalogue so it stays clickable */
  background: none;
  border: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 400;
  white-space: nowrap;
  mix-blend-mode: difference;
}

/* ---- Slide-up catalogue page ---- */
.catalogue {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: var(--bg);
  color: var(--fg);
  overflow-y: auto;
  transform: translateY(100%);
  /* Hidden while closed so it never composites/flashes over the WebGL zoom;
     only un-hides for the slide-up, and re-hides after sliding back down. */
  visibility: hidden;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.85s;
  /* Same type as the rest of the site. */
  font-family: var(--font-sans);
  letter-spacing: -0.015em;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
.catalogue.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.catalogue__title {
  position: sticky;             /* stays put while the list scrolls */
  top: 0;
  text-align: center;
  padding: clamp(20px, 4vh, 34px) 0;
  font-size: var(--fs-body);
  background: var(--bg);
  z-index: 1;
}

.catalogue__list {
  padding: 0 clamp(20px, 2.2vw, 36px) 12vh;
}

.catalogue__item {
  padding: clamp(28px, 5vh, 60px) 0;
  border-bottom: 0.5px solid var(--fg);
}
.catalogue__item:last-child { border-bottom: none; }

.catalogue__meta {
  display: flex;
  flex-direction: column;          /* [year] sits on its own line, above the name */
  gap: 0.1em;
  font-size: var(--fs-body);
  margin-bottom: 1em;
}
.catalogue__name { white-space: nowrap; }

.catalogue__desc {
  margin: 0 0 1.6em;
  font-size: var(--fs-body);
  line-height: 1.3;
  max-width: 120ch;
}

.catalogue__media {
  display: flex;
  align-items: flex-end;
  gap: clamp(4px, 0.6vw, 9px);   /* same gap as the info image column */
  overflow-x: auto;
  scrollbar-width: none;        /* Firefox */
}
.catalogue__media::-webkit-scrollbar { display: none; }   /* WebKit */

.catalogue__img {
  height: clamp(280px, 58vh, 680px);
  width: auto;
  flex: 0 0 auto;
  display: block;
  object-fit: cover;
}

::selection { background: var(--fg); color: var(--bg); }
::-moz-selection { background: var(--fg); color: var(--bg); }

@media (max-width: 760px) {
  :root { --fs-body: clamp(17px, 4.8vw, 20px); }
}

@media (max-width: 760px) {
  /* GiuliaRinaldo pinned to the top-LEFT corner (overriding the landing's centred column
     stack); the intro sentence stays centred on screen. */
  .bar {
    top: calc(env(safe-area-inset-top, 0px) + clamp(20px, 4vh, 34px));
    transform: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0;
  }
}

@media (max-width: 760px) {
  .nav { display: none; }   /* no nav on the Space page on mobile */
}