/* Site v2 /research: the model cards (model_card in _company_research.html),
   which /open-source had before it merged into /research. Every entry sits on
   a card with a slow purple-and-cyan aurora behind its copy; a Smaug model's
   chart (or a single paper) is a smaller ringed card beside it with a light
   running round its edge, and its evaluation results open under both.
   js/research.js adds html.v2-os-motion (never under reduced motion) and, per
   card, .is-in once it scrolls into view and .is-live while it is on screen;
   the entrances below wait for .is-in and the loops run only while .is-live.
   Without the script every card shows its final state. Entrances are
   keyframes with backwards fill, so hover rules keep working once they end.
   The flat research cards, tables and paper grids are company.css's. Colours
   come from tokens.css. */

@property --v2-os-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
:root {
  --v2-os-out: cubic-bezier(0.16, 1, 0.3, 1);
  --v2-os-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* How strongly the decoration shows: 0.3 on white, 0.5 on navy. */
  --v2-os-glow: var(--glow-disc-opacity);
}

/* ---------- The cards ---------- */
.v2-models {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}
.v2-model {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--space-8);
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--ring), var(--shadow-card);
  transition: box-shadow 400ms var(--ease);
}
.v2-model:hover {
  box-shadow: var(--ring), var(--shadow-pop);
}
/* The spotlight: a soft tint that follows the pointer (--mx / --my). */
.v2-model::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    560px circle at var(--mx, 30%) var(--my, 0%),
    color-mix(in srgb, var(--accent) 9%, transparent),
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease);
}
.v2-model:hover::before {
  opacity: 1;
}
/* The top edge: a purple-to-cyan hairline that opens out on hover. */
.v2-model::after {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--glow-a),
    var(--glow-b),
    transparent
  );
  opacity: 0.5;
  scale: 0.6 1;
  pointer-events: none;
  transition:
    opacity 500ms var(--ease),
    scale 700ms var(--v2-os-out);
}
.v2-model:hover::after {
  opacity: 1;
  scale: 1 1;
}
/* The aurora: two blurred discs, purple and cyan, drifting behind the copy;
   alternate cards swap their corners. */
.v2-model__fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.v2-model__fx::before,
.v2-model__fx::after {
  content: "";
  position: absolute;
  width: min(640px, 70%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-a), transparent);
  opacity: calc(var(--v2-os-glow) * 0.5);
  animation: v2-os-drift 22s ease-in-out infinite alternate;
}
.v2-model__fx::before {
  top: -38%;
  left: -16%;
}
.v2-model__fx::after {
  right: 22%;
  bottom: -46%;
  background: radial-gradient(closest-side, var(--glow-b), transparent);
  opacity: calc(var(--v2-os-glow) * 0.4);
  animation-duration: 28s;
  animation-direction: alternate-reverse;
}
.v2-model:nth-child(even) .v2-model__fx::before {
  top: auto;
  bottom: -40%;
}
.v2-model:nth-child(even) .v2-model__fx::after {
  top: -44%;
  bottom: auto;
}
/* The copy and its aside; the evaluation results sit under both, outside
   __main, so a sticky aside never slides over them. */
.v2-model__main {
  display: grid;
  gap: var(--space-8);
}
.v2-model__copy,
.v2-model__aside {
  min-width: 0;
}

/* The head: the icon on a spinning gradient ring, the title, and in the
   Smaug line a hairline out to the card's number. The research icons are
   drawn for dark cards, so their mark is a night tile (.v2-night). */
