/* =============================================================
   Embedded 3D worlds.

   A project page shows a still of its world with an "enter" button.
   On click, world-embed.js loads the standalone 3D page into a frame
   (with ?embed=1, so that page hides its own chrome and reports its
   height). The frame is "live" while the reader is in it; when they
   scroll away, press Esc inside it, or click Release, a veil takes
   the pointer back so the page keeps scrolling normally.

   Palette: each page's own --rule / --mono / --gold tokens.
   ============================================================= */
.world-section { --world-h: clamp(480px, 45vw, 760px); }

.world-frame {
  position: relative;
  margin-top: clamp(28px, 4vw, 48px);
  min-height: var(--world-h);
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #1a1410;
}
.world-frame iframe {
  display: block;
  width: 100%;
  height: var(--world-h);
  border: 0;
  background: transparent;
  transition: height .3s ease;
}
.world-frame.is-locked iframe { pointer-events: none; }

.world-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: opacity .7s ease;
}
.world-frame.is-live .world-poster { opacity: 0; pointer-events: none; }

.world-enter {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(10, 6, 3, .04), rgba(10, 6, 3, .42));
  color: #fffaf1;
  cursor: pointer;
  font: inherit;
  text-align: center;
}
.world-enter span {
  padding: 15px 24px;
  border: 1px solid rgba(255, 250, 241, .72);
  border-radius: 999px;
  background: rgba(20, 14, 10, .58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font: 11px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
.world-enter small {
  font: 10px/1.5 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .78;
}
.world-enter:hover span, .world-enter:focus-visible span { background: rgba(20, 14, 10, .86); transform: translateY(-1px); }
.world-enter:focus-visible { outline: 2px solid var(--gold, #c8a85a); outline-offset: -4px; }
.world-enter.is-loading span { opacity: .7; }
.world-enter[hidden] { display: none; }

.world-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}
.world-veil span {
  padding: 11px 17px;
  border-radius: 999px;
  background: rgba(20, 14, 10, .76);
  color: #fffaf1;
  font: 10px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.world-veil:hover span, .world-veil:focus-visible span { opacity: 1; transform: none; }
.world-veil:focus-visible { outline: 2px solid var(--gold, #c8a85a); outline-offset: -4px; }
.world-veil[hidden] { display: none; }

.world-foot {
  margin: 14px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 22px;
  flex-wrap: wrap;
  font: 10px/1.6 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.world-foot a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.world-foot [data-world-status] { opacity: .68; }
.world-foot [data-world-status]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  vertical-align: 1px;
}
.world-frame.is-live + .world-foot [data-world-status]::before { background: #4f9c5f; opacity: 1; }
.world-frame.is-live.is-locked + .world-foot [data-world-status]::before { background: var(--gold, #c8a85a); }
.world-foot button {
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.world-foot button:hover { border-color: currentColor; }
.world-foot button[hidden] { display: none; }
.world-foot-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .world-frame iframe, .world-poster, .world-enter span, .world-veil span { transition: none; }
}