/* ==========================================================================
   world: pinned compass reveal of the Solokha world (from template "Report")
   ========================================================================== */

.world {
  /* how far the compass centre sits above the middle of the screen;
     the photo reveal (world.js) uses the same value */
  --world-lift: 6svh;
  position: relative;
  height: 100svh;
  overflow: hidden;
  background-color: var(--bg-darker);
  color: var(--text-on-dark);
}

.world__canvas {
  position: relative;
  display: grid;
  grid-template: 100% / 100%;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.world__layers {
  position: relative;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}

.world__frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.25rem;
  padding: var(--gutter);
  padding-bottom: calc(var(--gutter) + 1.5rem);
  will-change: mask-image, -webkit-mask-image;
}

.world--animated .world__frame {
  padding-bottom: calc(var(--gutter) + 4.5rem);
}

.world__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--frame-scale, 1.2));
  will-change: transform;
}

/* which part of each photo stays in view when it is cropped:
   phone crops the sides of wide photos, desktop crops top and bottom of tall ones */
.world__image--partners { object-position: 48% 50%; }
.world__image--community { object-position: 80% 50%; }

/* dark veil over the photo: labels, names and the compass are light,
   so they must stay readable on bright photos too */
.world__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 28, 30, 0.9) 0%,
    rgba(0, 28, 30, 0.5) 38%,
    rgba(0, 28, 30, 0.5) 62%,
    rgba(0, 28, 30, 0.82) 100%
  );
  pointer-events: none;
}

/* caption inside each frame: used only without animation (reduced motion) */
.world__caption {
  position: relative;
  z-index: 2;
  order: 2;
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.world--animated .world__frame .world__caption {
  display: none;
}

/* one shared caption above all frames: the name changes with the frame,
   so two names never overlap while a photo is being revealed.
   Phone and tablet: at the top, under the section label (the floating
   Concierge button lives at the bottom). Desktop: at the bottom. */
.world__title {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--header-h) + 3.5rem);
  z-index: 7;
  display: none;
  align-items: baseline;
  gap: 0.75rem;
  pointer-events: none;
}

.world--animated .world__title {
  display: flex;
}

.world__title-mask {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 0;
  min-width: 0;
  overflow: clip;
  padding-bottom: 0.1em;
}

/* all names lie in the same cell, world.js slides them in and out */
.world__title .world__name {
  display: block;
  grid-area: 1 / 1;
  white-space: nowrap;
}

.world__index {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--accent);
}

.world__name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.1rem + 3vw, 4.25rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--color-ivory);
}

.world__data {
  position: relative;
  z-index: 2;
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 16rem;
}

.world__data-label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mist);
  opacity: 0.8;
}

.world__data-value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--color-ivory);
}

/* compass ring */
.world__compass {
  position: relative;
  grid-area: 1 / 1;
  z-index: 5;
  width: 82vmin;
  height: 82vmin;
  margin-bottom: calc(var(--world-lift) * 2);
  overflow: visible;
  pointer-events: none;
}

.world__compass-tick {
  stroke: var(--color-ivory);
}

.world__compass-tick--major {
  stroke: var(--color-copper);
}

.world__compass-degree {
  font-family: var(--font-label);
  font-size: 11px;
  fill: var(--color-ivory);
  opacity: 0.7;
}

/* clock hand that wipes the next image in */
.world__hand {
  position: relative;
  grid-area: 1 / 1;
  z-index: 6;
  width: 1px;
  height: 150vmax;
  margin-bottom: calc(var(--world-lift) * 2);
  pointer-events: none;
}

.world__hand--fixed {
  opacity: 0;
  transform: rotate(225deg);
}

.world__hand-line {
  position: absolute;
  inset: 0 0 50%;
  background-color: var(--color-copper);
}

.world__hand-dot {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-copper);
  transform: translateX(-50%);
}

.world__label,
.world__counter {
  position: absolute;
  top: calc(var(--header-h) + 1rem);
  z-index: 7;
}

.world__label {
  left: var(--gutter);
}

.world__counter {
  right: var(--gutter);
}

@media (min-width: 1000px) {
  .world {
    --world-lift: 0px;
  }

  .world__frame {
    display: block;
    padding: 0;
  }

  .world__image--lifestyle { object-position: 50% 35%; }
  .world__image--service { object-position: 50% 40%; }

  .world__caption {
    position: absolute;
    left: var(--gutter);
    bottom: 3rem;
  }

  .world__title {
    top: auto;
    bottom: 3rem;
  }

  .world__data {
    position: absolute;
    transform: translate(-50%, -50%);
  }

  .world__data--top-left { top: 28%; left: 18%; }
  .world__data--top-right { top: 30%; left: 82%; }
  .world__data--bottom-left { top: 72%; left: 20%; }
  .world__data--bottom-right { top: 76%; left: 82%; }

  .world__data-value {
    font-size: 1.35rem;
  }

  .world__compass {
    width: 68vmin;
    height: 68vmin;
  }
}

/* No-animation fallback: show frames as a simple vertical list */
.reduced-motion .world,
.no-js .world {
  height: auto;
}

.reduced-motion .world__canvas,
.no-js .world__canvas {
  display: block;
}

.reduced-motion .world__frame,
.no-js .world__frame {
  position: relative;
  min-height: 80svh;
}

.reduced-motion .world__compass,
.reduced-motion .world__hand,
.reduced-motion .world__counter,
.no-js .world__compass,
.no-js .world__hand,
.no-js .world__counter {
  display: none;
}