/*
 * Moroccan Genie — styles & animations.
 * Everything is scoped under .genie (safe for Shadow DOM injection).
 * State attributes on the wrapper:
 *   data-expression, data-pose, data-effects (space separated), data-motion,
 *   data-talking="1" + --mouth-open (0..1), --anger (0..1), data-reduced-motion="1"
 */
.genie {
  position: relative;
  display: inline-block;
  width: var(--genie-width, 160px);
  aspect-ratio: 240 / 300;
  line-height: 0;
  vertical-align: bottom;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.genie .gn-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------------------------------------------------------------- layer switching */
.genie .gn-x,
.genie .gn-p,
.genie .gn-e,
.genie .gn-talk,
.genie .gn-tail-fl,
.genie .gn-tail-fr { display: none; }

/* expressions (unknown / missing value falls back to "normal") */
.genie:not([data-expression="angry"]):not([data-expression="very-angry"]):not([data-expression="annoyed"]):not([data-expression="impatient"]):not([data-expression="happy"]):not([data-expression="laughing"]):not([data-expression="excited"]):not([data-expression="confused"]):not([data-expression="thinking"]):not([data-expression="shocked"]):not([data-expression="suspicious"]):not([data-expression="serious"]):not([data-expression="tired"]):not([data-expression="wink"]):not([data-expression="sleep"]) .gn-x-normal,
.genie[data-expression="angry"] .gn-x-angry,
.genie[data-expression="very-angry"] .gn-x-very-angry,
.genie[data-expression="annoyed"] .gn-x-annoyed,
.genie[data-expression="impatient"] .gn-x-impatient,
.genie[data-expression="happy"] .gn-x-happy,
.genie[data-expression="laughing"] .gn-x-laughing,
.genie[data-expression="excited"] .gn-x-excited,
.genie[data-expression="confused"] .gn-x-confused,
.genie[data-expression="thinking"] .gn-x-thinking,
.genie[data-expression="shocked"] .gn-x-shocked,
.genie[data-expression="suspicious"] .gn-x-suspicious,
.genie[data-expression="serious"] .gn-x-serious,
.genie[data-expression="tired"] .gn-x-tired,
.genie[data-expression="wink"] .gn-x-wink,
.genie[data-expression="sleep"] .gn-x-sleep { display: inline; }

/* poses (unknown / missing value falls back to "idle") */
.genie:not([data-pose="crossed-arms"]):not([data-pose="point-left"]):not([data-pose="point-right"]):not([data-pose="point-up"]):not([data-pose="point-down"]):not([data-pose="point-forward"]):not([data-pose="explain"]):not([data-pose="click"]):not([data-pose="show-menu"]):not([data-pose="facepalm"]):not([data-pose="celebrate"]):not([data-pose="chin"]):not([data-pose="magnify"]):not([data-pose="stop-hand"]):not([data-pose="shrug"]):not([data-pose="head-scratch"]):not([data-pose="tea"]):not([data-pose="listen"]):not([data-pose="fly-left"]):not([data-pose="fly-right"]):not([data-pose="hold"]):not([data-pose="use"]) .gn-p-idle,
.genie[data-pose="hold"] .gn-root:not(.gn-has-item) .gn-p-idle,
.genie[data-pose="use"] .gn-root:not(.gn-has-item) .gn-p-idle,
.genie[data-pose="crossed-arms"] .gn-p-crossed-arms,
.genie[data-pose="point-left"] .gn-p-point-left,
.genie[data-pose="point-right"] .gn-p-point-right,
.genie[data-pose="point-up"] .gn-p-point-up,
.genie[data-pose="point-down"] .gn-p-point-down,
.genie[data-pose="point-forward"] .gn-p-point-forward,
.genie[data-pose="explain"] .gn-p-explain,
.genie[data-pose="click"] .gn-p-click,
.genie[data-pose="show-menu"] .gn-p-show-menu,
.genie[data-pose="facepalm"] .gn-p-facepalm,
.genie[data-pose="celebrate"] .gn-p-celebrate,
.genie[data-pose="chin"] .gn-p-chin,
.genie[data-pose="magnify"] .gn-p-magnify,
.genie[data-pose="stop-hand"] .gn-p-stop-hand,
.genie[data-pose="shrug"] .gn-p-shrug,
.genie[data-pose="head-scratch"] .gn-p-head-scratch,
.genie[data-pose="tea"] .gn-p-tea,
.genie[data-pose="listen"] .gn-p-listen,
.genie[data-pose="fly-left"] .gn-p-fly-left,
.genie[data-pose="fly-right"] .gn-p-fly-right,
.genie[data-pose="hold"] .gn-p-hold,
.genie[data-pose="use"] .gn-p-use { display: inline; }

/* smoke tail variants */
.genie[data-pose="fly-left"] .gn-tail-std,
.genie[data-pose="fly-right"] .gn-tail-std { display: none; }
.genie[data-pose="fly-left"] .gn-tail-fl,
.genie[data-pose="fly-right"] .gn-tail-fr { display: inline; }

/* effects (any combination) */
.genie[data-effects~="steam"] .gn-e-steam,
.genie[data-effects~="anger-vein"] .gn-e-anger-vein,
.genie[data-effects~="question-marks"] .gn-e-question-marks,
.genie[data-effects~="lightbulb"] .gn-e-lightbulb,
.genie[data-effects~="sparkles"] .gn-e-sparkles,
.genie[data-effects~="zzz"] .gn-e-zzz,
.genie[data-effects~="exclamation"] .gn-e-exclamation,
.genie[data-effects~="heart"] .gn-e-heart,
.genie[data-effects~="sweat"] .gn-e-sweat,
.genie[data-effects~="magic-ring"] .gn-e-magic-ring { display: inline; }

/* talking: lip-sync mouth replaces the expression mouth */
.genie[data-talking="1"] .gn-m { display: none; }
.genie[data-talking="1"] .gn-talk { display: inline; }
.genie .gn-talk-s {
  transform-box: fill-box;
  transform-origin: 50% 8%;
  transform: scale(calc(0.84 + var(--mouth-open, 0) * 0.16), calc(0.1 + var(--mouth-open, 0) * 0.9));
  transition: transform 70ms linear;
}

/* anger: progressive red face */
.genie .gn-tint {
  mix-blend-mode: multiply;
  opacity: calc(var(--anger, 0) * 0.62);
  transition: opacity .25s ease;
}
.genie[data-expression="very-angry"] .gn-tint { opacity: max(0.36, calc(var(--anger, 0) * 0.62)); }

/* ---------------------------------------------------------------- body transforms per pose */
.genie .gn-body {
  transform-origin: 120px 215px;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.genie[data-pose="fly-left"] .gn-body { transform: translateX(-4px) rotate(-13deg); }
.genie[data-pose="fly-right"] .gn-body { transform: translateX(4px) rotate(13deg); }
.genie[data-pose="celebrate"] .gn-body { transform: translateY(-3px); }

.genie .gn-head {
  transform-origin: 120px 150px;
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.genie[data-pose="facepalm"] .gn-head { transform: rotate(5deg) translateY(3px); }
.genie[data-pose="shrug"] .gn-head { transform: translateY(5px) rotate(-4deg); }
.genie[data-pose="listen"] .gn-head { transform: rotate(7deg); }
.genie[data-pose="chin"] .gn-head { transform: rotate(-3deg); }
.genie[data-pose="head-scratch"] .gn-head { transform: rotate(-5deg); }
.genie[data-pose="magnify"] .gn-head { transform: translateY(1px); }
.genie[data-pose="fly-left"] .gn-head,
.genie[data-pose="fly-right"] .gn-head { transform: translateY(1px); }

.genie .gn-head-x {
  transform-origin: 120px 150px;
  transition: transform .35s ease;
}
.genie[data-expression="confused"] .gn-head-x { transform: rotate(-5deg); }
.genie[data-expression="thinking"] .gn-head-x { transform: rotate(3deg); }
.genie[data-expression="tired"] .gn-head-x { transform: translateY(2px) rotate(2deg); }
.genie[data-expression="sleep"] .gn-head-x { transform: translateY(3px) rotate(6deg); }
.genie[data-expression="suspicious"] .gn-head-x { transform: rotate(-3deg); }
.genie[data-expression="laughing"] .gn-head-x { transform: rotate(-3deg) translateY(-1px); }

/* the person figure (a standing professional): he turns around his own neck and stands on his feet */
.genie .gn-person .gn-head,
.genie .gn-person .gn-head-x { transform-origin: 120px 64px; }
.genie .gn-person .gn-body { transform-origin: 120px 296px; }
.genie .gn-person .gn-sway { transform-origin: 120px 150px; }
.genie[data-pose="fly-left"] .gn-person .gn-body { transform: translateX(-3px) rotate(-5deg); }
.genie[data-pose="fly-right"] .gn-person .gn-body { transform: translateX(3px) rotate(5deg); }
.genie[data-pose="celebrate"] .gn-person .gn-body { transform: none; }
.genie[data-pose="shrug"] .gn-person .gn-head { transform: translateY(2px) rotate(-4deg); }
.genie[data-pose="facepalm"] .gn-person .gn-head { transform: rotate(4deg) translateY(1px); }
.genie[data-pose="magnify"] .gn-person .gn-head { transform: rotate(4deg) translateY(1px); }

/* ---------------------------------------------------------------- continuous motion */
.genie .gn-root {
  transform-origin: 120px 290px;
  animation: gn-float 3.4s ease-in-out infinite;
}
.genie[data-motion="shake"] .gn-root { animation: gn-shake .42s linear infinite; }
.genie[data-motion="bounce"] .gn-root { animation: gn-bounce .8s ease-in-out infinite; }
.genie[data-motion="none"] .gn-root { animation: none; }
.genie[data-motion="calm"] .gn-root { animation: gn-calm 6s ease-in-out infinite; }

@keyframes gn-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes gn-calm {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes gn-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-2.4px, .6px) rotate(-1.2deg); }
  40% { transform: translate(2.4px, -.6px) rotate(1.2deg); }
  60% { transform: translate(-1.8px, 0) rotate(-.7deg); }
  80% { transform: translate(1.8px, .6px) rotate(.7deg); }
}
@keyframes gn-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(0) scale(1.04, .95); }
  50% { transform: translateY(-16px) scale(.98, 1.03); }
  78% { transform: translateY(0) scale(1.03, .97); }
}

