/* =========================================================================
   Sare3.Me  -  "Modern glass" overlay for the boxes
   -------------------------------------------------------------------------
   REVERSIBLE BY DESIGN
   * Every selector in this file starts with  html.s3-modern
     -> remove that class (or the <link> to this file) and the site renders
        exactly like the original Framer design again.
   * The class is added by ./s3-modern-toggle.js. Visiting the site with
     ?classic in the URL shows the original look (see that file / the
     CARD-STYLES-BACKUP.md in the site root).
   * The two at-rules right below (@property / @keyframes) cannot carry a
     class; they are inert definitions that only take effect when used by
     the html.s3-modern rules.

   WHAT IS TOUCHED
   Paint-level properties only: background, border colour, border radius,
   box-shadow, backdrop-filter, opacity of decorative layers, pseudo-element
   decorations, and a small `translate` lift on hover. Fonts, font sizes,
   text colours and Framer layout (width / height / position / display) are
   NOT changed.

   WHY SOME `!important`
   Framer writes several of these values as inline styles (and animates
   some of them on hover with JS). Inline styles can only be overridden
   from a stylesheet with !important. They are used only where an inline
   value exists. The hover lift uses the CSS `translate` property (not
   `transform`) so it never fights Framer's own transform animations
   (scroll-appear, hover scale), and no transition here targets
   transform/opacity of Framer-animated nodes.

   RESTYLED BOXES
     Nav bar ............ .framer-oybdaq
     Services cards ..... .framer-1baq6r5 [data-framer-name="card"]
                          (generic: also covers the new 4th "AI Visualizer"
                          card, whatever its framer-s3ai-* classes are)
     Project cards ...... .framer-5WPmK.framer-1vg5y79 (+ tag pills, image)
     Process steps ...... .framer-q84Mh.framer-1x13o4  ("How We Together")
     Resource pack ...... .framer-uC1J1.framer-72aqkv  (+ Download button)
     Contact panel ...... .framer-vpreae (#contact-me), email pill
                          .framer-ouf5fr, avatar .framer-xew6p8,
                          social icons .framer-1qcz2u2 > a
     Contact form ....... .framer-ua61l3 inputs / radios, submit
                          .framer-W0WdR.framer-v-1upvtym
   ========================================================================= */

@property --s3-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes s3-orbit {
  to { --s3-angle: 360deg; }
}

/* -------------------------------------------------------------------------
   0. Design tokens (scoped to the class, so they vanish with it)
   ------------------------------------------------------------------------- */
html.s3-modern {
  --s3-g: 0, 255, 2;                         /* brand token #00ff02 (RGB) */
  --s3-glass: rgba(0, 0, 0, .42);
  --s3-line: rgba(var(--s3-g), .18);         /* resting hairline          */
  --s3-line-hi: rgba(var(--s3-g), .55);      /* hover / focus hairline    */
  --s3-blur: blur(16px) saturate(140%);
  --s3-blur-nav: blur(18px) saturate(140%);
  --s3-r-card: 22px;
  --s3-r-lg: 28px;
  --s3-r-sm: 14px;
  --s3-r-field: 12px;
  --s3-ease: cubic-bezier(.22, 1, .36, 1);
  --s3-dur: .45s;
  --s3-sweep: 1.4s;
  --s3-glow: 0 0 0 1px rgba(var(--s3-g), .22), 0 16px 42px -20px rgba(var(--s3-g), .55);
  --s3-sheen: linear-gradient(115deg, rgba(var(--s3-g), 0) 0%, rgba(var(--s3-g), 0) 42%, rgba(var(--s3-g), .10) 50%, rgba(var(--s3-g), 0) 58%, rgba(var(--s3-g), 0) 100%);
  --s3-rim: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0));
  --s3-rim-g: linear-gradient(90deg, rgba(var(--s3-g), 0), rgba(var(--s3-g), .55) 50%, rgba(var(--s3-g), 0));
  /* transition list for the box itself (never transform / opacity) */
  --s3-t: background-color var(--s3-dur) var(--s3-ease),
          box-shadow var(--s3-dur) var(--s3-ease),
          translate var(--s3-dur) var(--s3-ease);
}

