/**
 * 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) scale(1); }
  50% { transform: translate(2%, -1.5%) scale(1.03); }
}

@keyframes fxOrbDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-1.5%, 2%) scale(0.98); }
}

@keyframes fxOrbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-5%, 8%) scale(1.1); }
}

@keyframes fxOrbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, -4%) scale(0.92); }
}

@keyframes fxOrbFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.42; }
  50% { transform: translate(-3%, -6%) scale(1.06); opacity: 0.58; }
}

@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%, 72%, 100% { opacity: 0; transform: rotate(-14deg) translateX(-6%); }
  82% { opacity: 0.62; transform: rotate(-14deg) translateX(4%); }
  92% { opacity: 0; transform: rotate(-14deg) translateX(14%); }
}

@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, 24px 12px, 24px 12px, 0 0;
    opacity: 0.5;
  }
  33% {
    background-position: 12px 6px, 12px 6px, 36px 24px, 36px 24px, 6px 3px;
    opacity: 0.58;
  }
  66% {
    background-position: -8px 14px, -8px 14px, 16px 28px, 16px 28px, -4px 8px;
    opacity: 0.54;
  }
}

@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 {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.site-bg-mesh {
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(ellipse 42% 36% at 18% 28%, color-mix(in srgb, var(--brand-indigo) 14%, transparent), transparent 72%),
    radial-gradient(ellipse 38% 32% at 82% 72%, color-mix(in srgb, var(--brand-cyan) 12%, transparent), transparent 70%),
    radial-gradient(ellipse 48% 38% at 52% 48%, color-mix(in srgb, var(--brand-violet, #8b5cf6) 8%, transparent), transparent 76%);
  filter: blur(52px);
  animation: fxMeshShift 40s ease-in-out infinite;
  mix-blend-mode: soft-light;
}

.site-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
}

.site-bg-orb--1 {
  width: min(480px, 55vw);
  height: min(480px, 55vw);
  top: -12%;
  right: -8%;
  background: color-mix(in srgb, var(--brand-cyan) 24%, transparent);
  opacity: 0.62;
  animation: fxOrbFloat1 26s ease-in-out infinite;
}

.site-bg-orb--2 {
  width: min(400px, 48vw);
  height: min(400px, 48vw);
  bottom: 6%;
  left: -10%;
  background: color-mix(in srgb, var(--brand-indigo) 22%, transparent);
  opacity: 0.56;
  animation: fxOrbFloat2 32s ease-in-out infinite;
}

.site-bg-orb--3 {
  width: min(320px, 40vw);
  height: min(320px, 40vw);
  top: 38%;
  left: 34%;
  background: color-mix(in srgb, var(--brand-violet, #8b5cf6) 16%, transparent);
  animation: fxOrbFloat3 28s ease-in-out infinite;
}

.site-bg-beam {
  position: absolute;
  top: -50%;
  left: -25%;
  width: 55%;
  height: 200%;
  background: linear-gradient(
    108deg,
    transparent 40%,
    color-mix(in srgb, var(--brand-cyan) 8%, transparent) 48%,
    color-mix(in srgb, #fff 6%, transparent) 50%,
    color-mix(in srgb, var(--brand-indigo) 7%, transparent) 52%,
    transparent 60%
  );
  transform: rotate(-14deg);
  animation: fxBeamSweep 20s 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.52;
  background: color-mix(in srgb, var(--brand-cyan) 32%, transparent);
}

[data-theme="light"] .site-bg-orb--2,
.theme-light .site-bg-orb--2 {
  opacity: 0.48;
  background: color-mix(in srgb, var(--brand-indigo) 28%, transparent);
}

[data-theme="light"] .site-bg-orb--3,
.theme-light .site-bg-orb--3 {
  opacity: 0.40;
  background: color-mix(in srgb, var(--brand-lime-bright) 22%, transparent);
}

[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 {
  inset: -15%;
  background:
    radial-gradient(ellipse 52% 42% at 12% 8%, var(--fx-orb-1), transparent 68%),
    radial-gradient(ellipse 48% 38% at 88% 12%, var(--fx-orb-2), transparent 65%),
    radial-gradient(ellipse 60% 45% at 50% 100%, color-mix(in srgb, var(--brand-violet) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 35% 28% at 72% 78%, color-mix(in srgb, var(--brand-cyan) 8%, transparent), transparent 72%);
  filter: blur(40px);
  opacity: 0.95;
  animation: fxOrbDriftA 36s ease-in-out infinite;
}

html::after {
  inset: 0;
  background-image:
    linear-gradient(var(--fx-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--fx-grid) 1px, transparent 1px),
    linear-gradient(var(--fx-grid-accent) 1px, transparent 1px),
    linear-gradient(90deg, var(--fx-grid-accent) 1px, transparent 1px),
    radial-gradient(circle 1.2px at center, var(--fx-grid-dot) 0%, transparent 72%),
    linear-gradient(125deg, transparent 48%, color-mix(in srgb, var(--brand-indigo) 4%, transparent) 49.5%, transparent 51%);
  background-size: 48px 48px, 48px 48px, 96px 96px, 96px 96px, 48px 48px, 100% 100%;
  background-position: 0 0, 0 0, 24px 12px, 24px 12px, 0 0, 0 0;
  mask-image: radial-gradient(ellipse 88% 78% at 50% 42%, #000 18%, transparent 74%);
  opacity: 0.66;
  animation: fxGridDrift 52s 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 {
  background:
    radial-gradient(ellipse 52% 42% at 10% 6%, var(--fx-orb-1), transparent 68%),
    radial-gradient(ellipse 48% 38% at 90% 10%, var(--fx-orb-2), transparent 65%),
    radial-gradient(ellipse 58% 44% at 50% 100%, color-mix(in srgb, var(--brand-indigo) 14%, transparent), transparent 72%),
    radial-gradient(ellipse 36% 30% at 72% 82%, color-mix(in srgb, var(--brand-lime-bright) 10%, transparent), transparent 70%);
  opacity: 0.88;
  filter: blur(44px);
}

[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, 24px 12px, 24px 12px, 0 0;
    opacity: 0.46;
  }
  50% {
    background-position: 14px 8px, 14px 8px, 38px 22px, 38px 22px, 7px 4px;
    opacity: 0.58;
  }
}

[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; }
}