/* blink every ~5s (two blinks per 10.4s cycle) */
.genie .gn-blink {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gn-blink 10.4s infinite;
}
@keyframes gn-blink {
  0%, 44%, 46%, 91.2%, 93.2%, 100% { transform: scaleY(1); }
  45%, 92.2% { transform: scaleY(.08); }
}

/* smoke tail */
.genie .gn-sway {
  transform-origin: 120px 212px;
  animation: gn-sway 4.2s ease-in-out infinite;
}
.genie .gn-sway-fly { animation: gn-sway-fly 1.6s ease-in-out infinite; }
@keyframes gn-sway {
  0%, 100% { transform: rotate(-3deg) skewX(3deg); }
  50% { transform: rotate(3deg) skewX(-4deg); }
}
@keyframes gn-sway-fly {
  0%, 100% { transform: skewY(0) scaleX(1); }
  50% { transform: skewY(-3deg) scaleX(1.04); }
}
.genie .gn-flow {
  stroke-dasharray: 16 10;
  animation: gn-flow 1.9s linear infinite;
}
.genie .gn-flow-2 { animation-duration: 2.6s; }
.genie .gn-flow-3 { animation-duration: 2.2s; animation-direction: reverse; }
@keyframes gn-flow { to { stroke-dashoffset: -52; } }
.genie .gn-mote { animation: gn-mote 2.8s ease-in-out infinite; }
@keyframes gn-mote {
  0%, 100% { opacity: .9; transform: translateY(0); }
  50% { opacity: .2; transform: translateY(-5px); }
}
.genie .gn-hem-w { animation: gn-hem 2.4s ease-in-out infinite; transform-origin: 120px 236px; }
@keyframes gn-hem {
  0%, 100% { transform: scaleY(1) translateX(0); }
  50% { transform: scaleY(1.08) translateX(2px); }
}