/* -------------------------------------------------------------------------
   1. Shared "orbit ring" - a 1px conic-gradient border that fades in and
      slowly travels around the box on hover (futuristic accent).
      Services + Projects use ::before, Steps use ::after.
   ------------------------------------------------------------------------- */
html.s3-modern .framer-1baq6r5 [data-framer-name="card"]::before,
html.s3-modern .framer-5WPmK.framer-1vg5y79::before,
html.s3-modern .framer-q84Mh.framer-1x13o4::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--s3-angle, 0deg),
    rgba(var(--s3-g), 0) 0deg,
    rgba(var(--s3-g), .9) 50deg,
    rgba(var(--s3-g), 0) 110deg,
    rgba(var(--s3-g), 0) 180deg,
    rgba(var(--s3-g), .45) 235deg,
    rgba(var(--s3-g), 0) 290deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  animation: s3-orbit 6s linear infinite paused;
  transition: opacity var(--s3-dur) var(--s3-ease);
}

/* -------------------------------------------------------------------------
   2. NAV BAR  (fixed glass bar at the top)
      original: bg #00ff001a, blur(5px), 1px #00ff02 border, radius 12px
   ------------------------------------------------------------------------- */
html.s3-modern .framer-oybdaq {
  --border-color: rgba(var(--s3-g), .22);
  background-color: rgba(0, 0, 0, .42);
  background-image: linear-gradient(180deg, rgba(var(--s3-g), .08) 0%, rgba(var(--s3-g), .03) 100%);
  -webkit-backdrop-filter: var(--s3-blur-nav);
  backdrop-filter: var(--s3-blur-nav);
  border-radius: 20px;
  box-shadow: 0 14px 40px -24px rgba(0, 0, 0, .95);
}

html.s3-modern .framer-oybdaq::before {          /* light rim on the top edge */
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  pointer-events: none;
  background: var(--s3-rim-g);
  opacity: .8;
}

html.s3-modern .framer-oybdaq::after {           /* Framer's border layer */
  transition: border-color var(--s3-dur) var(--s3-ease);
}

/* -------------------------------------------------------------------------
   3. SERVICES CARDS  (3D Visuals / Video editing / Graphic Design /
      AI Visualizer). Generic selector -> also styles the 4th card.
      original: radius 12px, transparent card with two green gradient
      layers (#00ff004a -> transparent); hover = JS bg rgba(0,255,0,.45)
      + scale 1.06.
   ------------------------------------------------------------------------- */
html.s3-modern .framer-1baq6r5 [data-framer-name="card"] {
  isolation: isolate;                 /* keep the z-index:-1 BG layers inside */
  border-radius: var(--s3-r-card);
  background-color: rgba(0, 0, 0, .32) !important;   /* inline on hover (JS) */
  background-image: var(--s3-sheen);
  background-size: 250% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: var(--s3-blur);
  backdrop-filter: var(--s3-blur);
  transition: var(--s3-t), background-position 0s;
}

/* the green gradient layers: same gradients, toned down by opacity only */
html.s3-modern .framer-1baq6r5 [data-framer-name="card"] > div:empty:not([data-framer-component-type]) {
  border-radius: inherit;
  opacity: .6;
  transition: opacity var(--s3-dur) var(--s3-ease);
}

html.s3-modern .framer-1baq6r5 [data-framer-name="card"]::after {   /* hairline + top rim */
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid var(--s3-line);
  border-radius: inherit;
  pointer-events: none;
  background: var(--s3-rim) top center / 70% 1px no-repeat;
  transition: border-color var(--s3-dur) var(--s3-ease);
}

/* -------------------------------------------------------------------------
   4. PROJECT CARDS  (6 cards in #projects)
      original: inline bg rgba(4,255,0,.06), blur(5px), 1px green border,
      radius 24px; hover = JS bg rgba(4,255,0,.54).
      Backdrop blur is left at Framer's 5px (the section behind is plain
      black, a stronger blur would only cost performance).
   ------------------------------------------------------------------------- */
