/* 扫光高光线 · 参考 https://juejin.cn/post/7385935890931712019 */
/* --yy-shine-color 由 yuanyin-themes.css 随主题切换 */

.yy-shine-wrap {
  position: relative;
  overflow: hidden;
}

.yy-shine-wrap::after {
  content: '';
  position: absolute;
  inset: -25%;
  background: linear-gradient(
    45deg,
    transparent 38%,
    var(--yy-shine-color, rgba(255, 235, 180, 0.82)) 50%,
    transparent 62%
  );
  transform: translateX(-100%);
  animation: yy-shine-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes yy-shine-sweep {
  0%, 18% { transform: translateX(-100%); }
  52% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.yy-shine-text {
  position: relative;
  display: inline-block;
}

.yy-shine-text > span:first-child,
.yy-shine-text.brand-name {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    45deg,
    var(--yy-logo-text, var(--yy-accent)) 0%,
    var(--yy-logo-text, var(--yy-accent)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 200% 100%;
  background-image: linear-gradient(
    45deg,
    var(--yy-logo-text, var(--yy-accent)) 35%,
    var(--yy-shine-color, rgba(255, 235, 180, 0.95)) 50%,
    var(--yy-logo-text, var(--yy-accent)) 65%
  );
  animation: yy-shine-text 2.8s ease-in-out infinite;
}

@keyframes yy-shine-text {
  0%, 18% { background-position: 200% 0; }
  52% { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}

.layui-btn:not(.layui-btn-disabled),
.btn-primary,
.btn-login {
  position: relative;
  overflow: hidden;
}

.layui-btn:not(.layui-btn-disabled)::after,
.btn-primary::after,
.btn-login::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    45deg,
    transparent 38%,
    var(--yy-shine-color, rgba(255, 235, 180, 0.75)) 50%,
    transparent 62%
  );
  transform: translateX(-100%);
  animation: yy-shine-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.layui-btn-xs::after {
  animation-duration: 3.6s;
}

.auth-panel.yy-shine-wrap::after {
  animation-duration: 3.5s;
}

.card-code[data-act] {
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  border-radius: 4px;
  padding: 2px 6px;
}

.card-code[data-act]:hover {
  color: var(--yy-accent, #6366f1);
  background: color-mix(in srgb, var(--yy-accent, #6366f1) 10%, transparent);
}