/* ---------------------------------------------------------------- pose micro-animations */
.genie .gn-jab-l { animation: gn-jab-l 1.6s ease-in-out infinite; }
.genie .gn-jab-u { animation: gn-jab-u 1.6s ease-in-out infinite; }
.genie .gn-jab-d { animation: gn-jab-d 1.6s ease-in-out infinite; }
.genie .gn-jab-f { animation: gn-jab-f 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 30% 60%; }
@keyframes gn-jab-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes gn-jab-u { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes gn-jab-d { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes gn-jab-f { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.genie .gn-tap { animation: gn-tap 1s ease-in-out infinite; }
@keyframes gn-tap {
  0%, 100% { transform: translate(0, 0); }
  40% { transform: translate(2px, 4px); }
  55% { transform: translate(0, 0); }
}
.genie .gn-ripple {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gn-ripple 1s ease-out infinite;
}
.genie .gn-ripple-2 { animation-delay: .35s; }
@keyframes gn-ripple {
  0%, 35% { transform: scale(.3); opacity: 0; }
  45% { opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}
.genie .gn-wave { animation: gn-wave 2.2s ease-in-out infinite; }
@keyframes gn-wave { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -2px); } }
.genie .gn-pump-a { animation: gn-pump .7s ease-in-out infinite; }
.genie .gn-pump-b { animation: gn-pump .7s ease-in-out infinite .35s; }
@keyframes gn-pump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.genie .gn-scratch { animation: gn-scratch .5s ease-in-out infinite; }
@keyframes gn-scratch {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-1.5px, 1.5px); }
}
.genie .gn-tea-steam { animation: gn-rise 2.4s ease-in-out infinite; }
@keyframes gn-rise {
  0% { opacity: 0; transform: translateY(3px); }
  40% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-4px); }
}

