/* The garden's pictures (assets/js/odling-bilder.js): colours from the campaign and whitepaper illustrations, flat with
   no outlines, and their motion. Everything moves once when the page opens, except the leaves' slow sway;
   prefers-reduced-motion shows the end state at once. Used by min-kurs.html and the manager's view. */
:root {
  --od-morot: #FA8A2A; --od-morot-skugga: #E5701D; --od-morot-ljus: #FFAB5E; --od-rafflor: #CF611B; --od-glans: #FFD7AE;
  --od-blek: #ECE6DA; --od-blek-skugga: #DFD7C8; --od-blek-ljus: #F6F2EA; --od-blek-rafflor: #CDC3B0;
  --od-blad-ljus: #7D9369; --od-blad-mitt: #6C8161; --od-blad-mork: #5A6D4F; --od-nerv: #A8BA91;
  --od-jord: #74503E; --od-jord-mork: #5D3F30; --od-jord-ljus: #8E6852; --od-grop: #5A3C2E;
  --od-kanna: #6D83A2; --od-kanna-mork: #566C8B; --od-kanna-ljus: #97AAC5; --od-kanna-oppning: #3E5070;
  --od-vatten: #9DB8DB;
  --od-tra: #E0A156; --od-tra-ljus: #EEBD7B; --od-tra-skugga: #C38745; --od-tra-mork: #8F592E; --od-tra-adring: #CB8B46;
  --od-mjuk: cubic-bezier(.22, 1, .36, 1);
  --od-fjader: cubic-bezier(.3, 1.4, .5, 1);
}

/* The carrot. */
.od-morot { fill: var(--od-morot); }
.od-morot-skugga { fill: var(--od-morot-skugga); }
.od-morot-ljus { fill: var(--od-morot-ljus); opacity: .7; }
.od-rafflor { fill: none; stroke: var(--od-rafflor); stroke-width: 3; stroke-linecap: round; opacity: .75; }
.od-glans { fill: none; stroke: var(--od-glans); stroke-width: 3.5; stroke-linecap: round; }
.od-blek .od-morot { fill: var(--od-blek); }
.od-blek .od-morot-skugga { fill: var(--od-blek-skugga); }
.od-blek .od-morot-ljus { fill: var(--od-blek-ljus); }
.od-blek .od-rafflor { stroke: var(--od-blek-rafflor); }
.od-blek .od-glans { stroke: var(--od-blek-ljus); }

/* Leaves: three greens; the stalk has its leaf's colour. */
.od-stjalk { fill: none; stroke-linecap: round; }
.od-blad-ljus .od-bladyta { fill: var(--od-blad-ljus); } .od-blad-ljus .od-stjalk { stroke: var(--od-blad-ljus); }
.od-blad-mitt .od-bladyta { fill: var(--od-blad-mitt); } .od-blad-mitt .od-stjalk { stroke: var(--od-blad-mitt); }
.od-blad-mork .od-bladyta { fill: var(--od-blad-mork); } .od-blad-mork .od-stjalk { stroke: var(--od-blad-mork); }
.od-nerv { fill: none; stroke: var(--od-nerv); stroke-linecap: round; opacity: .8; }

