/* OVIO Space: the OVIO Processes element ([ovio_process]), in four designs: linked rings, flow wave, continuous cycle and rising steps.
   Every design runs on one clock: --pr-t is one run through all the stages (--pr-n of them, --pr-d each). Each stage's parts carry
   ovio-pr-on: it animates --on from 0 to 1 while the light is on that stage and back after, timed by --dl (a delay that puts it at the moment
   the light arrives), and everything that lights up reads --on. The keyframes for each number of stages are at the foot (made by
   tools/process_css.py). Glass parts are the site's glass boxes and circles (the Glass UI). Phones: up to 767px, the version made for them
   (ovio-pr-mob), unless the element keeps the original (ovio-pr-keep: the script shows it smaller, to fit). */
@property --on { syntax: '<number>'; inherits: true; initial-value: 0; }
.ovio-pr { --pr-fg: 255, 255, 255; --pr-comet: #fff; position: relative; color: rgb(var(--pr-fg)); }
.ovio-pr-light { --pr-fg: 14, 18, 34; --pr-comet: rgba(40, 52, 130, .95); }
.ovio-pr *, .ovio-pr *::before, .ovio-pr *::after { box-sizing: border-box; }
.ovio-pr.is-paused, .ovio-pr.is-paused * { animation-play-state: paused !important; }
.ovio-pr svg { display: block; overflow: visible; }
.ovio-pr-on { animation: opr-on-4 var(--pr-t, 8s) linear infinite; animation-delay: var(--dl, 0ms); }

/* the heading */
.ovio-pr-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 48px; margin: 0 auto 40px; max-width: 1240px; }
.ovio-pr-head-center { flex-direction: column; align-items: center; text-align: center; max-width: 760px; }
.ovio-pr-head-stack { flex-direction: column; align-items: flex-start; }
.ovio-pr-name-wrap { display: flex; flex-direction: column; gap: 12px; }
.ovio-pr-head-center .ovio-pr-name-wrap { align-items: center; }
.ovio-pr-eyebrow { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; opacity: .72; }
.ovio-pr-title { margin: 0; font-size: clamp(30px, 3.2vw, 46px); font-weight: 300; line-height: 1.1; color: inherit; }
.ovio-pr-tag { margin: 0; max-width: 460px; font-size: 17px; line-height: 1.7; opacity: .8; }
.ovio-pr-head-center .ovio-pr-tag { max-width: 760px; }
.ovio-pr-fit { position: relative; }
.ovio-pr-wide { max-width: 1240px; margin: 0 auto; transform-origin: 0 0; }
.ovio-pr-m { display: none; }

