/* Cydora — the hand-drawn artwork.

   COLOUR ONLY. Nothing here may name a property that a scene animates:
   GSAP writes SVG transforms and stroke-dashoffset as *attributes*, and a CSS
   property of the same name out-ranks a presentation attribute — so a stray
   `transform` or `stroke-dashoffset` rule here freezes a scene silently, with
   no error. Sizing and position belong to the slot; motion belongs to
   js/scenes/. This file paints, and that is all.

   A scene's classes arrive here when the scene does. */

/* Once a drawing has been injected the slot stops being a placeholder: the
   dashes and the label go, the reserved space stays. */
.slot.is-filled {
    border: 0;
    font-size: 0;
    /* the empty slot greys its label with --muted; the artwork must not
       inherit that, since it paints with currentColor */
    color: inherit;

    /* And the waiting animation has to be called off, not just out-declared.
       It is `forwards`, so its final frame keeps applying after it finishes —
       and an animation's own values beat a normal declaration, so without
       this the label's --muted would win over the `color: inherit` above and
       every drawing that paints with currentColor would come out grey. */
    animation: none;
}

.slot.is-filled > svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;   /* strokes may ride outside the viewBox mid-animation */
}

/* The approach drawing: one spiral, four markers.
   The problem drawing: one wire, seven blobs. */
.slot .wire,
.slot .step {
    fill: var(--ink);
    fill-rule: evenodd;
}

.slot .node { fill: var(--ink); }

/* The problem's blobs are *translated* by GSAP for the whole of their scene,
   so they get the hint. Only a hint — will-change never wins against
   anything, which is why it is the one thing the extractor leaves in the
   artwork.

   `.step` used to be in this list and had to come out. Those are the services
   dots and the approach markers, and neither is translated: both are *scaled*
   from 0. will-change promotes an element to its own compositor layer, and a
   layer is rasterised once at one size — so scaling it stretches that bitmap
   instead of redrawing the vectors. The dots came up visibly soft and
   pixelated and only snapped crisp at the end, when the transform settled and
   the layer re-rasterised. Being an SVG does not protect against it: the
   promotion decides how it is drawn, not the file format.

   The rule of thumb this leaves behind: hint a translate, never a scale. */
.slot .node { will-change: transform; }

/* Illustrator's own class names, which the lockup still carries: cls-1 the
   seven spokes, cls-3 the nodes, cls-4 the letters.

   currentColor rather than var(--ink), following the prototype — the lockup
   then takes the colour of whatever it sits in, which is what lets the same
   drawing work in the header and anywhere else it is dropped.

   The names carry the drawing's own prefix now, so `.hero-cls-2` can only
   ever be the hero's. tools/extract.py puts it there, for the same reason it
   prefixes ids: an inline SVG's <style> is a stylesheet for the whole page,
   not for that SVG, and every Illustrator export starts counting at cls-1.
   The drawing is still named on the left of each selector — the hero's own
   stylesheet also has a say about .hero-cls-1, and this has to outrank it. */
.nav__lockup .nav-cls-1,
.nav__lockup .nav-cls-2,
.nav__lockup .nav-cls-3,
.nav__lockup .nav-cls-4,
[data-scene="hero"] .hero-cls-1,
[data-scene="hero"] .hero-cls-2,
[data-scene="hero"] .hero-cls-3,
[data-scene="hero"] .hero-cls-4 {
    fill: currentColor;
}