/**
 * 2Live 全站新特效 — 棱镜静场 Prism Field
 * 替代旧版极光 / 星点 / 呼吸 / 闪烁等动效
 */

@keyframes fxPageReveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fxCardReveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fxOrbDriftA {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(1.5%, -1%) rotate(1.2deg); }
}

@keyframes fxOrbFloat1 {
  0%, 100% { transform: rotate(-8deg) translate(0, 0); }
  50% { transform: rotate(-2deg) translate(-3%, 5%); }
}

@keyframes fxOrbFloat2 {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.7; }
  50% { transform: rotate(12deg) scale(1.04); opacity: 1; }
}

@keyframes fxOrbFloat3 {
  0%, 100% { transform: translate(0, 0); opacity: 0.55; }
  50% { transform: translate(4%, -6%); opacity: 0.85; }
}

@keyframes fxAuroraSpin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.04); }
}

@keyframes fxStarPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.65; }
}

@keyframes fxBeamSweep {
  0%, 70%, 100% { opacity: 0; transform: translateY(-18%); }
  80% { opacity: 0.7; transform: translateY(8%); }
  90% { opacity: 0; transform: translateY(28%); }
}

@keyframes fxMeshShift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.38; }
  50% { transform: translate(2%, -1.5%) scale(1.06); opacity: 0.52; }
}

@keyframes fxGridDrift {
  0%, 100% {
    background-position: 0 0, 0 0, 0 0, 0 0;
    opacity: 0.46;
  }
  50% {
    background-position: 28px 0, -28px 0, 0 18px, 40px 0;
    opacity: 0.6;
  }
}

