/* Future scenes: editorial 2D picture atlas. This file intentionally retires
   the earlier WebGL/isometric-stage treatment without disturbing other chapters. */
#future.future-lab {
  --future-ink: #233f78;
  --future-muted: #68799a;
  --future-rule: rgba(55, 89, 145, .18);
  --future-paper: rgba(252, 252, 249, .78);
  background:
    radial-gradient(circle at 82% 10%, rgba(211, 227, 247, .46), transparent 30%),
    linear-gradient(180deg, rgba(241, 246, 250, .72), rgba(248, 247, 241, .88));
}

#future .future-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px;
  width: min(1160px, calc(100% - 40px));
  height: auto;
  min-height: 0;
  margin: 42px auto 0;
  padding: 0 0 8px;
  overflow: visible;
  perspective: none;
  transform: none;
  background: none;
  border: 0;
  box-shadow: none;
}

#future .future-three-canvas,
#future .future-sky-decor,
#future .future-depth,
#future .future-road-network,
#future .world-svg,
#future .future-stage-note {
  display: none !important;
}

#future .world-trigger::before,
#future .world-trigger::after,
#future .world-label::before,
#future .world-label::after {
  display: none !important;
  content: none !important;
}

#future .future-world {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  transform: none !important;
  opacity: 1;
  filter: none;
  border: 1px solid var(--future-rule);
  border-radius: 22px;
  overflow: hidden;
  background: var(--future-paper);
  box-shadow: 0 20px 55px rgba(39, 62, 101, .07);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

#future .future-world:hover,
#future .future-world:focus-within {
  border-color: rgba(50, 89, 153, .36);
  box-shadow: 0 24px 64px rgba(39, 62, 101, .11);
}

#future .world-home { grid-column: 1 / -1; }
#future .world-office,
#future .world-restaurant { grid-column: span 6; }
#future .world-transit { grid-column: 1 / span 7; }
#future .world-entertainment { grid-column: 8 / -1; }

#future .world-trigger {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-rows: minmax(270px, 1fr) auto;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0;
  overflow: hidden;
  color: var(--future-ink);
  text-align: left;
  background:
    linear-gradient(145deg, rgba(224, 235, 249, .72), rgba(252, 248, 243, .84));
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transform: none !important;
  box-shadow: none;
}

#future .world-home .world-trigger {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  grid-template-rows: minmax(390px, 1fr);
}

#future .world-scene-image {
  position: relative;
  inset: auto;
  z-index: 1;
  order: 1;
  display: block !important;
  width: 100%;
  height: 100%;
  min-height: 270px;
  padding: 24px 28px 10px;
  object-fit: contain;
  opacity: 1 !important;
  filter: saturate(.72) contrast(.96) brightness(1.03) !important;
  transform: none !important;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}

#future .world-home .world-scene-image {
  min-height: 390px;
  padding: 28px 30px 20px;
}

#future .world-trigger:hover .world-scene-image,
#future .world-trigger:focus-visible .world-scene-image {
  transform: translateY(-5px) scale(1.018) !important;
  filter: saturate(.82) contrast(.98) brightness(1.02) !important;
}

#future .world-label {
  position: relative !important;
  inset: auto !important;
  z-index: 2;
  order: 2;
  display: grid !important;
  grid-template-columns: 1fr auto;
  gap: 8px 20px;
  align-content: center;
  min-height: 126px !important;
  padding: 22px 26px 24px;
  color: var(--future-ink);
  background: rgba(252, 251, 247, .72);
  border-top: 1px solid var(--future-rule);
  backdrop-filter: blur(14px);
  transform: none;
}

#future .world-home .world-label {
  align-content: end;
  min-height: 390px;
  padding: 42px 34px;
  border-top: 0;
  border-left: 1px solid var(--future-rule);
}

#future .world-label small {
  grid-column: 1 / -1;
  font: 600 12px/1.4 var(--mono, monospace);
  letter-spacing: .12em;
  color: var(--future-muted);
}

#future .world-label strong {
  font-family: var(--serif, serif) !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  font-weight: 400 !important;
  line-height: 1.18 !important;
  color: var(--future-ink);
}

#future .world-label i {
  align-self: end;
  padding-bottom: 4px;
  font: 500 12px/1.4 var(--mono, monospace);
  letter-spacing: .08em;
  color: var(--future-muted);
}

#future .world-detail {
  position: relative !important;
  inset: auto !important;
  z-index: 2;
  display: none;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 28px 30px 30px;
  color: var(--future-ink);
  background: rgba(245, 248, 250, .96);
  border-top: 1px solid var(--future-rule);
  opacity: 1;
  transform: none;
}

#future .future-world.is-active .world-detail { display: block; }
#future .world-detail[aria-hidden="true"] { display: none; }

#future .world-back {
  float: right;
  min-height: 38px;
  padding: 0 14px;
  color: var(--future-ink);
  font-size: 12px;
  background: rgba(255,255,255,.64);
  border: 1px solid var(--future-rule);
  border-radius: 999px;
  cursor: pointer;
}

#future .world-detail > p:first-of-type {
  margin: 0 0 12px;
  font: 600 12px/1.4 var(--mono, monospace);
  letter-spacing: .12em;
  color: var(--future-muted);
}

#future .world-detail h3 {
  margin: 0 0 12px;
  font: 400 clamp(24px, 2.4vw, 34px)/1.25 var(--serif, serif);
  color: var(--future-ink);
}

