/* Amrita — The Forms: eight particle sculptures on an engraved stone disc (js/forms.js).
   Everything is scoped to .forms; greys and white only. */

.forms {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 540px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  /* the fallback (and the frame the canvas fades in over): the site's cool grey sky, the #a6aab5 haze, then the stone */
  background: linear-gradient(180deg, #b3b7c2 0%, #acb0bb 52%, #a6aab5 66%, #74777f 70.5%, #686b74 100%);
  --ink: #23272e;   /* thin strokes over the light sky: about 6:1 against it */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.forms:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }

.forms__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.forms--live .forms__canvas { opacity: 1; }
.forms__canvas.is-grabbing { cursor: grabbing; }
.forms--static .forms__canvas { display: none; }

.forms__ui {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- the thin arrows, left and right of the sculpture */
.forms__arrow {
  pointer-events: auto;
  position: absolute;
  top: 49%;
  width: 116px;
  height: 56px;
  margin-top: -28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.forms__arrow--prev { left: clamp(16px, 12vw, 300px); }
.forms__arrow--next { right: clamp(16px, 12vw, 300px); }
.forms__arrow svg {
  width: 88px;
  height: 10px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: square;
  filter: drop-shadow(0 0 5px rgba(214, 217, 224, 0.35));
}
.forms__arrow svg path { vector-effect: non-scaling-stroke; }
.forms__arrow:hover { opacity: 1; }
.forms__arrow--prev:hover { transform: translateX(-6px); }
.forms__arrow--next:hover { transform: translateX(6px); }
.forms__arrow:active { opacity: 0.75; }

/* ---- the caption under the sculpture: a kicker, the framed name, one line */
.forms__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2.6svh, 28px);
  transform: translateX(-50%);
  width: min(calc(100% - 32px), 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 1px 14px rgba(52, 56, 66, 0.38);
}
.forms__caption::before { /* a soft grey pool so white type holds on the stone */
  content: "";
  position: absolute;
  inset: -30px -40px -18px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(62, 65, 72, 0.3), rgba(62, 65, 72, 0));
  pointer-events: none;
}
.forms__kicker {
  margin: 0 0 11px;
  font: 500 11px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.06em;
  opacity: 1;
  white-space: pre;
}
.forms__slashes { opacity: 0.7; }
.forms__frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 14ch;
  padding: 15px 30px;
  color: inherit;
  text-decoration: none;
  font: 600 clamp(15px, 1.05vw, 18px)/1 "IBM Plex Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.02em;
  white-space: pre;
}
.forms__c {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 0 solid rgba(255, 255, 255, 0.82);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s ease;
}
.forms__c--tl { left: 0; top: 0; border-left-width: 1px; border-top-width: 1px; }
.forms__c--tr { right: 0; top: 0; border-right-width: 1px; border-top-width: 1px; }
.forms__c--bl { left: 0; bottom: 0; border-left-width: 1px; border-bottom-width: 1px; }
.forms__c--br { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; }
/* a link to the matching chapter: crisp corners and the arrow, like a button */
.forms__frame--link { pointer-events: auto; cursor: pointer; }
.forms__frame--link .forms__c { width: 10px; height: 10px; border-color: rgba(255, 255, 255, 0.92); }
.forms__frame--link:hover .forms__c { width: 14px; height: 14px; border-color: #fff; }
.forms__go { font-weight: 500; font-size: 0.92em; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.forms__frame--link:hover .forms__go { transform: translate(2px, -2px); }
.forms__frame--link.is-label { pointer-events: none; cursor: default; }
.forms__frame--link.is-label .forms__go { display: none; }
.forms__frame--link.is-label .forms__c { width: 7px; height: 7px; border-color: rgba(255, 255, 255, 0.82); }
.forms__line {
  margin: 11px 0 0;
  max-width: 46ch;
  min-height: 2.8em;  /* two lines held, so the frame never jumps between forms */
  font: 400 15px/1.4 "Inter Tight", system-ui, sans-serif;
  letter-spacing: 0.005em;
  text-wrap: balance;
  opacity: 0.95;
  transition: opacity 0.22s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.forms__line.is-out { opacity: 0; transform: translateY(5px); transition-duration: 0.18s, 0.18s; }

/* ---- the eight forms as a tick column at the right edge; the current one fills while the next form waits */
.forms__ticks {
  position: absolute;
  right: clamp(8px, 2vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: auto;
}
.forms__tick {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.forms__tick span {
  position: relative;
  display: block;
  width: 10px;
  height: 1px;
  overflow: hidden;
  background: rgba(35, 39, 46, 0.78);
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.3s ease;
}
.forms__tick:hover span { background: var(--ink); }
.forms__tick[aria-current="true"] span { width: 20px; height: 2px; background: rgba(35, 39, 46, 0.32); }
.forms__tick[aria-current="true"] span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: right center;
  transform: scaleX(var(--p, 1));
}

/* ---- pause and play for the rotation, bottom right like the reference's "II" */
.forms__pause {
  pointer-events: auto;
  position: absolute;
  right: clamp(8px, 2vw, 32px);
  bottom: clamp(8px, 2.2svh, 24px);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0.92;
  transition: opacity 0.3s ease;
  font: 500 11px/1 "IBM Plex Mono", ui-monospace, Menlo, monospace;
  letter-spacing: 0.08em;
}
.forms__pause[hidden] { display: none; }
.forms__pause:hover { opacity: 1; }
.forms__pause-play { display: none; width: 8px; height: 10px; fill: currentColor; }
.forms__pause[aria-pressed="true"] .forms__pause-ii { display: none; }
.forms__pause[aria-pressed="true"] .forms__pause-play { display: block; }

.forms__arrow:focus-visible,
.forms__tick:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.forms__pause:focus-visible,
.forms__frame--link:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }

.forms__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- tablets, portrait screens and phones: the arrows flank the caption frame, clear of the sculpture.
   --frame-y (set by forms.js) is the frame's vertical centre. */
@media (max-width: 1024px), (orientation: portrait) {
  /* here the arrows sit on the stone beside the caption: white again (about 5:1 on the stone) */
  .forms__arrow { top: var(--frame-y, calc(100% - 96px)); width: 96px; height: 48px; margin-top: -24px; color: #fff; }
  .forms__arrow svg { filter: drop-shadow(0 0 6px rgba(48, 51, 58, 0.45)); }
  .forms__arrow:focus-visible { outline-color: #fff; }
  .forms__arrow--prev { left: max(8px, calc(50% - 250px)); }
  .forms__arrow--next { right: max(8px, calc(50% - 250px)); }
  .forms__arrow svg { width: 64px; }
}
@media (max-width: 640px) {
  .forms { min-height: 520px; }
  .forms__arrow { width: 64px; }
  .forms__arrow svg { width: 46px; }
  .forms__caption { bottom: 14px; }
  .forms__kicker { margin-bottom: 10px; }
  .forms__frame { padding: 13px 22px; font-size: 14px; gap: 12px; }
  .forms__line { font-size: 14px; margin-top: 10px; max-width: 30ch; }
  .forms__ticks { top: 45%; }
}
@media (pointer: coarse), (max-width: 640px) {
  .forms__tick { width: 44px; height: 44px; }   /* a full 44 x 44 target on phones */
}

@media (prefers-reduced-motion: reduce) {
  .forms__canvas,
  .forms__arrow,
  .forms__line,
  .forms__c,
  .forms__go,
  .forms__tick span { transition: none; }
}