/* ============================================================
   Effects — monochrome variant
   Dot-matrix, spotlight, pricing glass — updated for B/W theme
   ============================================================ */

/* Sparkles container */
.fx-sparkles{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0; transition:opacity 1s;
}
.fx-sparkles.ready{ opacity:.7 }
.fx-sparkles canvas{ width:100% !important; height:100% !important }

/* Dot-matrix (auth pages black background) */
.fx-dotmatrix-layer{
  position:absolute; inset:0;
  overflow:hidden; pointer-events:none;
  background:#000;
}
.fx-dotmatrix-layer::after{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,1) 100%);
  pointer-events:none;
}

/* Auth shell */
.auth-shell{
  position:relative;
  min-height:100vh;
  background:#000;
  isolation:isolate;
  overflow:hidden;
}
.auth-shell > .auth-content{ position:relative; z-index:2 }

/* Glass pricing card (editorial monochrome) */
.pricing-card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:20px;
  padding:36px 28px;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .3s;
  display:flex; flex-direction:column;
}
.pricing-card:hover{
  transform:translateY(-4px);
  border-color:var(--ink);
  box-shadow:var(--shadow-3);
}
.pricing-card.featured{
  background:var(--ink); color:var(--paper);
  border-color:var(--ink);
}
.pricing-card.featured .text-muted{ color:rgba(255,255,255,.6) }

.pricing-card .ribbon{
  position:absolute; top:20px; right:20px;
  padding:4px 10px;
  background:var(--ember); color:#fff;
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:3px;
}
.pricing-card .price-lg{
  font-family:var(--font-display);
  font-size:clamp(2.5rem, 1rem + 3vw, 3.5rem);
  font-weight:400; line-height:1;
  color:inherit; letter-spacing:-.025em;
  font-variation-settings:"opsz" 144, "SOFT" 30;
}
.pricing-card ul{ list-style:none; padding:0; margin:24px 0 28px }
.pricing-card ul li{
  padding:12px 0;
  border-top:1px solid rgba(0,0,0,.06);
  color:inherit;
  opacity:.85;
  display:flex; align-items:center; gap:10px;
  font-size:14px;
}
.pricing-card.featured ul li{ border-top-color:rgba(255,255,255,.1) }
.pricing-card ul li:first-child{ border-top:0 }
.pricing-card ul li::before{
  content:'→';
  font-family:var(--font-mono); font-weight:400;
  color:inherit; opacity:.7;
  width:16px; flex-shrink:0;
}

/* Spline viewer */
spline-viewer{ width:100%; height:100%; display:block; border:0 }

/* Magnetic button */
.btn-magnet{ transition:transform .2s cubic-bezier(.16,1,.3,1) }

/* Auth page glass input */
.glass-input{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
  border-radius:999px;
  padding:14px 22px;
  color:#fff;
  width:100%;
  text-align:center;
  font-family:var(--font-body);
  font-size:15px;
  outline:none;
  transition:all .2s;
}
.glass-input:focus{
  border-color:rgba(255,255,255,.35);
  background:rgba(255,255,255,0.06);
}
.glass-input::placeholder{ color:rgba(255,255,255,0.35) }