html.s3-modern .framer-5WPmK.framer-1vg5y79 {
  --border-color: var(--s3-line) !important;
  background-color: var(--s3-glass) !important;
  background-image:
    var(--s3-sheen),
    linear-gradient(180deg, rgba(4, 255, 0, .07) 0%, rgba(4, 255, 0, .015) 55%, rgba(4, 255, 0, 0) 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: 130% 0, 0 0;
  background-repeat: no-repeat;
  border-radius: var(--s3-r-card) !important;
  transition: var(--s3-t), background-position 0s;
}

html.s3-modern .framer-5WPmK.framer-1vg5y79::after {        /* Framer's border */
  transition: border-color var(--s3-dur) var(--s3-ease);
}

/* tag pills -> slim chips */
html.s3-modern .framer-5WPmK .framer-1fzbpdm > [data-border="true"] {
  --border-color: rgba(var(--s3-g), .32) !important;
  background-color: rgba(var(--s3-g), .04);
  border-radius: 999px !important;
  transition: background-color var(--s3-dur) var(--s3-ease);
}

html.s3-modern .framer-5WPmK .framer-1fzbpdm > [data-border="true"]::after {
  transition: border-color var(--s3-dur) var(--s3-ease);
}

/* image frame: clip so the image can do a tiny zoom on hover */
html.s3-modern .framer-5WPmK .framer-fgs1sd {
  overflow: hidden;
}

html.s3-modern .framer-5WPmK .framer-fgs1sd img {
  transition: scale .9s var(--s3-ease);
}

/* -------------------------------------------------------------------------
   5. PROCESS STEPS  ("How We Together")
      original: inline gradient rgb(0,77,0) -> #000, radius 12px;
      hover = JS gradient rgb(0,222,0) -> #000.
      Same gradients, toned down with alpha; the hover gradient lives in a
      ::before layer so it can fade smoothly.
   ------------------------------------------------------------------------- */
html.s3-modern .framer-m8r5ug {
  overflow: visible;                  /* lets the hover glow breathe; content already fits */
}

html.s3-modern .framer-q84Mh.framer-1x13o4 {
  isolation: isolate;
  background-color: rgba(0, 0, 0, .4) !important;
  background-image:
    var(--s3-sheen),
    linear-gradient(180deg, rgba(0, 77, 0, .7) 0%, rgba(0, 77, 0, 0) 100%) !important;
  background-size: 250% 100%, 100% 100% !important;
  background-position: 130% 0, 0 0 !important;
  background-repeat: no-repeat !important;
  border-radius: var(--s3-r-card) !important;
  box-shadow: inset 0 0 0 1px var(--s3-line);
  transition: var(--s3-t), background-position 0s;
}

html.s3-modern .framer-q84Mh.framer-1x13o4::before {   /* toned-down hover gradient */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 85% at 50% 0%, rgba(0, 222, 0, .28) 0%, rgba(0, 222, 0, 0) 72%);
  opacity: 0;
  transition: opacity var(--s3-dur) var(--s3-ease);
}

/* -------------------------------------------------------------------------
   6. RESOURCE PACK BOX  ("Free Design Resource Pack")
      original: black, 1px rgb(4,255,0) border, radius 32px;
      hover = JS green glow box-shadow (kept as is).
   ------------------------------------------------------------------------- */
html.s3-modern .framer-uC1J1.framer-72aqkv {
  --border-color: rgba(var(--s3-g), .22) !important;
  border-radius: var(--s3-r-lg) !important;
}

html.s3-modern .framer-uC1J1.framer-72aqkv::after {    /* Framer's border + top rim */
  background: var(--s3-rim-g) top center / 56% 1px no-repeat;
  transition: border-color var(--s3-dur) var(--s3-ease);
}