.v2-model__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.v2-model__mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--paper);
  transition:
    translate 400ms var(--v2-os-out),
    scale 400ms var(--v2-os-out);
}
.v2-model__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--v2-os-spin),
    var(--glow-a),
    var(--glow-b),
    var(--rule),
    var(--glow-a)
  );
  -webkit-mask:
    linear-gradient(black 0 0) content-box,
    linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(black 0 0) content-box exclude,
    linear-gradient(black 0 0);
  animation: v2-os-spin 6s linear infinite;
}
.v2-model__mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--glow-a), var(--glow-b));
  filter: blur(14px);
  opacity: calc(var(--v2-os-glow) * 1.4);
  animation: v2-os-breathe 3.6s ease-in-out infinite alternate;
}
.v2-model__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--paper-2);
}
.v2-model:hover .v2-model__mark {
  translate: 0 -3px;
  scale: 1.05;
}
/* The Smaug line is numbered in page order, across its sections. */
.v2-body {
  counter-reset: v2-os-model;
}
.v2-model--line {
  counter-increment: v2-os-model;
}
.v2-model--line .v2-model__head::before {
  content: "";
  order: 1;
  flex: 1 1 auto;
  height: 1px;
  margin-left: var(--space-2);
  background: linear-gradient(90deg, var(--rule-strong), transparent);
  transform-origin: left center;
}
.v2-model--line .v2-model__head::after {
  content: counter(v2-os-model, decimal-leading-zero);
  content: counter(v2-os-model, decimal-leading-zero) / "";
  order: 2;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--muted);
}
/* The description is inline HTML (text, links and <br>s), not paragraphs. */
.v2-model__body {
  max-width: 64ch;
  line-height: 1.65;
  color: var(--muted);
}

/* The aside: the chart or paper card, with a purple-to-cyan aura behind it
   on hover. */
.v2-model__aside {
  position: relative;
  isolation: isolate;
}
.v2-model__aside::before {
  content: "";
  position: absolute;
  inset: 16px;
  z-index: -1;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--glow-a), var(--glow-b));
  filter: blur(32px);
  opacity: 0;
  transition: opacity 500ms var(--ease);
}
.v2-model__aside:hover::before {
  opacity: calc(var(--v2-os-glow) * 1.3);
}

/* Two cards side by side (AI-Assisted ML): the aurora a little smaller. */
.v2-models__grid {
  gap: clamp(24px, 3vw, 40px);
}
.v2-models__grid .v2-model__fx::before,
.v2-models__grid .v2-model__fx::after {
  width: min(480px, 90%);
}

@media (min-width: 720px) {
  .v2-model {
    padding: clamp(28px, 3.4vw, 44px);
  }
}
@media (min-width: 1024px) {
  .v2-model--split > .v2-model__main {
    grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
    column-gap: clamp(32px, 4.5vw, 64px);
    align-items: start;
  }
  .v2-model__aside {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }
  /* A card with nothing beside it: the icon over the title in a column of
     their own, the copy beside them, like the research page's wide cards. */
  .v2-model--wide .v2-model__copy {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(32px, 4.5vw, 64px);
    align-items: start;
  }
  .v2-model--wide .v2-model__head {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
  }
  .v2-model--wide .v2-model__body {
    max-width: 72ch;
  }
}

/* ---------- Evaluation results ---------- */
/* A Smaug card's results table and LiveBench profile, under a hairline
   across the card: the title and intro are the summary, a plus in a ring
   turns to a cross when it is open. */
.v2-model__more {
  border-top: 1px solid var(--rule);
}
.v2-model__more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-6);
  list-style: none;
  cursor: pointer;
}
.v2-model__more > summary::-webkit-details-marker {
  display: none;
}
.v2-model__more-title {
  display: grid;
  gap: var(--space-1);
}
.v2-model__more-title .v2-body-sm {
  color: var(--muted);
}
.v2-model__more-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--ring);
  color: var(--accent-ink);
  transition:
    background 250ms var(--ease),
    box-shadow 400ms var(--ease);
}
.v2-model__more-icon svg {
  transition: rotate 300ms var(--v2-os-out);
}
.v2-model__more[open] .v2-model__more-icon svg {
  rotate: 45deg;
}
@media (hover: hover) {
  .v2-model__more > summary:hover .v2-model__more-title .v2-h4 {
    color: var(--accent-ink);
  }
  .v2-model__more > summary:hover .v2-model__more-icon {
    background: var(--accent-soft);
    box-shadow: var(--ring), var(--shadow-card);
  }
}
.v2-model__more-body {
  display: grid;
  gap: var(--space-5);
  padding-top: var(--space-6);
  min-width: 0;
}
.v2-model__more-body .v2-caption {
  max-width: 96ch;
}

/* ---------- Chart and paper cards ---------- */
/* Round 4's ringed card, lifted and tilted toward the pointer (--rx / --ry)
   on hover, with a light running round its edge (::before) and a soft tint
   under the pointer (::after). */
