/*
 * Mission Log visual pass
 *
 * Product-design layer for turning the homepage from a structured log into
 * a more intentional personal mission dossier. Loaded last by the visual
 * polish plugin, so it only overrides the homepage presentation layer.
 */

.mission-log-home {
  position: relative;
  isolation: isolate;
  max-width: min(100%, 72rem);
  margin-top: clamp(1rem, 3vw, 2rem);
}

.mission-log-home::before {
  content: "";
  position: absolute;
  inset: -1rem -2rem auto;
  z-index: -1;
  height: clamp(18rem, 38vw, 32rem);
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--hao-mission-accent) 16%, transparent), transparent 30%),
    radial-gradient(circle at 78% 8%, color-mix(in srgb, var(--hao-mission-accent) 10%, transparent), transparent 28%);
  opacity: 0.78;
  pointer-events: none;
}

.mission-cover {
  min-height: clamp(30rem, 68vh, 43rem);
  padding: clamp(1.2rem, 4vw, 3.5rem);
  border-color: color-mix(in srgb, var(--hao-mission-accent) 26%, var(--hao-border-subtle));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--hao-mission-accent) 5%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--hao-mission-accent) 4%, transparent) 1px, transparent 1px),
    radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--hao-mission-accent) 18%, transparent), transparent 26%),
    linear-gradient(135deg, var(--hao-surface-base), color-mix(in srgb, var(--hao-surface-base) 82%, var(--hao-mission-soft)) 58%, var(--hao-surface-soft));
  background-size: 34px 34px, 34px 34px, auto, auto;
}

.mission-cover::after {
  opacity: 0.24;
}

.mission-cover__layout {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: inherit;
  grid-template-columns: minmax(0, 1.14fr) minmax(17rem, 0.86fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}

.mission-cover__copy {
  max-width: 48rem;
}

.mission-cover h1 {
  max-width: 13ch;
  font-size: clamp(3.1rem, 7.4vw, 6.35rem);
  line-height: 0.92;
  letter-spacing: -0.075em;
}

.mission-cover__subtitle {
  max-width: 36rem;
  margin-top: 1.2rem;
  font-size: clamp(1.16rem, 2vw, 1.52rem);
}

.mission-cover__note {
  max-width: 35rem;
  font-size: 0.98rem;
}

.mission-cover__visual {
  position: relative;
  overflow: hidden;
  min-height: 24rem;
  border: 1px solid var(--hao-mission-line);
  border-radius: calc(var(--hao-radius-lg) + 10px);
  padding: clamp(1rem, 2.5vw, 1.4rem);
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--hao-mission-accent) 18%, transparent), transparent 31%),
    linear-gradient(135deg, color-mix(in srgb, var(--hao-surface-base) 88%, var(--hao-mission-soft)), var(--hao-surface-soft));
  box-shadow: 0 24px 80px color-mix(in srgb, var(--hao-mission-accent) 12%, transparent);
}

.mission-cover__visual::before,
.mission-cover__visual::after {
  content: "";
  position: absolute;
  inset: 1.15rem;
  border: 1px solid color-mix(in srgb, var(--hao-mission-accent) 22%, transparent);
  border-radius: 50%;
}

.mission-cover__visual::after {
  inset: 4rem 2.6rem 2.2rem 3.7rem;
  transform: rotate(-18deg);
  border-style: dashed;
  opacity: 0.72;
}

.mission-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mission-orbit span {
  position: absolute;
  width: 0.58rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--hao-mission-accent);
  box-shadow: 0 0 0 0.42rem var(--hao-mission-soft);
}

.mission-orbit span:nth-child(1) {
  top: 26%;
  left: 28%;
}

.mission-orbit span:nth-child(2) {
  right: 24%;
  bottom: 33%;
}

.mission-orbit span:nth-child(3) {
  top: 58%;
  left: 52%;
}

.mission-cover__metadata {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.62rem;
  margin: 0;
}

.mission-cover__metadata div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1fr);
  gap: 0.8rem;
  border-bottom: 1px solid var(--hao-border-subtle);
  padding-bottom: 0.62rem;
}

