:root {

  --duration-stagger:    40ms;
  --duration-micro:      80ms;
  --duration-quick:     150ms;
  --duration-fast:      250ms;
  --duration-medium:    350ms;
  --duration-slow:      400ms;
  --duration-very-slow: 500ms;

  --duration-reveal:    700ms;

  --ease-reveal:        var(--ease-smooth-out);

  --duration-draw:      900ms;

  --idle-settle:        90ms;
  --delay-settle:      140ms;
  --duration-settle:   900ms;
  --ease-settle: cubic-bezier(0.65, 0, 0.35, 1);

  --idle-across:        60ms;
  --delay-across:        0ms;
  --duration-across:   380ms;
  --ease-across: var(--ease-smooth-out);

  --duration-ambient:  14000ms;

  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;

  --distance-base:   8px;

  --distance-reveal: 10px;
  --distance-medium: 12px;
  --blur-small:  2px;
  --blur-medium: 3px;
}

.reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .js .reveal--armed { opacity: 0; transform: translateY(var(--distance-reveal)); }
  .js .reveal--in {
    opacity: 1; transform: none;
    transition: opacity   var(--duration-reveal) var(--ease-reveal),
                transform var(--duration-reveal) var(--ease-reveal);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .js .reveal--settle.reveal--armed { transform: translateY(calc(var(--distance-base) * -1)); }
  .js .stagger > * { --reveal-delay: calc(var(--i, 0) * var(--duration-stagger)); }
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero .reveal {
    animation: hero-rise var(--duration-reveal) var(--ease-reveal) forwards;
    animation-delay: calc(var(--i, 0) * var(--duration-micro));
  }
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(var(--distance-reveal)); }
    to   { opacity: 1; transform: none; }
  }

  .js .hero__media img,
  .js .hero .ambient__video {
    animation: hero-settle var(--duration-ambient) var(--ease-smooth-out) forwards; }
  @keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }
}

@media (prefers-reduced-motion: no-preference) {
  .in-open h1::after, .hm-hero h1::after {
    animation: rule-draw var(--duration-reveal) var(--ease-smooth-out) both;
  }
  .device--draw {
    animation: bars-draw var(--duration-draw) var(--ease-smooth-out) both;
  }
}

@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bars-draw {
  from { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
  to   { stroke-dasharray: 1000; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .reveal--armed h2::after { transform: scaleX(0); }
  .js .reveal--in h2::after {
    transform: scaleX(1);
    transition: transform var(--duration-reveal) var(--ease-reveal);
  }
  .js .reveal--armed .device--figure { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
  .js .reveal--in .device--figure {
    stroke-dasharray: 1000; stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--duration-draw) var(--ease-reveal);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal--armed, .js .reveal--in, .js .reveal--settle.reveal--armed {
    opacity: 1 !important; transform: none !important; transition: none !important; }

  .hero .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero__media img { animation: none !important; transform: none !important; }
  .ambient__video { opacity: 0 !important; transition: none !important;
    animation: none !important; transform: none !important; }
  .pin__media { transform: none !important; }

  .frame > img, .frame > .frame__empty { transition: none !important; }
  .frame:hover > img, .frame:hover > .frame__empty,
  .card-link:hover .frame > img, .card-link:hover .frame > .frame__empty {
    transform: none !important; }
  .card-link:hover, .card-link:focus-visible { transform: none !important; }

  .row, .row::after { transition: none !important; }
  .row:hover, .row:focus-visible { transform: none !important; }
  .numeral, .tally { transition: none !important; }
  .deck-rail__dot, .deck-rail__motion { transition: none !important; }
  .btn:hover, .btn:focus-visible { transform: none !important; }

  .btn__fill { transition: none !important; }

  .in-pills__slide { transition: none !important; }

  .in-open h1::after, .hm-hero h1::after, .device--draw {
    animation: none !important; }
  h2::after, .js .reveal--armed h2::after, .js .reveal--in h2::after {
    transform: none !important; transition: none !important; }
  .device--figure, .js .reveal--armed .device--figure, .js .reveal--in .device--figure {
    stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
    transition: none !important; }

  .nav__panel, .nav__panel a, .nav__panel-col > li { transition: none !important; }
  .nav__panel { transform: none !important; }
  .nav__panel-col > li { opacity: 1 !important; transform: none !important; }
  .nav__panel a:hover { transform: none !important; }

  body::after { transition: none !important; }
  .skip { transition: none !important; }
  .u-arrow { transition: none !important; transform: none !important; }

  .field input, .field textarea { transition: none !important; }
  .hm-practice__item, .hm-practice__item h3 { transition: none !important; }
}