/* Load after geo-story.css. The stage, image, video and SVG share one 4:3 box.
   The story keeps its own scroll transform and --pin/--route/--fence variables. */
[data-geo-scene-life-figure] {
  --geo-scene-life-ink: #294a35;
  --geo-scene-life-muted: #52694c;
  --geo-scene-life-line: #c7d5bd;
  width: 100%;
  min-width: 0;
  margin: 0;
  align-self: center;
}

.geo-scene-life-stage[data-geo-scene-life] {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  overflow: hidden;
  /* geo-story.css applies darken to the old scene; video retains its own colors. */
  mix-blend-mode: normal;
}

.geo-scene-life-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  isolation: isolate;
  transform: none;
  transform-origin: 50% 50%;
  transition: transform 750ms cubic-bezier(.2, .7, .25, 1);
  /* Mask the complete composition once, including the video and map overlay. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent),
    linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent),
    linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.geo-scene-life-media > .geo-model-image,
.geo-scene-life-video,
.geo-scene-life-media > .geo-model-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

.geo-scene-life-media > .geo-model-image {
  z-index: 0;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}

.geo-scene-life-video {
  z-index: 1;
  opacity: 0;
  background: transparent;
  mix-blend-mode: normal;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.geo-scene-life-video-visible { opacity: 1; }

.geo-scene-life-media > .geo-model-overlay {
  z-index: 3;
  pointer-events: none;
}

.geo-scene-life-stage > .geo-model-label {
  z-index: 4;
  pointer-events: none;
}

.geo-scene-life-panel {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--geo-scene-life-line);
  color: var(--geo-scene-life-ink);
  background: var(--geo-paper, #f3f2ec);
}

.geo-scene-life-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.geo-scene-life-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 7px 9px;
  border: 1px solid #b8c9ac;
  border-radius: 3px;
  color: var(--geo-scene-life-ink);
  background: #edf2e5;
  font: 500 11px/1.35 'Host Grotesk', Arial, sans-serif;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
}

.geo-scene-life-number {
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.geo-scene-life-choice-label { min-width: 0; }

.geo-scene-life-choice[aria-pressed='true'] {
  border-color: #315a3c;
  color: #f5f7ed;
  background: #315a3c;
}

.geo-scene-life-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}

.geo-scene-life-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--geo-scene-life-ink);
  font: 500 11px/1.35 'Host Grotesk', Arial, sans-serif;
  cursor: pointer;
}

.geo-scene-life-toolbar > .geo-scene-life-control:first-child { border-color: #adbf9f; }
.geo-scene-life-overview { margin-left: auto; }

.geo-scene-life-control[aria-disabled='true'] {
  border-color: transparent;
  color: #64745a;
  cursor: default;
}

.geo-scene-life-status {
  min-width: 0;
  min-height: 14px;
  margin: 0;
  overflow: hidden;
  color: var(--geo-scene-life-muted);
  font-size: 10px;
  line-height: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.geo-scene-life-choice:focus-visible,
.geo-scene-life-control:focus-visible {
  position: relative;
  z-index: 5;
  outline: 2px solid #294b33;
  outline-offset: 3px;
}

[data-geo-scene-life-figure] > figcaption {
  margin: 7px 0 0;
  padding: 0;
  color: #66725f;
  font-size: 9px;
  line-height: 1.4;
  text-align: center;
}

/* Cap width instead of squeezing height: video and SVG retain identical geometry.
   At 1280x800 the stage is 560x420; the controls remain outside its transform. */
.geo-scene-life-story.is-scroll-story .geo-scene-life-stage {
  width: min(100%, max(240px, calc((100svh - 380px) * 1.333333)));
}

@media (hover: hover) {
  .geo-scene-life-choice:not([aria-pressed='true']):hover {
    border-color: #809d70;
    background: #dce8d1;
  }
  .geo-scene-life-control:not([aria-disabled='true']):hover { background: #d7e4cd; }
}

@media (max-width: 1050px) {
  .geo-scene-life-panel { padding-right: 8px; padding-left: 8px; }
  .geo-scene-life-choice { gap: 5px; padding-right: 6px; padding-left: 6px; font-size: 10px; }
}

@media (max-width: 760px) {
  .geo-scene-life-story [data-geo-scene-life-figure] {
    width: 100%;
    max-width: 570px;
    margin: 0;
    flex-shrink: 0;
  }
  .geo-scene-life-story.is-scroll-story .geo-story-stage {
    padding-top: 18px;
    padding-bottom: 12px;
  }
  .geo-scene-life-story.is-scroll-story .geo-story-layout { justify-content: center; }
  .geo-scene-life-story.is-scroll-story .geo-story-copy {
    height: 212px;
    margin-top: 8px;
  }
  .geo-scene-life-story.is-scroll-story .geo-chapter-index { margin-bottom: 10px; }
  .geo-scene-life-story.is-scroll-story .geo-chapter h2 { font-size: 33px; }
  .geo-scene-life-story.is-scroll-story .geo-chapter > p {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.55;
  }
  .geo-scene-life-story.is-scroll-story .geo-chapter-detail {
    margin-top: 12px;
    padding-top: 10px;
    font-size: 9px;
    line-height: 1.5;
  }
  .geo-scene-life-story.is-scroll-story .geo-scene-life-stage {
    width: min(100%, max(208px, calc((100svh - 555px) * 1.333333)));
  }
  .geo-scene-life-panel { padding: 8px; }
  .geo-scene-life-choice { font-size: 10px; }
  .geo-scene-life-toolbar { gap: 4px; }
  .geo-scene-life-control { padding-right: 8px; padding-left: 8px; font-size: 10px; }
  .geo-scene-life-status { font-size: 9px; }
  [data-geo-scene-life-figure] > figcaption { font-size: 8px; }
}

@media (max-width: 350px) {
  .geo-scene-life-choices { gap: 4px; }
  .geo-scene-life-choice { gap: 4px; padding: 6px 5px; }
  .geo-scene-life-number { font-size: 7px; }
  .geo-scene-life-control { min-width: 60px; padding-right: 6px; padding-left: 6px; }
  .geo-scene-life-story.is-scroll-story .geo-story-copy { height: 230px; }
  .geo-scene-life-story.is-scroll-story .geo-chapter h2 { font-size: 31px; }
  .geo-scene-life-story.is-scroll-story .geo-scene-life-stage {
    width: min(100%, max(192px, calc((100svh - 575px) * 1.333333)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .geo-scene-life-media { transform: none !important; transition: none; }
  .geo-scene-life-video,
  .geo-scene-life-choice,
  .geo-scene-life-control { transition: none; }
}