/* Sybernetic v3 — the service symbols in motion (inline ui/art/*.svg from partials/ui-symbols.php).
   ui/sy.js adds .is-live when a symbol comes into view: it draws itself, then does what its service does,
   once (about 2.5 s), and becomes .is-done. Hovering a tile or a service-page panel repeats that part
   for as long as the pointer stays. With reduced motion, or without the script, symbols are complete
   and still. Only stroke dashes, fill opacity, colour, opacity and transforms are animated. */
.sy-symbol [class^="s-"] { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
    /* Waiting to be seen: lines undrawn, fills and dots off */
    .js .sy-symbol[data-sym]:not(.is-live):not(.is-done) [pathLength] { stroke-dasharray: 1 2; stroke-dashoffset: 1.02; }
    .js .sy-symbol[data-sym]:not(.is-live):not(.is-done) [fill-opacity] { fill-opacity: 0; }
    .js .sy-symbol[data-sym]:not(.is-live):not(.is-done) .s-dot { opacity: 0; }

    /* Drawing in: every line, then the fills */
    .sy-symbol.is-live [pathLength] { stroke-dasharray: 1 2; animation: sy-sym-draw .8s var(--ease-out) both; }
    .sy-symbol.is-live [fill-opacity] { animation: sy-sym-draw .8s var(--ease-out) both, sy-sym-fill .7s ease-out .45s both; }
    .sy-symbol.is-live .s-dot { animation: sy-sym-pop .45s var(--ease-out) 1.05s both; }

    /* Memory chip (data recovery): the pins carry data out side by side and the die lights up as it is read. */
    .sy-sym--chip.is-live .s-pin { animation: sy-sym-draw .45s var(--ease-out) both, sy-sym-signal .5s ease-in-out both; }
    .sy-sym--chip.is-live .s-pin1 { animation-delay: .45s, 1.3s; }
    .sy-sym--chip.is-live .s-pin2 { animation-delay: .55s, 1.45s; }
    .sy-sym--chip.is-live .s-pin3 { animation-delay: .65s, 1.6s; }
    .sy-sym--chip.is-live .s-pin4 { animation-delay: .75s, 1.75s; }
    .sy-sym--chip.is-live .s-die { animation: sy-sym-draw .6s var(--ease-out) .3s both, sy-sym-read 1.1s ease-in-out 1.3s both; }
    .sy-sym--chip.is-live .s-dot { animation: sy-sym-pop .45s var(--ease-out) 1s both, sy-sym-blink .5s ease-in-out 2.1s 2; }

    /* Laptop (repair): the screen comes on with a flicker and a progress bar runs across it. */
    .sy-sym--laptop.is-live .s-base { animation-delay: .25s; }
    .sy-sym--laptop.is-live .s-notch { animation-delay: .6s; }
    .sy-sym--laptop.is-live .s-screen { animation: sy-sym-draw .6s var(--ease-out) .35s both, sy-sym-power .8s linear 1s both; }
    .sy-sym--laptop.is-live .s-bar { animation: sy-sym-draw 1.1s cubic-bezier(.45, 0, .55, 1) 1.45s both; }
    .sy-sym--laptop.is-live .s-dot { animation: sy-sym-pop .45s var(--ease-out) .9s both, sy-sym-blink .5s ease-in-out 2.55s 1; }

    /* Desktop tower (custom builds): the drive bays slide in, the vents fill one by one, the power light comes on. */
    .sy-sym--pc.is-live .s-bay { animation: sy-sym-draw .5s var(--ease-out) both, sy-sym-slide .5s var(--ease-out) both; }
    .sy-sym--pc.is-live .s-bay1 { animation-delay: .6s, .6s; }
    .sy-sym--pc.is-live .s-bay2 { animation-delay: .78s, .78s; }
    .sy-sym--pc.is-live .s-vent1 { animation-delay: 1.05s; }
    .sy-sym--pc.is-live .s-vent2 { animation-delay: 1.2s; }
    .sy-sym--pc.is-live .s-vent3 { animation-delay: 1.35s; }
    .sy-sym--pc.is-live .s-feet { animation-delay: .7s; }
    .sy-sym--pc.is-live .s-dot { animation: sy-sym-pop .6s cubic-bezier(.3, 1.6, .5, 1) 1.85s both, sy-sym-blink .5s ease-in-out 2.5s 1; }

    /* Action camera (camera service): the lens finds focus and the record light blinks. */
    .sy-sym--camera.is-live .s-lens { animation: sy-sym-draw .9s var(--ease-out) .35s both; }
    .sy-sym--camera.is-live .s-iris { animation: sy-sym-draw .5s var(--ease-out) .8s both, sy-sym-fill .4s ease-out .9s both, sy-sym-focus 1s var(--ease-out) 1.2s both; }
    .sy-sym--camera.is-live .s-screen { animation: sy-sym-draw .6s var(--ease-out) .5s both, sy-sym-power .7s linear 1.1s both; }
    .sy-sym--camera.is-live .s-mount { animation-delay: .6s; }
    .sy-sym--camera.is-live .s-dot { animation: sy-sym-pop .45s var(--ease-out) 1.6s both, sy-sym-blink .5s ease-in-out 2.1s 2; }

    /* Pointer over a tile or a service-page panel: the service's own part keeps going */
    @media (hover: hover) {
        :is(.sy-tile, .sy-svc-hero__panel):hover .sy-sym--chip.is-done .s-pin { animation: sy-sym-signal 1.2s ease-in-out infinite; }
        :is(.sy-tile, .sy-svc-hero__panel):hover .sy-sym--chip.is-done .s-pin2 { animation-delay: .3s; }
        :is(.sy-tile, .sy-svc-hero__panel):hover .sy-sym--chip.is-done .s-pin3 { animation-delay: .6s; }
        :is(.sy-tile, .sy-svc-hero__panel):hover .sy-sym--chip.is-done .s-pin4 { animation-delay: .9s; }
        :is(.sy-tile, .sy-svc-hero__panel):hover .sy-sym--chip.is-done .s-die { animation: sy-sym-read 1.2s ease-in-out infinite; }
        :is(.sy-tile, .sy-svc-hero__panel):hover .sy-sym--laptop.is-done .s-bar { stroke-dasharray: 1 2; animation: sy-sym-draw 1.3s cubic-bezier(.45, 0, .55, 1) infinite; }
        :is(.sy-tile, .sy-svc-hero__panel):hover .sy-sym--laptop.is-done .s-screen { animation: sy-sym-read 1.3s ease-in-out infinite; }
        :is(.sy-tile, .sy-svc-hero__panel):hover .sy-sym--pc.is-done .s-vent { stroke-dasharray: .22 .14; animation: sy-sym-air .7s linear infinite; }
        :is(.sy-tile, .sy-svc-hero__panel):hover .sy-sym--pc.is-done .s-dot { animation: sy-sym-blink 1s ease-in-out infinite; }
        :is(.sy-tile, .sy-svc-hero__panel):hover .sy-sym--camera.is-done .s-iris { animation: sy-sym-breathe 1.4s ease-in-out infinite; }
        :is(.sy-tile, .sy-svc-hero__panel):hover .sy-sym--camera.is-done .s-dot { animation: sy-sym-blink 1s ease-in-out infinite; }
    }
}
@keyframes sy-sym-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes sy-sym-fill { from { fill-opacity: 0; } }
@keyframes sy-sym-pop { from { opacity: 0; transform: scale(.2); } }
@keyframes sy-sym-blink { 50% { opacity: .15; } }
@keyframes sy-sym-signal { 50% { stroke: #35d89b; } }
@keyframes sy-sym-read { 50% { fill-opacity: .55; stroke: #c6dfb7; } }
@keyframes sy-sym-power { 0% { fill-opacity: 0; } 20% { fill-opacity: .5; } 32% { fill-opacity: .08; } 48% { fill-opacity: .55; } 100% { fill-opacity: .14; } }
@keyframes sy-sym-slide { from { transform: translateX(-8px); } }
@keyframes sy-sym-focus { 0% { transform: scale(.35); } 55% { transform: scale(1.25); } 78% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes sy-sym-breathe { 50% { transform: scale(.82); } }
@keyframes sy-sym-air { to { stroke-dashoffset: -.36; } }