/* 1891 Parliamentarian — Breathing-site motion + new module CSS
   May 2026 marcom refresh.
   Hosts: motion-in-flight demo, workbench strip, siblings strip,
          reveal-on-scroll, breathing SVG. Respects prefers-reduced-motion. */

/* ── Reveal on scroll ─────────────────────────────────── */
/* site.js applies data-reveal="" then "in" via IntersectionObserver. */
[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  will-change: opacity, transform;
}
[data-reveal="in"] {
  opacity: 1;
  transform: translateY(0);
}
/* Per-element reveal helper (.reveal) for the hero subgrid pieces — these
   need to fade in immediately on first paint rather than waiting for IO. */
.reveal { opacity: 0; transform: translateY(8px); animation: hero-reveal 700ms var(--ease) 80ms forwards; }
.hero__copy.reveal  { animation-delay: 60ms; }
.motion-demo.reveal { animation-delay: 200ms; }
@keyframes hero-reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Breathing SVG art ────────────────────────────────── */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
.breathe {
  transform-origin: center;
  animation: breathe 5.4s ease-in-out infinite;
}

/* ── Motion-in-flight interactive demo ────────────────── */
.motion-demo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-16);
}
@media (min-width: 720px) {
  .motion-demo {
    grid-template-columns: 1.6fr 1fr;
    grid-template-areas:
      "tv    log"
      "ctrls log";
    gap: var(--s-20, 1.25rem);
  }
  .motion-demo__tv       { grid-area: tv; }
  .motion-demo__controls { grid-area: ctrls; }
  .motion-demo__log      { grid-area: log; }
}

.motion-demo__tv {
  position: relative;
  background: var(--color-order-navy);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  color: var(--color-paper);
  box-shadow: 0 2px 0 rgba(0,0,0,.06), inset 0 0 0 1px rgba(176,136,56,.18);
}
.motion-demo__tv::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: var(--color-brass-gavel);
  z-index: 2;
}
.motion-demo__edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: .85;
}
.motion-demo__screen {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--s-32) var(--s-24);
  height: 100%;
  gap: var(--s-16);
}
.motion-demo__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brass-gavel);
  margin: 0;
}
.motion-demo__motion {
  font-family: var(--font-display);
  font-size: var(--fs-25);
  line-height: 1.25;
  font-weight: 600;
  margin: 0;
  max-width: 28ch;
}
@media (min-width: 960px) {
  .motion-demo__motion { font-size: var(--fs-31); }
}
.motion-demo__tally {
  display: flex;
  gap: var(--s-32);
  justify-content: center;
  font-family: var(--font-mono);
}
.motion-demo__tally-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  transition: transform 240ms var(--ease);
}
.motion-demo__tally-label {
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  opacity: .8;
}
.motion-demo__tally-num {
  font-size: var(--fs-39);
  font-weight: 600;
  font-family: var(--font-display);
  line-height: 1;
}
.motion-demo__tally-cell--yes .motion-demo__tally-num { color: var(--color-carried-green); }
.motion-demo__tally-cell--no  .motion-demo__tally-num { color: #d97a7a; }
.motion-demo__tally-cell.is-breathing { animation: tally-breathe 720ms var(--ease); }
@keyframes tally-breathe {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}
.motion-demo__state {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brass-gavel);
  margin: 0;
}
.motion-demo__state[data-result="carried"] { color: var(--color-carried-green); }
.motion-demo__state[data-result="failed"]  { color: #d97a7a; }

/* Controls */
.motion-demo__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
}
.motion-btn {
  flex: 1 1 auto;
  min-width: 96px;
  min-height: 44px;
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  font-weight: 500;
  border: 1.5px solid var(--color-order-navy);
  background: var(--color-card);
  color: var(--color-order-navy);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.motion-btn:hover:not(:disabled),
.motion-btn:focus-visible:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 rgba(14,39,66,.12);
  background: var(--color-order-navy);
  color: var(--color-paper);
}
.motion-btn--yes { border-color: var(--color-carried-green); color: var(--color-carried-green); }
.motion-btn--yes:hover:not(:disabled),
.motion-btn--yes:focus-visible:not(:disabled) {
  background: var(--color-carried-green); color: var(--color-paper);
}
.motion-btn--no { border-color: #8B2A2A; color: #8B2A2A; }
.motion-btn--no:hover:not(:disabled),
.motion-btn--no:focus-visible:not(:disabled) {
  background: #8B2A2A; color: var(--color-paper);
}
.motion-btn--ghost {
  border-color: var(--border);
  color: var(--color-steel-grey);
  background: transparent;
}
.motion-btn:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Event log */
.motion-demo__log {
  background: var(--color-mist);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-16);
  max-height: 320px;
  overflow-y: auto;
}
.motion-demo__log-title {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brass-gavel);
  margin: 0 0 var(--s-12);
}
.motion-demo__log-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-slate);
  line-height: 1.45;
}
.motion-demo__log-list li {
  padding: var(--s-8) var(--s-12);
  background: var(--color-card);
  border-left: 2px solid var(--color-brass-gavel);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  animation: log-append 320ms var(--ease);
}
.motion-demo__log-list li .ts { color: var(--color-pewter); margin-right: var(--s-8); }
@keyframes log-append {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Workbench strip ──────────────────────────────────── */
.section--workbench {
  background: linear-gradient(180deg, var(--color-paper) 0%, #F2EEE3 100%);
}
.workbench-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-24);
}
@media (min-width: 720px) { .workbench-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .workbench-grid { grid-template-columns: repeat(3, 1fr); } }

