/* Scoped enhancement. main.css remains the fallback without this controller. */
.transformation-field {
  --space-story-enabled: 1;
}

.transformation-field.space-story .space-story__track,
.transformation-field.space-story .space-story__stage {
  display: contents;
}

.transformation-field.space-story .space-story__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}

.transformation-field.space-story .space-story__source-image {
  position: absolute;
  inset: 0;
}

.transformation-field.space-story .space-story__snapshot {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.transformation-field.space-story .space-story__scene img {
  display: block;
  opacity: 1;
  transform: translateY(var(--space-story-lift, 0px)) scale(1.015);
  transition: none;
}

.transformation-field.space-story--ready .space-story__source-image {
  opacity: 0;
  transition: none;
}

.transformation-field.space-story--ready .space-story__source-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.transformation-field.space-story .space-story__caption {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  display: grid;
  gap: 0.35rem;
  max-width: 25rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-sm);
}

.transformation-field.space-story .space-story__caption span {
  margin: 0;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.075em;
  line-height: 1.35;
  text-transform: uppercase;
}

.transformation-field.space-story .space-story__caption [data-space-caption-label] {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.transformation-field.space-story .space-story__caption [data-space-caption-text] {
  color: rgba(255, 255, 255, 0.78);
}

/* Each frame retains the original image treatment, including its quiet overlay. */
.transformation-field.space-story .space-story__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.28)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0));
}

.transformation-field.space-story--ready .transformation-field__visual::after {
  display: none;
}

.transformation-field .space-story__details {
  display: none;
}

.transformation-field.space-story--layout .space-story__track {
  display: block;
  grid-column: 1 / -1;
  min-width: 0;
}

.transformation-field.space-story--layout .space-story__stage {
  --space-story-columns: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(0.65rem, 1.8vh, 1.3rem);
  height: min(var(--space-story-height, var(--space-story-available)), 52rem);
  min-width: 0;
  padding-block-end: env(safe-area-inset-bottom, 0px);
}

@supports (height: 100dvh) {
  .transformation-field.space-story--layout .space-story__stage {
    height: min(var(--space-story-height, var(--space-story-available)), calc(100dvh - var(--space-story-top) - var(--space-story-gap)), 52rem);
  }
}

.transformation-field.space-story--pinned .space-story__track {
  height: var(--space-story-track-height);
}

.transformation-field.space-story--pinned .space-story__stage {
  position: sticky;
  top: var(--space-story-top);
}

.transformation-field.space-story--layout .transformation-field__copy {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 0;
  gap: clamp(0.4rem, 1vh, 0.75rem);
  padding-block-end: clamp(0.5rem, 1.2vh, 0.875rem);
}

.transformation-field.space-story--layout .transformation-field__copy h2 {
  font-size: clamp(1.5rem, 5.7vw, 2.3rem);
}

.transformation-field.space-story--layout .transformation-field__copy p:not(.system-label) {
  margin-block-start: 0;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.18rem);
  line-height: 1.45;
}

.transformation-field.space-story--layout .transformation-field__body {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  align-self: start;
  gap: 0.6rem;
}

.transformation-field.space-story--layout .transformation-field__visual {
  grid-column: 1;
  grid-row: 3;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin-block-start: 0;
  aspect-ratio: auto;
}

/* Four touch targets and a stable active-copy area above the visual. The
   original tab labels remain available to assistive technology. */
