.lg-cursor-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  pointer-events: none;
  /* Must sit above ANY modal/overlay (journey detail = 200, share
     modal = 50, checkout = 1000+, preloader splash = 100). */
  z-index: 100000;
  font-size: 10px;
  transform: translate3d(0, 0, 0) scale(0.75);
  transform-origin: center center;
}

.lg-cursor-root .wrapper {
  position: relative;
  width: 4.8em;
  height: 4.8em;
  transition: transform 0.3s ease-in-out;
  transform: scale(1);
}

.lg-cursor-root.is-hover .wrapper { transform: scale(0.75); }
.lg-cursor-root.is-hover-case .wrapper { transform: scale(1.4); }

.lg-cursor-root .outer-border,
.lg-cursor-root .inner-border {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.lg-cursor-root .outer-border {
  width: 6.4em;
  height: 6.4em;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, width 0.3s ease-in-out, border-radius 0.3s ease-in-out;
}

.lg-cursor-root.is-hover .outer-border {
  transform: translate(-50%, -50%) scale(0.75);
  opacity: 0;
}

.lg-cursor-root.is-text-visible[data-text="Click to start"] .outer-border {
  width: 17.8em;
  border-radius: 100px;
  transform: translate(calc(-50% - 3.1em), -50%);
}

.lg-cursor-root .inner-border {
  width: 4.9em;
  height: 4.9em;
  background-image: url("./assets/cursor_border.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  z-index: 10;
  animation: lg-cursor-rotate 4s linear infinite;
  transition: opacity 0.3s ease-in-out;
}

.lg-cursor-root.is-hover .inner-border,
.lg-cursor-root.is-text-visible .inner-border {
  opacity: 0;
}

@keyframes lg-cursor-rotate {
  0%   { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.lg-cursor-root .star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.5em;
  height: 3.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.3s ease-in-out;
}

.lg-cursor-root .star svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lg-cursor-root .star svg path {
  transition: fill 0.3s ease-in-out;
  fill: #fff;
}

.lg-cursor-root.is-text-visible[data-text="Click to start"] .star svg path {
  fill: #2A2336;
}

.lg-cursor-root.is-hover .star,
.lg-cursor-root.is-hover-case .star {
  opacity: 0;
}

.lg-cursor-root .arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.9em;
  height: 1.9em;
  background-image: url("./assets/backArrowNew.svg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%) scale(1.2) rotate(-45deg);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.lg-cursor-root.is-hover-case .arrow { opacity: 1; }

.lg-cursor-root .liquid-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  overflow: hidden;
  pointer-events: none !important;
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.01);
  transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.lg-cursor-root.is-hover .liquid-glass { opacity: 0; }
.lg-cursor-root.is-hover-case .liquid-glass { background-color: rgba(76, 99, 255, 0.41); }
.lg-cursor-root.is-text-visible[data-text="Click to start"] .liquid-glass { width: 16.2em; }

.lg-cursor-root .liquid-glass .text {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  padding-left: 3em;
  font-size: 1.8em;
  color: #111;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.lg-cursor-root.is-text-visible .liquid-glass .text {
  opacity: 1;
  transition-delay: 0.3s;
}

@media (hover: none), (pointer: coarse) {
  .lg-cursor-root { display: none; }
}