/* ═══ Hasiru World ═════════════════════════════════════════════════════
   The closing act of the film. These layers live inside the film's own
   sticky stage rather than in a section of their own, and they share its
   plate, so there is no second image and therefore no edge where one
   pinned scene would hand over to the next.

   Stage stacking order: plate 1, dusk 2, clouds 3, hero copy 4, title 5,
   card run 6, then everything below.
   ══════════════════════════════════════════════════════════════════════ */

.world__panel {
  position: absolute;
  z-index: 7;
  inset: 0 0 0 var(--world-col, 65%);
  background:
    linear-gradient(115deg,
      color-mix(in srgb, var(--forest) 96%, black) 0%,
      var(--forest-deep) 62%);
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--sand) 22%, transparent);
  will-change: transform, opacity;
}

/* Narrow viewports take the same 65/35 split as a band across the bottom
   instead of a column on the right. The axis is set on the stage by
   world.js, which also owns the breakpoint, so the layout here and the
   focal maths that aims the shader cannot disagree. */
.saga__stage[data-split='row'] .world__panel {
  inset: var(--world-col, 65%) 0 0 0;
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--forest) 96%, black) 0%,
      var(--forest-deep) 62%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sand) 22%, transparent);
}

/* the card now has a full-width band to sit in, and a shallow one */
.saga__stage[data-split='row'] .wcard { --w: min(30rem, 88vw); }
.saga__stage[data-split='row'] .wcard__body {
  min-height: 0;
  padding: 24px;
  gap: 4px;
}
.saga__stage[data-split='row'] .wcard__text { max-width: 42ch; }

/* the label belongs to the land, so it sits just above the split line */
.saga__stage[data-split='row'] .world__pin {
  bottom: auto;
  top: calc(var(--world-col, 65%) - 24px);
  transform: translateY(-100%);
  max-width: calc(100% - 2 * clamp(24px, 2vw, 32px));
}

/* ── the headline ──────────────────────────────────────────────────────── */

.world__intro {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  width: min(100% - 2 * var(--gutter), 46rem);
  text-align: center;
  color: var(--sand);
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
}

.world__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 3.2vw, 4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ── the point label, down the left column ─────────────────────────────── */

.world__pin {
  position: absolute;
  z-index: 8;
  left: clamp(24px, 2vw, 32px);
  bottom: clamp(24px, 3vw, 48px);
  max-width: calc(var(--world-col, 65%) - 2 * clamp(24px, 2vw, 32px));
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  text-shadow: 0 1px 12px rgba(1, 18, 14, 0.8);
  opacity: 0;
  will-change: opacity;
}
.world__pin span { display: block; }
.world__pin::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  margin-bottom: 8px;
  background: var(--gold);
}

/* ── the three doors ───────────────────────────────────────────────────── */

.world__cards { position: absolute; inset: 0; z-index: 9; }

.wcard {
  /* Sized for the 35% panel it lands in, not for the viewport. At 34rem it
     was wider than the panel itself once the land took 65%. */
  --w: min(26rem, 30vw);
  --chamfer: 2rem;

  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w);
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  color: var(--paper);
}

.wcard__glass {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% 100%,
    0 100%);
  background:
    linear-gradient(147deg,
      rgba(9, 54, 42, 0.62) 0%,
      rgba(3, 30, 23, 0.50) 46%,
      rgba(11, 60, 47, 0.60) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 1px 0 0 rgba(255, 255, 255, 0.14),
    inset -1px -1px 0 rgba(0, 0, 0, 0.24);
  transition: background var(--dur-base) var(--ease-out);
}
html[data-tier='full'] .wcard__glass {
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}
html:not([data-tier='full']) .wcard__glass {
  background:
    linear-gradient(147deg,
      rgba(9, 54, 42, 0.88) 0%,
      rgba(3, 30, 23, 0.82) 46%,
      rgba(11, 60, 47, 0.86) 100%);
}

.wcard__edge {
  position: absolute;
  top: 0;
  left: calc(100% - var(--chamfer));
  width: calc(var(--chamfer) * 1.4143);
  height: 2px;
  transform-origin: 0 0;
  transform: rotate(45deg);
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.28) 100%);
}

.wcard__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(24px, 1rem + 1vw, 32px);
  min-height: min(38vh, 17rem);
}

.wcard__index {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--gold) 92%, transparent);
}

.wcard__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.05rem + 1.1vw, 2.1rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.wcard__text {
  max-width: 30ch;
  font-size: clamp(0.9rem, 0.86rem + 0.16vw, 1rem);
  font-weight: 300;
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 84%, transparent);
}

.wcard__go {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
}
.wcard__go svg { width: 1em; height: 1em; transition: transform var(--dur-base) var(--ease-out); }
.wcard:hover .wcard__go svg { transform: translateX(4px); }
.wcard:hover .wcard__glass {
  background:
    linear-gradient(147deg,
      rgba(13, 68, 53, 0.70) 0%,
      rgba(5, 38, 29, 0.58) 46%,
      rgba(15, 74, 58, 0.68) 100%);
}

/* ── reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .world__panel,
  .world__pin { display: none; }

  .world__intro {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    width: auto;
    margin: 96px auto 32px;
    padding: 0 var(--gutter);
    color: var(--forest);
  }
  .world__cards {
    position: static;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    padding: 0 var(--gutter) 96px;
  }
  .wcard {
    position: static;
    width: auto;
    opacity: 1 !important;
    transform: none !important;
  }
  .wcard__glass {
    background: color-mix(in srgb, var(--forest) 92%, black);
    backdrop-filter: none;
  }
}