/* ==========================================================================
   05 · MORE WORK — my work around the world
   The end of the journey — the world map as an index of the films, documentaries and photography,
   by where they were made — on the Asia stage's own screen (its last steps: js/journey-stage.js;
   the atlas and the interaction: js/world.js). Its words come in over the world as the scroll
   arrives (--intro, 0 → 1, set by js/world.js); "Explore my work" opens it (.is-started); an
   entry chosen on a phone (.is-selected), flown to (.is-flying), arrived in (.is-region); the
   documentary's entry (.is-project) reads as one film, not a region.
   ========================================================================== */

.world {
  --intro: 0;
  position: absolute;
  inset: 0;
  z-index: 3;                      /* over the map; under the arrow (4) */
  pointer-events: none;
}

/* The map steps back behind the words, then comes forward when the visitor starts */
.world::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(28, 29, 31, 0.94) 0%, rgba(28, 29, 31, 0.8) 34%, rgba(28, 29, 31, 0.2) 64%, rgba(28, 29, 31, 0) 80%);
  opacity: var(--intro);
  pointer-events: none;
}

.world.is-started::before { opacity: 0; transition: opacity 1.2s var(--ease-out); }
/* (in a region, the same shade keeps its panel clear of whatever land lies under it) */
.world.is-started.has-panel::before { opacity: 0.85; transition: opacity 0.9s var(--ease-out); }

/* ---------- The words ---------- */

.world__intro {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  width: min(52rem, 56vw);
  opacity: var(--intro);
  transform: translate3d(0, calc(-50% + (1 - var(--intro)) * 32px), 0);
}

.world.is-started .world__intro {
  opacity: 0;
  transform: translate3d(0, calc(-50% - 36px), 0);
  transition: opacity 0.7s var(--ease-out), transform 1s var(--ease-out);
  visibility: hidden;
  transition-property: opacity, transform, visibility;
}

.world__title {
  margin-top: clamp(16px, 2vw, 26px);
  font-size: clamp(2.4rem, min(4.3vw, 8svh), 5.2rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--fg);
}

.world__title-line { display: block; font-weight: 200; color: var(--fg-muted); }

.world__lede {
  margin-top: clamp(20px, 2.4vw, 34px);
  max-width: 36ch;
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--fg);
}

.world__start {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(26px, 3vw, 40px);
  padding: 17px 26px 16px;
  border: 1px solid rgba(235, 233, 228, 0.55);
  background: transparent;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.world.is-ready:not(.is-started) .world__start { pointer-events: auto; }
.world__start span { transition: transform var(--dur) var(--ease-out); }

@media (hover: hover) {
  .world__start:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
  .world__start:hover span { transform: translateX(4px); }
}

/* Once started: a quiet line at the top, saying what to do */
.world__hint {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--header-h) + 18px);
  display: grid;
  gap: 10px;
  max-width: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.world__hint-text {
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.world__hint-sub {
  max-width: 30ch;
  font-size: 0.875rem;
  font-weight: 300;
  line-height: 1.5;
  color: var(--fg-muted);
}

.world.is-started:not(.is-region):not(.is-flying) .world__hint { opacity: 1; transition-delay: 0.35s; }

/* ---------- The regions' names (placed on the map by js/world.js) ---------- */

.world__regions { list-style: none; }

.world__region {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -17px;           /* (the name on its point; what it holds opens below it) */
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--fg-muted);
  text-align: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease-out), color 0.3s ease, visibility 0s linear 0.5s;
}

.world__region-name {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The documentary's entry: its title under its name, always (a project, not a region) */
.world__region-title {
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--fg);
}

/* What it holds, while it's in hand: the kind of work, its countries (or the film's credits), and
   where the click goes */
.world__region-more {
  display: grid;
  justify-items: center;
  gap: 5px;
  max-width: 17rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.world__region-kind {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
}

.world__region-countries {
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: var(--fg-muted);
}

.world__region-cta {
  margin-top: 3px;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
}

.world__region.is-hot { z-index: 1; color: var(--fg); background: rgba(28, 29, 31, 0.78); }
.world__region.is-hot .world__region-more { opacity: 1; }
.world__region:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }

