/* OVIO Space: the Skills Animation (the OVIO Skills element, [ovio_skills]): glowing blips that appear in random places, pulse with a skill
   beside them, and fade away. Settings ride on the element: data-skills, data-max, data-every, data-hold, and --os-h / --os-glow */
.ovio-skills { --os-h: clamp(320px, 60vh, 640px); --os-glow: 255, 214, 170; position: relative; width: 100%; height: var(--os-h); pointer-events: none; overflow: visible; }
.ovio-skills .os-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the skills for screen readers */
.ovio-skills .os-blip { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0; transform: translate(-50%, -50%); will-change: opacity, transform; }
.ovio-skills .os-blip.os-flip { flex-direction: row-reverse; }
.ovio-skills .os-float { display: flex; align-items: center; animation: os-float 7s ease-in-out infinite alternate; }
.ovio-skills .os-flip .os-float { flex-direction: row-reverse; }
/* the blip: a bright core with a soft glow, and rings that pulse out from it */
.ovio-skills .os-dot { position: relative; flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.ovio-skills .os-core { width: 7px; height: 7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, .9), 0 0 16px 5px rgba(var(--os-glow), .75), 0 0 38px 12px rgba(var(--os-glow), .35);
  transform: scale(0); animation: os-pop .7s cubic-bezier(.2, 1.6, .4, 1) forwards, os-beat 1.8s ease-in-out .7s infinite; }
.ovio-skills .os-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(var(--os-glow), .75); box-shadow: 0 0 10px rgba(var(--os-glow), .35), inset 0 0 8px rgba(var(--os-glow), .2);
  opacity: 0; transform: scale(.2); animation: os-ring 2.4s cubic-bezier(.15, .6, .35, 1) .25s infinite; }
.ovio-skills .os-ring + .os-ring { animation-delay: 1.45s; }
/* a fine line out to the skill, drawn as it appears */
.ovio-skills .os-line { flex: none; width: 26px; height: 1px; margin: 0 2px; background: linear-gradient(90deg, rgba(var(--os-glow), .9), rgba(255, 255, 255, .25));
  transform: scaleX(0); transform-origin: left; animation: os-draw .5s cubic-bezier(.3, .7, .2, 1) .35s forwards; }
.ovio-skills .os-flip .os-line { transform-origin: right; background: linear-gradient(270deg, rgba(var(--os-glow), .9), rgba(255, 255, 255, .25)); }
/* the skill: in the site's own font, light and spaced like the menu */
.ovio-skills .os-label { flex: none; white-space: nowrap; font-size: clamp(12px, 1.05vw, 16px); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: rgba(255, 255, 255, .94);
  text-shadow: 0 0 14px rgba(var(--os-glow), .55), 0 1px 10px rgba(30, 14, 40, .35); padding: 6px 2px;
  clip-path: inset(0 100% 0 0); opacity: .2; animation: os-reveal .7s cubic-bezier(.3, .7, .2, 1) .6s forwards; }
.ovio-skills .os-flip .os-label { clip-path: inset(0 0 0 100%); }
.ovio-skills .os-blip.os-out { animation: os-out .9s ease-in forwards; }
@keyframes os-pop { to { transform: scale(1); } }
@keyframes os-beat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .85; } }
@keyframes os-ring { 0% { opacity: .9; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes os-draw { to { transform: scaleX(1); } }
@keyframes os-reveal { to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes os-out { to { opacity: 0; transform: translate(-50%, -50%) scale(.92); filter: blur(3px); } }
@keyframes os-float { from { transform: translate(-3px, 2px); } to { transform: translate(3px, -3px); } }
@media (prefers-reduced-motion: reduce) {
  .ovio-skills .os-core { animation: os-pop .01s forwards; }
  .ovio-skills .os-ring, .ovio-skills .os-float { animation: none; }
  .ovio-skills .os-ring { opacity: .45; transform: scale(1); }
  .ovio-skills .os-line, .ovio-skills .os-label { animation-duration: .01s; animation-delay: 0s; }
  .ovio-skills .os-blip.os-out { animation: os-fade 1s ease forwards; }
  @keyframes os-fade { to { opacity: 0; } }
}
/* v2.9.7: the stronger look (the default; "Plain" keeps the light one above): each skill in a glass pill, a bigger, brighter blip with a
   wider pulse, and a bolder line. The pill wipes in as before. Only phones and touch screens go without the blur behind it */
.ovio-skills:not(.os-plain) .os-dot { width: 46px; height: 46px; }
.ovio-skills:not(.os-plain) .os-core { width: 10px; height: 10px;
  box-shadow: 0 0 8px 3px rgba(255, 255, 255, .95), 0 0 22px 8px rgba(var(--os-glow), .85), 0 0 54px 18px rgba(var(--os-glow), .42); }
.ovio-skills:not(.os-plain) .os-ring { border-width: 1.5px; border-color: rgba(var(--os-glow), .9); box-shadow: 0 0 14px rgba(var(--os-glow), .5), inset 0 0 10px rgba(var(--os-glow), .3); animation-name: os-ring2; }
.ovio-skills:not(.os-plain) .os-line { width: 30px; height: 1.5px; background: linear-gradient(90deg, rgba(var(--os-glow), 1), rgba(255, 255, 255, .55)); box-shadow: 0 0 6px rgba(var(--os-glow), .6); }
.ovio-skills:not(.os-plain) .os-flip .os-line { background: linear-gradient(270deg, rgba(var(--os-glow), 1), rgba(255, 255, 255, .55)); }
.ovio-skills:not(.os-plain) .os-label { font-size: clamp(12.5px, 1.05vw, 15.5px); font-weight: 500; letter-spacing: .13em; color: #fff; padding: 10px 17px 9px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06)), rgba(30, 16, 46, .34);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(var(--os-glow), .22), 0 8px 26px rgba(20, 10, 36, .28), 0 0 22px rgba(var(--os-glow), .26);
  text-shadow: 0 1px 8px rgba(20, 10, 36, .45); }
@media (hover: hover) and (pointer: fine) {
  .ovio-skills:not(.os-plain) .os-label { -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3); }
}
@keyframes os-ring2 { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.3); } }
@media (prefers-reduced-motion: reduce) { .ovio-skills:not(.os-plain) .os-ring { animation: none; } }
/* v2.9.10: the pill's wipe is clipped to its round ends (a plain box clip let the blur behind it show square corners) */
.ovio-skills:not(.os-plain) .os-label { clip-path: inset(0 100% 0 0 round 999px); animation-name: os-reveal2; }
.ovio-skills:not(.os-plain) .os-flip .os-label { clip-path: inset(0 0 0 100% round 999px); }
@keyframes os-reveal2 { to { clip-path: inset(0 0 0 0 round 999px); opacity: 1; } }