@media (max-width: 43.999rem), (max-height: 560px) {
  .transformation-field.space-story--layout .use-map {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
    border-top: 0;
  }

  .transformation-field.space-story--layout .use-map li {
    border: var(--line-light);
  }

  .transformation-field.space-story--layout .use-tab {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    min-height: 2.75rem;
    padding: 0.5rem;
    transform: none;
  }

  .transformation-field.space-story--layout .use-tab__number {
    grid-column: 1;
    font-size: 0.85rem;
  }

  .transformation-field.space-story--layout .use-tab__content,
  .transformation-field.space-story--layout .use-tab__action {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .transformation-field.space-story--layout .use-tab::after {
    display: none;
  }

  .transformation-field.space-story--layout .space-story__details {
    display: grid;
    min-width: 0;
  }

  .transformation-field.space-story--layout .space-story__detail {
    display: grid;
    grid-area: 1 / 1;
    align-content: start;
    gap: 0.25rem;
    opacity: 0;
    transform: translateY(3px);
    pointer-events: none;
    transition: opacity 180ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .transformation-field.space-story--layout .space-story__detail.is-active {
    opacity: 1;
    transform: none;
  }

  .transformation-field.space-story--layout .space-story__detail-label {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .transformation-field.space-story--layout .space-story__detail p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.35;
  }

  .transformation-field.space-story--layout .space-story__caption {
    inset: auto 0.8rem 0.75rem;
  }

  /* Avoid repeating the active copy over a small image; retain slide labels. */
  .transformation-field.space-story--layout .space-story__caption [data-space-caption-label],
  .transformation-field.space-story--layout .space-story__caption [data-space-caption-text] {
    display: none;
  }
}

/* Desktop and tablet keep the visual on the left and the existing selectors
   and text on the right. The whole intro belongs to the same sticky stage. */
@media (min-width: 44rem) and (min-height: 560.001px) {
  .transformation-field.space-story--layout .transformation-field__copy {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(1.55rem, 3.2vw, 2.8rem);
    max-width: none;
  }

  .transformation-field.space-story--layout .transformation-field__copy .system-label {
    grid-column: 1;
    grid-row: 1;
  }

  .transformation-field.space-story--layout .transformation-field__copy h2 {
    grid-column: 1;
    grid-row: 2;
    font-size: var(--text-2xl);
  }

  .transformation-field.space-story--layout .transformation-field__copy p:not(.system-label) {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
  }

  .transformation-field.space-story--layout .space-story__stage {
    --space-story-columns: 2;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(1.55rem, 3.2vw, 2.8rem);
    align-items: stretch;
  }

  .transformation-field.space-story--layout .transformation-field__body {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }

  .transformation-field.space-story--layout .use-tab {
    min-height: clamp(4.25rem, 9.5vh, 5.25rem);
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    gap: 0.55rem;
    padding: 0.65rem;
  }

  .transformation-field.space-story--layout .use-tab__action {
    display: none;
  }

  .transformation-field.space-story--layout .transformation-field__visual {
    grid-column: 1;
    grid-row: 2;
  }
}

@media (max-height: 700px) and (max-width: 43.999rem) {
  .transformation-field.space-story--layout .space-story__stage {
    gap: 0.6rem;
  }

  .transformation-field.space-story--layout .transformation-field__copy {
    gap: 0.4rem;
  }

  .transformation-field.space-story--layout .transformation-field__copy h2 {
    font-size: 1.5rem;
  }

  .transformation-field.space-story--layout .transformation-field__copy p:not(.system-label) {
    font-size: 0.9375rem;
    line-height: 1.35;
  }

  .transformation-field.space-story--layout .transformation-field__body {
    gap: 0.4rem;
  }

  .transformation-field.space-story--layout .space-story__detail p {
    font-size: 0.875rem;
  }
}

/* Landscape phones and short windows keep copy above the image, using a
   compact selector row instead of letting four full rows overflow the stage. */
@media (max-height: 560px) and (min-width: 44rem) {
  .transformation-field.space-story--layout .space-story__stage {
    gap: 0.6rem;
  }

  .transformation-field.space-story--layout .transformation-field__copy {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 1.5rem;
    gap: 0.3rem 1.5rem;
  }

  .transformation-field.space-story--layout .transformation-field__copy .system-label {
    grid-column: 1;
    grid-row: 1;
  }

  .transformation-field.space-story--layout .transformation-field__copy h2 {
    grid-column: 1;
    grid-row: 2;
    font-size: 1.5rem;
  }

  .transformation-field.space-story--layout .transformation-field__copy p:not(.system-label) {
    grid-column: 1;
    grid-row: 3;
    font-size: 0.875rem;
    line-height: 1.35;
  }

  .transformation-field.space-story--layout .transformation-field__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 0.3rem 1rem;
  }

  .transformation-field.space-story--layout .use-map__label {
    grid-column: 1;
  }

  .transformation-field.space-story--layout .use-map {
    grid-column: 1;
  }

  .transformation-field.space-story--layout .space-story__details {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .transformation-field.space-story .space-story__scene img,
  .transformation-field.space-story .space-story__detail {
    transform: none;
    transition: none;
  }
}

/* Mobile reading order: intro, active step, visual, bespoke-path selectors.
   Keep the existing sticky stage and its scroll/snap geometry intact. */
@media (max-width: 43.999rem) {
  .transformation-field.space-story--layout .space-story__stage {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    row-gap: clamp(1.1rem, 2.8dvh, 1.5rem);
    /* Keep the existing floating privacy control clear of the selector row. */
    padding-block-end: max(3rem, env(safe-area-inset-bottom, 0px));
  }

  .transformation-field.space-story--layout .space-story__details {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
  }

  .transformation-field.space-story--layout .transformation-field__visual {
    grid-row: 3;
  }

  .transformation-field.space-story--layout .transformation-field__body {
    grid-row: 4;
  }
}

@media (max-width: 43.999rem) and (max-height: 700px) {
  .transformation-field.space-story--layout .space-story__stage {
    row-gap: 0.75rem;
  }
}