/* the points */
.ovio-pr-pts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ovio-pr-pts li { margin: 0; padding: 0; font-size: 16px; line-height: 1.5; color: rgba(var(--pr-fg), .9); }
.ovio-pr-pts li::before { content: none; }
.ovio-pr-pts-plain { align-items: center; text-align: center; gap: 12px; }
.ovio-pr-pts-plain li { max-width: 240px; }
.ovio-pr-pts-dot li { display: flex; align-items: flex-start; gap: 12px; }
.ovio-pr-pts-dot li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 10px rgb(var(--c)); }
.ovio-pr-pts-check li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.55; }
.ovio-pr-pts-check svg { flex: none; width: 16px; height: 16px; margin-top: 3px; fill: none; stroke: rgb(var(--c)); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ovio-pr-h { margin: 0 0 6px; font-size: 22px; font-weight: 400; letter-spacing: .14em; line-height: 1.3; color: rgb(var(--c)); }
.ovio-pr-step { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: rgb(var(--c)); }

/* the light: a comet along a chain or round a ring, a pulse along a wave or a line, and a current of fine particles drifting along it */
.ovio-pr-comet, .ovio-pr-comet-glow, .ovio-pr-pulse, .ovio-pr-pulse-glow { fill: none; stroke-linecap: round; animation: opr-run var(--pr-t, 8s) linear infinite; }
.ovio-pr-comet, .ovio-pr-comet-glow { stroke-dasharray: 100 1100; }
.ovio-pr-comet, .ovio-pr-pulse { stroke: var(--pr-comet); }
.ovio-pr-comet-glow, .ovio-pr-pulse-glow { filter: blur(6px); stroke-opacity: .7; }
.ovio-pr-pulse, .ovio-pr-pulse-glow { stroke-dasharray: 70 1100; animation-name: opr-pulse; }
.ovio-pr-pulse { stroke-width: 3.5; }
.ovio-pr-pulse-glow { stroke-width: 16; }
.ovio-pr-line { fill: none; stroke-width: 2; stroke-opacity: .35; }
.ovio-pr-stream { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 16; animation: opr-stream 1.6s linear infinite; }
.ovio-pr-track { fill: none; stroke: rgba(var(--pr-fg), .08); }
@keyframes opr-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -1000; } }
@keyframes opr-pulse { from { stroke-dashoffset: 70; } to { stroke-dashoffset: -1000; } }
@keyframes opr-loop { from { stroke-dashoffset: 90; } to { stroke-dashoffset: -910; } }
@keyframes opr-stream { to { stroke-dashoffset: -17; } }
@keyframes opr-spin { to { transform: rotate(360deg); } }

/* a stage's glass circle (the site's: the Glass UI draws its glass, moon and glow), ringed in the stage's colour, brighter while lit */
.ovio-pr-node { position: absolute; aspect-ratio: 1; translate: -50% -50%; }
.ovio-pr .ovio-pr-orb { position: relative; width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  display: grid !important; place-items: center; aspect-ratio: 1; scale: calc(1 + .08 * var(--on)); }
.ovio-pr-orbring { position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(var(--c), calc(.35 + .65 * var(--on))), 0 0 calc(26px * var(--on)) rgba(var(--c), calc(.55 * var(--on))); }
.ovio-pr-orb .ovio-pr-i { position: relative; z-index: 2; display: grid; place-items: center; width: 38%; height: 38%; color: rgb(var(--c)); }
.ovio-pr-i svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ovio-pr-i i { font-size: 30px; }
.ovio-pr-dot { position: relative; z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(var(--c), .85), 0 0 34px 10px rgba(var(--c), .35); }
.ovio-pr-ripple { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgb(var(--c)); opacity: 0; pointer-events: none;
  animation: opr-pop-4 var(--pr-t, 8s) ease-out infinite; animation-delay: var(--dl, 0ms); }

/* a glass panel showing the points of the stage the light is on (each stage's laid over the others, so it is as tall as the longest) */
.ovio-pr .ovio-pr-panel { display: grid !important; align-items: start; }
.ovio-pr-detail { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; opacity: 0; visibility: visible; animation: opr-show-4 var(--pr-t, 8s) linear infinite; animation-delay: var(--dl, 0ms); }
.ovio-pr-detail .ovio-pr-h { color: inherit; letter-spacing: 0; font-size: 32px; font-weight: 300; margin: 0 0 6px; text-transform: none; }

