/* Boardr — UI kit shared chrome */
@import url("./colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-1);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* utility helpers */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.eyebrow {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ink-3);
}
.eyebrow.brass-rule::before { content: "——\00a0\00a0"; color: var(--brass); }
.display-serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; line-height: 1.05; }
.display-serif em { font-style: italic; color: var(--brass-deep); }

/* ============ Feature animations (CSS keyframes, restrained) ============ */

/* 01 — Calendar: doodle-poll → confirmed → protokoll klart (14s loop) */
@keyframes poll-phase {
  0%, 38%   { opacity: 1; }
  44%, 100% { opacity: 0; }
}
@keyframes cal-phase {
  0%, 40%   { opacity: 0; }
  46%, 95%  { opacity: 1; }
  100%      { opacity: 0; }
}
@keyframes tick-in {
  0%, 3%    { opacity: 0; transform: scale(0.4); }
  7%, 38%   { opacity: 1; transform: scale(1); }
  44%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes winner-pulse {
  0%, 28%   { background: transparent; }
  34%, 38%  { background: var(--warm); }
  44%, 100% { background: transparent; }
}
@keyframes winner-rule {
  0%, 28%   { transform: scaleY(0); }
  34%, 38%  { transform: scaleY(1); }
  44%, 100% { transform: scaleY(0); }
}
@keyframes confirmed-in {
  0%, 5%    { opacity: 0; transform: translateY(6px); }
  10%, 24%  { opacity: 1; transform: translateY(0); }
  28%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes signed-in {
  0%, 26%   { opacity: 0; transform: translateY(6px); }
  32%, 90%  { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes proto-label-in {
  0%, 65%   { opacity: 0; }
  70%, 95%  { opacity: 1; }
  100%      { opacity: 0; }
}
@keyframes day-pulse {
  0%, 70%   { background: transparent; color: var(--ink-1); }
  85%, 100% { background: var(--brass); color: var(--paper); }
}

/* 02 — Insights: three role-cards cycle (12s loop, ~4s each) */
@keyframes role-cycle-1 {
  0%, 3%   { opacity: 0; }
  6%, 30%  { opacity: 1; }
  33%, 100% { opacity: 0; }
}
@keyframes role-cycle-2 {
  0%, 36%   { opacity: 0; }
  39%, 63%  { opacity: 1; }
  66%, 100% { opacity: 0; }
}
@keyframes role-cycle-3 {
  0%, 69%   { opacity: 0; }
  72%, 95%  { opacity: 1; }
  100%      { opacity: 0; }
}


/* Hero "nästa möte" — slow crossfade between two messages */
@keyframes msg-a {
  0%, 38%   { opacity: 1; }
  46%, 88%  { opacity: 0; }
  96%, 100% { opacity: 1; }
}
@keyframes msg-b {
  0%, 38%   { opacity: 0; }
  46%, 88%  { opacity: 1; }
  96%, 100% { opacity: 0; }
}

/* === Hero checklist — unified 11s timeline, no flicker on loop boundary === */

@keyframes num-stamp-1 {
  0%, 5% { opacity: 0; transform: scale(0) rotate(-22deg); }
  10%      { opacity: 1; transform: scale(1.18) rotate(3deg); }
  13%, 92% { opacity: 1; transform: scale(1) rotate(0); }
  98%, 100%  { opacity: 0; transform: scale(1) rotate(0); }
}
@keyframes num-rule-1 {
  0%, 10%  { transform: scaleX(0); }
  17%, 92% { transform: scaleX(1); }
  98%, 100%  { transform: scaleX(0); }
}
@keyframes text-fill-1 {
  0%, 5% { opacity: 0; }
  10%      { opacity: 1; }
  13%, 92% { opacity: 1; }
  98%, 100%  { opacity: 0; }
}
@keyframes num-stamp-2 {
  0%, 15% { opacity: 0; transform: scale(0) rotate(-22deg); }
  20%      { opacity: 1; transform: scale(1.18) rotate(3deg); }
  23%, 92% { opacity: 1; transform: scale(1) rotate(0); }
  98%, 100%  { opacity: 0; transform: scale(1) rotate(0); }
}
@keyframes num-rule-2 {
  0%, 20%  { transform: scaleX(0); }
  27%, 92% { transform: scaleX(1); }
  98%, 100%  { transform: scaleX(0); }
}
@keyframes text-fill-2 {
  0%, 15% { opacity: 0; }
  20%      { opacity: 1; }
  23%, 92% { opacity: 1; }
  98%, 100%  { opacity: 0; }
}
@keyframes num-stamp-3 {
  0%, 25% { opacity: 0; transform: scale(0) rotate(-22deg); }
  30%      { opacity: 1; transform: scale(1.18) rotate(3deg); }
  33%, 92% { opacity: 1; transform: scale(1) rotate(0); }
  98%, 100%  { opacity: 0; transform: scale(1) rotate(0); }
}
@keyframes num-rule-3 {
  0%, 30%  { transform: scaleX(0); }
  37%, 92% { transform: scaleX(1); }
  98%, 100%  { transform: scaleX(0); }
}
@keyframes text-fill-3 {
  0%, 25% { opacity: 0; }
  30%      { opacity: 1; }
  33%, 92% { opacity: 1; }
  98%, 100%  { opacity: 0; }
}
@keyframes num-stamp-4 {
  0%, 35% { opacity: 0; transform: scale(0) rotate(-22deg); }
  40%      { opacity: 1; transform: scale(1.18) rotate(3deg); }
  43%, 92% { opacity: 1; transform: scale(1) rotate(0); }
  98%, 100%  { opacity: 0; transform: scale(1) rotate(0); }
}
@keyframes num-rule-4 {
  0%, 40%  { transform: scaleX(0); }
  47%, 92% { transform: scaleX(1); }
  98%, 100%  { transform: scaleX(0); }
}
@keyframes text-fill-4 {
  0%, 35% { opacity: 0; }
  40%      { opacity: 1; }
  43%, 92% { opacity: 1; }
  98%, 100%  { opacity: 0; }
}
@keyframes num-stamp-5 {
  0%, 45% { opacity: 0; transform: scale(0) rotate(-22deg); }
  50%      { opacity: 1; transform: scale(1.18) rotate(3deg); }
  53%, 92% { opacity: 1; transform: scale(1) rotate(0); }
  98%, 100%  { opacity: 0; transform: scale(1) rotate(0); }
}
@keyframes num-rule-5 {
  0%, 50%  { transform: scaleX(0); }
  57%, 92% { transform: scaleX(1); }
  98%, 100%  { transform: scaleX(0); }
}
@keyframes text-fill-5 {
  0%, 45% { opacity: 0; }
  50%      { opacity: 1; }
  53%, 92% { opacity: 1; }
  98%, 100%  { opacity: 0; }
}
@keyframes sum-reveal-master {
  0%, 56%       { opacity: 0; transform: translateY(4px); }
  62%, 92%      { opacity: 1; transform: translateY(0); }
  98%, 100%     { opacity: 0; transform: translateY(0); }
}

/* 03 — BankID signing: avatars tick one after another */
@keyframes tick-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pen-draw {
  to { stroke-dashoffset: 0; }
}

/* 04 — Action follow-up: items toggle from open to done */
@keyframes line-strike {
  0%, 50% { width: 0; }
  100%    { width: 100%; }
}
@keyframes overdue-flag {
  0%, 80% { opacity: 0; }
  100%    { opacity: 1; }
}

.anim-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  background: var(--vellum);
  border: 1px solid var(--ink-5);
  overflow: hidden;
}

/* 02 — Insights: staggered entrance + bar grow + sparkline draw */
@keyframes insight-row-in {
  0%, 5%   { opacity: 0; transform: translateY(4px); }
  12%, 92% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; transform: translateY(0); }
}
@keyframes bar-grow {
  0%, 5%   { transform: scaleY(0); }
  18%, 92% { transform: scaleY(1); }
  100%     { transform: scaleY(1); }
}
@keyframes spark-draw {
  0%, 5%   { stroke-dashoffset: 200; }
  28%, 92% { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 0; }
}
@keyframes spark-dot-in {
  0%, 25%  { opacity: 0; transform: scale(0); }
  32%, 92% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; }
}
.insight-row {
  opacity: 0;
  animation: insight-row-in 14s var(--d, 0s) var(--ease-doc) infinite;
}
.bar-grow {
  transform: scaleY(0);
  animation: bar-grow 14s var(--d, 0s) var(--ease-doc) infinite;
}
.spark-draw {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: spark-draw 14s 1.1s var(--ease-doc) infinite;
}
.spark-dot {
  opacity: 0;
  transform-origin: center;
  animation: spark-dot-in 14s 1.1s var(--ease-doc) infinite;
}

/* 02 — two insight views crossfade on a 28s loop */
@keyframes insight-view-1-cycle {
  0%, 3%    { opacity: 0; }
  6%, 46%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes insight-view-2-cycle {
  0%, 50%   { opacity: 0; }
  53%, 96%  { opacity: 1; }
  100%      { opacity: 0; }
}
.insight-view-1 {
  opacity: 0;
  animation: insight-view-1-cycle 28s var(--ease-doc) infinite;
}
.insight-view-2 {
  opacity: 0;
  animation: insight-view-2-cycle 28s var(--ease-doc) infinite;
}

/* 03 — Aktiebok: ledger rows fade in, transfer note swaps numbers */
@keyframes ledger-row-in {
  0%, 8%   { opacity: 0; transform: translateX(-4px); }
  16%, 95% { opacity: 1; transform: translateX(0); }
  100%     { opacity: 0; }
}
@keyframes ledger-old-out {
  0%, 45%   { opacity: 1; }
  52%, 100% { opacity: 0; }
}
@keyframes ledger-new-in {
  0%, 50%   { opacity: 0; }
  58%, 95%  { opacity: 1; }
  100%      { opacity: 0; }
}
@keyframes ledger-row-flash {
  0%, 50%   { background: transparent; }
  55%, 70%  { background: var(--warm); }
  78%, 100% { background: transparent; }
}
@keyframes ledger-note-in {
  0%, 38%   { opacity: 0; transform: translateY(4px); }
  46%, 92%  { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; }
}
@keyframes doc-row-in {
  0%, 5%   { opacity: 0; transform: translateY(3px); }
  14%, 95% { opacity: 1; transform: translateY(0); }
  100%     { opacity: 0; }
}
@keyframes doc-stamp-in {
  0%, 75%   { opacity: 0; transform: rotate(-1.5deg) scale(0.96); }
  82%, 96%  { opacity: 1; transform: rotate(-1.5deg) scale(1); }
  100%      { opacity: 0; }
}
.ledger-row-stable {
  opacity: 0;
  animation: ledger-row-in 14s var(--d, 0s) var(--ease-doc) infinite;
}
.ledger-row-decrease,
.ledger-row-incoming {
  opacity: 0;
  animation:
    ledger-row-in 14s var(--d, 0s) var(--ease-doc) infinite,
    ledger-row-flash 14s var(--ease-doc) infinite;
}
.ledger-old {
  display: inline-block;
  animation: none;
}
.ledger-row-decrease .ledger-old,
.ledger-row-incoming .ledger-old {
  animation: ledger-old-out 14s var(--ease-doc) infinite;
}
.ledger-new {
  opacity: 0;
  animation: ledger-new-in 14s var(--ease-doc) infinite;
}
.ledger-note {
  opacity: 0;
  animation: ledger-note-in 14s var(--ease-doc) infinite;
}
.doc-row {
  opacity: 0;
  animation: doc-row-in 14s var(--d, 0s) var(--ease-doc) infinite;
}
.doc-stamp {
  opacity: 0;
  animation: doc-stamp-in 14s var(--ease-doc) infinite;
}