.world.is-started:not(.is-region):not(.is-flying) .world__region {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.6s var(--ease-out), color 0.3s ease, visibility 0s;
}

/* one after another as the world opens */
.world.is-started li:nth-child(1) .world__region { transition-delay: 0.30s, 0s, 0s; }
.world.is-started li:nth-child(2) .world__region { transition-delay: 0.36s, 0s, 0s; }
.world.is-started li:nth-child(3) .world__region { transition-delay: 0.42s, 0s, 0s; }
.world.is-started li:nth-child(4) .world__region { transition-delay: 0.48s, 0s, 0s; }
.world.is-started li:nth-child(5) .world__region { transition-delay: 0.54s, 0s, 0s; }
.world.is-started li:nth-child(6) .world__region { transition-delay: 0.60s, 0s, 0s; }
.world.is-started li:nth-child(7) .world__region { transition-delay: 0.66s, 0s, 0s; }
.world.is-started li:nth-child(8) .world__region { transition-delay: 0.72s, 0s, 0s; }
.world.is-started li:nth-child(9) .world__region { transition-delay: 0.78s, 0s, 0s; }
.world.is-started li:nth-child(10) .world__region { transition-delay: 0.84s, 0s, 0s; }

/* ---------- A region: chosen, or arrived in ---------- */

.world__panel {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  width: min(31rem, 34vw);
  translate: 0 -50%;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out), visibility 0s linear 0.5s;
}

.world.has-panel .world__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.7s var(--ease-out) 0.1s, transform 0.9s var(--ease-out) 0.1s, visibility 0s;
}

.world__panel-name {
  margin-top: 16px;
  font-size: clamp(2.4rem, 4.2vw, 4.6rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--fg);
}

.world__panel-sub {
  margin-top: 16px;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  font-weight: 300;
  color: var(--fg);
}

/* (the documentary: its credits, like the film's own) */
.world.is-project .world__panel-sub { letter-spacing: 0.01em; }

.world__panel-note {
  margin-top: 18px;
  max-width: 34ch;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--fg-muted);
}

.world__panel-actions { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 26px; }

.world__go,
.world__enter,
.world__back {
  display: none;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  padding: 14px 20px 13px;
  border: 1px solid rgba(235, 233, 228, 0.45);
  background: transparent;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg);
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.world.is-selected .world__go,
.world.is-region .world__enter,
.world.is-region .world__back { display: inline-flex; }
.world.is-region .world__back { border-color: transparent; padding-inline: 0; }
.world__go:focus-visible, .world__enter:focus-visible, .world__back:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

/* Into the work — once its journey exists; until then it says so, quietly */
.world__enter.is-soon { cursor: default; color: var(--fg-muted); border-color: rgba(235, 233, 228, 0.2); }
.world__enter.is-soon::after {
  content: "Coming soon";
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid rgba(235, 233, 228, 0.2);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  color: var(--fg-dim);
}

/* The documentary: the film itself, in the site's player */
.world__watch { display: none; align-self: center; }
.world.is-region.is-project .world__watch:not([hidden]) { display: inline-block; }

@media (hover: hover) {
  .world__go:hover, .world__enter:not(.is-soon):hover { background: var(--fg); color: var(--bg); }
  .world__back:hover { color: var(--fg-muted); }
}

/* the note is for an entry arrived in; before going, the button */
.world:not(.is-region) .world__panel-note { display: none; }

.stage__screen.is-pointing { cursor: pointer; }

/* Where "Explore" in the menu lands (and where the menu lights it): the end of the Asia stage */
.stage__anchor--world {
  top: calc(var(--run) * 1vh);
  top: calc(var(--run) * 1svh);
  height: 100vh;
  height: 100svh;
}

.world__static { display: none; }

/* ---------- Phones (and tall portrait screens) ---------- */

