/* Cento marketing site — shared styles.
 *
 * Source of truth for design decisions is the website-design-prompt (warm clinical
 * palette, Source Serif 4 = scholarship, DM Sans = the tool, green = verification
 * only). Page markup keeps the design's inline styling; this file owns the base
 * layer, the keyframes, and the small set of interactive (:hover/:focus/:active)
 * behaviours that the Claude Design canvas expressed as `style-hover` attributes.
 */

:root {
  --cream: #F5F2EA;
  --raised: #FFFDF7;
  --sunken: #EFEBDF;
  --ink: #1F2B25;
  --body: #4A4A42;
  --muted: #6A6658;
  --faint: #8A8576;
  --hair: rgba(26, 77, 62, 0.16);
  --hair-strong: rgba(26, 77, 62, 0.30);
  --green: #1A4D3E;
  --green-hover: #15402F;
  --green-tint: rgba(26, 77, 62, 0.08);
  --amber: #BA7517;
  --amber-bg: #F6E4C4;
  --amber-text: #7A4D08;
  --amber-line: rgba(186, 117, 23, 0.35);
  --red: #9C2A1C;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(26, 77, 62, 0.16); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Motion keyframes (transform/opacity only) ---- */
@keyframes fillbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes auraFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(26px, -30px); } }
@keyframes auraFloat2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 24px); } }
@keyframes livePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.9); opacity: 0.3; } }

/* ---- Interactive behaviours (were `style-hover`/`style-active`/`style-focus`) ---- */

/* Nav + footer text links: settle to ink on hover. */
.lnk { transition: color 150ms ease; }
.lnk:hover { color: var(--ink) !important; }

/* The one primary action per view. */
.btn-primary { transition: background 150ms ease, transform 150ms ease; }
.btn-primary:hover { background: var(--green-hover) !important; }
.btn-primary:active { transform: translateY(1px); }

/* Secondary / ghost actions. */
.btn-ghost { transition: background 150ms ease; }
.btn-ghost:hover { background: var(--green-tint) !important; }

/* Ghost action reversed out on a full-green band. */
.btn-ghost-light { transition: background 150ms ease; }
.btn-ghost-light:hover { background: rgba(245, 242, 234, 0.12) !important; }

/* Raised cards that lift on hover. */
.card-hover { transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.card-hover:hover {
  border-color: var(--hair-strong) !important;
  box-shadow: 0 8px 26px -18px rgba(31, 43, 37, 0.35) !important;
  transform: translateY(-2px);
}

/* Inline citation chips. */
.cite-cited { transition: background 150ms ease; }
.cite-cited:hover { background: rgba(26, 77, 62, 0.20) !important; }
.cite-drifted { transition: background 150ms ease; }
.cite-drifted:hover { background: #f0d4a4 !important; }

/* "Open the source" affordance. */
.srclink { transition: color 150ms ease; }
.srclink:hover { color: var(--green-hover) !important; }

/* Form fields. */
.input { transition: border-color 150ms ease, background 150ms ease; }
.input:focus { border-color: var(--green) !important; background: var(--raised) !important; }

/* ---- Two-state panels (hero verify, editor demo): stack both panels in the
 *      same grid cell so the container is always as tall as the TALLEST state.
 *      Switching states then changes only the inner content — the surrounding
 *      card never grows/shrinks/jumps. main.js toggles visibility, not display. */
.panel-stack { display: grid; }
.panel-stack > [data-panel] { grid-area: 1 / 1; }
.panel-stack > [data-panel]:not([data-default]) { visibility: hidden; } /* no-JS default */

/* ---- Scroll-reveal: hidden state is applied by main.js only when JS + motion
 *      are available, so a no-JS or reduced-motion visitor always sees content. */
.reveal-init { opacity: 0; transform: translateY(18px); }
.reveal-in {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal-init { opacity: 1; transform: none; }
}