/* FIELD — projects as a still asteroid cluster, detail card, skill pills */
#field {
  position: relative;
  overflow: hidden;
}

/* title row: the heading with the view switch beside it */
.field-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-bottom: 12px;
}
.field-header .section-label { margin-bottom: 0; }

/* switch: asteroid view <-> formal view (see field.js).
   One white pill with two labels; a pink highlight slides under the active one. */
.view-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 128px 128px;
  padding: 4px;
  background: #fff;
  border: 4px solid #000;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000;
  -webkit-text-stroke: 0;
  z-index: 1;
}
.view-toggle:focus-visible { outline: 3px solid var(--accent2); outline-offset: 4px; }

/* the sliding highlight */
.view-toggle::before {
  content: '';
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: 128px;
  box-sizing: border-box;
  background: var(--accent);
  border: 3px solid #000;
  border-radius: 999px;
  transition: transform 0.2s ease;
}
.view-toggle[aria-pressed="true"]::before { transform: translateX(100%); }

   /* old switch track, no longer used */

.view-toggle-option {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 6px 0;
  text-align: center;
  color: #000;
  transition: opacity 0.2s;
}
.view-toggle-option-left,
.view-toggle[aria-pressed="true"] .view-toggle-option-right { opacity: 1; }
.view-toggle-option-right,
.view-toggle[aria-pressed="true"] .view-toggle-option-left { opacity: 0.55; }

#spaceView[hidden], #formalView[hidden] { display: none; }

/* ---------- stage: skills drift behind, project rocks sit on top ---------- */
/* full width: #field centres its children, so without this the wrappers shrink to 0 */
#spaceView { width: 100%; }
#spaceStage { position: relative; width: 100%; }

#skillDrift {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.drifter {
  position: absolute;
  left: 0;
  width: 90px; height: 90px;
  padding: 12px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  isolation: isolate;
  line-height: 1.1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  -webkit-text-stroke: 4px #000;
  paint-order: stroke fill;
  animation: drift linear infinite;
}
.drifter::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--rock) center / contain no-repeat;
  animation: tumble 9s linear infinite;
}
@keyframes drift {
  from { transform: translateX(110vw); }
  to   { transform: translateX(-130vw); }
}
@keyframes tumble { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #skillDrift { display: none; } }

/* ---------- the cluster ---------- */
#rockCluster {
  z-index: 1;
  margin: 0 auto;
  position: relative;
  width: min(900px, 100%);
  height: calc(var(--rows, 2) * var(--row-h, 250px));
  margin-top: 28px;
}

.rock {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  padding: calc(var(--s) * 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  isolation: isolate;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 1.1;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--s) * 0.1);
  color: #fff;
  -webkit-text-stroke: 5px #000;
  paint-order: stroke fill;
  animation: bob var(--bob, 7s) ease-in-out var(--delay, 0s) infinite;
}
/* the rock drawing sits behind the label so the text stays upright */
.rock::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rock) center / contain no-repeat;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.2s ease, filter 0.2s ease;
}
.rock-1 { --rock: url("../assets/field/asteroid-1.svg"); }
.rock-2 { --rock: url("../assets/field/asteroid-2.svg"); }
.rock-3 { --rock: url("../assets/field/asteroid-3.svg"); }

.rock:hover, .rock:focus-visible { animation-play-state: paused; }
.rock:hover::before,
.rock:focus-visible::before { transform: rotate(var(--tilt, 0deg)) scale(1.08); filter: brightness(1.12); }
.rock:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; border-radius: 30%; }
.rock[aria-expanded="true"]::before { transform: rotate(var(--tilt, 0deg)) scale(1.1); filter: brightness(1.25); }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) { .rock { animation: none; } }

/* ---------- project card (popup in asteroid view, grid item in formal view) ---------- */
.proj-card {
  position: relative;
  padding: 22px 26px 24px;
  background: #fff;
  color: #000;
  text-align: left;
  border: 5px solid #000;
  border-radius: 18px;
  box-shadow: 5px 5px 0 #000;
}
.proj-card h3 {
  margin: 0 36px 8px 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
}
.proj-card p { margin: 0 0 16px; font-weight: 500; font-size: 15px; line-height: 1.55; color: #222; }
.proj-card .card-link { margin-top: 2px; }

#projectCard {
  z-index: 1;
  width: min(560px, 100%);
  margin: 6px auto 0;
  animation: card-in 0.18s ease-out;
}
#projectCard[hidden] { display: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } }

.card-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 32px; height: 32px;
  background: #fff; color: #000;
  border: 4px solid #000; border-radius: 50%;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1;
  cursor: pointer;
}
.card-close:hover { background: var(--accent); }

/* ---------- formal view ---------- */
#formalView { width: min(960px, 100%); margin: 28px auto 0; text-align: left; }
.formal-heading {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: 5px #000;
  paint-order: stroke fill;
}
.formal-heading:not(:first-child) { margin-top: 48px; }
.formal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}
.formal-grid .proj-card { display: flex; flex-direction: column; align-items: flex-start; }
.formal-grid .proj-card h3 { margin-right: 0; }
.formal-grid .proj-card p { flex: 1; }

/* ---------- skill pills ---------- */
.skill-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
  max-width: 860px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.skill-pills li {
  padding: 4px 16px;
  background: #fff;
  color: #000;
  border: 4px solid #000;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
}

/* ---------- phones: a tidy wrapped grid instead of a scatter ---------- */
@media (max-width: 700px) {
  #rockCluster {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 4px;
  }
  .rock { position: relative; left: auto; top: auto; margin: 0; --s: 150px !important; font-size: 14px; }
  .rock-3 { --s: 170px !important; }
}