/* OVIO Space: the animated menu (Menu box › Animated menu). The menu box's main items are points on a gently flowing line of light, like
   the flow wave process on phones: each has a small scene beside it (a tiny, light version of the part of the space animation its link
   goes to) or a glowing point; the line between them is a wave with a current of light drifting down it, and a pulse travels it from item
   to item, waking each as it arrives. Sub-menu items are listed under their item. The section you're in is lit, with the line down to it
   brighter. No boxes, only light. The script builds the points and the line (ovio-menu.js); it all moves only while the menu is open, and
   only with transforms, opacity and the lines' dashes */
.ovio-flow { --fm-m: 40px; --fm-g: clamp(16px, 2.6vh, 26px); --fm-tg: 16px; --fm-comet: #fff; }
.ovio-flow.ovio-fm-light { --fm-comet: rgba(40, 52, 130, .95); }
.ovio-flow .ovio-menu-list { display: flex; flex-direction: column; gap: var(--fm-g); width: max-content; max-width: 100%; margin: 0 auto !important; text-align: left; }
.ovio-flow.ovio-text-left .ovio-menu-list { margin: 0 auto 0 0 !important; }
.ovio-flow.ovio-text-right .ovio-menu-list { margin: 0 0 0 auto !important; text-align: right; }
.ovio-flow .ovio-menu-list > li { position: relative; display: grid; grid-template-columns: var(--fm-m) minmax(0, 1fr); column-gap: var(--fm-tg); align-items: start; align-content: start; margin: 0 !important; --c: 190, 215, 255; }
.ovio-flow.ovio-text-right .ovio-menu-list > li { grid-template-columns: minmax(0, 1fr) var(--fm-m); }
/* the main items: their first line level with the middle of their point */
.ovio-flow .ovio-menu-list > li > a { grid-column: 2; grid-row: 1; justify-self: start; font-size: clamp(19px, 5vw, 23px); line-height: 1.25;
  padding: max(3px, calc((var(--fm-m) - 1.25em) / 2)) 0; opacity: .8 !important; transition: opacity .35s ease, text-shadow .35s ease, letter-spacing .4s ease, transform .35s ease, background-position .8s ease; }
.ovio-flow.ovio-text-right .ovio-menu-list > li > a { grid-column: 1; justify-self: end; }
.ovio-flow .ovio-menu-list > li > a:is(:hover, :focus-visible), .ovio-flow .ovio-menu-list > li.ovio-fm-here > a { opacity: 1 !important; }
.ovio-flow .ovio-menu-list > li.ovio-fm-here > a { text-shadow: 0 0 18px rgba(var(--c), .55), 0 0 2px rgba(var(--c), .35); }

/* Fill the height: the list runs from the top of the box to the bottom (less the space set at each end), and every main item but the last
   takes an even share of the room left over, below its words, so the space between them grows; its line to the next one grows with it */
#ovio-menu.ovio-fm-fill .ovio-menu-scroll > .ovio-menu-nav { flex: 1 0 auto; display: flex; flex-direction: column; margin-top: 0; margin-bottom: 0; }
#ovio-menu.ovio-fm-fill .ovio-menu-list { flex: 1 0 auto; padding-top: var(--fm-pad, 24px) !important; padding-bottom: var(--fm-pad, 24px) !important; }
#ovio-menu.ovio-fm-fill .ovio-menu-list > li:not(:last-child) { flex-grow: 1; }

/* sub-menu items: under their item, smaller and quieter, each with a small point of its item's colour */
.ovio-flow .ovio-menu-list > li > .sub-menu { grid-column: 2; grid-row: 2; display: flex !important; flex-direction: column; align-items: flex-start; margin: -3px 0 0 !important; padding: 0 !important; box-shadow: none; }
.ovio-flow .ovio-menu-list > li > .sub-menu::before { content: none; }
.ovio-flow.ovio-text-right .ovio-menu-list > li > .sub-menu { grid-column: 1; align-items: flex-end; }
.ovio-flow .ovio-menu-list .sub-menu li { position: relative; padding: 0 0 0 15px !important; }
.ovio-flow.ovio-text-right .ovio-menu-list .sub-menu li { padding: 0 15px 0 0 !important; }
.ovio-flow .ovio-menu-list .sub-menu li::before { content: "" !important; position: absolute; left: 1px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: rgba(var(--c), .75); box-shadow: 0 0 6px rgba(var(--c), .6); transition: transform .3s ease; }
.ovio-flow.ovio-text-right .ovio-menu-list .sub-menu li::before { left: auto; right: 1px; }
.ovio-flow .ovio-menu-list .sub-menu a { font-size: 15px; letter-spacing: .015em; line-height: 1.3; padding: 5px 0; opacity: .64 !important;
  transition: opacity .3s ease, text-shadow .35s ease, letter-spacing .4s ease, transform .35s ease, background-position .8s ease; }
.ovio-flow .ovio-menu-list .sub-menu a:is(:hover, :focus-visible), .ovio-flow .ovio-menu-list .sub-menu li:is(.ovio-active, .current-menu-item) > a { opacity: 1 !important; }
.ovio-flow .ovio-menu-list .sub-menu li:is(.ovio-active, .current-menu-item)::before { transform: scale(1.6); }
.ovio-flow .ovio-menu-list .sub-menu .sub-menu { display: none !important; }

/* the point: the small scene (or the glowing point); while it is the section you're in, a ring of light turns slowly round it. A tap on
   it goes where its item goes */
.ovio-fm-mark { grid-column: 1; grid-row: 1; position: relative; z-index: 1; display: block; width: var(--fm-m); height: var(--fm-m); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ovio-flow.ovio-text-right .ovio-fm-mark { grid-column: 2; }
.ovio-fm-art { position: absolute; inset: 0; display: block; opacity: .9; transition: opacity .4s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.ovio-fm-here > .ovio-fm-mark .ovio-fm-art, .ovio-flow .ovio-menu-list > li:hover > .ovio-fm-mark .ovio-fm-art { opacity: 1; transform: scale(1.08); }
.ovio-fm-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ovio-fm-mark::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity .5s ease;
  background: conic-gradient(from 0deg, rgba(var(--c), 0) 0turn, rgba(var(--c), 0) .45turn, rgba(var(--c), .55) .8turn, rgba(255, 255, 255, .95) .98turn, rgba(var(--c), 0) 1turn);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1px)); mask: radial-gradient(closest-side, transparent calc(100% - 1.6px), #000 calc(100% - 1px)); }
.ovio-fm-light .ovio-fm-mark::after { background: conic-gradient(from 0deg, rgba(var(--c), 0) 0turn, rgba(var(--c), 0) .45turn, rgba(var(--c), .5) .8turn, rgba(var(--c), 1) .98turn, rgba(var(--c), 0) 1turn); }
.ovio-fm-here > .ovio-fm-mark::after { opacity: 1; animation: fm-turn 5s linear infinite; }
/* (as the pulse arrives: a ring of light that opens out and fades, played by the script) */
.ovio-fm-ripple { position: absolute; inset: 12%; border-radius: 50%; box-shadow: 0 0 0 1px rgba(var(--c), .8), 0 0 12px rgba(var(--c), .4); opacity: 0; pointer-events: none; }
@keyframes fm-turn { to { transform: rotate(360deg); } }
/* an item set to show no scene: an empty blip, the line flowing into it from above and on out of it below (the first item's only out of
   it, the last's only into it); its ring of light while it is the section you're in, and its ring as the pulse arrives, sit close round it */
.ovio-fm-joint { position: absolute; left: 0; right: 0; top: 14%; bottom: 14%; display: none; pointer-events: none; }
.ovio-fm-joint svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.ovio-fm-joint path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke: rgb(var(--c)); }
.ovio-fm-item[data-scene="none"] > .ovio-fm-mark .ovio-fm-joint { display: block; }
.ovio-fm-item[data-scene="none"]:first-child > .ovio-fm-mark .ovio-fm-j1, .ovio-fm-item[data-scene="none"]:last-child > .ovio-fm-mark .ovio-fm-j2 { display: none; }
.ovio-fm-past > .ovio-fm-mark .ovio-fm-joint .ovio-fm-line, .ovio-fm-here > .ovio-fm-mark .ovio-fm-joint .ovio-fm-j1.ovio-fm-line { stroke-opacity: .75; }
.ovio-fm-item[data-scene="none"] > .ovio-fm-mark::after { inset: 22%; }
.ovio-fm-item[data-scene="none"] > .ovio-fm-mark .ovio-fm-ripple { inset: 28%; }

/* the line to the next item: a wave, a current of light drifting down it and the pulse travelling it; brighter down to the section you're in */
.ovio-fm-wave { position: absolute; left: 0; top: calc(var(--fm-m) * .86); bottom: calc(-1 * (var(--fm-g) + var(--fm-m) * .14)); width: var(--fm-m); pointer-events: none; }
.ovio-flow.ovio-text-right .ovio-fm-wave { left: auto; right: 0; transform: scaleX(-1); }
.ovio-fm-wave svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.ovio-fm-wave path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ovio-fm-line { stroke-width: 1.5; stroke-opacity: .32; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-opacity .6s ease; }
.ovio-fm-past > :is(.ovio-fm-wave, .ovio-fm-mark) .ovio-fm-line { stroke-opacity: .75; }
.ovio-fm-stream { stroke-width: 2.2; stroke-dasharray: 0 9; opacity: 0; transition: opacity .6s ease; animation: fm-stream 1.5s linear infinite; }
.ovio-fm-past > :is(.ovio-fm-wave, .ovio-fm-mark) .ovio-fm-stream { stroke-width: 2.6; }
.ovio-fm-pulse, .ovio-fm-glow, .ovio-fm-glow2 { stroke-dasharray: 18 300; stroke-dashoffset: 19; }
.ovio-fm-pulse { stroke: var(--fm-comet); stroke-width: 2.2; }
.ovio-fm-glow { stroke-width: 5; stroke-opacity: .35; }
.ovio-fm-glow2 { stroke-width: 11; stroke-opacity: .14; }
.ovio-fm-light .ovio-fm-line { stroke-opacity: .42; }
.ovio-fm-light .ovio-fm-past > :is(.ovio-fm-wave, .ovio-fm-mark) .ovio-fm-line { stroke-opacity: .85; }
@keyframes fm-stream { to { stroke-dashoffset: -9; } }
/* opening: each item's line draws down to the next as the items come in, then its current starts to flow (and stays while it closes) */
.ovio-menu:is(.is-open, .is-closing) .ovio-fm-line { stroke-dashoffset: 0; }
.ovio-menu.is-open .ovio-fm-line { transition: stroke-dashoffset .8s cubic-bezier(.45, 0, .2, 1) calc(1.05s + var(--ovio-i, 0) * .09s), stroke-opacity .6s ease; }
.ovio-menu.is-open.is-settled .ovio-fm-line { transition: stroke-opacity .6s ease; }
.ovio-menu:is(.is-open, .is-closing) .ovio-fm-stream { opacity: .85; }
.ovio-menu.is-open .ovio-fm-stream { transition: opacity .8s ease calc(1.6s + var(--ovio-i, 0) * .09s); }
.ovio-menu.is-closing .ovio-fm-stream { transition: none; }

/* ---- the small scenes: each a tiny, light version of its part of the space animation (also on the settings page) ---- */
/* (each part that grows or shrinks does so round its own middle: fill-box. Everything else keeps the picture's own frame, so a group turned
   or moved round a set point, such as the jigsaw piece or the rocket, stays put whatever moves inside it) */
.ovio-fs :is(.fs-glint, .fs-flame, .fs-trail circle, .fs-glow, .fs-ping, .fs-nring, .fs-nglow, .fs-bring, .fs-bglow) { transform-box: fill-box; }
/* the globe: the night side of the Earth turning, its city lights drifting across, under its blue atmosphere, the sun's first light on its rim */
.ovio-fs-globe .fs-lights { fill: #ffd27a; }
.ovio-fs-globe .fs-turn { animation: fs-turn28 20s linear infinite; }
.ovio-fs-globe .fs-rim { fill: none; stroke: #78b0ff; stroke-width: 1; stroke-opacity: .9; }
.ovio-fs-globe .fs-dawn { fill: none; stroke: #ffd9a8; stroke-width: 1.2; stroke-linecap: round; opacity: .8; }
.ovio-fs-globe .fs-glint { fill: #fff; transform-origin: center; animation: fs-twinkle 4.5s ease-in-out infinite; }
@keyframes fs-turn28 { to { transform: translateX(-28px); } }
@keyframes fs-twinkle { 0%, 100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
/* the rocket: its glowing outline flying on, the flame flickering and sparks streaming back from it */
.ovio-fs-rocket .fs-hull { fill: rgba(255, 168, 96, .1); stroke: #ffb26a; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }
.ovio-fs-rocket .fs-hull-glow { fill: none; stroke: #ff9a4a; stroke-width: 3.6; stroke-opacity: .22; stroke-linejoin: round; }
.ovio-fs-rocket .fs-port { fill: none; stroke: #ffd9a8; stroke-width: .9; }
.ovio-fs-rocket .fs-bob { animation: fs-bob 2.8s ease-in-out infinite; }
.ovio-fs-rocket .fs-flame { transform-origin: 50% 0; animation: fs-flick .28s ease-in-out infinite alternate; }
.ovio-fs-rocket .fs-trail circle { fill: #ffc27a; transform-origin: center; animation: fs-spark 1.3s linear infinite; }
.ovio-fs-rocket .fs-trail circle:nth-child(2) { animation-delay: -.45s; --sx: -1.6px; }
.ovio-fs-rocket .fs-trail circle:nth-child(3) { animation-delay: -.9s; --sx: 1.4px; }
@keyframes fs-bob { 0%, 100% { transform: translateY(.7px); } 50% { transform: translateY(-.9px); } }
@keyframes fs-flick { from { transform: scaleY(.78); opacity: .82; } to { transform: scaleY(1.12); opacity: 1; } }
@keyframes fs-spark { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--sx, 0px), 11px) scale(.35); opacity: 0; } }
/* the jigsaw planet: one of its pieces, green and glowing, drifting and turning a little as space streaks past (its drift is drawn by the
   picture itself, eased at both ends, so it never snaps), a sheen of light crossing it now and then and a flare at its corner */
.ovio-fs-planet .fs-pglow { fill: none; stroke: #7dffb4; stroke-width: 3; stroke-opacity: .22; stroke-linejoin: round; animation: fs-pglow 3.6s ease-in-out infinite; }
.ovio-fs-planet .fs-prim { fill: none; stroke: #c4ffdb; stroke-width: .8; stroke-opacity: .85; stroke-linejoin: round; }
.ovio-fs-planet .fs-vein { fill: none; stroke: #d6ffe4; stroke-width: .7; stroke-opacity: .35; stroke-linecap: round; }
.ovio-fs-planet .fs-sheen { animation: fs-sheen 4.2s ease-in-out infinite; }
.ovio-fs-planet .fs-flare { animation: fs-shine 3.2s ease-in-out infinite; }
.ovio-fs-planet .fs-streak { stroke: #effff5; stroke-width: .55; stroke-linecap: round; opacity: .7; }
.ovio-fs-planet .fs-warp path { stroke: #c9ffe0; stroke-width: .6; stroke-linecap: round; opacity: 0; animation: fs-warp 1.7s linear infinite; }
.ovio-fs-planet .fs-warp path:nth-child(2) { animation-delay: -.5s; }
.ovio-fs-planet .fs-warp path:nth-child(3) { animation-delay: -1.05s; }
.ovio-fs-planet .fs-warp path:nth-child(4) { animation-delay: -1.4s; }
@keyframes fs-pglow { 0%, 100% { stroke-opacity: .16; } 50% { stroke-opacity: .34; } }
@keyframes fs-sheen { 0%, 12% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 55% { transform: translateX(46px); opacity: 1; } 62%, 100% { transform: translateX(46px); opacity: 0; } }
@keyframes fs-shine { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes fs-warp { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: .7; } 100% { transform: translateX(-40px); opacity: 0; } }
/* the solar system: the sun, its planets going round it */
.ovio-fs-orbit .fs-path { fill: none; stroke: #fff; stroke-width: .55; stroke-opacity: .4; }
.ovio-fs-orbit .fs-path-far { stroke-dasharray: .6 1.6; stroke-opacity: .45; }
.ovio-fs-orbit .fs-sun { fill: #fff8e6; }
.ovio-fs-orbit .fs-glow { transform-origin: center; animation: fs-glow 4s ease-in-out infinite; }
.ovio-fs-orbit .fs-streak { stroke: #ffe7c2; stroke-width: .5; stroke-linecap: round; opacity: .55; }
.ovio-fs-orbit .fs-p1 { fill: #ffd9a8; }
.ovio-fs-orbit .fs-p2 { fill: #86b8ff; }
.ovio-fs-orbit .fs-p3 { fill: #e6b8ff; }
@keyframes fs-glow { 0%, 100% { transform: scale(.92); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
/* the sunrise: the sun coming up over the planet's blue rim, the sky blushing, and points of light on the ground */
.ovio-fs-contact .fs-limb { fill: none; stroke: #8ec0ff; stroke-width: 1; }
.ovio-fs-contact .fs-limb-glow { fill: none; stroke: #5b9dff; stroke-width: 3.2; stroke-opacity: .3; }
.ovio-fs-contact .fs-sunrise { transform-box: view-box; transform-origin: 15px 29.8px; animation: fs-rise 4.8s ease-in-out infinite; }
.ovio-fs-contact .fs-streak { stroke: #fff; stroke-width: .6; stroke-linecap: round; opacity: .75; }
.ovio-fs-contact .fs-score { fill: #fff; }
.ovio-fs-contact .fs-sky { animation: fs-sky 4.8s ease-in-out infinite; }
.ovio-fs-contact .fs-ping { fill: none; stroke: #ffd2e6; stroke-width: .6; transform-origin: center; opacity: 0; animation: fs-ping 3.2s ease-out infinite; }
.ovio-fs-contact .fs-ping2 { animation-delay: -1.6s; }
.ovio-fs-contact .fs-dot { fill: #ffe6f1; }
@keyframes fs-rise { 0%, 100% { transform: scale(.86); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes fs-sky { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes fs-ping { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
/* the empty blip (an item set to show no scene): the glowing point's ring with nothing in it, breathing gently, in the item's colour */
.ovio-fs-none .fs-bring { fill: none; stroke: rgb(var(--c, 190, 215, 255)); stroke-width: 1.2; stroke-opacity: .8; transform-origin: center; animation: fs-node 3.4s ease-in-out infinite; }
.ovio-fs-none .fs-bglow { fill: none; stroke: rgb(var(--c, 190, 215, 255)); stroke-width: 2.6; stroke-opacity: .14; transform-origin: center; animation: fs-node 3.4s ease-in-out infinite reverse; }
.ovio-fm-light .ovio-fs-none .fs-bring { stroke-opacity: .9; }
.ovio-fm-light .ovio-fs-none .fs-bglow { stroke-opacity: .2; }
/* a glowing point, for an item with no scene, in the item's colour */
.ovio-fs-node .fs-nring { fill: none; stroke: rgb(var(--c, 190, 215, 255)); stroke-width: .9; stroke-opacity: .55; transform-origin: center; animation: fs-node 3.4s ease-in-out infinite; }
.ovio-fs-node .fs-ncore { fill: #fff; filter: drop-shadow(0 0 2px rgb(var(--c, 190, 215, 255))); }
.ovio-fs-node .fs-nglow { transform-origin: center; animation: fs-node 3.4s ease-in-out infinite reverse; }
@keyframes fs-node { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.1); } }
/* on light glass: deeper ink where white would vanish (the globe, the planet and the sunrise are small night scenes, kept as they are) */
.ovio-fm-light .ovio-fs-rocket .fs-hull { fill: rgba(226, 120, 50, .1); stroke: #d9692a; }
.ovio-fm-light .ovio-fs-rocket .fs-hull-glow { stroke: #f08a3c; stroke-opacity: .25; }
.ovio-fm-light .ovio-fs-rocket .fs-port { stroke: #c45a20; }
.ovio-fm-light .ovio-fs-rocket .fs-trail circle { fill: #f0903c; }
.ovio-fm-light .ovio-fs-planet .fs-pglow { stroke: #1fae62; }
.ovio-fm-light .ovio-fs-planet .fs-prim { stroke: #0f7a43; stroke-opacity: .7; }
.ovio-fm-light .ovio-fs-planet .fs-warp path { stroke: #1d8a55; }
.ovio-fm-light .ovio-fs-orbit .fs-path { stroke: #0e1222; stroke-opacity: .32; }
.ovio-fm-light .ovio-fs-orbit .fs-path-far { stroke-opacity: .38; }
.ovio-fm-light .ovio-fs-orbit .fs-sun { fill: #ffb43c; }
.ovio-fm-light .ovio-fs-orbit .fs-streak { stroke: #d08a2a; }
.ovio-fm-light .ovio-fs-orbit .fs-p1 { fill: #c87a2a; }
.ovio-fm-light .ovio-fs-orbit .fs-p2 { fill: #3c6fe0; }
.ovio-fm-light .ovio-fs-orbit .fs-p3 { fill: #9a5ad8; }
.ovio-fm-light .ovio-fs-node .fs-ncore { fill: rgb(var(--c, 70, 100, 235)); filter: none; }
.ovio-fm-light .ovio-fs-node .fs-nring { stroke-opacity: .7; }

/* still (Motion: Still, or a device set to less motion): nothing moves, the line is simply there */
.ovio-fm-still .ovio-fs *, .ovio-fm-still .ovio-fm-wave *, .ovio-fm-still .ovio-fm-mark::after { animation: none !important; }
.ovio-fm-still :is(.ovio-fm-stream, .ovio-fm-pulse, .ovio-fm-glow, .ovio-fm-glow2), .ovio-fm-still .ovio-fs-rocket .fs-trail, .ovio-fm-still .ovio-fs-planet .fs-warp, .ovio-fm-still .ovio-fs-contact .fs-ping { display: none; }
.ovio-fm-still .ovio-fm-line { stroke-dashoffset: 0 !important; transition: stroke-opacity .6s ease !important; }
.ovio-fm-calm :is(.ovio-fm-pulse, .ovio-fm-glow, .ovio-fm-glow2) { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ovio-flow .ovio-fs *, .ovio-flow .ovio-fm-wave *, .ovio-flow .ovio-fm-mark::after { animation: none !important; }
  .ovio-flow :is(.ovio-fm-stream, .ovio-fm-pulse, .ovio-fm-glow, .ovio-fm-glow2), .ovio-flow .ovio-fs-rocket .fs-trail, .ovio-flow .ovio-fs-planet .fs-warp, .ovio-flow .ovio-fs-contact .fs-ping { display: none; }
  .ovio-flow .ovio-fm-line { stroke-dashoffset: 0 !important; transition: none !important; }
}