/* Light UX layer — does not restyle brand buttons */

html.tik-ux,
html.tik-ux * {
  cursor: none !important;
}

#tik-dot,
#tik-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483647;
}

#tik-dot {
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(61, 123, 245, 0.7);
}

#tik-ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

html.tik-hover #tik-ring {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-color: #3d7bf5;
  background: rgba(61, 123, 245, 0.1);
}

html.tik-down #tik-ring {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  transform: scale(0);
  animation: tik-ripple 0.5s ease forwards;
  z-index: 5;
}

@keyframes tik-ripple {
  to {
    transform: scale(2.2);
    opacity: 0;
  }
}

#tik-veil {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  background: #05080d;
  opacity: 0;
  transition: opacity 0.28s ease;
}

#tik-veil.show {
  opacity: 1;
}

#tik-veil .tik-veil-mark {
  display: none;
}

body.tik-enter {
  animation: tik-enter 0.35s ease both;
}

@keyframes tik-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.view.active {
  animation: tik-view 0.35s ease;
}

@keyframes tik-view {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (hover: none) and (pointer: coarse) {
  html.tik-ux,
  html.tik-ux * {
    cursor: auto !important;
  }
  #tik-dot,
  #tik-ring {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #tik-veil,
  body.tik-enter,
  .view.active,
  .btn-ripple {
    animation: none !important;
    transition: none !important;
  }
  html.tik-ux,
  html.tik-ux * {
    cursor: auto !important;
  }
  #tik-dot,
  #tik-ring {
    display: none !important;
  }
}