/* ---------------- linked rings ---------------- */
.ovio-pr-rings-svg { width: 100%; height: auto; }
.ovio-pr-ring { fill: none; stroke-linecap: round; stroke-opacity: calc(.28 + .67 * var(--on)); }
.ovio-pr-name { fill: rgb(var(--pr-fg)); text-anchor: middle; font-weight: 300; letter-spacing: .09em; opacity: calc(.62 + .38 * var(--on)); }
.ovio-pr-cols { display: grid; grid-template-columns: repeat(var(--pr-n, 4), minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.ovio-pr-col { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; opacity: calc(.7 + .3 * var(--on)); translate: 0 calc(4px - 4px * var(--on)); }
.ovio-pr-tick { width: 1px; height: 40px; background: repeating-linear-gradient(to bottom, rgba(var(--pr-fg), .6) 0 2px, transparent 2px 6px); }
.ovio-pr-rings .ovio-pr-cols { margin-top: 6px; }
.ovio-pr-rings .ovio-pr-pts li { font-size: 17px; line-height: 1.45; }
.ovio-pr-mrings { width: 62%; max-width: 250px; height: auto; }
.ovio-pr-rings .ovio-pr-m { flex-direction: column; align-items: center; gap: 28px; }
.ovio-pr-rings .ovio-pr-panel { width: 100%; max-width: 420px; }

/* ---------------- flow wave ---------------- */
.ovio-pr-wv { position: relative; }
.ovio-pr-wv svg { width: 100%; height: auto; }
.ovio-pr-wv .ovio-pr-node { width: 9.06%; }
.ovio-pr-wave .ovio-pr-cols { gap: 28px; margin-top: 30px; }
.ovio-pr-wave .ovio-pr-col { gap: 12px; opacity: calc(.78 + .22 * var(--on)); translate: none; }
.ovio-pr-wave .ovio-pr-m { flex-direction: column; gap: 38px; }
.ovio-pr-mrow { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; }
.ovio-pr-mrow > .ovio-pr-orb { width: 72px !important; height: 72px !important; }
.ovio-pr-mtext { display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.ovio-pr-mtext .ovio-pr-h { font-size: 20px; margin-bottom: 4px; }
.ovio-pr-mtext .ovio-pr-pts { align-items: flex-start; text-align: left; gap: 9px; }
.ovio-pr-mtext .ovio-pr-pts li { font-size: 15.5px; max-width: none; }
.ovio-pr-mwave { position: absolute; left: 0; top: 72px; bottom: -38px; width: 72px; height: auto !important; pointer-events: none; }
.ovio-pr-mwave path { fill: none; vector-effect: non-scaling-stroke; stroke: rgb(var(--c)); stroke-linecap: round; }
.ovio-pr-mline { stroke-opacity: .35; stroke-width: 2; }
.ovio-pr-mstream { stroke-width: 3; stroke-dasharray: 1 14; animation: opr-stream 1.6s linear infinite; }
.ovio-pr-mpul, .ovio-pr-mpul-glow { stroke-dasharray: 24 100; stroke-dashoffset: 24; animation: opr-seg-4 var(--pr-t, 8s) linear infinite; animation-delay: calc(var(--dl, 0ms) + var(--pr-d, 2s) * .1); }
.ovio-pr-mrow .ovio-pr-mpul { stroke: var(--pr-comet); stroke-width: 3; }
.ovio-pr-mpul-glow { stroke-width: 12; stroke-opacity: .7; filter: blur(5px); vector-effect: none; }

/* ---------------- continuous cycle ---------------- */
.ovio-pr-cy { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.ovio-pr-cyring { position: relative; width: 100%; max-width: 620px; justify-self: center; }
.ovio-pr-cyring svg { width: 100%; height: auto; }
.ovio-pr-cyring .ovio-pr-node { width: 14.7%; }
.ovio-pr-arc { fill: none; stroke-width: 10; }
.ovio-pr-cycle .ovio-pr-comet, .ovio-pr-cycle .ovio-pr-comet-glow { stroke-dasharray: 90 1000; animation-name: opr-loop; }
.ovio-pr-cycle .ovio-pr-chead { transform-box: view-box; transform-origin: 300px 300px; animation: opr-spin var(--pr-t, 12s) linear infinite; }
.ovio-pr-label { fill: rgb(var(--pr-fg)); font-size: 22px; font-weight: 400; letter-spacing: 3px; opacity: calc(.55 + .45 * var(--on)); }
.ovio-pr-static { fill: rgba(var(--pr-fg), .85); text-anchor: middle; font-weight: 300; }
.ovio-pr-again { fill: rgba(var(--pr-fg), .55); font-size: 14px; letter-spacing: 2px; }
.ovio-pr-mname { display: none; text-anchor: middle; font-weight: 300; letter-spacing: 4px; opacity: 0; animation: opr-show-4 var(--pr-t, 12s) linear infinite; animation-delay: var(--dl, 0ms); }
.ovio-pr-cycle .ovio-pr-panel { min-height: 0; }

/* ---------------- rising steps ---------------- */
.ovio-pr-st { position: relative; }
.ovio-pr-stline { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.ovio-pr-st .ovio-pr-stream { stroke-dasharray: 1 14; animation-duration: 1.5s; }
.ovio-pr-st .ovio-pr-pulse, .ovio-pr-st .ovio-pr-pulse-glow { stroke-dasharray: 80 1100; animation-name: opr-climb; }
@keyframes opr-climb { from { stroke-dashoffset: 80; } to { stroke-dashoffset: -1000; } }
.ovio-pr-cards { position: relative; display: grid; grid-template-columns: repeat(var(--pr-n, 4), minmax(0, 1fr)); gap: 28px; align-items: start; }
.ovio-pr .ovio-pr-card { position: relative; margin: var(--rise, 0px) 0 0 !important; display: flex !important; flex-direction: column; align-items: flex-start; gap: 14px; }
.ovio-pr-card > .ovio-pr-i { width: 34px; height: 34px; color: rgb(var(--c)); }
.ovio-pr-card > .ovio-pr-dot { margin: 8px 0 6px 4px; }
.ovio-pr-card .ovio-pr-h { color: inherit; font-size: 26px; font-weight: 300; letter-spacing: 0; margin: 0; line-height: 1.2; }
.ovio-pr-cglow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--on);
  box-shadow: inset 0 0 0 1px rgba(var(--c), .75), 0 30px 80px -24px rgba(var(--c), .85); }
.ovio-pr-cnode { position: absolute; left: 50%; top: -9px; z-index: 3; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
  background: rgb(calc(28 + (255 - 28) * var(--on)) calc(21 + (255 - 21) * var(--on)) calc(48 + (255 - 48) * var(--on)));
  box-shadow: inset 0 0 0 2px rgb(var(--c)), 0 0 calc(24px * var(--on)) calc(6px * var(--on)) rgba(var(--c), .9); }
.ovio-pr-light .ovio-pr-cnode { background: rgb(calc(240 + 15 * var(--on)) calc(242 + 13 * var(--on)) 255); }
.ovio-pr-st .ovio-pr-mline { display: none; position: absolute; left: 7px; top: 40px; bottom: 40px; width: 2px; border-radius: 2px; background: var(--pr-grad); opacity: .5; }
.ovio-pr-st .ovio-pr-mline::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(var(--pr-fg), .9) 0 2px, transparent 2px 15px); animation: opr-mstream 1.5s linear infinite; }
.ovio-pr-st .ovio-pr-mline::after { content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 70px; margin-left: -3px; border-radius: 3px; background: linear-gradient(transparent, var(--pr-comet)); box-shadow: 0 0 14px 3px rgba(255, 255, 255, .55); animation: opr-mdrop var(--pr-t, 8s) linear infinite; }
@keyframes opr-mstream { to { background-position: 0 15px; } }
@keyframes opr-mdrop { 0% { top: -70px; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* ---------------- narrower screens and phones (the version made for phones; not when the element keeps the original) ---------------- */
@media (max-width: 900px) {
  .ovio-pr-mob.ovio-pr-cycle .ovio-pr-cy { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ovio-pr-mob.ovio-pr-steps .ovio-pr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ovio-pr-mob.ovio-pr-steps .ovio-pr-card { margin-top: 0 !important; }
  .ovio-pr-mob.ovio-pr-steps .ovio-pr-stline { display: none; }
}
@media (max-width: 767px) {
  .ovio-pr-mob .ovio-pr-head { flex-direction: column; align-items: flex-start; margin-bottom: 30px; }
  .ovio-pr-mob .ovio-pr-head-center { align-items: center; }
  .ovio-pr-mob:is(.ovio-pr-rings, .ovio-pr-wave) .ovio-pr-fit { display: none; }
  .ovio-pr-mob:is(.ovio-pr-rings, .ovio-pr-wave) .ovio-pr-m { display: flex; }
  .ovio-pr-mob.ovio-pr-cycle :is(.ovio-pr-label, .ovio-pr-static) { display: none; }
  .ovio-pr-mob.ovio-pr-cycle .ovio-pr-mname { display: inline; }
  .ovio-pr-mob.ovio-pr-steps .ovio-pr-cards { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 34px; }
  .ovio-pr-mob.ovio-pr-steps .ovio-pr-mline { display: block; }
  .ovio-pr-mob.ovio-pr-steps .ovio-pr-cnode { left: -34px; top: 38px; margin-left: 0; }
  .ovio-pr-mob .ovio-pr-detail .ovio-pr-h { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .ovio-pr, .ovio-pr * { animation: none !important; }
  .ovio-pr { --on: 1; }
  .ovio-pr-comet, .ovio-pr-comet-glow, .ovio-pr-pulse, .ovio-pr-pulse-glow, .ovio-pr-mpul, .ovio-pr-mpul-glow, .ovio-pr-ripple, .ovio-pr-chead, .ovio-pr-mname { display: none !important; }
  .ovio-pr .ovio-pr-panel { display: flex !important; flex-direction: column; gap: 28px; }
  .ovio-pr-detail { opacity: 1; }
}

/* ---------------- each number of stages: its own keyframes (one stage's share of a run is 100% / n) ---------------- */
@keyframes opr-on-2 { 0% { --on: 1; } 45% { --on: 1; } 62.5%, 100% { --on: 0; } }
@keyframes opr-show-2 { 0% { opacity: 0; translate: 0 8px; visibility: visible; } 4% { opacity: 1; translate: 0 0; } 48% { opacity: 1; translate: 0 0; } 50% { opacity: 0; translate: 0 -6px; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }
@keyframes opr-pop-2 { 0% { opacity: .9; scale: 1; } 36% { opacity: 0; scale: 1.9; } 100% { opacity: 0; scale: 1.9; } }
@keyframes opr-seg-2 { 0% { stroke-dashoffset: 24; } 42.5% { stroke-dashoffset: -100; } 100% { stroke-dashoffset: -100; } }
.ovio-pr-n2 .ovio-pr-on { animation-name: opr-on-2; } .ovio-pr-n2 :is(.ovio-pr-detail, .ovio-pr-mname) { animation-name: opr-show-2; } .ovio-pr-n2 .ovio-pr-ripple { animation-name: opr-pop-2; } .ovio-pr-n2 :is(.ovio-pr-mpul, .ovio-pr-mpul-glow) { animation-name: opr-seg-2; }
@keyframes opr-on-3 { 0% { --on: 1; } 30% { --on: 1; } 41.67%, 100% { --on: 0; } }
@keyframes opr-show-3 { 0% { opacity: 0; translate: 0 8px; visibility: visible; } 4% { opacity: 1; translate: 0 0; } 31.33% { opacity: 1; translate: 0 0; } 33.33% { opacity: 0; translate: 0 -6px; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }
@keyframes opr-pop-3 { 0% { opacity: .9; scale: 1; } 24% { opacity: 0; scale: 1.9; } 100% { opacity: 0; scale: 1.9; } }
@keyframes opr-seg-3 { 0% { stroke-dashoffset: 24; } 28.33% { stroke-dashoffset: -100; } 100% { stroke-dashoffset: -100; } }
.ovio-pr-n3 .ovio-pr-on { animation-name: opr-on-3; } .ovio-pr-n3 :is(.ovio-pr-detail, .ovio-pr-mname) { animation-name: opr-show-3; } .ovio-pr-n3 .ovio-pr-ripple { animation-name: opr-pop-3; } .ovio-pr-n3 :is(.ovio-pr-mpul, .ovio-pr-mpul-glow) { animation-name: opr-seg-3; }
@keyframes opr-on-4 { 0% { --on: 1; } 22.5% { --on: 1; } 31.25%, 100% { --on: 0; } }
@keyframes opr-show-4 { 0% { opacity: 0; translate: 0 8px; visibility: visible; } 4% { opacity: 1; translate: 0 0; } 23% { opacity: 1; translate: 0 0; } 25% { opacity: 0; translate: 0 -6px; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }
@keyframes opr-pop-4 { 0% { opacity: .9; scale: 1; } 18% { opacity: 0; scale: 1.9; } 100% { opacity: 0; scale: 1.9; } }
@keyframes opr-seg-4 { 0% { stroke-dashoffset: 24; } 21.25% { stroke-dashoffset: -100; } 100% { stroke-dashoffset: -100; } }
.ovio-pr-n4 .ovio-pr-on { animation-name: opr-on-4; } .ovio-pr-n4 :is(.ovio-pr-detail, .ovio-pr-mname) { animation-name: opr-show-4; } .ovio-pr-n4 .ovio-pr-ripple { animation-name: opr-pop-4; } .ovio-pr-n4 :is(.ovio-pr-mpul, .ovio-pr-mpul-glow) { animation-name: opr-seg-4; }
@keyframes opr-on-5 { 0% { --on: 1; } 18% { --on: 1; } 25%, 100% { --on: 0; } }
@keyframes opr-show-5 { 0% { opacity: 0; translate: 0 8px; visibility: visible; } 3.2% { opacity: 1; translate: 0 0; } 18% { opacity: 1; translate: 0 0; } 20% { opacity: 0; translate: 0 -6px; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }
@keyframes opr-pop-5 { 0% { opacity: .9; scale: 1; } 14.4% { opacity: 0; scale: 1.9; } 100% { opacity: 0; scale: 1.9; } }
@keyframes opr-seg-5 { 0% { stroke-dashoffset: 24; } 17% { stroke-dashoffset: -100; } 100% { stroke-dashoffset: -100; } }
.ovio-pr-n5 .ovio-pr-on { animation-name: opr-on-5; } .ovio-pr-n5 :is(.ovio-pr-detail, .ovio-pr-mname) { animation-name: opr-show-5; } .ovio-pr-n5 .ovio-pr-ripple { animation-name: opr-pop-5; } .ovio-pr-n5 :is(.ovio-pr-mpul, .ovio-pr-mpul-glow) { animation-name: opr-seg-5; }
@keyframes opr-on-6 { 0% { --on: 1; } 15% { --on: 1; } 20.83%, 100% { --on: 0; } }
@keyframes opr-show-6 { 0% { opacity: 0; translate: 0 8px; visibility: visible; } 2.67% { opacity: 1; translate: 0 0; } 14.67% { opacity: 1; translate: 0 0; } 16.67% { opacity: 0; translate: 0 -6px; visibility: hidden; } 100% { opacity: 0; visibility: hidden; } }
@keyframes opr-pop-6 { 0% { opacity: .9; scale: 1; } 12% { opacity: 0; scale: 1.9; } 100% { opacity: 0; scale: 1.9; } }
@keyframes opr-seg-6 { 0% { stroke-dashoffset: 24; } 14.17% { stroke-dashoffset: -100; } 100% { stroke-dashoffset: -100; } }
.ovio-pr-n6 .ovio-pr-on { animation-name: opr-on-6; } .ovio-pr-n6 :is(.ovio-pr-detail, .ovio-pr-mname) { animation-name: opr-show-6; } .ovio-pr-n6 .ovio-pr-ripple { animation-name: opr-pop-6; } .ovio-pr-n6 :is(.ovio-pr-mpul, .ovio-pr-mpul-glow) { animation-name: opr-seg-6; }