/* The gauge: the coloured carrot is clipped from the tip up; the clip and the pointer rise once. */
.od-matare { display: block; width: 100%; height: auto; overflow: visible; }
.od-fyllning { transform-box: fill-box; transform-origin: 50% 100%; animation: od-stig 2s var(--od-mjuk) .35s backwards; }
@keyframes od-stig { from { transform: scaleY(0); } }
.od-visare { fill: var(--black, #121A2B); animation: od-visa 2s var(--od-mjuk) .35s backwards; }
@keyframes od-visa { from { transform: translateY(0); } }
.od-skala { stroke: var(--linje, #d5d5d3); stroke-width: 2; }
.od-streck { stroke: var(--black, #121A2B); stroke-width: 2.5; stroke-linecap: round; }
.od-strecktext { font: 600 22px var(--sans, sans-serif); fill: var(--dampad, #6b6e76); }

/* Soil and drops. */
.od-jord { fill: var(--od-jord); }
.od-jord-mork { fill: var(--od-jord-mork); }
.od-jord-ljus { fill: var(--od-jord-ljus); }
.od-grop { fill: var(--od-grop); }
.od-droppe path:first-child, .od-stank-droppe path:first-child { fill: var(--od-vatten); }
.od-droppe-ljus { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: .85; }

/* A bed: the root rises out of the soil, the top grows, then sways slowly. */
.od-badd { display: block; width: 100%; height: auto; overflow: visible; }
.od-topp, .od-gunga, .od-grodd-vaxt, .od-lada-morot, .od-torst { transform-box: fill-box; transform-origin: 50% 100%; }
.od-rot { animation: od-upp .9s var(--od-mjuk) backwards; animation-delay: var(--d); }
.od-topp { animation: od-vaxa 1s var(--od-fjader) backwards; animation-delay: calc(var(--d) + .2s); }
.od-gunga { animation: od-gunga 5.5s ease-in-out infinite alternate; animation-delay: var(--g); }
.od-torst { animation: od-vaxa .5s var(--od-mjuk) backwards; animation-delay: calc(var(--d) + .9s); }
@keyframes od-upp { from { transform: translateY(22px); } }
@keyframes od-vaxa { from { transform: scale(0); } }
@keyframes od-gunga { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }

/* The can: tips once and three drops fall while questions wait. */
.od-kanna { display: block; width: 100%; height: auto; overflow: visible; }
.od-kanna-kropp { fill: var(--od-kanna); }
.od-kanna-mork { fill: var(--od-kanna-mork); }
.od-kanna-ljus { fill: var(--od-kanna-ljus); }
.od-kanna-oppning { fill: var(--od-kanna-oppning); }
.od-kanna-handtag { fill: none; stroke: var(--od-kanna-mork); stroke-width: 9; stroke-linecap: round; }
.od-kanna-tipp { transform-box: view-box; transform-origin: 70px 128px; }
.od-stank-droppe { opacity: 0; }
.od-kanna.haller .od-stank-droppe { opacity: 1; }
.od-kanna.haller .od-kanna-tipp { animation: od-tipp 2.2s ease-in-out .6s both; }
.od-kanna.haller .od-stank-droppe { animation: od-droppa 1s cubic-bezier(.5, 0, .9, .6) both; animation-delay: calc(1.25s + var(--i) * .18s); }
@keyframes od-tipp { 0% { transform: rotate(0); } 35%, 65% { transform: rotate(16deg); } 100% { transform: rotate(0); } }
@keyframes od-droppa { 0% { opacity: 0; translate: -6px -22px; } 30% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }

/* The crate: the carrots rise into it one by one. */
.od-lada { display: block; width: 100%; height: auto; overflow: visible; }
.od-tra { fill: var(--od-tra); }
.od-tra-ljus { fill: var(--od-tra-ljus); }
.od-tra-skugga { fill: var(--od-tra-skugga); }
.od-tra-mork { fill: var(--od-tra-mork); }
.od-tra-adring { fill: none; stroke: var(--od-tra-adring); stroke-width: 1.4; stroke-linecap: round; }
.od-lada-morot { animation: od-upp-lada .8s var(--od-mjuk) backwards; animation-delay: calc(.6s + var(--i) * .12s); }
@keyframes od-upp-lada { from { transform: translateY(26px); } }

/* A week's sprout. */
.od-ikon { display: block; height: 100%; width: auto; overflow: visible; }
.od-grodd { display: block; width: 100%; height: auto; overflow: visible; }
.od-grodd-vaxt { animation: od-vaxa .8s var(--od-fjader) backwards; animation-delay: calc(.4s + var(--i) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  .od-fyllning, .od-visare, .od-rot, .od-topp, .od-gunga, .od-torst, .od-kanna-tipp, .od-stank-droppe, .od-lada-morot, .od-grodd-vaxt { animation: none !important; }
}