/* OVIO menu: the menu button and the glass box it opens over the page, the icons beside it and the full-screen boxes they open, and the
   inline menu */

/* ---- the button: just the icon (and its label, if there is one); the icon turns into an X ---- */
.ovio-menu-btn {
  position: fixed; top: calc(20px + var(--ovio-my, 0px)); z-index: 100001;
  display: inline-flex; align-items: center; gap: var(--ovio-lgap, 10px);
  font: inherit; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* (themes style buttons in many ways: none of it reaches this one) */
button.ovio-menu-btn { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; color: #fff !important; text-shadow: none !important; transform: none; }
button.ovio-menu-btn.ovio-light { color: #0e1222 !important; }
/* over the animation's light screens (the page's --ma-light, 0 to 1, set by Master Animation as a light screen fades in and out) the white
   icon and label fade to a dark ink, exactly with the light, and the light round the icon turns a warm gold so it still shows */
@supports not (color: color-mix(in srgb, red 50%, blue)) { html.ma-light :is(button.ovio-menu-btn, .ovio-icon-btn, .ovio-inline).ovio-dark { color: #151a2e !important; transition: color .5s ease; } }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  html :is(button.ovio-menu-btn, .ovio-icon-btn, .ovio-inline).ovio-dark { color: color-mix(in srgb, #151a2e calc(var(--ma-light, 0) * 100%), #fff) !important; transition: none; }
}
html.ma-light :is(.ovio-menu-btn, .ovio-icon-btn).ovio-dark { --ovio-glint: 205, 140, 60; }
.ovio-menu-btn.ovio-right { right: calc(20px + var(--ovio-mx, 0px)); }
.ovio-menu-btn.ovio-left { left: calc(20px + var(--ovio-mx, 0px)); }
.ovio-menu-btn.ovio-placed { right: auto; }                     /* (placed by the script, in the theme button's spot) */
/* set to scroll away with the page (not "stay on screen"): placed on the page at the top instead of on the screen */
.ovio-menu-btn.ovio-scrolls, .ovio-icons.ovio-scrolls, .ovio-inline.ovio-scrolls { position: absolute; }
.ovio-menu-btn.ovio-label-left { flex-direction: row-reverse; }
.ovio-menu-btn.ovio-label-right { flex-direction: row; }
.ovio-menu-btn.ovio-label-top { flex-direction: column-reverse; }
.ovio-menu-btn.ovio-label-bottom { flex-direction: column; }
.ovio-menu-btn:focus { outline: none; }
.ovio-menu-btn:focus-visible .ovio-mb-icon { outline: 1px dashed currentColor; outline-offset: 4px; border-radius: 4px; }
.ovio-mb-label { font-size: 14px; letter-spacing: .08em; white-space: nowrap; transition: opacity .25s ease; }
.ovio-menu-btn.ovio-swap .ovio-mb-label { opacity: 0; }
.ovio-mb-icon { position: relative; display: block; width: calc(44px * var(--ovio-is, 1)); height: calc(44px * var(--ovio-is, 1)); flex: none; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.ovio-menu-btn:active .ovio-mb-icon { transform: scale(.88); }
/* light round the icon, as round a planet: when it is pressed, a thin ring of light sweeps round it and a soft glow rises behind it like
   sunlight on a planet's rim, turning with it, then fades. No disc is drawn: only the light */
/* white sunlight: a bright white core fading to a faint warm edge (on the light style a touch warmer, so it still shows on white) */
:is(.ovio-menu-btn, .ovio-icon-btn) { --ovio-glint: 255, 253, 245; --ovio-warm: 255, 236, 200; }
:is(.ovio-menu-btn, .ovio-icon-btn).ovio-light { --ovio-glint: 255, 244, 214; --ovio-warm: 255, 206, 120; }
.ovio-mb-ring, .ovio-mb-glow { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; }
.ovio-mb-ring { inset: 3px;
  background: conic-gradient(from 0deg, rgba(var(--ovio-glint), 0) 0turn, rgba(var(--ovio-glint), 0) .5turn, rgba(var(--ovio-warm), .5) .8turn, rgba(var(--ovio-glint), .95) .95turn, rgba(255, 255, 255, 1) 1turn);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1px)); }
.ovio-mb-glow { inset: -6px;
  background: radial-gradient(closest-side, rgba(var(--ovio-glint), 0) 56%, rgba(255, 255, 255, .75) 68%, rgba(var(--ovio-glint), .45) 76%, rgba(var(--ovio-warm), .14) 88%, rgba(var(--ovio-warm), 0) 100%);
  -webkit-mask: conic-gradient(from 200deg, transparent 0turn, #000 .18turn, #000 .3turn, transparent .5turn); mask: conic-gradient(from 200deg, transparent 0turn, #000 .18turn, #000 .3turn, transparent .5turn); }
:is(.ovio-menu-btn, .ovio-icon-btn):is(.is-open, .is-closing, .is-pressed) .ovio-mb-ring { animation: ovio-ring .8s cubic-bezier(.65, 0, .35, 1) forwards; }
:is(.ovio-menu-btn, .ovio-icon-btn):is(.is-open, .is-closing, .is-pressed) .ovio-mb-glow { animation: ovio-rim 1.1s cubic-bezier(.45, 0, .25, 1) forwards; }
.ovio-menu-btn:hover .ovio-mb-glow { animation: ovio-rim-hover 2.4s ease-in-out infinite; }
@media (hover: hover) { .ovio-icon-btn:hover .ovio-mb-glow { animation: ovio-rim-hover 2.4s ease-in-out infinite; } }
@keyframes ovio-ring { 0% { opacity: 0; transform: rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(360deg); } }
@keyframes ovio-rim { 0% { opacity: 0; transform: rotate(-60deg) scale(.85); } 35% { opacity: 1; } 100% { opacity: 0; transform: rotate(300deg) scale(1.05); } }
@keyframes ovio-rim-hover { 0%, 100% { opacity: 0; transform: rotate(-40deg); } 50% { opacity: .7; transform: rotate(60deg); } }
.ovio-mb-lines { position: absolute; left: 50%; top: 50%; width: 0; height: 0; scale: var(--ovio-is, 1); }   /* (icon size from the settings) */
.ovio-mb-lines i { position: absolute; left: 0; top: 0; height: var(--h, 2px); width: var(--w, 22px); border-radius: 2px; background: currentColor;
  transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))); }

/* the icons: where each of the three strokes rests (width, height, x, y); every one ends as the same X */
.ovio-icon-classic .ovio-mb-lines i:nth-child(1) { --y: -7px; } .ovio-icon-classic .ovio-mb-lines i:nth-child(3) { --y: 7px; }
.ovio-icon-stagger .ovio-mb-lines i:nth-child(1) { --y: -7px; }
.ovio-icon-stagger .ovio-mb-lines i:nth-child(2) { --w: 13px; --x: 4.5px; }
.ovio-icon-stagger .ovio-mb-lines i:nth-child(3) { --w: 17px; --x: 2.5px; --y: 7px; }
.ovio-icon-duo .ovio-mb-lines i:nth-child(1) { --y: -4px; }
.ovio-icon-duo .ovio-mb-lines i:nth-child(2) { --w: 0px; }
.ovio-icon-duo .ovio-mb-lines i:nth-child(3) { --w: 12px; --x: 5px; --y: 4px; }
.ovio-icon-dots .ovio-mb-lines i { --w: 5px; --h: 5px; border-radius: 50%; }
.ovio-icon-dots .ovio-mb-lines i:nth-child(1) { --x: -9px; } .ovio-icon-dots .ovio-mb-lines i:nth-child(3) { --x: 9px; }
.ovio-icon-offset .ovio-mb-lines i:nth-child(1) { --w: 16px; --x: -3px; --y: -4px; }
.ovio-icon-offset .ovio-mb-lines i:nth-child(2) { --w: 0px; }
.ovio-icon-offset .ovio-mb-lines i:nth-child(3) { --w: 16px; --x: 3px; --y: 4px; }
.ovio-icon-split .ovio-mb-lines i:nth-child(1) { --w: 8px; --x: -7px; --y: -4px; }
.ovio-icon-split .ovio-mb-lines i:nth-child(2) { --w: 8px; --x: 7px; --y: -4px; }
.ovio-icon-split .ovio-mb-lines i:nth-child(3) { --y: 4px; }
.ovio-icon-wide .ovio-mb-lines i:nth-child(1) { --w: 14px; --y: -7px; } .ovio-icon-wide .ovio-mb-lines i:nth-child(3) { --w: 14px; --y: 7px; }
.ovio-icon-narrow .ovio-mb-lines i:nth-child(1) { --y: -7px; } .ovio-icon-narrow .ovio-mb-lines i:nth-child(2) { --w: 12px; } .ovio-icon-narrow .ovio-mb-lines i:nth-child(3) { --y: 7px; }
.ovio-icon-steps .ovio-mb-lines i:nth-child(1) { --y: -7px; } .ovio-icon-steps .ovio-mb-lines i:nth-child(2) { --w: 16px; --x: -3px; } .ovio-icon-steps .ovio-mb-lines i:nth-child(3) { --w: 10px; --x: -6px; --y: 7px; }
.ovio-icon-pair .ovio-mb-lines i:nth-child(1) { --y: -4px; } .ovio-icon-pair .ovio-mb-lines i:nth-child(2) { --w: 0px; } .ovio-icon-pair .ovio-mb-lines i:nth-child(3) { --y: 4px; }
.ovio-icon-fine .ovio-mb-lines i { --w: 24px; --h: 1.5px; } .ovio-icon-fine .ovio-mb-lines i:nth-child(1) { --y: -8px; } .ovio-icon-fine .ovio-mb-lines i:nth-child(3) { --y: 8px; }
.ovio-icon-bold .ovio-mb-lines i { --w: 20px; --h: 3px; } .ovio-icon-bold .ovio-mb-lines i:nth-child(1) { --y: -7px; } .ovio-icon-bold .ovio-mb-lines i:nth-child(3) { --y: 7px; }
.ovio-icon-vdots .ovio-mb-lines i { --w: 5px; --h: 5px; border-radius: 50%; }
.ovio-icon-vdots .ovio-mb-lines i:nth-child(1) { --y: -8px; } .ovio-icon-vdots .ovio-mb-lines i:nth-child(3) { --y: 8px; }

/* open: the strokes gather into lines, then swing into an X as the icon turns half a circle; the spare stroke draws in to nothing.
   Close plays it backwards */
.ovio-menu-btn.is-open .ovio-mb-lines { animation: ovio-spin-open .7s cubic-bezier(.65, 0, .35, 1) forwards; }
.ovio-menu-btn.is-open .ovio-mb-lines i:nth-child(1) { --r: 45deg; animation: ovio-x-open .7s cubic-bezier(.65, 0, .35, 1) forwards; }
.ovio-menu-btn.is-open .ovio-mb-lines i:nth-child(2) { animation: ovio-gone-open .7s cubic-bezier(.65, 0, .35, 1) forwards; }
.ovio-menu-btn.is-open .ovio-mb-lines i:nth-child(3) { --r: -45deg; animation: ovio-x-open .7s cubic-bezier(.65, 0, .35, 1) forwards; }
.ovio-menu-btn.is-closing .ovio-mb-lines { animation: ovio-spin-close .6s cubic-bezier(.65, 0, .35, 1) forwards; }
.ovio-menu-btn.is-closing .ovio-mb-lines i:nth-child(1) { --r: 45deg; animation: ovio-x-close .6s cubic-bezier(.65, 0, .35, 1) forwards; }
.ovio-menu-btn.is-closing .ovio-mb-lines i:nth-child(2) { animation: ovio-gone-close .6s cubic-bezier(.65, 0, .35, 1) forwards; }
.ovio-menu-btn.is-closing .ovio-mb-lines i:nth-child(3) { --r: -45deg; animation: ovio-x-close .6s cubic-bezier(.65, 0, .35, 1) forwards; }
/* the split icon's spare stroke is half of the top line: it joins the top line's swing instead of vanishing */
.ovio-icon-split.is-open .ovio-mb-lines i:nth-child(2) { --r: 45deg; animation: ovio-x-open .7s cubic-bezier(.65, 0, .35, 1) forwards; }
.ovio-icon-split.is-closing .ovio-mb-lines i:nth-child(2) { --r: 45deg; animation: ovio-x-close .6s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes ovio-x-open {
  0% { width: var(--w, 22px); height: var(--h, 2px); border-radius: 2px; transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) rotate(0); }
  45% { width: 22px; height: 2px; border-radius: 2px; transform: translate(-50%, -50%) rotate(0); }
  100% { width: 22px; height: 2px; border-radius: 2px; transform: translate(-50%, -50%) rotate(var(--r)); } }
@keyframes ovio-x-close {
  0% { width: 22px; height: 2px; border-radius: 2px; transform: translate(-50%, -50%) rotate(var(--r)); }
  55% { width: 22px; height: 2px; border-radius: 2px; transform: translate(-50%, -50%) rotate(0); }
  100% { width: var(--w, 22px); height: var(--h, 2px); transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) rotate(0); } }
@keyframes ovio-gone-open { 0% { opacity: 1; } 40%, 100% { opacity: 0; width: 0; transform: translate(-50%, -50%); } }
@keyframes ovio-gone-close { 0%, 60% { opacity: 0; width: 0; transform: translate(-50%, -50%); } 100% { opacity: 1; } }
@keyframes ovio-spin-open { 0%, 35% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@keyframes ovio-spin-close { 0% { transform: rotate(180deg); } 65%, 100% { transform: rotate(0); } }

/* ---- the icons beside the menu icon: a row, placed by the script next to the menu icon (in its place when it is hidden). Each one has
   the menu icon's light (the ring of light and the glow on its rim when pressed, the glow on hover), and while its box is open its
   picture turns away and shrinks as an X swings in ---- */
.ovio-icons { position: fixed; left: 0; top: 0; z-index: 100001; display: flex; align-items: center; gap: var(--ovio-icg, 4px); opacity: 0; visibility: hidden; }
.ovio-ui.ovio-ready .ovio-icons, .ovio-ui.ovio-ready .ovio-inline { opacity: 1; visibility: visible; transition: opacity .45s ease; }

/* ---- the sticky logo: a copy of your header's logo laid exactly over it, which takes over once the page scrolls and stays at the top of the
   screen. Its mask: the part kept (a frame set by the script) always shows; the rest shows as much as is left of it (--ovio-ma, 1 at the
   top, 0 once it has gone). The particles are drawn on a canvas round it. Over the animation's light screens a white logo darkens with the
   light, as the icons do ---- */
.ovio-logo { position: fixed; left: 0; top: 0; z-index: 100001; display: block; line-height: 0; text-decoration: none !important; border: 0 !important; box-shadow: none !important;
  background: none !important; opacity: 0; visibility: hidden; pointer-events: none; -webkit-tap-highlight-color: transparent; --ovio-ma: 1;
  -webkit-mask: linear-gradient(#000, #000) var(--ovio-mx, 0) var(--ovio-my, 0) / var(--ovio-mw, 100%) var(--ovio-mh, 100%) no-repeat, linear-gradient(rgba(0, 0, 0, var(--ovio-ma)), rgba(0, 0, 0, var(--ovio-ma))) 0 0 / 100% 100% no-repeat;
  mask: linear-gradient(#000, #000) var(--ovio-mx, 0) var(--ovio-my, 0) / var(--ovio-mw, 100%) var(--ovio-mh, 100%) no-repeat, linear-gradient(rgba(0, 0, 0, var(--ovio-ma)), rgba(0, 0, 0, var(--ovio-ma))) 0 0 / 100% 100% no-repeat;
  -webkit-mask-composite: source-over; mask-composite: add; }
.ovio-logo.ovio-logo-shown { opacity: 1; visibility: visible; pointer-events: auto; }
/* (no transitions at all: themes give every link one, Ave "a { transition: all .3s }", which would slide it and fade it as it takes over) */
.ovio-logo, .ovio-logo *, .ovio-logo-dust { transition: none !important; animation: none !important; }
.ovio-logo-pic { position: relative; display: block; }
.ovio-logo-pic > * { display: block !important; margin: 0 !important; max-width: none !important; max-height: none !important; transform: none !important; opacity: 1 !important; visibility: visible !important; }
.ovio-logo:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.ovio-logo-dust { position: fixed; z-index: 100001; pointer-events: none; display: none; }
.ovio-logo-dust.ovio-logo-shown { display: block; }
html :is(.ovio-logo, .ovio-logo-dust).ovio-logo-ink { filter: brightness(calc(1 - .9 * var(--ma-light, 0))); }

/* ---- the fade under the header: a band across the top in which the page blurs more and more towards the top (four layers of blur, each
   stronger and shorter than the one before) under a tint fading from the top: dark, light, or following the animation's light screens. As
   the page starts to scroll its blur and its colour rise together (--ovio-tfp, 0 to 1): the band itself is never made see-through, which
   would stop the browser blurring what is behind it. Set aside while a box is open ---- */
.ovio-topfade { position: fixed; left: 0; right: 0; top: 0; height: 120px; z-index: 99999; pointer-events: none; visibility: hidden; --ovio-tfp: 0; }
.ovio-topfade.is-on { visibility: visible; }
.ovio-topfade > * { position: absolute; inset: 0; }
.ovio-topfade > i { -webkit-backdrop-filter: blur(calc(var(--b) * var(--ovio-tfp))); backdrop-filter: blur(calc(var(--b) * var(--ovio-tfp))); -webkit-mask-image: var(--m); mask-image: var(--m); }
.ovio-topfade > i:nth-child(1) { --b: calc(var(--ovio-tfb, 14px) * .125); --m: linear-gradient(#000 50%, transparent 100%); }
.ovio-topfade > i:nth-child(2) { --b: calc(var(--ovio-tfb, 14px) * .25); --m: linear-gradient(#000 33%, transparent 75%); }
.ovio-topfade > i:nth-child(3) { --b: calc(var(--ovio-tfb, 14px) * .5); --m: linear-gradient(#000 16%, transparent 52%); }
.ovio-topfade > i:nth-child(4) { --b: var(--ovio-tfb, 14px); --m: linear-gradient(#000 0%, transparent 32%); }
/* v2.8: on a touch screen two of the four blur layers (a phone works each out every frame): the quarter blur and the full one */
@media (pointer: coarse) { .ovio-topfade > i:nth-child(1), .ovio-topfade > i:nth-child(3) { display: none; } }
.ovio-topfade > b { --c: 5, 7, 16; opacity: var(--ovio-tfp);
  background: linear-gradient(rgba(var(--c), var(--ovio-tfa, .7)) 0%, rgba(var(--c), calc(var(--ovio-tfa, .7) * .55)) 42%, rgba(var(--c), calc(var(--ovio-tfa, .7) * .16)) 75%, rgba(var(--c), 0) 100%); }
.ovio-topfade > b.ovio-tf-l { --c: 246, 247, 252; }
.ovio-tf-dark > b.ovio-tf-l, .ovio-tf-light > b.ovio-tf-d { display: none; }
.ovio-tf-auto > b.ovio-tf-d { opacity: calc((1 - var(--ma-light, 0)) * var(--ovio-tfp)); }
.ovio-tf-auto > b.ovio-tf-l { opacity: calc(var(--ma-light, 0) * var(--ovio-tfp)); }
/* the grain: the same fine specks as the page's background (and the boxes' glass), over the blur, so the blurred band is as grainy as the
   rest of the page (a blur smooths the grain behind it away). Strongest where the blur is, fading out with it */
.ovio-topfade > em { -webkit-mask-image: linear-gradient(#000 0%, #000 40%, transparent 100%); mask-image: linear-gradient(#000 0%, #000 40%, transparent 100%); }
/* two grains, crossfading with the animation's light screens whatever the tint (the grain matches the page under it): the dark screens'
   (light and dark specks) and the light screens' (soft dark specks only, as their background's grain). A light top fade with no animation
   (no light screens to follow) uses the light one */
.ovio-topfade { --ovio-gl: var(--ma-light, 0); }
.ovio-topfade.ovio-tf-light { --ovio-gl: var(--ma-light, 1); }
.ovio-topfade > em.ovio-tf-g { background: var(--ovio-grain, none) repeat; opacity: calc(var(--ovio-tfp) * var(--ovio-tfg, 1) * (1 - var(--ovio-gl))); }
.ovio-topfade > em.ovio-tf-gl { background: var(--ovio-grain-l, none) repeat; opacity: calc(var(--ovio-tfp) * var(--ovio-tfgl, 1) * var(--ovio-gl)); }
html.ovio-menu-open .ovio-topfade { visibility: hidden !important; }
.ovio-icon-btn { position: relative; display: inline-flex; align-items: center; gap: var(--ovio-ilg, 8px); font: inherit; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* (themes style buttons and links in many ways: none of it reaches these) */
:is(button, a).ovio-icon-btn { margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; text-decoration: none !important;
  width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; color: #fff !important; text-shadow: none !important; transform: none; outline: none; }
:is(button, a).ovio-icon-btn.ovio-light { color: #0e1222 !important; }
a.ovio-icon-btn { transition: none; }   /* (not the theme's "a { transition: all }": the icon's own light does the moving) */
.ovio-icons.ovio-label-left .ovio-icon-btn { flex-direction: row-reverse; }
.ovio-icons.ovio-label-top .ovio-icon-btn { flex-direction: column-reverse; }
.ovio-icons.ovio-label-bottom .ovio-icon-btn { flex-direction: column; }
.ovio-icon-btn:focus-visible .ovio-ib-icon { outline: 1px dashed currentColor; outline-offset: 2px; border-radius: 4px; }
.ovio-ib-label { font-size: 14px; letter-spacing: .08em; white-space: nowrap; }
.ovio-ib-icon { position: relative; display: block; flex: none; width: calc(44px * var(--ovio-iz, 1)); height: calc(44px * var(--ovio-iz, 1)); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.ovio-icon-btn:active .ovio-ib-icon { transform: scale(.88); }
.ovio-ib-glyph { position: absolute; left: 50%; top: 50%; display: block; line-height: 0; transform: translate(-50%, -50%); transition: transform .55s cubic-bezier(.65, 0, .35, 1), opacity .35s ease; }
.ovio-ib-glyph svg { display: block; width: calc(22px * var(--ovio-iz, 1)); height: calc(22px * var(--ovio-iz, 1)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ovio-ib-glyph i { display: block; width: auto; height: auto; margin: 0; font-size: calc(20px * var(--ovio-iz, 1)); line-height: 1; color: inherit; }
.ovio-ib-glyph i::before { margin: 0; }
.ovio-ib-x { position: absolute; left: 50%; top: 50%; width: 0; height: 0; scale: var(--ovio-iz, 1); }
.ovio-ib-x i { position: absolute; left: 0; top: 0; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg) scaleX(.15); transition: transform .5s cubic-bezier(.65, 0, .35, 1), opacity .25s ease; }
.ovio-icon-btn.is-open .ovio-ib-glyph { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(.3); }
.ovio-icon-btn.is-open .ovio-ib-x i { opacity: 1; transition: transform .6s cubic-bezier(.65, 0, .35, 1) .12s, opacity .2s ease .12s; }
.ovio-icon-btn.is-open .ovio-ib-x i:nth-child(1) { transform: translate(-50%, -50%) rotate(225deg) scaleX(1); }
.ovio-icon-btn.is-open .ovio-ib-x i:nth-child(2) { transform: translate(-50%, -50%) rotate(135deg) scaleX(1); }
/* the close button for a box whose own icon isn't on show (an icon left out of the header, or one for the other screen size, when the box
   is opened from a link): an X like the icons', in the menu icon's place at the top of the screen (the menu icon steps aside meanwhile) */
.ovio-close-btn { position: fixed; top: calc(20px + var(--ovio-my, 0px)); z-index: 100001; }
.ovio-close-btn[hidden] { display: none !important; }
.ovio-close-btn.ovio-right { right: calc(20px + var(--ovio-mx, 0px)); }
.ovio-close-btn.ovio-left { left: calc(20px + var(--ovio-mx, 0px)); }
.ovio-close-btn.ovio-placed { right: auto; }
.ovio-menu-btn.ovio-masked { visibility: hidden !important; pointer-events: none !important; }

/* ---- the inline menu: a row of links on desktop, placed by the script beside the icons and lined up with them ---- */
.ovio-inline { position: fixed; left: 0; top: 0; z-index: 100001; opacity: 0; visibility: hidden; color: #fff; --ovio-hl: 190, 215, 255; --ovio-tx: 255, 255, 255; }
.ovio-inline.ovio-light { color: #0e1222; --ovio-hl: 70, 100, 235; --ovio-tx: 14, 18, 34; }
.ovio-inline .ovio-inline-list { display: flex !important; align-items: center; flex-wrap: nowrap; gap: var(--ovio-nli, 30px); list-style: none !important; margin: 0 !important; padding: 0 !important; white-space: nowrap; }
.ovio-inline-list li { position: relative; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; list-style: none !important; float: none !important; }
.ovio-inline-list li::before, .ovio-inline-list li::after { content: none !important; }
.ovio-inline .ovio-inline-list a { position: relative; display: inline-block; padding: 6px 0; margin: 0; color: inherit !important; text-decoration: none !important; border: 0 !important; box-shadow: none !important;
  background: none; outline: none; opacity: 1 !important; font-size: var(--ovio-nls, 15px); line-height: 1.2; letter-spacing: .02em;
  transition: text-shadow .35s ease, letter-spacing .4s ease, transform .35s ease, background-position .8s ease, background-color .3s ease; }
.ovio-inline .ovio-inline-list a::before, .ovio-inline .ovio-inline-list a::after { content: none !important; }
.ovio-inline .ovio-inline-list a:focus-visible { outline: 1px dashed currentColor; outline-offset: 4px; }
/* sub-menus: a small solid glass drop-down under their parent (nothing behind it is blurred, so it stays smooth over the animation) */
.ovio-inline .ovio-inline-list .sub-menu { position: absolute; left: 50%; top: 100%; z-index: 2; display: block !important; min-width: 190px; margin: 0 !important; padding: 10px 0 !important; list-style: none !important;
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s; text-align: left; white-space: nowrap;
  background: linear-gradient(rgba(16, 19, 40, .95), rgba(9, 11, 26, .97)); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 40px -16px rgba(0, 0, 0, .6); color: #fff !important; }
.ovio-inline.ovio-light .ovio-inline-list .sub-menu { background: linear-gradient(rgba(250, 251, 255, .97), rgba(240, 243, 252, .98)); box-shadow: inset 0 0 0 1px rgba(14, 18, 34, .08), 0 18px 40px -18px rgba(8, 12, 40, .35); color: #0e1222 !important; }
.ovio-inline .ovio-inline-list > li:is(:hover, :focus-within) > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.ovio-inline .ovio-inline-list .sub-menu li { display: block; }
.ovio-inline .ovio-inline-list .sub-menu a { display: block; padding: 8px 20px; font-size: .92em; opacity: .88 !important; }
.ovio-inline .ovio-inline-list .sub-menu a:hover { opacity: 1 !important; background-color: rgba(var(--ovio-tx), .06); }
.ovio-inline .ovio-inline-list .sub-menu .sub-menu { display: none !important; }

/* ---- the menu: a glass box almost filling the screen, leaving room round it for its edge lights ---- */
.ovio-menu { position: fixed; inset: 0; z-index: 100000; }
.ovio-menu[hidden] { display: none; }
.ovio-menu:focus { outline: none; }
.ovio-menu-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 16, .22); opacity: 0; transition: opacity .6s ease; }   /* (a light dimming: the page and its animation stay in view) */
/* (its top: below the site's header and the row, or a set height, worked out by the script from the box's settings; its sides and bottom:
   the box's Space at the sides and bottom) */
.ovio-menu-stage { position: absolute; inset: var(--ovio-gap, 24px); top: var(--ovio-top, 84px); pointer-events: none; }
/* opening: a warm glow of light travels from the menu icon to the box's edge and runs round it, drawing its outline (drawn by the script on
   a canvas); the box then fades in inside that outline and the items drift up one after another. Closing: the outline glows and fades with the box */
.ovio-menu-fx { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; display: none; }   /* (sized to the box by the script, only while it draws) */
.ovio-menu-fly { position: absolute; inset: 0; pointer-events: auto; }
.ovio-menu-fly > .ovio-menu-box { opacity: 0; transition: opacity .35s ease; }
.ovio-menu.is-open .ovio-menu-fly > .ovio-menu-box { opacity: 1; transition: opacity .8s ease .7s; }
/* see-through glass like the Glass UI boxes, drawn once: no live blur of what is behind it (over a moving scene a browser has to redo a
   blur every frame, which is what makes phones flicker), no moving lights of its own, no blending, and the film grain is part of the glass
   itself. It keeps still under the pointer */
.ovio-menu-fly > .ovio-menu-box { height: 100%; display: flex; flex-direction: column; --gx-alpha: 1.05; transform: none !important; position: relative;
  background: var(--ovio-grain, none) 0 0 / 128px 128px repeat, var(--gx-glass), var(--ovio-under, linear-gradient(transparent, transparent)) !important; image-rendering: pixelated; }
/* with the page kept in view behind the menu, the glass is nearly solid, so nothing behind it competes with the menu */
.ovio-behind-keep .ovio-menu-fly > .ovio-menu-box { --ovio-under: linear-gradient(rgba(8, 10, 24, .93), rgba(6, 8, 20, .96)); }
.ovio-behind-keep .ovio-menu-fly > .ovio-menu-box.box-style-light { --ovio-under: linear-gradient(rgba(246, 247, 253, .93), rgba(238, 241, 251, .96)); }
.ovio-menu.is-open .ovio-menu-backdrop { opacity: 1; }
.ovio-menu-scroll { position: relative; z-index: 1; image-rendering: auto; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 8px 4px; }
/* (in the menu box, a menu too long for the box starts at its top and scrolls, instead of being cut off above and below: it is centred by
   margins that give way when there is no room) */
#ovio-menu .ovio-menu-scroll { justify-content: flex-start; }
#ovio-menu .ovio-menu-scroll > :first-child { margin-top: auto; }
#ovio-menu .ovio-menu-scroll > :last-child { margin-bottom: auto; }
.ovio-text-center .ovio-menu-scroll { text-align: center; }
.ovio-text-left .ovio-menu-scroll { text-align: left; }
.ovio-text-right .ovio-menu-scroll { text-align: right; }

/* ---- the icons' full-screen boxes: the same glass, sky, grain and outline of light as the menu box, filling the screen below the icons.
   Their content (a page or your HTML) starts at the top and scrolls inside the box; if it is short it sits in the middle ---- */
.ovio-panel .ovio-menu-scroll { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; text-align: left; padding: clamp(6px, 2.2vw, 30px) clamp(2px, 1.8vw, 26px); }
.ovio-panel-content { width: 100%; max-width: var(--ovio-pcw, 1140px); margin: auto; color: inherit; }
.ovio-panel-content img { max-width: 100%; height: auto; }
.ovio-panel-content > :first-child { margin-top: 0; }
.ovio-panel-content > :last-child { margin-bottom: 0; }
/* (a WPBakery row set to stretch to the full width stays inside the box) */
.ovio-panel .vc_row[data-vc-full-width] { left: auto !important; width: auto !important; }

/* the sky inside the box: soft clouds of colour drifting slowly over the glass, in the same style as the page animation's first scene but its
   own colours. The script draws it small on this canvas (soft clouds need no more) and the browser stretches it over the box: one small
   picture, redrawn about 30 times a second while the menu is open */
.ovio-menu-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; border-radius: inherit; pointer-events: none; opacity: .62; image-rendering: auto; }
.ovio-menu:has(.box-style-light) .ovio-menu-sky { opacity: .75; }
.ovio-behind-keep .ovio-menu-sky { opacity: .7; }

/* "fade the page out": while the menu is open the page's own words and pictures fade away (the script marks them), leaving the space
   animation, which is drawn outside the page, behind the see-through box. Hidden, they cost the phone nothing to show */
.ovio-veil { transition: opacity .45s ease, visibility 0s linear 0s !important; }
.ovio-veil.ovio-veiled { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .32s ease, visibility 0s linear .32s !important; }
/* "blur the page": they stay in view, soft and dim, instead of going. The blur is worked out once as the box opens (nothing behind it moves
   while it is open), so it costs nothing after that; the space animation, drawn outside the page, stays sharp */
.ovio-veil.ovio-vblur { transition: opacity .5s ease, filter .5s ease !important; }
.ovio-veil.ovio-vblur.ovio-veiled { opacity: .5 !important; visibility: visible !important; filter: blur(var(--ovio-vb, 8px)) saturate(.85) !important;
  transition: opacity .5s ease, filter .5s ease !important; }
/* (v2.8: parts of the page well off the screen are only dimmed the same, with no blur to work out or hold in memory) */
.ovio-veil.ovio-vdim { transition: opacity .5s ease !important; }
.ovio-veil.ovio-vdim.ovio-veiled { opacity: .5 !important; visibility: visible !important; pointer-events: none !important; transition: opacity .5s ease !important; }
/* (behind an open box the page's own animations wait, so nothing behind it has to be blurred again while it is open) */
.ovio-veil.ovio-veiled, .ovio-veil.ovio-veiled * { animation-play-state: paused !important; }
/* Snap Fade Scroll: for a long jump the page dips into the site's clouds of colour (drawn by the script) under the row, the logo and the boxes.
   --ovio-dip: the colour under the clouds */
.ovio-dip { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 99999; pointer-events: none; opacity: 0; visibility: hidden; transition: none !important; overflow: hidden; background: var(--ovio-dip, #07081a); }
.ovio-dip.is-on { visibility: visible; will-change: opacity; }
.ovio-dip > canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.ovio-dip::after { content: ""; position: absolute; inset: 0; background: var(--ovio-grain, none) repeat; }

/* the items: one colour whether current or not, no outlines or borders from the theme; they rise into place one after another */
.ovio-menu-list, .ovio-menu-list ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ovio-menu-list li { margin: 0; padding: 0; border: 0 !important; background: none !important; }
.ovio-menu-list li::before, .ovio-menu-list li::after { content: none !important; }
.ovio-menu-list a, .ovio-menu-html a { position: relative; display: inline-block; color: inherit !important; text-decoration: none; border: 0 !important; box-shadow: none !important;
  background: none; outline: none; opacity: 1 !important; transition: text-shadow .35s ease, letter-spacing .4s ease, transform .35s ease, background-position .8s ease; }
.ovio-menu-list a { padding: 8px 0; font-size: clamp(20px, 5.2vw, 26px); letter-spacing: -.01em; line-height: 1.2; }
/* sub-menu items read as part of their item: smaller and quieter, close under it, with more room between one item's group and the next.
   Beside them, on their side of a left- or right-aligned menu, a fine line; over them, on a centred one, a short fine dash */
.ovio-menu-list > li + li { margin-top: clamp(4px, 1.2vh, 12px); }
.ovio-menu-list > li > ul { margin: -3px 0 6px !important; }
.ovio-menu-list ul a { font-size: clamp(14.5px, 3.8vw, 16.5px); padding: 4px 0; letter-spacing: .015em; opacity: .62 !important; transition: opacity .3s ease, text-shadow .35s ease, letter-spacing .4s ease, transform .35s ease, background-position .8s ease; }
.ovio-menu-list ul a:is(:hover, :focus-visible), .ovio-menu-list ul li:is(.ovio-active, .current-menu-item) > a { opacity: 1 !important; }
.ovio-text-left .ovio-menu-list > li > ul { padding-left: 14px !important; margin-left: 1px !important; box-shadow: inset 1px 0 rgba(var(--ovio-tx), .16); }
.ovio-text-right .ovio-menu-list > li > ul { padding-right: 14px !important; margin-right: 1px !important; box-shadow: inset -1px 0 rgba(var(--ovio-tx), .16); }
.ovio-text-center .ovio-menu-list > li > ul::before { content: ""; display: block; width: 16px; height: 1px; margin: 3px auto 3px; background: rgba(var(--ovio-tx), .28); }
.ovio-menu-html a { text-decoration: underline; text-underline-offset: 3px; }
/* menu items are never underlined by the theme (or by the link style of the HTML above / below, if the menu is written there): no text
   underline, border or background line, and the theme's own decorations drawn with ::before / ::after are switched off. Only the hover
   and current-page options chosen in the settings draw on them */
.ovio-menu .ovio-menu-list a { text-decoration: none !important; border-bottom: 0 !important; background-image: none !important; }
.ovio-menu .ovio-menu-list a::before, .ovio-menu .ovio-menu-list a::after { content: none !important; }
.ovio-menu-list a:focus, .ovio-menu-html a:focus { outline: none; }
.ovio-menu-list a:focus-visible, .ovio-menu-html a:focus-visible { outline: 1px dashed currentColor; outline-offset: 4px; }
.ovio-menu-scroll > *, .ovio-menu-list > li { opacity: 0; transform: translateY(18px); transition: opacity .25s ease, transform .3s ease; }
.ovio-menu.is-open .ovio-menu-scroll > *, .ovio-menu.is-open .ovio-menu-list > li { opacity: 1; transform: none;
  transition: opacity .7s ease calc(.85s + var(--ovio-i, 0) * .07s), transform .9s cubic-bezier(.16, 1, .3, 1) calc(.85s + var(--ovio-i, 0) * .07s); }

/* colours of the light used by the hover effects and the current-page marks: cool white on dark glass, blue on light */
.ovio-menu { --ovio-hl: 190, 215, 255; --ovio-tx: 255, 255, 255; }
.ovio-menu:has(.box-style-light) { --ovio-hl: 70, 100, 235; --ovio-tx: 14, 18, 34; }

/* hover effects */
.ovio-hover-glow :is(.ovio-menu-list, .ovio-inline-list) a:hover, .ovio-hover-glow .ovio-menu-html a:hover { text-shadow: 0 0 14px rgba(var(--ovio-hl), .85), 0 0 2px rgba(var(--ovio-hl), .6); }
.ovio-hover-underline :is(.ovio-menu-list, .ovio-inline-list) a::after { content: "" !important; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.ovio-hover-underline :is(.ovio-menu-list, .ovio-inline-list) a:hover::after { transform: scaleX(1); }
.ovio-hover-shine :is(.ovio-menu-list, .ovio-inline-list) a { background-image: linear-gradient(110deg, rgb(var(--ovio-tx)) 42%, rgb(var(--ovio-hl)) 50%, rgb(var(--ovio-tx)) 58%) !important;
  background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ovio-hover-shine :is(.ovio-menu-list, .ovio-inline-list) a:hover { background-position: 0 0; }
.ovio-hover-spacing :is(.ovio-menu-list, .ovio-inline-list) a:hover { letter-spacing: .05em; }
.ovio-hover-lift :is(.ovio-menu-list, .ovio-inline-list) a:hover { transform: translateY(-3px); text-shadow: 0 6px 18px rgba(var(--ovio-hl), .55); }

/* the current page (or section) */
:is(.ovio-menu-list, .ovio-inline-list) :is(.current-menu-item, .ovio-active) > a { }
.ovio-active-underline :is(.ovio-menu-list, .ovio-inline-list) :is(.current-menu-item, .ovio-active) > a::after { content: "" !important; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(1); }
.ovio-active-dot :is(.ovio-menu-list, .ovio-inline-list) :is(.current-menu-item, .ovio-active) > a::before { content: "" !important; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  right: calc(100% + .55em); background: rgb(var(--ovio-hl)); box-shadow: 0 0 10px rgba(var(--ovio-hl), .9); }
.ovio-text-right.ovio-active-dot :is(.ovio-menu-list, .ovio-inline-list) :is(.current-menu-item, .ovio-active) > a::before { right: auto; left: calc(100% + .55em); }
.ovio-active-glow :is(.ovio-menu-list, .ovio-inline-list) :is(.current-menu-item, .ovio-active) > a { text-shadow: 0 0 16px rgba(var(--ovio-hl), .8), 0 0 3px rgba(var(--ovio-hl), .5); }
.ovio-active-pill :is(.ovio-menu-list, .ovio-inline-list) :is(.current-menu-item, .ovio-active) > a { background-color: rgba(var(--ovio-tx), .1); border-radius: 999px; padding-left: .7em; padding-right: .7em; }
/* (with sections on one page, only the section you're in is marked, not every link to this page) */
:is(.ovio-menu, .ovio-inline).ovio-spy :is(.ovio-menu-list, .ovio-inline-list) .current-menu-item:not(.ovio-active) > a:not(:hover)::after { transform: scaleX(0); }
:is(.ovio-menu, .ovio-inline).ovio-spy :is(.ovio-menu-list, .ovio-inline-list) .current-menu-item:not(.ovio-active) > a::before { content: none !important; }
.ovio-active-glow.ovio-spy :is(.ovio-menu-list, .ovio-inline-list) .current-menu-item:not(.ovio-active) > a { text-shadow: none; }
.ovio-active-pill.ovio-spy :is(.ovio-menu-list, .ovio-inline-list) .current-menu-item:not(.ovio-active) > a { background-color: transparent; }

/* (the inline menu's shine is drawn in its own text colour, so it turns dark with it over the light screens) */
.ovio-inline.ovio-hover-shine .ovio-inline-list a { background-image: linear-gradient(110deg, currentColor 42%, rgb(var(--ovio-hl)) 50%, currentColor 58%) !important; }
.ovio-inline .ovio-inline-list .sub-menu a::after, .ovio-inline .ovio-inline-list .sub-menu a::before { content: none !important; }
.ovio-inline .ovio-inline-list .sub-menu a { transform: none !important; letter-spacing: inherit !important; }

/* while it is open the page behind doesn't scroll: the script holds it still, without hiding the scroll bar (so nothing shifts) */
.ovio-menu-scroll { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.ovio-menu-scroll:hover { scrollbar-color: rgba(var(--ovio-tx), .3) transparent; }
.ovio-menu:not(.is-settled) .ovio-menu-scroll { overflow: hidden; }   /* (no scroll bar while it is appearing) */

@media (prefers-reduced-motion: reduce) {
  .ovio-menu-btn .ovio-mb-lines, .ovio-menu-btn .ovio-mb-lines i { animation-duration: .01s !important; }
  .ovio-mb-ring, .ovio-mb-glow { animation: none !important; }
  .ovio-menu-fly > .ovio-menu-box, .ovio-menu.is-open .ovio-menu-fly > .ovio-menu-box { transition: opacity .25s ease !important; }
  .ovio-menu-fx { display: none !important; }
  .ovio-veil, .ovio-veil.ovio-veiled { transition: none !important; }
  .ovio-menu-scroll > *, .ovio-menu-list > li { transform: none !important; filter: none !important; }
  .ovio-ib-glyph, .ovio-ib-x i, .ovio-inline .ovio-inline-list .sub-menu { transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* ---- the menu icon's entrance as the page loads (Settings › OVIO Space › Menu icon › Entrance). It stays hidden until the script has put
   it in its spot, so it never shows anywhere else first (shown anyway after a few seconds, should the script not run), then comes in once,
   with the icons beside it. Slide and settle: each line slides in from the side, stretched a little with speed, overshoots and settles, one
   after another. From a point: a glowing point stretches into the middle line, and the others split off from it. Dot icons pop in. Fade
   in: the whole button fades in. (Once it is over the script adds .ovio-entered, letting go of the lines so the X can take over) ---- */
.ovio-ui:not(.ovio-ready) .ovio-menu-btn { visibility: hidden; animation: ovio-late 0s 3s forwards; }
@keyframes ovio-late { to { visibility: visible; } }
.ovio-menu-btn { --ovio-sd: 1; }
.ovio-menu-btn.ovio-left { --ovio-sd: -1; }   /* (from the side it sits on) */
@media (prefers-reduced-motion: no-preference) {
  .ovio-ui.ovio-ready .ovio-menu-btn.ovio-enter-fade:not(.ovio-entered) { animation: ovio-in-fade .5s ease both; }
  .ovio-ui.ovio-ready .ovio-menu-btn:is(.ovio-enter-slide, .ovio-enter-point):not(.ovio-entered):not(.is-open):not(.is-closing) .ovio-mb-label { animation: ovio-in-fade .6s ease .25s both; }
  /* slide and settle */
  .ovio-ui.ovio-ready .ovio-menu-btn.ovio-enter-slide:not(.ovio-entered):not(.is-open):not(.is-closing) .ovio-mb-lines i { transform-origin: 0 50%; animation: ovio-in-slide .75s cubic-bezier(.2, .9, .25, 1) both; }
  .ovio-ui.ovio-ready .ovio-menu-btn.ovio-left.ovio-enter-slide:not(.ovio-entered):not(.is-open):not(.is-closing) .ovio-mb-lines i { transform-origin: 100% 50%; }
  .ovio-ui.ovio-ready .ovio-menu-btn.ovio-enter-slide:not(.ovio-entered):not(.is-open):not(.is-closing) .ovio-mb-lines i:nth-child(2) { animation-delay: .09s; }
  .ovio-ui.ovio-ready .ovio-menu-btn.ovio-enter-slide:not(.ovio-entered):not(.is-open):not(.is-closing) .ovio-mb-lines i:nth-child(3) { animation-delay: .18s; }
  /* from a point: the point is drawn at the middle of the lines */
  .ovio-menu-btn.ovio-enter-point .ovio-mb-lines::after { content: ''; position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none;
    box-shadow: 0 0 6px 2px rgba(var(--ovio-glint), .9), 0 0 14px 5px rgba(var(--ovio-warm), .4); }
  .ovio-ui.ovio-ready .ovio-menu-btn.ovio-enter-point:not(.ovio-entered):not(.is-open):not(.is-closing) .ovio-mb-lines::after { animation: ovio-in-dot .55s cubic-bezier(.3, 0, .2, 1) both; }
  .ovio-ui.ovio-ready .ovio-menu-btn.ovio-enter-point:not(.ovio-entered):not(.is-open):not(.is-closing) .ovio-mb-lines i:nth-child(2) { animation: ovio-in-grow .5s cubic-bezier(.5, 0, .2, 1) .22s both, ovio-in-glow 1.1s ease-out .22s both; }
  .ovio-ui.ovio-ready .ovio-menu-btn.ovio-enter-point:not(.ovio-entered):not(.is-open):not(.is-closing) .ovio-mb-lines i:is(:nth-child(1), :nth-child(3)) { animation: ovio-in-split .55s cubic-bezier(.3, 1.35, .5, 1) .62s both, ovio-in-glow 1s ease-out .62s both; }
  /* dot icons: each dot pops in, one after another */
  .ovio-ui.ovio-ready .ovio-menu-btn:is(.ovio-enter-slide, .ovio-enter-point):is(.ovio-icon-dots, .ovio-icon-vdots):not(.ovio-entered):not(.is-open):not(.is-closing) .ovio-mb-lines i { transform-origin: 50% 50%; animation: ovio-in-pop .5s cubic-bezier(.3, 1.5, .5, 1) both; }
  .ovio-ui.ovio-ready .ovio-menu-btn:is(.ovio-enter-slide, .ovio-enter-point):is(.ovio-icon-dots, .ovio-icon-vdots):not(.ovio-entered):not(.is-open):not(.is-closing) .ovio-mb-lines i:nth-child(2) { animation-delay: .1s; }
  .ovio-ui.ovio-ready .ovio-menu-btn:is(.ovio-enter-slide, .ovio-enter-point):is(.ovio-icon-dots, .ovio-icon-vdots):not(.ovio-entered):not(.is-open):not(.is-closing) .ovio-mb-lines i:nth-child(3) { animation-delay: .2s; }
  .ovio-ui.ovio-ready .ovio-menu-btn.ovio-enter-point:is(.ovio-icon-dots, .ovio-icon-vdots) .ovio-mb-lines::after { animation: none; }
}
@keyframes ovio-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ovio-in-slide {
  0% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px) + 18px * var(--ovio-sd, 1)), calc(-50% + var(--y, 0px))) scaleX(1.35); }
  55% { opacity: 1; transform: translate(calc(-50% + var(--x, 0px) - 1.2px * var(--ovio-sd, 1)), calc(-50% + var(--y, 0px))) scaleX(1); }
  78% { transform: translate(calc(-50% + var(--x, 0px) + .4px * var(--ovio-sd, 1)), calc(-50% + var(--y, 0px))); }
  100% { opacity: 1; transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))); }
}
@keyframes ovio-in-dot { 0% { opacity: 0; transform: scale(0); } 45% { opacity: 1; transform: scale(1.35); } 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }
@keyframes ovio-in-grow { from { transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scaleX(.06); } to { transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))); } }
@keyframes ovio-in-split {
  0% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), -50%) scaleX(1.5); }
  25% { opacity: 1; }
  100% { opacity: 1; transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))); }
}
@keyframes ovio-in-glow { 0% { box-shadow: 0 0 6px 1px rgba(var(--ovio-glint), .85); } 100% { box-shadow: 0 0 0 0 rgba(var(--ovio-glint), 0); } }
@keyframes ovio-in-pop { 0% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(0); } 100% { opacity: 1; transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))); } }