.workbench-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-24);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.workbench-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 0 rgba(14,39,66,.10);
}
.workbench-tile__art {
  width: 72px;
  height: 72px;
  margin-bottom: var(--s-16);
}
.workbench-tile__art svg { width: 100%; height: 100%; }
.workbench-tile h3 {
  font-size: var(--fs-20);
  margin: 0 0 var(--s-8);
}
.workbench-tile p {
  color: var(--color-steel-grey);
  margin: 0;
  font-size: var(--fs-16);
}

/* ── Siblings cross-link strip ────────────────────────── */
.siblings-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-24);
}
@media (min-width: 720px) { .siblings-grid { grid-template-columns: repeat(3, 1fr); } }

.sibling-tile {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-24);
  text-decoration: none;
  color: var(--text);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.sibling-tile:hover,
.sibling-tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 4px 0 rgba(14,39,66,.10);
  border-color: var(--color-brass-gavel);
  color: var(--text);
}
.sibling-tile__art {
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-bottom: var(--s-16);
  background: var(--color-mist);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-16);
}
.sibling-tile__art svg { width: 100%; height: 100%; }
.sibling-tile h3 {
  font-size: var(--fs-20);
  margin: 0 0 var(--s-8);
}
.sibling-tile p {
  margin: 0;
  color: var(--color-steel-grey);
}

/* ── Stat row (used in tight section) ─────────────────── */
.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-24);
}
@media (min-width: 720px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat-row .stat__num {
  font-family: var(--font-display);
  font-size: var(--fs-31);
  color: var(--color-order-navy);
  margin: 0;
  font-weight: 600;
}
.stat-row .stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-steel-grey);
  margin: var(--s-4) 0 0;
}

/* ── Reduced motion: stillness, but state still works ─── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal="in"] { opacity: 1; transform: none; transition: none; }
  .reveal { opacity: 1; transform: none; animation: none; }
  .breathe { animation: none; }
  .motion-demo__tally-cell.is-breathing { animation: none; }
  .motion-demo__log-list li { animation: none; }
  .workbench-tile:hover,
  .sibling-tile:hover,
  .sibling-tile:focus-visible,
  .motion-btn:hover:not(:disabled),
  .motion-btn:focus-visible:not(:disabled) {
    transform: none;
  }
}