/* The live plan: markers with notes, a drafting crosshair, a layer tour, moving water and lights. */
.plan-stage, .plan-canvas { position: relative; }
.plan-controls { display: none; }
.spot, .plan-cross { display: none; }

.js .spot {
  display: block;
  position: absolute;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.plan-stage.ready .spot { opacity: 1; }
.spot::before, .spot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
}
.spot::before {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--pine);
  box-shadow: 0 0 0 3px var(--paper);
  transition: transform 0.2s ease;
}
.spot::after {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid var(--pine);
  opacity: 0;
}
.spot:hover::before, .spot[aria-pressed="true"]::before { transform: scale(1.35); }
.spot[aria-pressed="true"]::after { opacity: 1; }
.spot:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }

@keyframes spot-ring {
  0% { transform: scale(0.4); opacity: 0.7; }
  100% { transform: scale(1.25); opacity: 0; }
}
.motion .plan-stage.ready .spot:not([aria-pressed="true"])::after {
  animation: spot-ring 2.4s ease-out infinite;
}
.motion .spot:nth-of-type(2)::after { animation-delay: 0.4s; }
.motion .spot:nth-of-type(3)::after { animation-delay: 0.8s; }
.motion .spot:nth-of-type(4)::after { animation-delay: 1.2s; }
.motion .spot:nth-of-type(5)::after { animation-delay: 1.6s; }
.motion .spot:nth-of-type(6)::after { animation-delay: 2s; }

.plan-note {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(100% + 12px);
  padding: 14px 16px;
  background: var(--pine);
  color: var(--bone);
}
.plan-note p { margin: 0; }
.plan-note-t { font-size: 14px; font-weight: 500; color: var(--leaf); }
.plan-note-b { margin-top: 4px; font-size: 16px; line-height: 1.4; }
@keyframes note-in {
  from { opacity: 0; transform: translateY(calc(-50% + 6px)); }
  to { opacity: 1; transform: translateY(-50%); }
}
@media (min-width: 760px) {
  .plan-note {
    position: absolute;
    z-index: 2;
    left: calc(var(--x) + 26px);
    right: auto;
    top: var(--y);
    width: 270px;
    margin: 0;
    transform: translateY(-50%);
    pointer-events: none;
  }
  .plan-note.flip { left: auto; right: calc(100% - var(--x) + 26px); }
  .motion .plan-note { animation: note-in 0.25s ease both; }
}

/* Crosshair with a reading in metres, for a mouse only */
@media (hover: hover) and (pointer: fine) {
  .js .plan-cross { display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
  .plan-stage.pointing .plan-cross { opacity: 1; }
  .plan-cross i { position: absolute; background: rgba(30, 58, 44, 0.35); }
  .plan-cross .cx { left: var(--px, 50%); top: 0; bottom: 0; width: 1px; }
  .plan-cross .cy { top: var(--py, 50%); left: 0; right: 0; height: 1px; }
  .plan-coords {
    position: absolute;
    left: var(--px, 50%);
    top: var(--py, 50%);
    margin: 8px 0 0 8px;
    padding: 2px 6px;
    background: var(--paper);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--pine-2);
    white-space: nowrap;
  }
}

.js .plan-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.plan-controls button {
  padding: 10px 16px;
  border: 1px solid var(--pine);
  background: transparent;
  color: var(--pine);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.plan-controls button:hover { background: var(--lawn); }
.plan-controls button[aria-pressed="true"] { background: var(--pine); color: var(--bone); }
html:not(.motion) #plan-redraw { display: none; }
.plan-hint { margin: 0; font-size: 15px; color: var(--pine-2); }
@media (hover: none) { .plan-hint { display: none; } }

/* The tour marks its progress on the layer bar */
.layer-buttons button { position: relative; }
@keyframes tour-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.touring .layer-buttons button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--leaf);
  transform-origin: left;
  animation: tour-bar 2.6s linear both;
}

/* Water moves and the lights breathe. Set on the source drawing, so every copy follows. */
@keyframes drift { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
@keyframes glow { from { opacity: 1; } to { opacity: 0.3; } }
.motion .layer .ripple {
  animation:
    draw 1.6s ease-in-out var(--d) backwards,
    drift 3.2s ease-in-out 2.4s infinite alternate;
}
.motion .layer .halos { animation: glow 1.8s ease-in-out 3s infinite alternate; }
.plan-view .u { transition: opacity 0.35s ease; }

/* On a phone the note sits under the drawing, in room kept for it, and the markers are smaller */
@media (max-width: 759px) {
  .js .plan-canvas { margin-bottom: 132px; }
  .js .spot { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .spot::before { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; box-shadow: 0 0 0 2px var(--paper); }
  .spot::after { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
}

/* The whole drawing stays on screen: in the opening, and in the plan panel on short windows */
.hero.no-facts .hero-art { margin-right: var(--gutter); }
@media (min-width: 900px) {
  .hero.no-facts .hero-art {
    right: max(var(--gutter), calc((100vw - 1240px) / 2));
    width: min(50vw, 700px);
    margin: 0;
  }
  .plan-canvas { max-width: calc(64svh * 1200 / 760); margin-left: auto; margin-right: auto; }
}