#future .world-copy {
  max-width: 620px;
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--future-muted);
}

#future .world-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

#future .world-modes button {
  min-height: 38px;
  padding: 0 16px;
  color: var(--future-muted);
  font-size: 12px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--future-rule);
  border-radius: 999px;
  cursor: pointer;
}

#future .world-modes button.is-active {
  color: #fff;
  background: var(--future-ink);
  border-color: var(--future-ink);
}

@media (max-width: 820px) {
  #future .future-stage {
    grid-template-columns: 1fr;
    gap: 18px;
    width: min(100% - 28px, 680px);
    margin-top: 30px;
  }
  #future .world-home,
  #future .world-office,
  #future .world-restaurant,
  #future .world-transit,
  #future .world-entertainment { grid-column: 1; }
  #future .world-home .world-trigger {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(280px, 1fr) auto;
  }
  #future .world-home .world-scene-image { min-height: 280px; }
  #future .world-home .world-label {
    min-height: 126px;
    padding: 22px 24px 24px;
    border-top: 1px solid var(--future-rule);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #future .future-world,
  #future .world-scene-image { transition: none; }
}

/* 2D editorial scenes — open composition, deliberately not card-based. */
#future .future-stage {
  display: block;
  padding: 16px 0 48px;
}

#future .future-world,
#future .future-world:hover,
#future .future-world:focus-within {
  overflow: visible;
  margin-top: 72px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#future .world-home { width: 100% !important; margin-top: 8px; }
#future .world-transit { width: 91% !important; margin-left: auto; }
#future .world-office { width: 88% !important; }
#future .world-restaurant { width: 94% !important; margin-left: auto; }
#future .world-entertainment { width: 86% !important; margin-left: 7%; }

#future .world-trigger,
#future .world-home .world-trigger {
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  grid-template-rows: minmax(350px, auto);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
  overflow: visible;
  background: transparent;
}

#future .world-transit .world-trigger,
#future .world-restaurant .world-trigger {
  grid-template-columns: minmax(300px, .92fr) minmax(0, 1.08fr);
}

#future .world-trigger::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  z-index: 0;
  width: min(62%, 620px);
  aspect-ratio: 1.55;
  left: 3%;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(204, 221, 242, .5), rgba(231, 226, 242, .18) 52%, transparent 73%);
  filter: blur(12px);
  transform: translateY(-50%);
  pointer-events: none;
}

#future .world-transit .world-trigger::before,
#future .world-restaurant .world-trigger::before {
  right: 1%;
  left: auto;
}

#future .world-scene-image,
#future .world-home .world-scene-image {
  width: 100% !important;
  height: 350px !important;
  min-height: 350px;
  padding: 16px;
  filter: none !important;
  transform: translate3d(0, 0, 0) scale(.94) !important;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1) !important;
}

#future .world-trigger:hover .world-scene-image,
#future .world-trigger:focus-visible .world-scene-image {
  filter: none !important;
  transform: translate3d(0, -3px, 0) scale(.97) !important;
}

#future .world-label,
#future .world-home .world-label {
  width: 100% !important;
  height: auto !important;
  grid-template-columns: 1fr;
  gap: 12px;
  align-content: center;
  min-height: 0 !important;
  padding: 30px 0;
  background: transparent;
  border-top: 1px solid var(--future-rule);
  border-left: 0;
  backdrop-filter: none;
}

#future .world-transit .world-label,
#future .world-restaurant .world-label { order: 1; }

#future .world-transit .world-scene-image,
#future .world-restaurant .world-scene-image { order: 2; }

#future .world-label i {
  display: inline-block !important;
  opacity: 1 !important;
  align-self: start;
  justify-self: start;
}

#future .world-summary {
  display: block;
  max-width: 31em;
  font-size: 14px;
  line-height: 1.85;
  color: var(--future-muted);
}

#future .world-detail {
  margin: 22px 0 0;
  padding: 30px 0 12px;
  background: transparent;
}

@media (max-width: 820px) {
  #future .future-stage { padding-top: 0; }
  #future .world-home,
  #future .world-office,
  #future .world-restaurant,
  #future .world-transit,
  #future .world-entertainment {
    width: 100% !important;
    margin: 52px 0 0;
  }
  #future .world-home { margin-top: 0; }
  #future .world-trigger,
  #future .world-home .world-trigger,
  #future .world-transit .world-trigger,
  #future .world-restaurant .world-trigger {
    grid-template-columns: 1fr;
    grid-template-rows: 230px auto;
    gap: 6px;
  }
  #future .world-scene-image,
  #future .world-home .world-scene-image,
  #future .world-transit .world-scene-image,
  #future .world-restaurant .world-scene-image {
    order: 1;
    height: 230px !important;
    min-height: 230px;
    padding: 8px;
  }
  #future .world-label,
  #future .world-home .world-label,
  #future .world-transit .world-label,
  #future .world-restaurant .world-label {
    order: 2;
    min-height: 0 !important;
    padding: 24px 0 28px;
    border-top: 1px solid var(--future-rule);
    border-left: 0;
  }
  #future .world-trigger::before,
  #future .world-transit .world-trigger::before,
  #future .world-restaurant .world-trigger::before {
    width: 92%;
    left: 4%;
    right: auto;
    top: 31%;
  }
}