.v2-bench,
.v2-model__aside > .v2-paper {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: var(--space-6);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--ring);
  transition:
    transform 240ms var(--ease),
    box-shadow 400ms var(--ease);
}
.v2-bench::before,
.v2-model__aside > .v2-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--v2-os-spin),
    transparent 0 62%,
    var(--glow-a) 80%,
    var(--glow-b) 90%,
    transparent 98%
  );
  -webkit-mask:
    linear-gradient(black 0 0) content-box,
    linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(black 0 0) content-box exclude,
    linear-gradient(black 0 0);
  opacity: 0.7;
  pointer-events: none;
  animation: v2-os-spin 8s linear infinite;
  transition: opacity 400ms var(--ease);
}
.v2-model__aside > .v2-paper::before {
  animation-delay: -4s;
}
.v2-bench::after,
.v2-model__aside > .v2-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--accent) 7%, transparent),
    transparent 70%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease);
}
.v2-bench:hover::before,
.v2-model__aside > .v2-paper:hover::before {
  opacity: 1;
}
.v2-bench:hover::after,
.v2-model__aside > .v2-paper:hover::after {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .v2-bench:hover,
  .v2-model__aside > .v2-paper:hover {
    transform: perspective(1000px) rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg)) translateY(-4px);
    box-shadow: var(--ring), var(--shadow-pop);
  }
}

/* ---------- The chart ---------- */
/* The model's bars run purple to blue, the stretch past the base model's
   score lit in cyan; the base model's bars are zinc. Rows split by hairlines
   like a table; the gain over the base sits in a chip at the end of each. */
.v2-bench__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding-bottom: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--muted);
}
.v2-bench__title .v2-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
}
/* A live dot before "Benchmarks". */
.v2-bench__title .v2-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: v2-os-ping 2.4s var(--ease) infinite;
}
.v2-bench__rows {
  position: relative;
}
.v2-bench__row {
  --d: calc(160ms + var(--i, 0) * 90ms);
  position: relative;
  display: grid;
  grid-template-columns: minmax(88px, 34%) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-block: var(--space-3);
  border-top: 1px solid var(--rule);
}
/* Hovering a row lifts it onto a filled panel with a purple edge and sets
   its label in full ink; the other rows stay exactly as they are. */
.v2-bench__row::before {
  content: "";
  position: absolute;
  inset: 3px calc(-1 * var(--space-3));
  z-index: -1;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  box-shadow:
    var(--ring),
    inset 2px 0 0 var(--accent);
  opacity: 0;
  transition: opacity 250ms var(--ease);
}
.v2-bench__row:hover::before {
  opacity: 1;
}
.v2-bench__label {
  font-size: var(--fs-caption);
  line-height: 1.35;
  color: var(--ink-2);
  transition: color 250ms var(--ease);
}
.v2-bench__row:hover .v2-bench__label {
  color: var(--ink);
}
.v2-bench__bars {
  display: grid;
  gap: var(--space-1);
}
.v2-bench__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.v2-bench__track {
  flex: 1 1 0;
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--paper-3);
}
.v2-bench__track > span {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  transform-origin: left center;
}
.v2-bench__bar.is-model .v2-bench__track > span,
.v2-bench__legend i.is-model {
  background: linear-gradient(90deg, var(--accent), var(--glow-mid));
}
.v2-bench__bar.is-base .v2-bench__track > span,
.v2-bench__legend i.is-base {
  background: var(--rule-strong);
}
/* The gain: the stretch of the model's bar past the base model's score. */
.v2-bench__row.is-gain .is-model .v2-bench__track > span::after {
  content: "";
  position: absolute;
  inset: 0 0 0 var(--gain);
  background: linear-gradient(90deg, var(--glow-mid), var(--glow-b));
  box-shadow: 0 0 8px var(--glow-b);
}
/* The shine: a highlight that crosses the model's bar once it has grown,
   and again and again while its row is hovered. */
.v2-bench__bar.is-model .v2-bench__track > span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--on-accent) 80%, transparent),
    transparent
  );
  translate: -100% 0;
}
.v2-bench__row:hover .is-model .v2-bench__track > span::before {
  animation: v2-os-shine 1.4s var(--ease) infinite;
}
.v2-bench__val {
  flex: 0 0 36px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--muted);
}
.v2-bench__bar.is-model .v2-bench__val {
  color: var(--ink);
  font-weight: 500;
}
/* One width for every chip, so the tracks line up down the chart. */
.v2-bench__delta {
  justify-self: end;
  width: 54px;
  padding-block: 2px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--muted);
  box-shadow: var(--ring);
}
.v2-bench__row.is-gain .v2-bench__delta {
  color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.v2-bench__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-caption);
  color: var(--muted);
}
.v2-bench__legend i {
  display: inline-block;
  width: 14px;
  height: 6px;
  margin-right: var(--space-2);
  border-radius: var(--r-pill);
  vertical-align: middle;
}
.v2-bench__note {
  margin-top: var(--space-3);
}

/* ---------- The paper card (LiveBench) ---------- */
/* The venue on a pill with a shine that passes every few seconds; the
   paper's page zooms in on hover as a sheen crosses it. */
.v2-model__aside > .v2-paper .v2-paper__body > .v2-label {
  position: relative;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  overflow: hidden;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.v2-model__aside > .v2-paper .v2-paper__body > .v2-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: v2-os-ping 2.4s var(--ease) infinite;
}
.v2-model__aside > .v2-paper .v2-paper__body > .v2-label::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in srgb, var(--on-accent) 70%, transparent) 50%,
    transparent 70%
  );
  translate: -100% 0;
  animation: v2-os-glint 5s var(--ease) 1.2s infinite;
}
.v2-model__aside > .v2-paper .v2-paper__media img {
  transition: scale 900ms var(--v2-os-out);
}
.v2-model__aside > .v2-paper:hover .v2-paper__media img {
  scale: 1.05;
}
.v2-model__aside > .v2-paper .v2-paper__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    color-mix(in srgb, var(--accent) 16%, transparent) 50%,
    transparent 65%
  );
  translate: -100% 0;
  pointer-events: none;
}
.v2-model__aside > .v2-paper:hover .v2-paper__media::after {
  animation: v2-os-sheen 1.2s var(--ease);
}

/* ---------- Entrances (js/research.js) ---------- */
/* A card rises in, its copy and then its aside a beat behind; the icon pops
   and the hairline draws out to the number. */
.v2-os-motion .v2-model:not(.is-in),
.v2-os-motion .v2-model:not(.is-in) .v2-model__copy,
.v2-os-motion .v2-model:not(.is-in) .v2-model__aside,
.v2-os-motion .v2-model:not(.is-in) .v2-model__mark {
  opacity: 0;
}
.v2-os-motion .v2-model.is-in {
  animation: v2-os-rise 900ms var(--v2-os-out) backwards;
}
.v2-os-motion .v2-model.is-in .v2-model__copy {
  animation: v2-os-rise-sm 800ms var(--v2-os-out) 120ms backwards;
}
.v2-os-motion .v2-model.is-in .v2-model__aside {
  animation: v2-os-rise-sm 800ms var(--v2-os-out) 240ms backwards;
}
.v2-os-motion .v2-model.is-in .v2-model__mark {
  animation: v2-os-pop 700ms var(--v2-os-spring) 260ms backwards;
}
.v2-os-motion .v2-model.is-in .v2-model__head::before {
  animation: v2-os-draw 1s var(--v2-os-out) 420ms backwards;
}
/* A chart plays when it comes into view: a scan line runs down the rows as
   each one fades in, its bars grow while js/research.js counts the scores
   up (same delays: --d, and 80ms more for the base), the gain lights up, the
   shine crosses, and the chip pops in. */
.v2-os-motion .v2-bench:not(.is-in) .v2-bench__row,
.v2-os-motion .v2-bench:not(.is-in) .v2-bench__delta,
.v2-os-motion .v2-bench:not(.is-in) .v2-bench__track > span::after {
  opacity: 0;
}
.v2-os-motion .v2-bench:not(.is-in) .v2-bench__track > span {
  transform: scaleX(0);
}
.v2-os-motion .v2-bench.is-in .v2-bench__row {
  animation: v2-os-row 500ms var(--v2-os-out) var(--d) backwards;
}
.v2-os-motion .v2-bench.is-in .v2-bench__track > span {
  animation: v2-os-grow 900ms var(--v2-os-out) var(--d) backwards;
}
.v2-os-motion .v2-bench.is-in .is-base .v2-bench__track > span {
  animation-delay: calc(var(--d) + 80ms);
}
.v2-os-motion
  .v2-bench.is-in
  .v2-bench__row.is-gain
  .is-model
  .v2-bench__track
  > span::after {
  animation: v2-os-fade 500ms var(--ease) calc(var(--d) + 650ms) backwards;
}
.v2-os-motion .v2-bench.is-in .is-model .v2-bench__track > span::before {
  animation: v2-os-shine 900ms var(--ease) calc(var(--d) + 850ms);
}
.v2-os-motion
  .v2-bench.is-in
  .v2-bench__row:hover
  .is-model
  .v2-bench__track
  > span::before {
  animation: v2-os-shine 1.4s var(--ease) infinite;
}
.v2-os-motion .v2-bench.is-in .v2-bench__delta {
  animation: v2-os-pop 600ms var(--v2-os-spring) calc(var(--d) + 700ms)
    backwards;
}
.v2-os-motion .v2-bench.is-in .v2-bench__rows::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-6));
  right: calc(-1 * var(--space-6));
  top: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--glow-a),
    var(--glow-b),
    transparent
  );
  box-shadow: 0 0 14px var(--glow-a);
  opacity: 0;
  pointer-events: none;
  animation: v2-os-scan 1.5s var(--ease) 120ms;
}
/* The paper card: its page sweeps once as it arrives. */
.v2-os-motion
  .v2-model.is-in
  .v2-model__aside
  > .v2-paper
  .v2-paper__media::after {
  animation: v2-os-sheen 1.4s var(--ease) 700ms;
}
/* Off screen, the loops hold still. */
.v2-os-motion .v2-model:not(.is-live) *,
.v2-os-motion .v2-model:not(.is-live) *::before,
.v2-os-motion .v2-model:not(.is-live) *::after {
  animation-play-state: paused;
}
/* Reduced motion (base.css stops every animation): no edge light, which would
   otherwise sit still in one corner. */
@media (prefers-reduced-motion: reduce) {
  .v2-bench::before,
  .v2-model__aside > .v2-paper::before {
    display: none;
  }
}

@keyframes v2-os-spin {
  to {
    --v2-os-spin: 360deg;
  }
}
@keyframes v2-os-drift {
  0% {
    translate: 0 0;
    scale: 1;
  }
  50% {
    translate: 14% 10%;
    scale: 1.15;
  }
  100% {
    translate: 24% -6%;
    scale: 0.92;
  }
}
@keyframes v2-os-breathe {
  from {
    opacity: calc(var(--v2-os-glow) * 0.8);
  }
  to {
    opacity: calc(var(--v2-os-glow) * 1.8);
  }
}
@keyframes v2-os-ping {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  }
  70%,
  100% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}
@keyframes v2-os-glint {
  0% {
    translate: -100% 0;
  }
  24%,
  100% {
    translate: 100% 0;
  }
}
@keyframes v2-os-sheen {
  from {
    translate: -100% 0;
  }
  to {
    translate: 100% 0;
  }
}
@keyframes v2-os-shine {
  from {
    translate: -100% 0;
  }
  to {
    translate: 250% 0;
  }
}
@keyframes v2-os-rise {
  from {
    opacity: 0;
    translate: 0 40px;
    scale: 0.98;
  }
}
@keyframes v2-os-rise-sm {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}
@keyframes v2-os-pop {
  from {
    opacity: 0;
    scale: 0.5;
  }
}
@keyframes v2-os-draw {
  from {
    scale: 0 1;
  }
}
@keyframes v2-os-row {
  from {
    opacity: 0;
    translate: -8px 0;
  }
}
@keyframes v2-os-grow {
  from {
    transform: scaleX(0);
  }
}
@keyframes v2-os-fade {
  from {
    opacity: 0;
  }
}
@keyframes v2-os-scan {
  0% {
    top: 0;
    opacity: 0;
  }
  12%,
  85% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}