/* ---------------------------------------------------------------- held items ("hold" and "use") */
.genie[data-pose="hold"] .gn-head { transform: rotate(-3deg); }
.genie[data-pose="use"] .gn-head { transform: rotate(3deg); }
.genie .gn-it-glow { opacity: 0; animation: gn-it-glow 2.4s ease-in-out infinite; }
@keyframes gn-it-glow { 0%, 100% { opacity: 0; } 50% { opacity: .35; } }
.genie .gn-it-flash {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gn-it-flash 2.2s ease-out infinite;
}
@keyframes gn-it-flash {
  0%, 60% { opacity: 0; transform: scale(.4); }
  64% { opacity: 1; transform: scale(1.15); }
  80%, 100% { opacity: 0; transform: scale(1.5); }
}
.genie .gn-it-cone {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gn-it-bass .46s ease-in-out infinite;
}
@keyframes gn-it-bass { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.13); } }
.genie .gn-it-note { animation: gn-it-note 2.1s ease-out infinite; }
.genie .gn-it-n2 { animation-delay: .7s; }
.genie .gn-it-n3 { animation-delay: 1.4s; }
@keyframes gn-it-note {
  0% { opacity: 0; transform: translate(0, 6px) rotate(-10deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(4px, -14px) rotate(12deg); }
}
.genie .gn-it-bob { animation: gn-it-bob .46s ease-in-out infinite; }
@keyframes gn-it-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2.5px); } }
.genie .gn-it-w { animation: gn-it-sound 1.1s ease-out infinite; }
.genie .gn-it-w2 { animation-delay: .3s; }
@keyframes gn-it-sound { 0% { opacity: 0; transform: translateX(-2px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(4px); } }
.genie .gn-it-flourish { animation: gn-it-flourish 1.8s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes gn-it-flourish {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-34deg); }
  52% { transform: rotate(30deg); }
  74% { transform: rotate(0); }
}
.genie .gn-it-swoosh { opacity: 0; animation: gn-it-swoosh 1.8s ease-out infinite; }
@keyframes gn-it-swoosh { 0%, 34% { opacity: 0; } 44% { opacity: .9; } 62%, 100% { opacity: 0; } }
.genie .gn-it-bubble { animation: gn-it-bubble 1.4s ease-in-out infinite; }
@keyframes gn-it-bubble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.genie .gn-it-recoil { animation: gn-it-recoil 1s ease-out infinite; }
@keyframes gn-it-recoil { 0%, 100% { transform: translate(0, 0); } 8% { transform: translate(2px, 3px); } 30% { transform: translate(0, 0); } }
.genie .gn-it-spray {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gn-it-spray 1s ease-out infinite;
}
.genie .gn-it-s1 { --gn-dx: -9px; --gn-dy: -10px; }
.genie .gn-it-s2 { --gn-dx: 10px; --gn-dy: -6px; animation-delay: .25s; }
.genie .gn-it-s3 { --gn-dx: 1px; --gn-dy: -14px; animation-delay: .5s; }
.genie .gn-it-s4 { --gn-dx: -12px; --gn-dy: 3px; animation-delay: .75s; }
@keyframes gn-it-spray {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--gn-dx, 0), var(--gn-dy, 0)) scale(2.6); }
}
.genie .gn-it-rub { animation: gn-it-rub .42s ease-in-out infinite; }
@keyframes gn-it-rub { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(5px); } }
.genie .gn-it-smoke {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: gn-it-smoke 1.8s ease-out infinite;
}
@keyframes gn-it-smoke {
  0% { opacity: 0; transform: scale(.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px) scale(1.15); }
}
.genie .gn-it-page {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: gn-it-page 2.6s ease-in-out infinite;
}
@keyframes gn-it-page {
  0%, 30% { transform: scaleX(1); opacity: 1; }
  58%, 80% { transform: scaleX(-1); opacity: 1; }
  92%, 100% { transform: scaleX(-1); opacity: 0; }
}
.genie .gn-it-wave { animation: gn-it-wand 1s ease-in-out infinite; }
@keyframes gn-it-wand { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(14deg); } }
.genie .gn-it-star {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gn-glow 1.2s ease-in-out infinite;
}

