/* ==========================================================================
   THE INTERACTIVE CROSS-SECTION
   Ported from GabionDiagram.astro. Enqueued only on the two pages that render
   it — the homepage and Kelebihan — so its rules never reach a page without
   the drawing.

   Astro's `:global(...)` wrappers are dropped; without scoping they are
   redundant.
   ========================================================================== */

.diagram {
  margin: 0;
}

.diagram__stage {
  position: relative;
}

.diagram__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---------- Exploration ---------- */

/* Hotspots are controls; they appear only once the script can drive them. */
.spots {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.diagram.is-interactive .spots {
  display: block;
}

.readout__hint {
  display: none;
}

.diagram.is-interactive .readout__hint {
  display: flex;
}

.spot {
  position: absolute;
  /* 44px hit area around a 22px dot — comfortable outdoors, one-handed. */
  width: 2.75rem;
  height: 2.75rem;
  margin: -1.375rem 0 0 -1.375rem;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
}

.spot__dot {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--stone-000);
  border: 2px solid var(--brand-600);
  box-shadow: var(--shadow-s);
  position: relative;
  transition:
    background-color 0.18s var(--ease-out),
    transform 0.18s var(--ease-out);
}

/* The plus, drawn rather than typed. */
.spot__dot::before,
.spot__dot::after {
  content: '';
  position: absolute;
  inset: 50% 25%;
  border-top: 2px solid var(--brand-600);
  transform: translateY(-1px);
  transition: border-color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}

.spot__dot::after {
  transform: translateY(-1px) rotate(90deg);
}

.spot:hover .spot__dot {
  background: var(--brand-600);
  transform: scale(1.1);
}

.spot:hover .spot__dot::before,
.spot:hover .spot__dot::after {
  border-color: var(--stone-000);
}

.spot[aria-pressed='true'] .spot__dot {
  background: var(--brand-600);
  transform: scale(1.1);
}

.spot[aria-pressed='true'] .spot__dot::before,
.spot[aria-pressed='true'] .spot__dot::after {
  border-color: var(--stone-000);
}

/* Selected: collapse the plus into a minus. */
.spot[aria-pressed='true'] .spot__dot::after {
  transform: translateY(-1px) rotate(0deg);
}

/* ---------- Dimming ---------- */

.part {
  transition: opacity 0.25s var(--ease-out);
}

.diagram[data-active] .part {
  opacity: 0.22;
}

.diagram[data-active='cage'] .part-cage,
.diagram[data-active='stone'] .part-stone,
.diagram[data-active='stone'] .part-cage--body,
.diagram[data-active='flow'] .part-flow,
.diagram[data-active='slope'] .part-slope {
  opacity: 1;
}

/* The static labels would double-label an open annotation. */
.labels {
  transition: opacity 0.25s var(--ease-out);
}

.diagram[data-active] .labels {
  opacity: 0;
}

.label {
  font-family: var(--font-sans);
  /* viewBox units, not UI px — see --diagram-label in base.css. */
  font-size: var(--diagram-label);
  font-weight: 650;
  fill: var(--graphite-600);
  letter-spacing: 0.01em;
}

.label--flow {
  fill: var(--diagram-water);
}

/* ---------- Readout ---------- */

.readout {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule);
  min-height: 7.5rem;
  max-width: 58ch;
}

/* Helper text, not a shout. The drawing should keep the eye; the cue is there
   when the visitor looks for it. Sentence case, no tracking, muted graphite.
   Runs the full readout width, with a rule beneath so the cue and the
   explanation below it read as two zones rather than two stacked paragraphs. */
.readout__hint {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  font-size: var(--step--1);
  font-weight: 400;
  line-height: 1.55;
  color: var(--graphite-600);
  padding-bottom: 0.625rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0.875rem;
}

.readout__dot {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--brand-600);
  flex: none;
}

.readout__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  font-stretch: 92%;
  color: var(--graphite-900);
  margin-bottom: 0.375rem;
}

.readout__body {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--graphite-600);
}

/* Label text is sized in viewBox units, so it shrinks with the drawing. Below
   this width it lands around 8px — unreadable. The hotspots and the readout
   carry the same information, and without JavaScript every annotation is
   already stacked as plain text underneath, so the labels are dropped rather
   than scaled into a collision. */
@media (max-width: 46rem) {
  .labels {
    display: none;
  }

  .spot__dot {
    width: 1.125rem;
    height: 1.125rem;
  }

  .readout {
    min-height: 9.5rem;
  }
}

/* ---------- The fill animation ---------- */

.diagram[data-animate] .stone {
  opacity: 0;
  transform: translateY(-16px) scale(0.72);
  transform-box: fill-box;
  transform-origin: center;
}

.diagram[data-animate] .flow__line {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
}

.diagram[data-animate] .flow__head {
  opacity: 0;
}

.diagram[data-animate].is-visible .stone {
  animation: stone-settle 0.62s var(--ease-out) both;
  animation-delay: var(--d);
}

.diagram[data-animate].is-visible .flow__line {
  animation: flow-draw 0.85s var(--ease-out) both;
  animation-delay: var(--fd);
}

.diagram[data-animate].is-visible .flow__head {
  animation: head-in 0.4s var(--ease-out) both;
  animation-delay: var(--fd);
}

@keyframes stone-settle {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.72);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes flow-draw {
  from {
    stroke-dashoffset: 340;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes head-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .part,
  .labels,
  .spot__dot,
  .spot__dot::before,
  .spot__dot::after {
    transition: none;
  }
}