/* =========================================================
   Projects page only. Reuses .hero / .flask-stage / .flask from
   styles.css and flask.css unchanged; everything here is additive
   and scoped to this page so the homepage flask stays untouched.
   ========================================================= */

.projects-title { text-align: center; margin-bottom: 1rem; }

/* ---------- Orbit: flask centered, 4 project nodes around it ---------- */
.projects-orbit {
  position: relative;
  width: min(720px, 94vw);
  height: min(720px, 94vw);
  margin: 1rem auto 2rem;
}
/* Centred via a definite size + auto margins rather than a translate, so the
   flask-stage's own zoomIn reveal (which drives `transform`) zooms it in place
   at center instead of sliding it in from the bottom-right — matching index. */
.projects-orbit .flask-stage {
  position: absolute; inset: 0; margin: auto;
}

/* ---------- GitHub mark suspended in the potion (this page only) ---------- */
.flask--projects .flask__brand-icon {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%);
  width: 18px; height: 18px;
  fill: rgba(255, 255, 255, .95);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
  z-index: 2;
}

/* ---------- Flask is a GitHub link on this page — make that visible ---------- */
.flask-link {
  display: inline-block; line-height: 0; cursor: pointer;
  border-radius: 50%; -webkit-tap-highlight-color: transparent;
}
.flask--projects { transition: transform .25s var(--ease), filter .25s var(--ease); }
.flask-link:hover .flask--projects,
.flask-link:focus-visible .flask--projects {
  transform: scale(3.08);
  filter: brightness(1.12);
}
.flask-link:hover .flask__brand-icon,
.flask-link:focus-visible .flask__brand-icon {
  fill: #fff;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .85));
}
.flask-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 8px;
}

/* ---------- Project nodes ---------- */
/* The 4 nodes sit on a diamond (top / right / bottom / left) at radius
   --orbit-r (270px on tall viewports). Expressed as a fraction of --orbit-r
   rather than fixed px so it can shrink on short desktop windows — see the
   min-width:901px block below, which caps --orbit-r by viewport height once
   the flask/orbit is dead-centered, keeping the top node clear of the navbar. */
:root { --orbit-r: 270px; }
.project-node {
  position: absolute; top: 50%; left: 50%;
  width: 120px;
  outline: none;
}
.project-node--1 { transform: translate(-50%, -50%) translate(calc(var(--orbit-r) *  0), calc(var(--orbit-r) * -1)); } /* top */
.project-node--2 { transform: translate(-50%, -50%) translate(calc(var(--orbit-r) *  1), calc(var(--orbit-r) *  0)); } /* right */
.project-node--3 { transform: translate(-50%, -50%) translate(calc(var(--orbit-r) *  0), calc(var(--orbit-r) *  1)); } /* bottom */
.project-node--4 { transform: translate(-50%, -50%) translate(calc(var(--orbit-r) * -1), calc(var(--orbit-r) *  0)); } /* left */

.project-node__thumb {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text-dim);
  transition: border-color .25s, box-shadow .25s;
}
.project-node__thumb .material-icons { font-size: 2rem; }
.project-node__label {
  display: block; margin-top: .5rem; text-align: center;
  font-size: .82rem; font-weight: 600; color: var(--text-dim);
}
.project-node:hover .project-node__thumb,
.project-node:focus-within .project-node__thumb {
  border-color: var(--accent);
  box-shadow: 0 12px 26px -16px var(--accent);
}

/* Hover/focus preview: scales up in place from the node's own center, so
   it never needs edge-of-viewport placement logic for the outer nodes. */
.project-node__detail {
  position: absolute; top: 50%; left: 50%; z-index: 5;
  width: min(280px, 80vw);
  padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: .6rem;
  background: var(--bg-card); border: 1px solid var(--accent); border-radius: 16px;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, .6), 0 12px 26px -16px var(--accent);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -50%) scale(.85);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.project-node__detail-image {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text-dim);
}
.project-node__detail-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--text); }
.project-node__detail-text { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--text-dim); }

.project-node:hover .project-node__detail,
.project-node:focus-within .project-node__detail {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.project-node:focus-visible .project-node__thumb {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

/* ---------- Desktop: flask dead-center of the viewport ---------- */
/* Mirrors the same treatment on index.html: above the mobile breakpoint the
   orbit (and the flask at its center, via the existing absolute-centered
   .flask-stage rule above) is pinned to the exact center of the screen
   instead of flowing under the title. body clips to 100vh, no scrolling.
   Below 900px the existing stacked-list fallback (below) is untouched. */
@media (min-width: 901px) {
  body { height: 100vh; overflow: hidden; }
  .hero.projects-hero { padding: 0; }

  /* Dead-centering the orbit on a short window would push the top node
     under the navbar — shrink the diamond's radius once the viewport gets
     shorter than 900px tall (full 270px size is unaffected above that). */
  :root { --orbit-r: min(270px, 30vh); }

  .projects-title {
    position: fixed; top: 78px; left: 50%; transform: translateX(-50%);
    margin: 0; font-size: 1rem; line-height: 1; z-index: 5;
    /* Decorative heading only — never let it steal hover/click from a node
       orbiting near the top of the (now viewport-centered) circle. */
    pointer-events: none;
  }
  .projects-orbit {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    margin: 0;
  }
}

/* ---------- Responsive: stacked list instead of an orbit ---------- */
@media (max-width: 900px) {
  .projects-orbit {
    position: static; width: auto; height: auto;
    display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
  }
  .projects-orbit .flask-stage { position: static; margin: 0; }
  .project-node {
    position: relative; top: auto; left: auto; transform: none !important;
    width: 160px;
  }
}