/*
apex-effects.css — item 31: Interactive Elements + Auth glass-card,
ported from docs/demos/phase_aa_preview.html's "Interactive Elements"
and "Auth Pages" tabs (that file also has a Landing Hero WebGL ribbon
scene and a page-tear transition demo -- neither is in scope here,
item 31 names three specific effects only: the Auth Pages glass-card
treatment, the Gauntlet Tunnel [ported separately into create.html's
own <script>, needs Three.js], and these Interactive Elements).

Self-contained, opt-in via class names -- adding this stylesheet to a
page changes nothing until an element actually uses .shimmer-input,
.pw-trigger-btn, .apex-glow-header, or .apex-glass-card.
*/

/* ── Surface-tension shimmer (pure CSS, no JS) ────────────────────────────
   A cyan sweep across an input on focus. Wrap the input in
   .shimmer-wrap and give the input itself .shimmer-input. */
.shimmer-wrap { position: relative; }
.shimmer-wrap::after {
  content: '';
  position: absolute; inset: -1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0,200,255,0.18) 50%, transparent 100%);
  background-size: 200% 100%;
  opacity: 0; pointer-events: none;
  border-radius: 5px;
  z-index: 0;
}
.shimmer-wrap:focus-within::after {
  opacity: 1;
  animation: apexShimmerSweep 0.9s ease-out forwards;
}
@keyframes apexShimmerSweep {
  0%   { background-position: 200% 0; opacity: 0.9; }
  100% { background-position: -200% 0; opacity: 0; }
}
.shimmer-input { position: relative; z-index: 1; }

/* ── Depth-offset header glow ─────────────────────────────────────────────
   Adds the subtle cyan glow + inset highlight from the demo's
   "Depth Offset Nav Bar" block on top of a page's EXISTING .site-header
   (which already has its own background/backdrop-filter/border-bottom --
   this only adds the box-shadow depth cue, it doesn't replace anything). */
.apex-glow-header {
  box-shadow:
    0 4px 32px rgba(0,200,255,0.07),
    0 1px 0 rgba(255,255,255,0.04) inset;
}

/* ── Auth glass-card ───────────────────────────────────────────────────────
   Frosted-glass treatment for a real auth card (login.html) --
   backdrop-filter blur + saturate, a faint light-catching border, and a
   soft cyan glow, matching the demo's .auth panel aesthetic. Applied as
   an additive class alongside a page's own card styling. */
.apex-glass-card {
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow:
    0 8px 40px rgba(0,200,255,0.08),
    0 1px 0 rgba(255,255,255,0.05) inset;
}

/* ── Particle wire button ─────────────────────────────────────────────────
   On click, wires shoot from the button toward a target element before
   resolving (see static/js/apex-effects.js's fireWires()). #apexPwCanvas
   is a single shared full-viewport overlay canvas -- callers don't need
   to add anything to the DOM themselves. */
#apexPwCanvas {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9990;
  display: none;
}
.pw-target-lit {
  transition: box-shadow 0.3s, border-color 0.3s, color 0.3s;
  box-shadow: 0 0 16px rgba(0,255,157,0.35);
}