/* ---------------------------------------------------------------- effect animations */
.genie .gn-puff {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gn-puff 1.3s ease-out infinite;
}
.genie .gn-puff-2 { animation-delay: .43s; }
.genie .gn-puff-3 { animation-delay: .86s; }
@keyframes gn-puff {
  0% { transform: scale(.55) translate(6px, 4px); opacity: 0; }
  20% { opacity: 1; }
  70% { opacity: .95; }
  100% { transform: scale(1.18) translate(-4px, -3px); opacity: 0; }
}
.genie .gn-vein {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gn-pop .55s ease-in-out infinite alternate;
}
@keyframes gn-pop { from { transform: scale(.85); } to { transform: scale(1.12); } }
.genie .gn-drop { animation: gn-drop 1.8s ease-in infinite; }
.genie .gn-drop-2 { animation-delay: .9s; }
@keyframes gn-drop {
  0% { transform: translateY(-3px); opacity: 0; }
  20% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(9px); opacity: 0; }
}
.genie .gn-q {
  transform-box: fill-box;
  transform-origin: 50% 90%;
  animation: gn-wobble 1.4s ease-in-out infinite;
}
.genie .gn-q-2 { animation-delay: .3s; }
.genie .gn-q-3 { animation-delay: .6s; }
@keyframes gn-wobble {
  0%, 100% { transform: rotate(-9deg) translateY(0); }
  50% { transform: rotate(9deg) translateY(-2px); }
}
.genie .gn-bulb {
  transform-box: fill-box;
  transform-origin: 50% 60%;
  animation: gn-glow 1.6s ease-in-out infinite;
}
@keyframes gn-glow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: .88; }
}
.genie .gn-spark {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gn-twinkle 1.8s ease-in-out infinite;
}
.genie .gn-s2 { animation-delay: .35s; }
.genie .gn-s3 { animation-delay: .7s; }
.genie .gn-s4 { animation-delay: 1.05s; }
.genie .gn-s5 { animation-delay: 1.4s; }
.genie .gn-s6 { animation-delay: .5s; }
@keyframes gn-twinkle {
  0%, 100% { transform: scale(.35) rotate(0); opacity: .2; }
  50% { transform: scale(1.1) rotate(45deg); opacity: 1; }
}
.genie .gn-z { animation: gn-z 3s ease-in-out infinite; }
.genie .gn-z-2 { animation-delay: 1s; }
.genie .gn-z-3 { animation-delay: 2s; }
@keyframes gn-z {
  0% { transform: translate(-4px, 6px); opacity: 0; }
  25%, 70% { opacity: 1; }
  100% { transform: translate(4px, -6px); opacity: 0; }
}
.genie .gn-excl {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: gn-excl .9s cubic-bezier(.3, 1.6, .5, 1) infinite alternate;
}
@keyframes gn-excl { from { transform: scale(.88) rotate(-4deg); } to { transform: scale(1.1) rotate(3deg); } }
.genie .gn-heart {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: gn-beat 1s ease-in-out infinite;
}
@keyframes gn-beat {
  0%, 100% { transform: scale(1) translateY(0); }
  15% { transform: scale(1.2) translateY(-1px); }
  30% { transform: scale(.95) translateY(-2px); }
  45% { transform: scale(1.12) translateY(-2px); }
}
.genie .gn-ring { animation: gn-ring-move 2.4s ease-in-out infinite; }
@keyframes gn-ring-move {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.genie .gn-ring-dash {
  stroke-dasharray: 22 30;
  animation: gn-flow 1.2s linear infinite;
}
.genie .gn-ring-2 .gn-ring-dash { animation-direction: reverse; }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .genie *,
  .genie *::before,
  .genie *::after {
    animation: none !important;
    transition: none !important;
  }
}
.genie[data-reduced-motion="1"] *,
.genie[data-reduced-motion="1"] *::before,
.genie[data-reduced-motion="1"] *::after {
  animation: none !important;
  transition: none !important;
}