.mission-cover__metadata dt {
  color: var(--hao-mission-accent);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mission-cover__metadata dd {
  margin: 0;
  color: var(--global-text-color, #111827);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: right;
}

.mission-cover__chips {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  left: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.mission-cover__chips span {
  border: 1px solid var(--hao-mission-line);
  border-radius: 999px;
  padding: 0.28rem 0.58rem;
  background: color-mix(in srgb, var(--hao-surface-base) 72%, transparent);
  color: var(--hao-mission-accent);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mission-index {
  display: grid;
  grid-template-columns: minmax(13rem, 0.42fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 1.6rem);
  align-items: start;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  background: color-mix(in srgb, var(--hao-surface-base) 90%, var(--hao-mission-soft));
}

.mission-index > .mission-section-kicker,
.mission-index > h2,
.mission-index > p {
  grid-column: 1;
}

.mission-index__grid {
  grid-column: 2;
  margin-top: 0;
}

.mission-index__item {
  position: relative;
  overflow: hidden;
}

.mission-index__item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--hao-mission-line);
}

.mission-section {
  margin-top: clamp(1.1rem, 2.5vw, 1.55rem);
  padding: clamp(1.25rem, 3.2vw, 2rem);
}

.mission-section::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 3.25rem;
  height: 1px;
  background: var(--hao-mission-line);
}

.mission-section h2 {
  max-width: 16ch;
  font-size: clamp(1.55rem, 3.2vw, 2.45rem);
  line-height: 1;
}

.mission-section__intro,
.deployments-group__header p,
.research-record__body p,
.field-observation p,
.career-phase p,
.operations-log__body p {
  font-size: 0.94rem;
  line-height: 1.56;
}

.operations-log {
  gap: 0;
  border-left: 1px solid var(--hao-mission-line);
  margin-left: 0.35rem;
  padding-left: 1rem;
}

.operations-log__entry {
  position: relative;
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 1rem 0;
  background: transparent;
}

.operations-log__entry::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -1.27rem;
  width: 0.5rem;
  aspect-ratio: 1;
  border: 2px solid var(--hao-mission-accent);
  border-radius: 50%;
  background: var(--hao-surface-base);
}

.operations-log__entry:last-child {
  border-bottom: 0;
}

.deployments-grid,
.field-observations {
  gap: 1rem;
}

.deployments-group:first-child .deployments-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

.deployments-group:first-child .deployment-card:first-child {
  grid-row: span 2;
  padding: clamp(1.1rem, 3vw, 1.45rem);
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--hao-mission-accent) 16%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--hao-surface-base) 86%, var(--hao-mission-soft)), var(--hao-surface-soft));
}

.deployments-group:first-child .deployment-card:first-child h4 {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  letter-spacing: -0.03em;
}

.deployment-card,
.research-record,
.field-observation,
.career-phase {
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.deployment-card:hover,
.research-record:hover,
.field-observation:hover,
.career-phase:hover {
  border-color: var(--hao-mission-line);
  box-shadow: var(--hao-shadow-card-hover);
  transform: translateY(-1px);
}

.research-records {
  gap: 0.9rem;
}

.research-record {
  grid-template-columns: minmax(8rem, 0.22fr) minmax(0, 1fr);
  background: linear-gradient(90deg, color-mix(in srgb, var(--hao-mission-accent) 5%, transparent), transparent 54%), var(--hao-surface-base);
}

.field-observations {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.field-observation:first-child {
  grid-row: span 2;
}

.career-trajectory {
  position: relative;
  gap: 0;
  border-left: 1px solid var(--hao-mission-line);
  margin-left: 0.35rem;
  padding-left: 1rem;
}

.career-phase {
  position: relative;
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 1rem 0;
  background: transparent;
}

.career-phase::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: -1.27rem;
  width: 0.48rem;
  aspect-ratio: 1;
  border: 2px solid var(--hao-mission-accent);
  border-radius: 50%;
  background: var(--hao-surface-base);
}

.career-phase:last-child {
  border-bottom: 0;
}

.mission-back-cover {
  padding: clamp(1.7rem, 4vw, 2.45rem);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--hao-mission-accent) 18%, transparent), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--hao-mission-accent) 6%, var(--hao-surface-base)), var(--hao-surface-soft));
}

.mission-back-cover h2 {
  max-width: none;
  font-size: clamp(2rem, 5vw, 3.2rem);
}

.back-cover-links a {
  background: color-mix(in srgb, var(--hao-surface-base) 78%, transparent);
}

@media (max-width: 991px) {
  .mission-cover__layout,
  .mission-index {
    grid-template-columns: 1fr;
  }

  .mission-index > .mission-section-kicker,
  .mission-index > h2,
  .mission-index > p,
  .mission-index__grid {
    grid-column: auto;
  }

  .mission-cover__visual {
    min-height: 16rem;
  }
}

@media (max-width: 767px) {
  .mission-cover {
    min-height: auto;
  }

  .mission-cover h1 {
    max-width: 11ch;
    font-size: clamp(2.75rem, 17vw, 4.25rem);
  }

  .mission-cover__metadata div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .mission-cover__metadata dd {
    text-align: left;
  }

  .deployments-group:first-child .deployments-grid,
  .field-observations {
    grid-template-columns: 1fr;
  }

  .field-observation:first-child,
  .deployments-group:first-child .deployment-card:first-child {
    grid-row: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deployment-card,
  .research-record,
  .field-observation,
  .career-phase {
    transform: none !important;
    transition: none !important;
  }
}