/* ==========================================================================
   WIZKET — mars-crew.css  (About page · 04 THE CREW · "Crew on Mars")
   A DOM layer on the sticky 3D stage of #vision (over the canvas, under the
   copy). js/mars-crew.js builds it, sizes it (--cw / --ch: one polaroid) and
   moves it on horizon.js's clock. Everything that moves is a transform.
   Prefix: mc-
   ========================================================================== */
.mc {
  --mc-pole: #c9ccc8;
  --mc-pole-hi: rgba(255, 255, 255, 0.55);
  --mc-rope: #f2f1ed;
  --mc-paper: #f7f4ee;
  --mc-ink: #171a1c;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.mc.is-on { visibility: visible; }
:root[data-theme="light"] .mc {
  --mc-pole: #6f777b;
  --mc-pole-hi: rgba(255, 255, 255, 0.35);
  --mc-rope: #2a3034;
}

/* ---------- poles, rope, flag (one SVG, sized to the stage) ---------- */
.mc__rig { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mc-pole { stroke: var(--mc-pole); stroke-width: 6; stroke-linecap: round; }
.mc-pole__hi { stroke: var(--mc-pole-hi); stroke-width: 1.5; stroke-linecap: round; }
.mc-cap { fill: var(--mc-pole); stroke: rgba(0, 0, 0, 0.25); stroke-width: 1; }
.mc-mound { fill: #6e2e17; opacity: 0.85; }
.mc-rope {
  fill: none;
  stroke: var(--mc-rope);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}
.mc-flag__cloth { fill: #fd5f07; transform-box: fill-box; transform-origin: 0 50%; animation: mc-flag 2.4s ease-in-out infinite; }
.mc-flag__w { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; animation: mc-flag 2.4s ease-in-out infinite; }
@keyframes mc-flag { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-6deg) scaleX(0.94); } }

/* ---------- the line of photos ---------- */
.mc__line { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.mc-item {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  height: var(--ch);
  opacity: 0;
  transform-origin: 50% 6px;            /* the peg: the photo swings from it */
  will-change: transform;
}

.mc-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  perspective: 900px;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.mc-card.is-clipped { pointer-events: auto; }
.mc-card:focus-visible { outline: none; }
.mc-card:focus-visible .mc-card__face { box-shadow: 0 0 0 3px #fd5f07, 0 18px 34px -14px rgba(0, 0, 0, 0.55); }

.mc-card__flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.15);
}
.mc-card.is-flip .mc-card__flip { transform: rotateY(180deg); }

.mc-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(var(--cw) * 0.06) calc(var(--cw) * 0.06) 0;
  border-radius: 3px;
  background: var(--mc-paper);
  color: var(--mc-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 18px 34px -14px rgba(0, 0, 0, 0.6);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.mc-card__back {
  transform: rotateY(180deg);
  justify-content: center;
  gap: calc(var(--cw) * 0.03);
  padding: calc(var(--cw) * 0.09);
  text-align: left;
  background:
    repeating-linear-gradient(0deg, transparent 0 calc(var(--cw) * 0.11), rgba(23, 26, 28, 0.06) calc(var(--cw) * 0.11) calc(var(--cw) * 0.11 + 1px)),
    var(--mc-paper);
}

.mc-card__img,
.mc-card__ph {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1px;
}
.mc-card__ph {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(150deg, var(--b), var(--a));
}
.mc-card__ph b {
  position: relative;
  z-index: 1;
  font: 400 calc(var(--cw) * 0.42)/1 var(--font-display);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.mc-card__ph svg {
  position: absolute;
  inset: 12% 12% -6%;
  width: 76%;
  height: auto;
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 2;
  stroke-linecap: round;
}
.mc-card__name {
  flex: 1;
  display: grid;
  place-items: center;
  font: 400 calc(var(--cw) * 0.12)/1 var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mc-card__role { font: 600 calc(var(--cw) * 0.06)/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: #fd5f07; }
.mc-card__who { font: 400 calc(var(--cw) * 0.17)/0.95 var(--font-display); text-transform: uppercase; }
.mc-card__focus { font: 600 calc(var(--cw) * 0.07)/1.25 var(--font-body); }
.mc-card__line { font: 400 calc(var(--cw) * 0.064)/1.4 var(--font-body); color: rgba(23, 26, 28, 0.72); }
.mc-card__sign {
  align-self: flex-start;
  margin-top: calc(var(--cw) * 0.02);
  padding: 0.35em 0.7em;
  border-radius: 999px;
  background: #171a1c;
  color: #f7f4ee;
  font: 600 calc(var(--cw) * 0.052)/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* the peg: an orange clothespin across the rope */
.mc-peg {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -12px;
  width: 9px;
  height: 26px;
  margin-left: -4.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #c94a00, #fd5f07 45%, #ff8a4d);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  transform: scaleY(1.25) translateY(-3px);
  transition: transform 0.28s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.mc-peg i { position: absolute; left: 1px; right: 1px; top: 9px; height: 2px; background: rgba(0, 0, 0, 0.35); }
.mc-card.is-clipped .mc-peg { transform: none; }

/* ---------- dust ---------- */
.mc__dust { position: absolute; inset: 0; }
.mc-mote {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 196, 150, 0.55);
  will-change: transform;
}
.mc-puff { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.mc-puff::before,
.mc-puff::after {
  content: "";
  position: absolute;
  left: -40px;
  top: -26px;
  width: 80px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214, 120, 70, 0.55), rgba(214, 120, 70, 0));
  opacity: 0;
}
.mc-puff.is-go::before { animation: mc-puff 0.9s ease-out both; }
.mc-puff.is-go::after { animation: mc-puff 1.1s 0.05s ease-out both; left: -60px; width: 120px; }
@keyframes mc-puff {
  0% { opacity: 0.9; transform: scale(0.3, 0.4); }
  100% { opacity: 0; transform: scale(1.4, 1.1) translateY(-10px); }
}

/* ---------- the hint ---------- */
.mc-hud {
  position: absolute;
  left: 50%;
  bottom: max(22px, 5vh);
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0;
  padding: 0.7em 1.1em;
  border-radius: 999px;
  background: rgba(15, 8, 5, 0.42);
  color: #fff;
  font: 500 13px/1 var(--font-body);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.mc-hud.is-on { opacity: 1; transform: translate(-50%, 0); }
.mc-hud b { font-weight: 700; }
.mc-hud__dot { width: 7px; height: 7px; border-radius: 50%; background: #fd5f07; }
.mc-hud.is-all { color: #ffd2b8; }

/* ---------- no WebGL: a flat CSS horizon to stand on ---------- */
.mc--flat::before {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: 74%;
  height: 120%;
  border-radius: 50% 50% 0 0 / 14% 14% 0 0;
  background: radial-gradient(120% 60% at 50% 0%, #d4733a, #8f3f22 70%);
}

@media (max-width: 760px) {
  .mc-hud { font-size: 12px; }
  .mc-peg { width: 8px; height: 22px; margin-left: -4px; top: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-flag__cloth, .mc-flag__w { animation: none; }
  .mc-card__flip { transition-duration: 0.01s; }
}

/* ---------- the crew panel copy (in #vision's copy column) ---------- */
.mc-hint { margin: 0; font: 400 clamp(0.98rem, 1.15vw, 1.15rem)/1.6 var(--font-body); color: var(--muted); }
.mc-hint__touch { display: none; }
@media (hover: none), (pointer: coarse) { .mc-hint__mouse { display: none; } .mc-hint__touch { display: inline; } }
.mc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }