/*
 * Motion for every brand. Durations and curves are the brand book's scale (§6.6, css/tokens.css):
 * 120ms hover tint, 180ms press and small moves, 220ms state changes, 320ms entrances.
 *
 * Rules: only transform and opacity move; entrances ease out; state changes use transitions so they
 * can be interrupted; the header, the section bar and the sidebars stay still because they are seen on
 * every page; reduced motion keeps the fades and drops the movement.
 */

@keyframes ds-fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--ds-rise, .4rem));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ds-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ds-underline-in {
  from { transform: scaleX(.5); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

@keyframes ds-icon-in {
  from { opacity: 0; transform: rotate(-40deg) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* Registered so the preview's gradient can blend between brand colours. */
@property --pv-from   { syntax: "<color>"; inherits: true; initial-value: #2429CC; }
@property --pv-to     { syntax: "<color>"; inherits: true; initial-value: #5512C2; }
@property --pv-accent { syntax: "<color>"; inherits: true; initial-value: #2956EC; }

/* ─── Page entrance ──────────────────────────────────────────────────────────
   Instant navigation swaps in a new container, and CSS animations start on insertion, so every page
   change animates. The first blocks rise 8px, 40ms apart, 160ms at most. */
.ds-hero-text > *,
.ds-hero-panel,
.md-content__inner > :nth-child(-n+6) {
  animation: ds-fade-up var(--ds-dur-enter) var(--ds-ease-out) both;
}

.ds-hero-text > :nth-child(2)           { animation-delay: 40ms; }
.ds-hero-text > :nth-child(3)           { animation-delay: 80ms; }
.ds-hero-text > :nth-child(n+4)         { animation-delay: 120ms; }
.ds-hero-panel                          { animation-delay: 80ms; }
.md-content__inner > :nth-child(2)      { animation-delay: 40ms; }
.md-content__inner > :nth-child(3)      { animation-delay: 80ms; }
.md-content__inner > :nth-child(4)      { animation-delay: 120ms; }
.md-content__inner > :nth-child(n+5)    { animation-delay: 160ms; }

/* The active tab's underline draws in when a new page arrives. */
.md-tabs__item--active .md-tabs__link::after {
  animation: ds-underline-in var(--ds-dur-base) var(--ds-ease-out) both;
}

.md-tabs__link {
  transition: color var(--ds-dur-instant) var(--ds-ease-standard);
}

/* ─── Theme switch: surfaces blend instead of snapping ───────────────────── */
body,
.md-header,
.md-sidebar--primary,
.md-footer,
.md-footer-meta,
.ds-hero,
.ds-hero-panel,
.md-typeset .ds-diagram,
.md-typeset table:not([class]) th,
.md-typeset .admonition,
.md-typeset details {
  transition:
    background-color var(--ds-dur-base) var(--ds-ease-standard),
    border-color var(--ds-dur-base) var(--ds-ease-standard),
    color var(--ds-dur-base) var(--ds-ease-standard);
}

[data-md-component="palette"] .md-header__button:not([hidden]) svg {
  animation: ds-icon-in var(--ds-dur-base) var(--ds-ease-out);
}

[data-md-component="palette"] .md-header__button {
  transition:
    color var(--ds-dur-instant) var(--ds-ease-standard),
    border-color var(--ds-dur-instant) var(--ds-ease-standard),
    transform 100ms var(--ds-ease-out);
}

[data-md-component="palette"] .md-header__button:active {
  transform: scale(.94);
}

/* ─── Buttons and links ──────────────────────────────────────────────────── */
.md-typeset .md-button,
.ds-hero-actions .md-button {
  transition:
    background-color var(--ds-dur-instant) var(--ds-ease-standard),
    border-color var(--ds-dur-instant) var(--ds-ease-standard),
    color var(--ds-dur-instant) var(--ds-ease-standard),
    transform 100ms var(--ds-ease-out);
}

.md-typeset .md-button:active,
.ds-hero-actions .md-button:active {
  transform: scale(.97);
}

.ds-link-arrow::after,
.ds-button-arrow::after {
  transition: transform var(--ds-dur-fast) var(--ds-ease-out);
}

.ds-link-arrow:hover::after,
.ds-button-arrow:hover::after,
.md-typeset .ds-card:hover .ds-link-arrow::after {
  transform: translateX(.15rem);
}

.md-typeset a,
.md-nav__link {
  transition: color var(--ds-dur-instant) var(--ds-ease-standard);
}

.md-sidebar--primary .md-nav__link {
  transition:
    color var(--ds-dur-instant) var(--ds-ease-standard),
    background-color var(--ds-dur-instant) var(--ds-ease-standard);
}

.md-search__form {
  transition:
    background-color var(--ds-dur-instant) var(--ds-ease-standard),
    border-color var(--ds-dur-instant) var(--ds-ease-standard);
}

/* ─── Cards and pickers ──────────────────────────────────────────────────── */
.md-typeset .ds-card,
.md-typeset .ds-picker-options > label {
  transition:
    border-color var(--ds-dur-instant) var(--ds-ease-standard),
    background-color var(--ds-dur-instant) var(--ds-ease-standard),
    box-shadow var(--ds-dur-fast) var(--ds-ease-standard),
    transform var(--ds-dur-fast) var(--ds-ease-out);
}

.md-typeset .ds-card:hover {
  box-shadow: var(--ds-card-shadow);
  transform: translateY(-1px);
}

.md-typeset .ds-card:active,
.md-typeset .ds-picker-options > label:active {
  transform: scale(.99);
}

/* Pager cards lift like the landing cards, and their arrow and a link pill's arrow lead the way. */
.md-typeset .ds-pager-link:hover {
  box-shadow: var(--ds-card-shadow);
  transform: translateY(-1px);
}

.md-typeset .ds-pager-direction .ds-icon,
.md-typeset .ds-link-pills a::after,
.md-typeset .ds-link-pills label::after {
  transition: transform var(--ds-dur-fast) var(--ds-ease-out);
}

.md-typeset .ds-pager-link:hover .ds-icon-arrow,
.md-typeset .ds-link-pills a:hover::after,
.md-typeset .ds-link-pills label:hover::after {
  transform: translateX(.15rem);
}

.md-typeset .ds-pager-link:hover .ds-icon-arrow-left {
  transform: translateX(-.15rem);
}

/* A switch option or section bar tab gives slightly under the press. */
.md-typeset .ds-switch-options > label,
.md-typeset .ds-section-tabs > a {
  transition-property: color, background-color, border-color, box-shadow, transform;
}

.md-typeset .ds-switch-options > label:active,
.md-typeset .ds-section-tabs > a:active,
.md-typeset .ds-link-pills label:active {
  transform: scale(.97);
}

.md-typeset .ds-cards[data-variant="compact"] .ds-card::after {
  transition:
    transform var(--ds-dur-fast) var(--ds-ease-out),
    background-color var(--ds-dur-instant) var(--ds-ease-standard);
}

.md-typeset .ds-cards[data-variant="compact"] .ds-card:hover::after {
  transform: translateX(.15rem);
}

/* A picker's or switch's panel and a tab's content fade in when they become the visible one. */
.md-typeset .ds-picker-panels > *,
.md-typeset .ds-switch-panels > *,
.md-typeset .tabbed-block,
.ds-env-values {
  --ds-rise: .2rem;

  animation: ds-fade-up var(--ds-dur-base) var(--ds-ease-out) both;
}

.md-typeset .tabbed-labels > label {
  transition:
    color var(--ds-dur-instant) var(--ds-ease-standard),
    background-color var(--ds-dur-instant) var(--ds-ease-standard);
}

/* Segmented control: the pill slides (a transition, so a quick second click redirects it). */
.ds-segmented::before {
  transition: transform var(--ds-dur-base) var(--ds-ease-out), width var(--ds-dur-base) var(--ds-ease-out);
}

.ds-segmented > label {
  transition: color var(--ds-dur-instant) var(--ds-ease-standard);
}

/* Collapsible content opens with a short rise. */
.md-typeset details[open] > :not(summary) {
  --ds-rise: .2rem;

  animation: ds-fade-up var(--ds-dur-base) var(--ds-ease-out) both;
}

/* Diagrams arrive once they are drawn. */
.md-typeset .ds-diagram {
  animation: ds-fade-up var(--ds-dur-enter) var(--ds-ease-out) both;
}

/* A sequence diagram's rows follow top to bottom (docs.js numbers them); the cap keeps a long diagram
   from trailing on. */
.md-typeset .ds-seq-rows > * {
  animation: ds-fade-up var(--ds-dur-enter) var(--ds-ease-out) both;
  animation-delay: calc(min(var(--ds-seq-i, 0), 14) * 30ms + 100ms);
}

/* ─── Customer previews ──────────────────────────────────────────────────── */
.md-typeset .ds-preview {
  transition:
    --pv-from var(--ds-dur-enter) var(--ds-ease-standard),
    --pv-to var(--ds-dur-enter) var(--ds-ease-standard),
    --pv-accent var(--ds-dur-enter) var(--ds-ease-standard);
}

.md-typeset .ds-swatch {
  transition: border-color var(--ds-dur-instant) var(--ds-ease-standard), transform 100ms var(--ds-ease-out);
}

.md-typeset .ds-swatch:active {
  transform: scale(.94);
}

/* A checkbox's fill blends in and its check pops from a smaller size. */
.md-typeset .ds-check input {
  transition: background-color var(--ds-dur-instant) var(--ds-ease-standard), border-color var(--ds-dur-instant) var(--ds-ease-standard);
}

.md-typeset .ds-check input::before {
  transform: scale(.6);
  transition: opacity var(--ds-dur-fast) var(--ds-ease-out), transform var(--ds-dur-fast) var(--ds-ease-out);
}

.md-typeset .ds-check input:checked::before {
  transform: none;
}

.md-typeset .pv-wallets {
  transition: grid-template-columns var(--ds-dur-base) var(--ds-ease-out);
}

.md-typeset .pv-wallet {
  transition: opacity var(--ds-dur-fast) var(--ds-ease-standard);
}

.md-typeset .pv-wallets-block,
.md-typeset .pv-collapse {
  transition:
    grid-template-rows var(--ds-dur-base) var(--ds-ease-out),
    opacity var(--ds-dur-fast) var(--ds-ease-standard),
    margin var(--ds-dur-base) var(--ds-ease-out);
}

/* ─── Reduced motion: fades stay, movement goes ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-rise: 0rem;
  }

  .ds-picker-panels > *,
  .ds-switch-panels > *,
  .tabbed-block,
  .ds-env-values,
  details[open] > :not(summary) {
    --ds-rise: 0rem;
  }

  .md-tabs__item--active .md-tabs__link::after,
  [data-md-component="palette"] .md-header__button:not([hidden]) svg {
    animation: none;
  }

  .md-typeset .md-button:active,
  .ds-hero-actions .md-button:active,
  .md-typeset .ds-card:hover,
  .md-typeset .ds-card:active,
  .md-typeset .ds-picker-options > label:active,
  .md-typeset .ds-swatch:active,
  [data-md-component="palette"] .md-header__button:active,
  .ds-link-arrow:hover::after,
  .ds-button-arrow:hover::after,
  .md-typeset .ds-card:hover .ds-link-arrow::after,
  .md-typeset .ds-cards[data-variant="compact"] .ds-card:hover::after,
  .md-typeset .ds-pager-link:hover,
  .md-typeset .ds-pager-link:hover .ds-icon,
  .md-typeset .ds-link-pills a:hover::after,
  .md-typeset .ds-link-pills label:hover::after,
  .md-typeset .ds-switch-options > label:active,
  .md-typeset .ds-section-tabs > a:active,
  .md-typeset .ds-link-pills label:active,
  .md-typeset .ds-check input::before {
    transform: none;
  }

  .ds-segmented::before,
  .md-typeset .pv-wallets,
  .md-typeset .pv-wallets-block,
  .md-typeset .pv-collapse {
    transition: none;
  }
}