html.s3-modern .framer-uC1J1 .framer-13hetjq {          /* Download Now button */
  border-radius: 10px !important;
  transition: box-shadow var(--s3-dur) var(--s3-ease), translate var(--s3-dur) var(--s3-ease);
}

/* -------------------------------------------------------------------------
   7. CONTACT PANEL  (#contact-me)
      original: gradient #04ff004d -> #0000004d, 2px black border,
      top radius 24px. Kept; only a green hairline + top rim added.
   ------------------------------------------------------------------------- */
html.s3-modern .framer-vpreae {
  --border-color: rgba(var(--s3-g), .14);
  --border-top-width: 1px;
  --border-right-width: 1px;
  --border-left-width: 1px;
  --border-bottom-width: 0px;
}

html.s3-modern .framer-vpreae::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  pointer-events: none;
  background: var(--s3-rim-g);
}

/* email pill */
html.s3-modern .framer-ouf5fr {
  --border-color: rgba(var(--s3-g), .35);
  background-color: rgba(1, 102, 0, .18);
  border-radius: var(--s3-r-sm);
  transition: background-color var(--s3-dur) var(--s3-ease), box-shadow var(--s3-dur) var(--s3-ease);
}

html.s3-modern .framer-ouf5fr::after {
  transition: border-color var(--s3-dur) var(--s3-ease);
}

/* avatar: thin brand ring */
html.s3-modern .framer-xew6p8 {
  box-shadow:
    0 0 0 1px rgba(var(--s3-g), .35),
    0 0 0 6px rgba(var(--s3-g), .05),
    0 0 30px -6px rgba(var(--s3-g), .45);
}

/* social icons */
html.s3-modern .framer-1qcz2u2 {
  overflow: visible;                  /* content already fits; lets the glow show */
}

html.s3-modern .framer-1qcz2u2 > a {
  transition: filter var(--s3-dur) var(--s3-ease), translate var(--s3-dur) var(--s3-ease);
}

/* -------------------------------------------------------------------------
   8. CONTACT FORM  (Framer form inputs are driven by --framer-input-* vars)
      original: grey #bbbbbb26 fields, bottom-only green line, radius 8px,
      blue (#09f) radios, grey #333 submit.
   ------------------------------------------------------------------------- */
html.s3-modern .framer-ua61l3,
html.s3-modern .framer-ua61l3 .framer-3xgk96 {
  overflow: visible;                  /* content already fits; lets focus rings show */
}

html.s3-modern .framer-ua61l3 .framer-form-input-wrapper {
  --framer-input-background: rgba(0, 0, 0, .35);
  --framer-input-border-color: rgba(var(--s3-g), .2);
  --framer-input-border-top-width: 1px;
  --framer-input-border-right-width: 1px;
  --framer-input-border-bottom-width: 1px;
  --framer-input-border-left-width: 1px;
  --framer-input-border-radius-top-left: var(--s3-r-field);
  --framer-input-border-radius-top-right: var(--s3-r-field);
  --framer-input-border-radius-bottom-right: var(--s3-r-field);
  --framer-input-border-radius-bottom-left: var(--s3-r-field);
  --framer-input-box-shadow: inset 0 -1px 0 rgba(var(--s3-g), .45);
  --framer-input-focused-background: rgba(var(--s3-g), .05);
  --framer-input-focused-border-color: rgba(var(--s3-g), .85);
  --framer-input-focused-border-width: 1px;
  --framer-input-focused-box-shadow: 0 0 0 3px rgba(var(--s3-g), .12), inset 0 1px 18px rgba(var(--s3-g), .08);
  --framer-input-focused-transition: all var(--s3-dur) var(--s3-ease) 0s;
}

/* radios: blue Framer default -> brand green (border, checked dot) */
html.s3-modern .framer-ua61l3 .framer-form-boolean-input {
  --framer-input-background: rgba(255, 255, 255, .06);
  --framer-input-border-color: rgba(var(--s3-g), .4);
  --framer-input-boolean-checked-background: rgb(var(--s3-g));
  --framer-input-boolean-checked-border-color: rgb(var(--s3-g));
  --framer-input-boolean-checked-box-shadow: inset 0 0 0 4px #000, 0 0 10px rgba(var(--s3-g), .45);
  --framer-input-focused-border-color: rgb(var(--s3-g));
}

