/* Home pictures: the style and the motion of every isometric picture and every 2D pictogram below the carousel. */
/* ---------- the picture style: line plus soft fill, neutral ink, the key the one petrol part ---------- */
.pic{--il-ink:var(--ds-text-primary);--el-ink:var(--il-ink);--el-accent:var(--ds-logo-bar);color:var(--ds-text-primary)}
.il-key{overflow:visible}
.c-l{stroke:var(--il-ink);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;fill:none}
.c-ft{fill:color-mix(in srgb,var(--il-ink) 5%,var(--ds-bg-surface))}
.c-fl{fill:color-mix(in srgb,var(--il-ink) 12%,var(--ds-bg-surface))}
.c-fr{fill:color-mix(in srgb,var(--il-ink) 20%,var(--ds-bg-surface))}
.c-fp{fill:color-mix(in srgb,var(--il-ink) 8%,var(--ds-bg-surface))}
.c-fg{fill:var(--il-ink);fill-opacity:.03;stroke-dasharray:4 3}
.c-gt,.c-gl,.c-gr{fill:none;stroke-dasharray:4 3}
.c-plane{fill:var(--il-ink);fill-opacity:.04;stroke-opacity:.55}
.c-grid{fill:none;stroke:var(--il-ink);stroke-opacity:.14;stroke-width:1;vector-effect:non-scaling-stroke}
.c-dim{opacity:.4}
.c-dash{stroke-dasharray:5 4}
.c-path{stroke-width:6;stroke-opacity:.26;stroke-linecap:butt;vector-effect:none}
.c-fill{fill:var(--il-ink);stroke:none}
.c-core{fill:var(--il-ink);fill-opacity:.8;stroke:none}
.c-line{fill:var(--il-ink);fill-opacity:.7;stroke:none}
.c-shadow{fill:var(--il-ink);fill-opacity:.1}
.c-tick{opacity:.7}
.c-ac{fill:none;stroke:var(--el-accent);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pic .halo{fill:var(--il-ink);fill-opacity:.35;stroke:var(--il-ink);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:center}
.il-svg{display:block;inline-size:100%;block-size:100%;overflow:visible}

/* ---------- motion: the owner's accepted loops, composed on the one 3600 ms clock ----------
   KEYFRAME EASINGS ARE LITERAL COPIES OF THE TOKENS (Chromium drops var() inside a keyframe's animation-timing-function):
     cubic-bezier(0.4, 0, 1, 1)        = --ds-motion-ease-exit
     cubic-bezier(0, 0, 0.2, 1)        = --ds-motion-ease-enter
     cubic-bezier(0.2, 0, 0, 1)        = --ds-motion-ease-move
     cubic-bezier(0.3, 0, 0.1, 1)      = --ds-motion-ease-travel
     cubic-bezier(0.05, 0.7, 0.1, 1)   = --ds-motion-ease-write
     cubic-bezier(0.37, 0, 0.63, 1)    = --ds-motion-ease-breathe */
.il-w,.il-m,.il-h,.il-sun,.il-moon,.il-ghost,.il-pulse{transform-box:fill-box}
.il-w{transform-origin:0 50%}
.il-m,.il-pulse,.il-ghost{transform-origin:center}
:root:not([data-motion="off"]) .pic .il-w,:root:not([data-motion="off"]) .pic .il-m,:root:not([data-motion="off"]) .pic .il-p,
:root:not([data-motion="off"]) .pic .il-h,:root:not([data-motion="off"]) .pic .il-gate,:root:not([data-motion="off"]) .pic .il-dim,
:root:not([data-motion="off"]) .pic .il-b,:root:not([data-motion="off"]) .pic .il-hand,:root:not([data-motion="off"]) .pic .il-sun,
:root:not([data-motion="off"]) .pic .il-moon,:root:not([data-motion="off"]) .pic .il-drift,:root:not([data-motion="off"]) .pic .il-ghost,
:root:not([data-motion="off"]) .pic .il-pulse,:root:not([data-motion="off"]) .pic .il-spin,:root:not([data-motion="off"]) .pic .il-rise,:root:not([data-motion="off"]) .pic .il-ws,:root:not([data-motion="off"]) .pic .il-q,:root:not([data-motion="off"]) .pic .il-lit,:root:not([data-motion="off"]) .pic .il-gup,:root:not([data-motion="off"]) .pic .il-p2{
  animation-duration:var(--ds-motion-loop-long);animation-iteration-count:infinite;animation-timing-function:linear;
  animation-delay:calc(var(--d,0ms) - var(--ds-motion-loop-long))}
:root:not([data-motion="off"]) .pic .il-w{animation-name:il-write}
:root:not([data-motion="off"]) .pic .il-m{animation-name:il-mark}
:root:not([data-motion="off"]) .pic .il-p{animation-name:il-pkt}
:root:not([data-motion="off"]) .pic .il-h{animation-name:il-glow}
:root:not([data-motion="off"]) .pic .il-gate{animation-name:il-lift}
:root:not([data-motion="off"]) .pic .il-dim{animation-name:il-off}
:root:not([data-motion="off"]) .pic .il-b{animation-name:il-blink}
:root:not([data-motion="off"]) .pic .il-hand{animation-name:il-turn}
:root:not([data-motion="off"]) .pic .il-sun{animation-name:il-day}
:root:not([data-motion="off"]) .pic .il-moon{animation-name:il-night}
:root:not([data-motion="off"]) .pic .il-drift{animation-name:il-drift}
:root:not([data-motion="off"]) .pic .il-ghost{animation-name:il-ghost}
:root:not([data-motion="off"]) .pic .il-pulse{animation-name:il-pulse}
:root:not([data-motion="off"]) .pic .il-spin{animation-name:il-spin}
:root:not([data-motion="off"]) .pic .il-rise{animation-name:il-rise}
:root:not([data-motion="off"]) .pic .il-ws{animation-name:il-writes}
:root:not([data-motion="off"]) .pic .il-q{animation-name:il-quarter}
:root:not([data-motion="off"]) .pic .il-lit{animation-name:il-lit}
:root:not([data-motion="off"]) .pic .il-gup{animation-name:il-gup}
:root:not([data-motion="off"]) .pic .il-p2{animation-name:il-pkt2}
.il-hand,.il-spin{transform-origin:0 0}
.il-q{opacity:0}
/* the partners' picture: its end still is the still (both keys lit, the gate up, the packet across); the keys light in turn (--d shifts the second), the gate lifts
   after the second, the packet passes, and the loop starts again from the dark keys and the shut gate */
.pic .halo.il-lit{opacity:var(--ds-motion-glow-peak);transform:scale(var(--ds-motion-glow-scale))}
.il-gup{transform:translateY(-11px)}

@keyframes il-write{
  0%,40%{transform:scaleX(1);opacity:1;animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}
  46%{transform:scaleX(1);opacity:0}
  46.1%{transform:scaleX(0);opacity:1}
  52%{transform:scaleX(0);opacity:1;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}
  62%,100%{transform:scaleX(1);opacity:1}
}
/* a written line of an isometric face: the browser must never rasterise an animated part under a skewed ancestor (it blurs), so such a part
   is a polygon with its projected coordinates and moves only by a short slide along the face's own edge, in and out of opacity */
@keyframes il-writes{
  0%,40%{transform:translate(0,0);opacity:1;animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}
  46%{transform:translate(0,0);opacity:0}
  46.1%{transform:translate(-5px,-2.9px);opacity:0}
  52%{transform:translate(-5px,-2.9px);opacity:0;animation-timing-function:cubic-bezier(0.05, 0.7, 0.1, 1)}
  62%,100%{transform:translate(0,0);opacity:1}
}
/* one of four clock hands, each visible for a quarter of the loop (opacity only) */
@keyframes il-lit{
  0%,4%{opacity:0;transform:scale(.9);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}
  14%,92%{opacity:var(--ds-motion-glow-peak);transform:scale(var(--ds-motion-glow-scale));animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}
  100%{opacity:0;transform:scale(.9)}
}
@keyframes il-gup{
  0%,52%{transform:translateY(0);animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}
  60%,92%{transform:translateY(-11px);animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}
  100%{transform:translateY(0)}
}
@keyframes il-pkt2{
  0%{transform:translate(var(--dx),var(--dy));opacity:0;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}
  6%,62%{transform:translate(var(--dx),var(--dy));opacity:1;animation-timing-function:cubic-bezier(0.3, 0, 0.1, 1)}
  84%,95%{transform:translate(0,0);opacity:1;animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}
  98%,100%{transform:translate(0,0);opacity:0}
}
@keyframes il-quarter{
  0%,24%{opacity:1;animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}
  27%,96%{opacity:0;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}
  100%{opacity:1}
}
@keyframes il-mark{
  0%,40%{opacity:1;animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}
  46%{opacity:0}
  52%{opacity:0;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}
  56%,100%{opacity:1}
}
@keyframes il-pkt{
  0%,10%{transform:translate(0,0);opacity:1;animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}
  14%{transform:translate(0,0);opacity:0}
  14.1%{transform:translate(var(--dx),var(--dy));opacity:0;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}
  18%{transform:translate(var(--dx),var(--dy));opacity:1;animation-timing-function:cubic-bezier(0.3, 0, 0.1, 1)}
  38%,100%{transform:translate(0,0);opacity:1}
}
@keyframes il-glow{
  0%,33%{opacity:0;transform:scale(.9);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}
  40%,45%{opacity:var(--ds-motion-glow-peak);transform:scale(var(--ds-motion-glow-scale));animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}
  58%{opacity:0;transform:scale(var(--ds-motion-glow-scale))}
  100%{opacity:0;transform:scale(.9)}
}
@keyframes il-lift{
  0%,38%{transform:translateY(0);animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}
  52%,55%{transform:translateY(-11px);animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}
  63%,100%{transform:translateY(0)}
}
@keyframes il-off{
  0%,40%{opacity:1;animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}
  46%,70%{opacity:.12;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}
  78%,100%{opacity:1}
}
@keyframes il-blink{
  0%,56%{opacity:1;animation-timing-function:cubic-bezier(0.4, 0, 1, 1)}
  60%{opacity:.15;animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}
  66%,100%{opacity:1}
}
@keyframes il-turn{
  0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.37, 0, 0.63, 1)}
  100%{transform:rotate(360deg)}
}
@keyframes il-spin{
  0%,20%{transform:rotate(0deg);animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}
  70%,100%{transform:rotate(360deg)}
}
@keyframes il-day{
  0%,38%{opacity:1;animation-timing-function:cubic-bezier(0.37, 0, 0.63, 1)}
  50%,88%{opacity:.12;animation-timing-function:cubic-bezier(0.37, 0, 0.63, 1)}
  100%{opacity:1}
}
@keyframes il-night{
  0%,38%{opacity:.12;animation-timing-function:cubic-bezier(0.37, 0, 0.63, 1)}
  50%,88%{opacity:1;animation-timing-function:cubic-bezier(0.37, 0, 0.63, 1)}
  100%{opacity:.12}
}
@keyframes il-drift{
  0%,100%{transform:translateX(0);animation-timing-function:cubic-bezier(0.37, 0, 0.63, 1)}
  50%{transform:translateX(7px);animation-timing-function:cubic-bezier(0.37, 0, 0.63, 1)}
}
@keyframes il-ghost{
  0%,30%{opacity:.35;animation-timing-function:cubic-bezier(0.37, 0, 0.63, 1)}
  55%,80%{opacity:1;animation-timing-function:cubic-bezier(0.37, 0, 0.63, 1)}
  100%{opacity:.35}
}
@keyframes il-pulse{
  0%,40%{transform:scale(1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}
  50%{transform:scale(1.12);animation-timing-function:cubic-bezier(0.37, 0, 0.63, 1)}
  62%,100%{transform:scale(1)}
}
@keyframes il-rise{
  0%,38%{transform:translateY(0);animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}
  50%,60%{transform:translateY(-3px);animation-timing-function:cubic-bezier(0.37, 0, 0.63, 1)}
  74%,100%{transform:translateY(0)}
}