/* Crew assembly (scene 05) and pointer depth. Lass powers on, the beam opens, and each specialist
   drops into formation in its own colour. Transform and opacity only. Reduced motion shows the
   assembled crew at rest. Radius scale here: 14px tiles, round rings. */

.crew-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.crew-stage {
  --c: #4af0e0;
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 40rem;
  margin-top: 2.4rem;
  padding: 1.6rem 1.2rem 1.3rem;
  border: 1px solid rgba(105, 226, 221, .16);
  border-radius: 22px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(74, 240, 224, .13), transparent 70%),
    linear-gradient(180deg, rgba(8, 16, 22, .82), rgba(5, 10, 14, .9));
  box-shadow: 0 30px 80px rgba(2, 8, 12, .45), inset 0 1px rgba(255, 255, 255, .04);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease);
}

.crew-lead {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .2rem;
  text-align: center;
  transform: translateZ(40px);
}
.crew-lead strong { margin-top: .35rem; color: #eaf7f5; font-size: 1.05rem; letter-spacing: .02em; }
.crew-lead small { color: var(--muted, #8fa5a1); font-size: .78rem; }

.crew-bot { position: relative; display: block; width: 66px; aspect-ratio: 1; }
.crew-bot svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45)); }
.crew-bot-lead { width: 112px; }
.crew-bot::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%; bottom: -6%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: .55;
}

.cd-tip, .cd-eyes { fill: var(--c); }
.cd-rim { stroke: var(--c); opacity: .65; }
.cd-slit { stroke: var(--c); opacity: .9; }
.cd-belly { fill: var(--c); opacity: .8; }
.cd-fin { stroke: rgba(255, 255, 255, .1); stroke-width: .6; }
.cd-eyes { transform-box: fill-box; transform-origin: 50% 50%; }

.crew-ring {
  position: absolute;
  top: 6px; left: 50%;
  width: 112px; height: 112px;
  margin-left: -56px;
  border: 1.5px solid rgba(74, 240, 224, .7);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.crew-ring-late { border-color: rgba(178, 160, 255, .55); }

.crew-beam {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(74, 240, 224, .7) 20%, rgba(255, 202, 111, .6) 50%, rgba(178, 160, 255, .7) 80%, transparent);
  transform-origin: 50% 50%;
}

.crew-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crew-member {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .25rem;
  padding: .85rem .4rem .8rem;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, transparent), rgba(6, 14, 18, .55));
  text-align: center;
  transform: translateZ(18px);
}
.crew-member strong { margin-top: .3rem; color: #e4efed; font-size: .8rem; }
.crew-member small { color: #8fa5a1; font-size: .68rem; line-height: 1.3; text-wrap: balance; }

@media (max-width: 560px) {
  .crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew-bot-lead { width: 96px; }
  .crew-ring { width: 96px; height: 96px; margin-left: -48px; }
}

@media (prefers-reduced-motion: no-preference) {
  .scene-action:not(.is-active) .crew-member { opacity: 0; transform: translate3d(0, -70px, 0) scale(.7); }
  .scene-action:not(.is-active) .crew-beam { transform: scaleX(0); }
  .scene-action:not(.is-active) .crew-bot-lead .cd-eyes { opacity: .15; }

  .scene-action.is-active .crew-bot-lead .cd-eyes { animation: crewEyesOn .9s steps(1, end) both; }
  .scene-action.is-active .crew-ring { animation: crewRing 1.2s cubic-bezier(.16, 1, .3, 1) .35s both; }
  .scene-action.is-active .crew-ring-late { animation-delay: .55s; }
  .scene-action.is-active .crew-beam { animation: crewBeam .7s var(--ease) .45s both; }
  .scene-action.is-active .crew-member { animation: crewDrop .8s cubic-bezier(.2, 1.2, .3, 1) both; animation-delay: calc(.7s + var(--i) * 85ms); }
  .scene-action.is-active .crew-member .crew-bot::before {
    content: "";
    position: absolute;
    left: 46%; width: 8%;
    bottom: 70%; height: 140%;
    border-radius: 4px;
    background: linear-gradient(180deg, transparent, var(--c));
    opacity: 0;
    animation: crewStreak .8s ease-out both;
    animation-delay: calc(.7s + var(--i) * 85ms);
  }
  .scene-action.is-active .crew-bot svg { animation: crewHover 4.2s ease-in-out infinite; animation-delay: calc(1.6s + var(--i, 0) * -.47s); }
  .scene-action.is-active .cd-eyes { animation: crewBlink 5.6s infinite; animation-delay: calc(var(--i, 0) * -.9s); }
  .scene-action.is-active .crew-bot-lead .cd-eyes { animation: crewEyesOn .9s steps(1, end) both, crewBlink 5.6s 2s infinite; }
}

@keyframes crewDrop {
  0% { opacity: 0; transform: translate3d(0, -70px, 0) scale(.7); }
  55% { opacity: 1; transform: translate3d(0, 6px, 18px) scale(1.04); }
  100% { opacity: 1; transform: translateZ(18px); }
}
@keyframes crewStreak { 0% { opacity: 0; } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(40%) scaleY(.2); } }
@keyframes crewRing { 0% { opacity: 0; transform: scale(.7); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes crewBeam { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes crewHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
@keyframes crewBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes crewEyesOn { 0% { opacity: .15; } 30% { opacity: 1; } 38% { opacity: .2; } 46% { opacity: 1; } 100% { opacity: 1; } }

/* Pointer depth: plan cards and the crew stage tilt toward the pointer and catch a soft light.
   publicDepth.js writes --rx, --ry, --mx, --my only for a fine pointer with motion allowed. */
.plan-card[data-depth] {
  position: relative;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
}
.plan-card[data-depth]:hover { --lift: -4px; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift)); }
.plan-card[data-depth]::before,
.crew-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -20%), rgba(140, 240, 230, .1), transparent 45%);
  opacity: var(--sheen, 0);
  transition: opacity .3s var(--ease);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .crew-stage, .plan-card[data-depth] { transform: none !important; }
}