/* Turns mark motion (optional brand motion, docs/branding/turns_brand_guidelines.html).
   Pages draw the mark as inline <svg> with one <use> per arc from
   /brand/turns-mark.svg, and the page itself animates each arc. The animation
   lives here, not inside an SVG file, because Chrome keeps an SVG image's
   animation clock with the cached image: a SMIL file plays once per tab and
   every later page load shows it already finished. A page's own CSS animation
   starts again on every load.

   Each arc starts turned away from its resting angle, springs past it and
   settles; 0.25 s delay, 2.85 s, once. The final frame is the static mark.
   The linear() curves are sampled from docs/branding/turns-icon-animated.svg;
   browsers without linear() fall back to ease-out. Reduced motion: no motion.
   Colour comes from `color` on the <svg> (each page sets it). */
.turns-mark {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 32;
  stroke-linecap: butt;
  overflow: visible;
}
.turns-mark-arc {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation-duration: 2.85s;
  animation-delay: 0.25s;
  /* backwards, not both: the last frame IS the resting mark, so letting go
     after the end drops the compositor layer and renders it pixel-exact. */
  animation-fill-mode: backwards;
  animation-timing-function: ease-out;
}
.turns-mark-arc-inner {
  animation-name: turns-mark-inner;
  animation-timing-function: linear(0, 0.0084, 0.0325, 0.071, 0.1225, 0.1855, 0.2584, 0.3399, 0.4279, 0.5207, 0.6161, 0.7123, 0.8071, 0.8985, 0.9847, 1.0641, 1.1353, 1.1975, 1.2499, 1.2922, 1.3243, 1.3464, 1.3587, 1.3619, 1.3567, 1.3439, 1.3243, 1.299, 1.2689, 1.2351, 1.1987, 1.1607, 1.1221, 1.0839, 1.0468, 1.0117, 0.9793, 0.9501, 0.9244, 0.9027, 0.885, 0.8716, 0.8622, 0.8569, 0.8553, 0.8573, 0.8624, 0.8704, 0.8807, 0.893, 0.9067, 0.9216, 0.937, 0.9527, 0.9681, 0.983, 0.9971, 1.0101, 1.0217, 1.0319, 1.0404, 1.0474, 1.0526, 1.0561, 1.0581, 1.0585, 1.0575, 1.0552, 1.0519, 1.0475, 1.0424, 1.0367, 1.0307, 1.0244, 1.0181, 1.0119, 1.0059, 1.0002, 0.995, 0.9904, 0.9864, 0.983, 0.9804, 0.9784, 0.977, 0.9764, 0.9766, 0.9775, 0.9789, 0.9808, 0.9831, 0.9856, 0.9881, 0.9906, 0.993, 0.9953, 0.9972, 0.9988, 1.0001, 1.0012, 1.0019, 1.0023, 1.0025, 1.0024, 1.0023, 1.002, 1.0017, 1.0013, 1.001, 1.0007, 1.0004, 1.0002, 1.0001, 1, 1);
}
@keyframes turns-mark-inner {
  from { transform: rotate(135deg); }
  to { transform: rotate(0deg); }
}
.turns-mark-arc-middle {
  animation-name: turns-mark-middle;
  animation-timing-function: linear(0, 0.009, 0.0347, 0.0757, 0.13, 0.196, 0.271, 0.354, 0.4423, 0.534, 0.6277, 0.721, 0.8127, 0.9007, 0.9843, 1.0623, 1.1333, 1.197, 1.2523, 1.299, 1.3373, 1.3663, 1.387, 1.3993, 1.4033, 1.4, 1.3897, 1.373, 1.351, 1.3243, 1.294, 1.2603, 1.2243, 1.187, 1.1493, 1.1113, 1.0743, 1.0387, 1.0047, 0.9733, 0.9447, 0.919, 0.8967, 0.878, 0.8627, 0.851, 0.843, 0.838, 0.8367, 0.838, 0.8423, 0.8493, 0.8583, 0.8693, 0.8817, 0.8953, 0.91, 0.925, 0.9403, 0.9557, 0.9707, 0.9853, 0.999, 1.0117, 1.023, 1.0333, 1.0423, 1.05, 1.056, 1.0607, 1.064, 1.0657, 1.0663, 1.0657, 1.0637, 1.061, 1.0573, 1.0527, 1.0477, 1.042, 1.036, 1.03, 1.0237, 1.0173, 1.0113, 1.0057, 1, 0.995, 0.9907, 0.9873, 0.9843, 0.9823, 0.981, 0.9807, 0.9807, 0.9813, 0.9827, 0.984, 0.9857, 0.9877, 0.9897, 0.9913, 0.9933, 0.995, 0.9963, 0.9973, 0.9983, 0.999, 0.9997, 1, 1, 1, 1, 1, 1);
}
@keyframes turns-mark-middle {
  from { transform: rotate(-30deg); }
  to { transform: rotate(0deg); }
}
.turns-mark-arc-outer {
  animation-name: turns-mark-outer;
  animation-timing-function: linear(0, 0.0036, 0.0141, 0.0312, 0.0543, 0.0833, 0.1178, 0.1576, 0.2023, 0.2516, 0.3051, 0.3623, 0.4228, 0.4861, 0.5514, 0.6182, 0.6855, 0.7527, 0.8188, 0.8833, 0.9452, 1.0038, 1.0587, 1.1091, 1.1548, 1.1954, 1.2307, 1.2605, 1.2848, 1.3038, 1.3176, 1.3262, 1.3299, 1.329, 1.3238, 1.3147, 1.302, 1.2861, 1.2673, 1.2462, 1.223, 1.1983, 1.1725, 1.1459, 1.1191, 1.0923, 1.0659, 1.0403, 1.0158, 0.9926, 0.9711, 0.9513, 0.9336, 0.9178, 0.9043, 0.8929, 0.8839, 0.877, 0.8723, 0.8697, 0.869, 0.8702, 0.8732, 0.8778, 0.8837, 0.8909, 0.8992, 0.9083, 0.9182, 0.9286, 0.9392, 0.9501, 0.9609, 0.9717, 0.9821, 0.9921, 1.0016, 1.0104, 1.0185, 1.0258, 1.0323, 1.0379, 1.0427, 1.0464, 1.0494, 1.0512, 1.0519, 1.0514, 1.05, 1.0476, 1.0445, 1.0408, 1.0366, 1.0322, 1.0277, 1.0233, 1.0189, 1.0149, 1.0113, 1.0081, 1.0053, 1.003, 1.0012, 0.9999, 0.9989, 0.9984, 0.9982, 0.9982, 0.9984, 0.9987, 0.9991, 0.9994, 0.9997, 0.9999, 1);
}
@keyframes turns-mark-outer {
  from { transform: rotate(-180deg); }
  to { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .turns-mark-arc { animation: none; }
}