@keyframes fxOtpTick {
  0% { opacity: 0.55; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 关闭 style.css 旧版 body 背景，改用新多层特效 */
body::before,
body::after {
  display: block !important;
  pointer-events: none;
  z-index: 0;
}

body::before {
  content: '' !important;
  position: fixed;
  inset: -35%;
  background:
    conic-gradient(from 200deg at 28% 32%,
      transparent 0deg,
      color-mix(in srgb, var(--brand-indigo) 14%, transparent) 55deg,
      color-mix(in srgb, var(--brand-cyan) 12%, transparent) 110deg,
      color-mix(in srgb, var(--brand-violet, #8b5cf6) 8%, transparent) 160deg,
      transparent 260deg),
    radial-gradient(ellipse 55% 45% at 78% 68%,
      color-mix(in srgb, var(--brand-cyan) 10%, transparent),
      transparent 70%);
  filter: blur(72px);
  opacity: 0.48;
  animation: fxAuroraSpin 52s linear infinite !important;
}

body::after {
  content: '' !important;
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle 1px at 8% 14%, color-mix(in srgb, var(--brand-cyan) 70%, transparent), transparent 100%),
    radial-gradient(circle 1px at 22% 38%, color-mix(in srgb, var(--brand-indigo) 55%, transparent), transparent 100%),
    radial-gradient(circle 1.2px at 38% 18%, color-mix(in srgb, var(--brand-cyan) 60%, transparent), transparent 100%),
    radial-gradient(circle 1px at 52% 62%, color-mix(in srgb, var(--brand-indigo) 45%, transparent), transparent 100%),
    radial-gradient(circle 1px at 68% 28%, color-mix(in srgb, var(--brand-cyan) 50%, transparent), transparent 100%),
    radial-gradient(circle 1px at 84% 52%, color-mix(in srgb, var(--brand-indigo) 40%, transparent), transparent 100%),
    radial-gradient(circle 1px at 16% 78%, color-mix(in srgb, var(--brand-cyan) 48%, transparent), transparent 100%),
    radial-gradient(circle 1px at 58% 84%, color-mix(in srgb, var(--brand-indigo) 42%, transparent), transparent 100%),
    radial-gradient(circle 1px at 92% 22%, color-mix(in srgb, var(--brand-cyan) 38%, transparent), transparent 100%);
  opacity: 0.58;
  animation: fxStarPulse 10s ease-in-out infinite alternate !important;
}

[data-theme="light"] body::before,
.theme-light body::before {
  opacity: 0.44;
  filter: blur(72px);
}

[data-theme="light"] body::after,
.theme-light body::after {
  opacity: 0.52;
}

/* 浮动光斑 + 扫光 + 噪点 — 已关闭装饰块 */
.site-bg-fx,
.site-bg-mesh,
.site-bg-orb,
.site-bg-beam {
  display: none !important;
}

.site-bg-mesh {
  position: absolute;
  inset: auto;
  top: 12%;
  left: -8%;
  width: 46%;
  height: 28%;
  border-radius: 40px;
  background:
    linear-gradient(118deg,
      color-mix(in srgb, var(--brand-indigo) 16%, transparent),
      transparent 62%);
  filter: blur(28px);
  animation: fxMeshShift 40s ease-in-out infinite;
  mix-blend-mode: soft-light;
}

.site-bg-orb {
  position: absolute;
  filter: none;
  will-change: transform;
  background: transparent;
  box-shadow: none;
}

/* HUD 四角框 */
.site-bg-orb--1 {
  --hud: color-mix(in srgb, var(--brand-live-teal, #5B6CFF) 55%, #2dd4bf);
  width: min(210px, 32vw);
  height: min(148px, 22vw);
  top: 16%;
  left: 5%;
  border-radius: 4px;
  opacity: 0.78;
  border: none;
  background:
    linear-gradient(var(--hud), var(--hud)) top left / 42px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) top left / 2px 42px no-repeat,
    linear-gradient(var(--hud), var(--hud)) top right / 42px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) top right / 2px 42px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom left / 42px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom left / 2px 42px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom right / 42px 2px no-repeat,
    linear-gradient(var(--hud), var(--hud)) bottom right / 2px 42px no-repeat;
  box-shadow: 0 0 28px color-mix(in srgb, #2dd4bf 16%, transparent);
  animation: fxOrbFloat1 26s ease-in-out infinite;
}

/* 虚线光环 */
.site-bg-orb--2 {
  width: min(170px, 24vw);
  height: min(170px, 24vw);
  bottom: 14%;
  left: 7%;
  border-radius: 50%;
  opacity: 0.72;
  border: 1.5px dashed color-mix(in srgb, var(--brand-live-teal, #5B6CFF) 42%, transparent);
  background: radial-gradient(
    circle,
    transparent 58%,
    color-mix(in srgb, #2dd4bf 10%, transparent) 59%,
    transparent 72%
  );
  box-shadow: 0 0 20px color-mix(in srgb, #2dd4bf 14%, transparent);
  animation: fxOrbFloat2 32s ease-in-out infinite;
}

/* 小十字准星 */
.site-bg-orb--3 {
  width: min(72px, 12vw);
  height: min(72px, 12vw);
  top: 46%;
  left: 18%;
  border-radius: 0;
  opacity: 0.62;
  border: none;
  background:
    linear-gradient(color-mix(in srgb, #2dd4bf 70%, transparent), color-mix(in srgb, #2dd4bf 70%, transparent)) center / 2px 100% no-repeat,
    linear-gradient(color-mix(in srgb, #2dd4bf 70%, transparent), color-mix(in srgb, #2dd4bf 70%, transparent)) center / 100% 2px no-repeat,
    radial-gradient(circle, transparent 62%, color-mix(in srgb, #2dd4bf 28%, transparent) 63%, transparent 70%);
  animation: fxOrbFloat3 22s ease-in-out infinite;
}

.site-bg-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 18%;
  background: linear-gradient(
    180deg,
    transparent 10%,
    color-mix(in srgb, var(--brand-cyan) 10%, transparent) 48%,
    color-mix(in srgb, #fff 5%, transparent) 50%,
    color-mix(in srgb, var(--brand-indigo) 8%, transparent) 52%,
    transparent 90%
  );
  animation: fxBeamSweep 22s ease-in-out infinite;
}

.site-bg-noise {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

[data-theme="light"] .site-bg-orb--1,
.theme-light .site-bg-orb--1 {
  opacity: 0.7;
}

[data-theme="light"] .site-bg-orb--2,
.theme-light .site-bg-orb--2 {
  opacity: 0.62;
}

[data-theme="light"] .site-bg-orb--3,
.theme-light .site-bg-orb--3 {
  opacity: 0.5;
}

[data-theme="light"] .site-bg-beam,
.theme-light .site-bg-beam { opacity: 0.85; }

[data-theme="light"] .site-bg-noise,
.theme-light .site-bg-noise { opacity: 0.025; }

[data-theme="light"] .site-bg-mesh,
.theme-light .site-bg-mesh {
  opacity: 0.62;
  mix-blend-mode: multiply;
}

/* 新背景：双光斑 + 细网格 */
html {
  min-height: 100%;
}

html::before,
html::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

html::before {
  display: none;
}

html::after {
  inset: 0;
  background-image:
    repeating-linear-gradient(
      58deg,
      var(--fx-grid) 0px,
      var(--fx-grid) 1px,
      transparent 1px,
      transparent 34px
    ),
    repeating-linear-gradient(
      -58deg,
      var(--fx-grid) 0px,
      var(--fx-grid) 1px,
      transparent 1px,
      transparent 34px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 88px,
      var(--fx-grid-accent) 88px,
      var(--fx-grid-accent) 89px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 64px,
      color-mix(in srgb, var(--brand-live-teal, #5B6CFF) 14%, transparent) 64px,
      color-mix(in srgb, var(--brand-live-teal, #5B6CFF) 14%, transparent) 65px
    );
  background-size: 180% 180%, 180% 180%, 100% 100%, 100% 140%;
  background-position: 0 0, 0 0, 0 0, 0 0;
  mask-image: radial-gradient(ellipse 86% 76% at 50% 40%, #000 16%, transparent 76%);
  opacity: 0.62;
  animation: fxGridDrift 48s ease-in-out infinite;
}

body {
  background: var(--bg-base) !important;
  position: relative;
  z-index: 1;
}

.main-nav,
.container,
.tools-index-wrap,
.ip-hub-wrap,
.tool-hub-wrap,
.admin-layout,
.admin-login-wrap {
  position: relative;
  z-index: 1;
}

[data-theme="light"] body,
.theme-light body {
  background: var(--bg-base) !important;
}

[data-theme="light"] html::before,
.theme-light html::before {
  display: none;
}

[data-theme="light"] html::after,
.theme-light html::after {
  mask-image: radial-gradient(ellipse 88% 78% at 50% 38%, #000 18%, transparent 74%);
  animation: fxGridDrift 52s ease-in-out infinite;
}

@keyframes fxGridDriftLight {
  0%, 100% {
    background-position: 0 0, 0 0, 0 0, 0 0;
    opacity: 0.4;
  }
  50% {
    background-position: 22px 0, -22px 0, 0 14px, 32px 0;
    opacity: 0.54;
  }
}

[data-theme="light"] html::after,
.theme-light html::after {
  animation-name: fxGridDriftLight;
}

/* 首页 hero 保留轻入场；容器不再整体动效，避免刷新闪跳 */
.index-hero-card.page-main-card,
.login-card {
  animation: fxCardReveal 0.4s var(--fx-ease) both;
}

/* 卡片：半透明毛玻璃（全站） */
.glass-card,
.index-hero-card,
.tool-hub-card,
.tools-index-section,
.tools-index-card,
.ip-hub-card,
.tool-page-card,
.guide-hub-card,
.page-main-card .input-section,
.page-main-card .form-section,
.page-main-card .result-section,
.page-main-card .results-section,
.page-main-card .usdt-rate-card,
.page-main-card .usdt-calculator-card,
.page-main-card .ip-panel,
.ip-panel {
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(var(--glass-saturate));
}

.tool-hub-card,
.tools-index-card,
.guide-hub-card {
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.glass-card::before {
  display: block !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit;
  background: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(255, 255, 255, 0.08) 36%,
    transparent 62%
  ) !important;
  opacity: 0.65 !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  transform: none !important;
  pointer-events: none;
}

[data-theme="dark"] .glass-card::before {
  background: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.04) 38%,
    transparent 68%
  ) !important;
  opacity: 0.9 !important;
}

.glass-card::after {
  animation: none !important;
  opacity: 0.32 !important;
}

.glass-card:hover::after {
  opacity: 0.48 !important;
}

.glass-card:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--brand-indigo) 32%, var(--glass-border-bright)) !important;
}

.glass-card.page-main-card:hover {
  transform: none !important;
}

.index-hero-card::before {
  display: block !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.2) 0%,
    transparent 55%
  ) !important;
  opacity: 0.55 !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  transform: none !important;
  pointer-events: none !important;
}

/* 顶栏底边：静态渐变线 */
.main-nav::after {
  opacity: 0.5 !important;
  animation: none !important;
}

/* 禁用旧无限循环动效 */
.theme-toggle-btn:not(.nav-ctrl-btn),
.theme-toggle-btn:not(.nav-ctrl-btn)::before,
.lang-switch-container,
.progress-bar::before,
.progress-fill,
.progress-fill::before,
.index-hero-card .code-digits span:not(.number-changing):not(.number-flash),
.primary-btn::before {
  animation: none !important;
}

.theme-toggle-btn:not(.nav-ctrl-btn):hover::before {
  animation: none !important;
  opacity: 0 !important;
}

[data-theme="light"] .theme-toggle-btn:not(.nav-ctrl-btn),
.theme-light .theme-toggle-btn:not(.nav-ctrl-btn) {
  background: var(--glass-surface-2) !important;
  border: 1px solid var(--border-primary) !important;
  box-shadow: none !important;
  animation: none !important;
}

[data-theme="light"] .theme-toggle-btn:not(.nav-ctrl-btn):hover,
.theme-light .theme-toggle-btn:not(.nav-ctrl-btn):hover {
  transform: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-indigo) 12%, transparent) !important;
}

/* 输入框：靛光聚焦环 */
input:focus,
textarea:focus,
select:focus,
.input-wrapper input:focus,
.index-hero-card .input-wrapper input:focus {
  outline: none !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-indigo) 18%, transparent) !important;
  transform: none !important;
  animation: none !important;
  background: var(--glass-surface-2) !important;
}

/* 主按钮 — 详见 buttons.css */

/* OTP 验证码 — 纯色数字，切换时轻弹 */
.index-hero-card .code-digits span,
.code-digits span {
  color: var(--text-primary) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  text-shadow: 0 1px 12px color-mix(in srgb, var(--brand-indigo) 25%, transparent) !important;
  animation: none !important;
  font-variant-numeric: tabular-nums;
}

[data-theme="light"] .index-hero-card .code-digits span,
.theme-light .index-hero-card .code-digits span,
[data-theme="light"] .code-digits span,
.theme-light .code-digits span {
  color: var(--brand-violet) !important;
  -webkit-text-fill-color: var(--brand-violet) !important;
  text-shadow: none !important;
}

.index-hero-card .code-digits span.number-changing,
.code-digits span.number-changing {
  animation: fxOtpTick 0.35s var(--fx-ease) !important;
}

.index-hero-card .code-digits span.number-flash,
.code-digits span.number-flash {
  animation: fxOtpTick 0.35s var(--fx-ease) 2 !important;
}

.index-hero-card .code-display:hover .code-digits span {
  transform: none !important;
}

/* 进度条 — 静态渐变填充 */
.progress-bar,
.index-hero-card .progress-bar {
  background: color-mix(in srgb, var(--brand-indigo) 8%, var(--bg-tertiary)) !important;
  box-shadow: inset 0 1px 3px var(--shadow-4) !important;
  border: 1px solid var(--border-tertiary) !important;
}

.progress-fill,
.index-hero-card .progress-fill {
  background: var(--brand-gradient) !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  transition: width 1s linear !important;
}

.progress-fill::before,
.index-hero-card .progress-fill::before,
.progress-bar::before,
.index-hero-card .progress-bar::before {
  display: none !important;
}

/* 区块标题下划线统一 */
.app-header,
.info-card h3,
.results-header h3,
.form-section h3,
.info-section h3 {
  border-bottom-color: var(--border-primary) !important;
}

/* ═══ Site motion — scroll reveal & hero stagger ═══ */

@keyframes fxSlideUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fxEyebrowGlow {
  0%, 100% {
    box-shadow:
      0 2px 12px color-mix(in srgb, var(--brand-indigo) 8%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  50% {
    box-shadow:
      0 4px 22px color-mix(in srgb, var(--brand-indigo) 18%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
}

@keyframes fxDividerPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.82; }
}

@keyframes fxTimerShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.1); }
}

.index-hero-header {
  animation: fxSlideUp 0.52s var(--fx-ease) both;
}

.hero-flow-input {
  animation: fxSlideUp 0.52s var(--fx-ease) 0.07s both;
}

.hero-flow-result {
  animation: fxSlideUp 0.52s var(--fx-ease) 0.13s both;
}

.hero-flow-help {
  animation: fxSlideUp 0.48s var(--fx-ease) 0.2s both;
}

.index-hero-eyebrow {
  animation: fxEyebrowGlow 4.2s ease-in-out infinite;
}

.hero-flow-timer:not(.is-idle) .hero-flow-timer-fill.progress-fill {
  animation: fxTimerShimmer 2.4s ease-in-out infinite !important;
}

.fx-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s var(--fx-ease),
    transform 0.55s var(--fx-ease);
}

.fx-reveal.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.fx-reveal-delay-1 { transition-delay: 0.06s; }
.fx-reveal-delay-2 { transition-delay: 0.12s; }
.fx-reveal-delay-3 { transition-delay: 0.18s; }

.tools-index-section:not(.is-inview) .tools-index-card {
  opacity: 0;
  transform: translateY(12px);
}

.tools-index-section.is-inview .tools-index-card {
  animation: fxSlideUp 0.42s var(--fx-ease) both;
}

.tools-index-jump-pill {
  transition: transform 0.22s var(--fx-ease), box-shadow 0.22s ease;
}

.tools-index-jump-pill:hover {
  transform: translateY(-2px);
}

.tool-hub-card.fx-reveal.is-inview,
.guide-hub-card.fx-reveal.is-inview {
  transition-delay: 0.04s;
}

/* 无障碍：减少动效 */
@media (prefers-reduced-motion: reduce) {
  html::before,
  html::after,
  body::before,
  body::after { animation: none !important; }
  .site-bg-orb,
  .site-bg-beam,
  .site-bg-mesh { animation: none !important; }
  .index-hero-card.page-main-card { animation: none; }
  .index-hero-card .code-digits span.number-changing,
  .index-hero-card .code-digits span.number-flash { animation: none !important; }
  .index-hero-header,
  .hero-flow-input,
  .hero-flow-result,
  .hero-flow-help,
  .index-hero-eyebrow,
  .hero-flow-timer:not(.is-idle) .hero-flow-timer-fill.progress-fill { animation: none !important; }
  .fx-reveal,
  .fx-reveal.is-inview,
  .tools-index-section:not(.is-inview) .tools-index-card,
  .tools-index-section.is-inview .tools-index-card { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
}