/*
 * Landscape section: the inlined SVG, hotspot states and the tooltip.
 * Colour values come from base.css tokens so the daytime module can retint.
 */

.landscape {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--cream);
  /* Picture aspect (width / height), set by landscape.js from the SVG viewBox. */
  --aspect: 2.925;
}

/*
 * The world holds the picture and, on desktop, the project cards. It is as
 * tall as the viewport and as wide as the picture needs to be at that height
 * (landscape.js sets the width in px and translates it while panning).
 */
.landscape .world {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  min-width: 100%;
  will-change: transform;
}

/* The picture fills the world's width; anchored at the bottom so a vertical
   crop (ultra-wide screens) takes sky, never sea. */
.landscape .world > svg {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* Far layers lag behind the world while panning (landscape.js). */
.landscape [data-parallax] {
  will-change: transform;
}

/* Chevrons at the screen edges while there is more picture that way. */
.edge-hint {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px;
  height: 64px;
  margin-top: -32px;
  border: 0;
  border-radius: 999px;
  background: rgba(246, 241, 231, 0.55);
  color: var(--ink);
  font-size: 2rem;
  line-height: 64px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 400ms ease, background 200ms ease;
  pointer-events: none;
}
.edge-hint.is-visible {
  opacity: 0.8;
  pointer-events: auto;
}
.edge-hint:hover {
  background: rgba(246, 241, 231, 0.9);
}
.edge-hint--left {
  left: 12px;
}
.edge-hint--right {
  right: 12px;
}

/* Sky gradient is driven by tokens so the daytime module can retint it. */
.landscape .sky-fill {
  fill: url(#sky-gradient);
}
.landscape #sky-gradient stop:first-child {
  stop-color: var(--sky-top);
}
.landscape #sky-gradient stop:last-child {
  stop-color: var(--sky-bottom);
}

/* A full-size overlay the daytime module tints (dawn, dusk, night). */
.landscape .light-overlay {
  fill: var(--light-tint);
  pointer-events: none;
  transition: fill 2s ease;
}

/* Hotspots are the project objects. */
.landscape .hotspot {
  cursor: pointer;
  transition: filter 250ms ease, transform 250ms ease;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.landscape .hotspot.is-active,
.landscape .hotspot:focus-visible {
  filter: drop-shadow(0 0 6px var(--honey-yellow)) drop-shadow(0 0 14px var(--honey-yellow));
  transform: translateY(-2px);
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .landscape .hotspot {
    transition: none;
  }
  .landscape .hotspot.is-active {
    transform: none;
  }
}

/* Tooltip shows the project title only. Positioned by landscape.js. */
.landscape-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.95rem;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}
.landscape-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
  border-bottom: 0;
}