/* submit button (Default variant only - Loading/Success/Error keep Framer's look) */
html.s3-modern .framer-W0WdR.framer-v-1upvtym {
  background-color: rgba(var(--s3-g), .1) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--s3-g), .45) !important;
  border-radius: var(--s3-r-field) !important;
  transition: var(--s3-t);
}

/* -------------------------------------------------------------------------
   9. HOVER STATES  (pointer devices only, so touch never gets "stuck")
   ------------------------------------------------------------------------- */
@media (hover: hover) {

  /* services */
  html.s3-modern .framer-1baq6r5 [data-framer-name="card"]:hover {
    background-color: rgba(var(--s3-g), .07) !important;
    background-position: -30% 0;
    box-shadow: var(--s3-glow);
    translate: 0 -3px;
    transition: var(--s3-t), background-position var(--s3-sweep) var(--s3-ease);
  }

  html.s3-modern .framer-1baq6r5 [data-framer-name="card"]:hover > div:empty:not([data-framer-component-type]) {
    opacity: 1;
  }

  html.s3-modern .framer-1baq6r5 [data-framer-name="card"]:hover::after {
    border-color: rgba(var(--s3-g), .4);
  }

  /* projects (hover tracked on the static wrapper -> no lift flicker) */
  html.s3-modern .framer-g4dmk div:hover > .framer-5WPmK.framer-1vg5y79 {
    --border-color: var(--s3-line-hi) !important;
    background-color: rgba(4, 255, 0, .09) !important;
    background-position: -30% 0, 0 0;
    box-shadow: var(--s3-glow);
    translate: 0 -4px;
    transition: var(--s3-t), background-position var(--s3-sweep) var(--s3-ease);
  }

  html.s3-modern .framer-g4dmk div:hover > .framer-5WPmK .framer-fgs1sd img {
    scale: 1.035;
  }

  html.s3-modern .framer-g4dmk div:hover > .framer-5WPmK .framer-1fzbpdm > [data-border="true"] {
    --border-color: rgba(var(--s3-g), .6) !important;
    background-color: rgba(var(--s3-g), .08);
  }

  /* steps */
  html.s3-modern .framer-m8r5ug div:hover > .framer-q84Mh.framer-1x13o4 {
    background-position: -30% 0, 0 0 !important;
    box-shadow: inset 0 0 0 1px rgba(var(--s3-g), .35), 0 16px 40px -22px rgba(var(--s3-g), .55);
    translate: 0 -3px;
    transition: var(--s3-t), background-position var(--s3-sweep) var(--s3-ease);
  }

  html.s3-modern .framer-m8r5ug div:hover > .framer-q84Mh.framer-1x13o4::before {
    opacity: 1;
  }

  /* orbit ring on */
  html.s3-modern .framer-1baq6r5 [data-framer-name="card"]:hover::before,
  html.s3-modern .framer-g4dmk div:hover > .framer-5WPmK.framer-1vg5y79::before,
  html.s3-modern .framer-m8r5ug div:hover > .framer-q84Mh.framer-1x13o4::after {
    opacity: 1;
    animation-play-state: running;
  }

  /* resource pack */
  html.s3-modern .framer-uC1J1.framer-72aqkv:hover {
    --border-color: rgba(var(--s3-g), .45) !important;
  }

  html.s3-modern .framer-uC1J1 .framer-13hetjq:hover {
    box-shadow: 0 10px 28px -12px rgba(var(--s3-g), .75);
    translate: 0 -2px;
  }

  /* contact */
  html.s3-modern .framer-ouf5fr:hover {
    --border-color: rgba(var(--s3-g), .7);
    background-color: rgba(1, 102, 0, .3);
    box-shadow: 0 10px 26px -14px rgba(var(--s3-g), .6);
  }

  html.s3-modern .framer-1qcz2u2 > a:hover {
    filter: drop-shadow(0 0 8px rgba(var(--s3-g), .55));
    translate: 0 -2px;
  }

  html.s3-modern .framer-ua61l3 .framer-form-input-wrapper:hover {
    --framer-input-border-color: rgba(var(--s3-g), .38);
  }

  html.s3-modern .framer-W0WdR.framer-v-1upvtym:hover {
    background-color: rgba(var(--s3-g), .2) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--s3-g), .85), 0 10px 28px -12px rgba(var(--s3-g), .7) !important;
    translate: 0 -2px;
  }
}