@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .world::before { background: linear-gradient(180deg, rgba(28, 29, 31, 0.9) 0%, rgba(28, 29, 31, 0.86) 62%, rgba(28, 29, 31, 0.55) 100%); }
  .world.is-started.has-panel::before { background: linear-gradient(0deg, rgba(28, 29, 31, 0.96) 0%, rgba(28, 29, 31, 0.9) 28%, rgba(28, 29, 31, 0) 44%); opacity: 1; }

  .world__intro {
    left: var(--gutter);
    right: var(--gutter);
    top: calc(var(--header-h) + 8svh);
    width: auto;
    transform: translate3d(0, calc((1 - var(--intro)) * 28px), 0);
  }
  .world.is-started .world__intro { transform: translate3d(0, -30px, 0); }
  .world__title { font-size: clamp(2.1rem, 9.6vw, 3.2rem); }
  .world__lede { font-size: 1.0625rem; }
  .world__start { padding: 17px 24px 16px; }

  .world__hint { top: calc(var(--header-h) + 14px); gap: 8px; }
  .world__hint-text { font-size: 1.35rem; }
  .world__hint-sub { display: none; }            /* (the names below say it; the map needs the room) */

  /* The regions' names as clear targets in rows above and below the map, each joined to its
     region by a fine line */
  .world__region {
    translate: -50% -50%;
    min-height: 34px;
    padding: 8px 11px;
    border: 1px solid rgba(235, 233, 228, 0.22);
    background: rgba(28, 29, 31, 0.78);
  }
  .world__region { gap: 3px; }
  .world__region-name { font-size: 0.625rem; letter-spacing: 0.18em; }
  .world__region-title { font-size: 0.6875rem; }
  .world__region-more { display: none; }
  .world__region.is-hot { border-color: var(--fg); background: rgba(235, 233, 228, 0.12); }

  /* The chosen region: its panel at the foot of the screen */
  .world__panel {
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: max(22px, 3svh);
    width: auto;
    translate: none;
  }
  .world__panel-name { margin-top: 10px; font-size: clamp(2rem, 9vw, 2.8rem); }
  .world__panel-sub { margin-top: 10px; font-size: 0.9375rem; }
  .world__go, .world__enter, .world__back { letter-spacing: 0.16em; }
  /* (not yet: said under the button's words, which keeps it inside the screen) */
  .world__enter.is-soon { flex-wrap: wrap; row-gap: 6px; }
  .world__enter.is-soon::after { flex-basis: 100%; margin: 0; padding: 0; border: 0; text-align: left; }
  .world__panel-actions { gap: 10px 22px; }
  .world__panel-note { margin-top: 12px; }
  .world__panel-actions { margin-top: 16px; }
}

/* ---------- Static version: reduced motion, no JS — the atlas and the regions, as a list ---------- */

.stage.is-static .world,
html:not(.js) .world {
  position: relative;
  inset: auto;
  order: 5;
  display: grid;
  gap: 32px;
  pointer-events: auto;
}

.stage.is-static .world::before,
html:not(.js) .world::before,
.stage.is-static .world__hint,
html:not(.js) .world__hint,
.stage.is-static .world__panel,
html:not(.js) .world__panel,
.stage.is-static .world__start,
html:not(.js) .world__start { display: none; }

.stage.is-static .world__intro,
html:not(.js) .world__intro { position: static; width: auto; max-width: 40rem; opacity: 1; transform: none; }

.stage.is-static .world__static { display: block; width: 100%; height: 56vh; }

.stage.is-static .world__regions,
html:not(.js) .world__regions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 20px var(--grid-gap);
}

.stage.is-static .world__region,
html:not(.js) .world__region {
  position: static;
  translate: none;
  opacity: 1;
  visibility: visible;
  justify-items: start;
  text-align: left;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
}

.stage.is-static .world__region-more,
html:not(.js) .world__region-more { display: grid; justify-items: start; opacity: 1; }
.stage.is-static .world__region-cta,
html:not(.js) .world__region-cta { display: none; }