@layer components {

.specimens { display: grid; gap: var(--s6); margin-top: var(--s7);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.specimen { border: 1px solid var(--rule-soft); border-radius: var(--r-lg); overflow: hidden; }
.specimen-stage {
  position: relative; height: 120px; background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  display: grid; align-items: center; padding-inline: var(--s6);
  cursor: pointer; touch-action: manipulation;
}
.specimen-object {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--ink); display: block;
}
.specimen-meta { padding: var(--s5); }

/* with reduced motion on, the two frames sit side by side and are labelled */
.specimen-stage.is-compared { display: flex; align-items: center; gap: var(--s6);
  cursor: default; }
.specimen-stage.is-compared .specimen-first { opacity: 1; transform: none; }
.specimen-stage.is-compared::after { content: "first · last"; position: absolute;
  left: var(--s6); bottom: var(--s3); font-family: var(--mono);
  font-size: var(--t-machine); color: var(--graphite); }
.specimen-meta h3 { font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.018em; }
.specimen-num { margin-top: var(--s1); font-size: var(--t-machine); color: var(--graphite); }
.specimen-why { margin-top: var(--s3); font-size: var(--t-small); color: var(--ink-2); }
.specimen-use { margin-top: var(--s2); font-size: var(--t-caption); }

/* each specimen demonstrates its own duration on its own property */
[data-specimen="press"] .specimen-object { transition: transform var(--d-press) var(--ease-out); }
[data-specimen="press"][data-state="run"] .specimen-object { transform: scale(0.83); }
[data-specimen="press"][data-state="end"] .specimen-object { transform: scale(0.83); }

[data-specimen="reveal"] .specimen-object { transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); }
[data-specimen="reveal"] .specimen-object { opacity: 1; }
[data-specimen="reveal"][data-state="run"] .specimen-object { opacity: 0.15; transform: scale(0.95); }
[data-specimen="reveal"][data-state="end"] .specimen-object { opacity: 0.15; }

[data-specimen="hover"] .specimen-object { transition: background-color var(--d-hover) ease; }
[data-specimen="hover"][data-state="run"] .specimen-object,
[data-specimen="hover"][data-state="end"] .specimen-object { background: var(--graphite); }

[data-specimen="arrive"] .specimen-object { transition: transform var(--d-arrive) var(--ease-out), opacity var(--d-arrive) var(--ease-out); }
[data-specimen="arrive"][data-state="run"] .specimen-object { transform: translateY(var(--arrive-shift)); opacity: 0; }
[data-specimen="arrive"][data-state="end"] .specimen-object { opacity: 0.3; }

[data-specimen="page"] .specimen-object { transition: transform var(--d-page) var(--ease-out), opacity var(--d-page) var(--ease-out); }
[data-specimen="page"][data-state="run"] .specimen-object { transform: translateX(180px); opacity: 0; }
[data-specimen="page"][data-state="end"] .specimen-object { transform: translateX(90px); opacity: 0.4; }

.curves { display: grid; gap: var(--s7); margin-top: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.curve-card { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s5);
  align-items: start; }
.curve-draw { width: 148px; color: var(--ink-2); }
.curve-draw svg { width: 100%; height: auto; }
.curve-card h3 { font-size: var(--t-heading); font-weight: 600; letter-spacing: -0.018em; }
.curve-card p { margin-top: var(--s2); font-size: var(--t-small); color: var(--ink-2); }
.curve-card p.mono { font-size: var(--t-machine); color: var(--graphite); }

.ease-defs { display: grid; gap: var(--s5); margin-top: var(--s7);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ease-def { border-top: 1px solid var(--rule-soft); padding-top: var(--s4); }
.ease-def p { font-size: var(--t-machine); line-height: 1.7; overflow-wrap: anywhere; }

.steps { display: grid; gap: 0; margin-top: var(--s7); border-top: 1px solid var(--rule-soft); }
}