/* -------------------------------------------------------------------------
   10. KEYBOARD FOCUS  (accessibility)
   ------------------------------------------------------------------------- */
html.s3-modern :where(a, button, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid rgba(var(--s3-g), .9);
  outline-offset: 3px;
}

html.s3-modern .framer-5WPmK.framer-1vg5y79:focus-visible {
  --border-color: var(--s3-line-hi) !important;
  outline: 2px solid rgba(var(--s3-g), .9);
  outline-offset: 4px;
  box-shadow: var(--s3-glow);
}

html.s3-modern .framer-5WPmK.framer-1vg5y79:focus-visible::before {
  opacity: 1;
}

html.s3-modern .framer-ua61l3 .framer-form-boolean-input:focus-visible {
  outline: 2px solid rgba(var(--s3-g), .9);
  outline-offset: 2px;
}

html.s3-modern .framer-W0WdR.framer-v-1upvtym:focus-visible {
  outline: 2px solid rgba(var(--s3-g), .9);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   11. FALLBACK - browsers without backdrop-filter get denser glass
   ------------------------------------------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.s3-modern .framer-oybdaq {
    background-color: rgba(0, 0, 0, .82);
  }

  html.s3-modern .framer-1baq6r5 [data-framer-name="card"] {
    background-color: rgba(0, 0, 0, .6) !important;
  }
}

/* -------------------------------------------------------------------------
   12. MOBILE / TABLET (< 810px) - lighter blur for performance
   ------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  html.s3-modern {
    --s3-blur: blur(8px) saturate(130%);
    --s3-blur-nav: blur(10px) saturate(130%);
    --s3-r-card: 20px;
    --s3-r-lg: 24px;
  }
}

/* -------------------------------------------------------------------------
   13. REDUCED MOTION - no lift, no sweep, no orbit, instant state changes
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.s3-modern .framer-1baq6r5 [data-framer-name="card"],
  html.s3-modern .framer-1baq6r5 [data-framer-name="card"] > div,
  html.s3-modern .framer-1baq6r5 [data-framer-name="card"]::before,
  html.s3-modern .framer-1baq6r5 [data-framer-name="card"]::after,
  html.s3-modern .framer-5WPmK.framer-1vg5y79,
  html.s3-modern .framer-5WPmK.framer-1vg5y79::before,
  html.s3-modern .framer-5WPmK.framer-1vg5y79::after,
  html.s3-modern .framer-5WPmK .framer-1fzbpdm > [data-border="true"],
  html.s3-modern .framer-5WPmK .framer-fgs1sd img,
  html.s3-modern .framer-q84Mh.framer-1x13o4,
  html.s3-modern .framer-q84Mh.framer-1x13o4::before,
  html.s3-modern .framer-q84Mh.framer-1x13o4::after,
  html.s3-modern .framer-uC1J1.framer-72aqkv::after,
  html.s3-modern .framer-uC1J1 .framer-13hetjq,
  html.s3-modern .framer-oybdaq::after,
  html.s3-modern .framer-ouf5fr,
  html.s3-modern .framer-1qcz2u2 > a,
  html.s3-modern .framer-W0WdR.framer-v-1upvtym {
    /* instant state changes: the sheen "sweep" jumps off-screen in one
       frame (invisible) and the orbit ring stays still */
    transition-duration: .01ms !important;
    animation: none !important;
    translate: none !important;
    scale: none !important;
  }
}