/* ===============================
   Gate auth — heavy analog skin
   Targets ONLY the TX auth overlay pane that has a password input
   =============================== */

:root {
  /* live-tuned by JS for organic glitch */
  --gate-jx: 0px;       /* jitter X   */
  --gate-jy: 0px;       /* jitter Y   */
  --gate-splitx: 0px;   /* RGB split  */
  --gate-splity: 0px;   /* RGB split  */
  --gate-skew: 0deg;    /* skew       */
  --gate-bloom: 0;      /* bloom amt  */
}

.tx-overlay .tx-pane:has(input[type="password"]) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0) translate(var(--gate-jx), var(--gate-jy)) skewX(var(--gate-skew));
  filter: contrast(1.15) saturate(0.9) brightness(0.98);
  background: linear-gradient(180deg, rgba(10,10,12,.95), rgba(5,6,8,.98));
  border: 1px solid rgba(120,200,255,.1);
  box-shadow:
    0 0 0 1px rgba(0, 235, 255, .06) inset,
    0 12px 40px rgba(0,0,0,.5),
    0 0 40px rgba(0,255,255,.03);
}

/* CRT scanlines + vignette */
.tx-overlay .tx-pane:has(input[type="password"])::before {
  content: "";
  position: absolute; inset: -2px;
  pointer-events: none;
  background:
    /* scanlines */
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.02) 0 1px,
      rgba(0,0,0,0) 2px 3px
    ),
    /* soft vignette */
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.10) 60%,
      rgba(0,0,0,.36) 100%);
  mix-blend-mode: screen;
  animation: gateScan .75s steps(2) infinite;
  opacity: .9;
}

/* rolling vertical hold band — oversized + transform sweep (smooth & reliable) */
.tx-overlay .tx-pane:has(input[type="password"])::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  top: -60%;              /* start well above the pane */
  height: 220%;           /* taller than the pane so transform % spans fully */
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(0.5px);
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,0) 100%);
  box-shadow: 0 0 40px rgba(255,255,255,.06);
  will-change: transform, opacity;
  animation: gateRollXform 3.8s linear infinite;
}

/* random horizontal tear bands */
.tx-overlay .tx-pane:has(input[type="password"]) .tx-prompt::before,
.tx-overlay .tx-pane:has(input[type="password"]) .tx-title::before {
  content: "";
  position: absolute; left: -10%; right: -10%;
  height: 2px;
  top: 25%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: gateTear 1.6s linear infinite;
  mix-blend-mode: screen;
  opacity: .5;
}

/* subtle rgb split on headings & hint */
.tx-overlay .tx-pane:has(input[type="password"]) .tx-title,
.tx-overlay .tx-pane:has(input[type="password"]) .tx-prompt,
.tx-overlay .tx-pane:has(input[type="password"]) .hint {
  position: relative;
  text-shadow:
    calc(var(--gate-splitx)) calc(var(--gate-splity)) 0 rgba(255, 60, 60, .35),
    calc(var(--gate-splitx) * -1) calc(var(--gate-splity) * -1) 0 rgba(50, 160, 255, .35);
}

/* inputs: mono, chunky caret, jitter on focus */
.tx-overlay .tx-pane:has(input[type="password"]) input,
.tx-overlay .tx-pane:has(input[type="password"]) button {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transform: translateZ(0);
}

.tx-overlay .tx-pane:has(input[type="password"]) input:focus {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(0,255,255,.25),
    0 0 calc(6px + var(--gate-bloom) * 4px) rgba(0,255,255,.18);
  filter: drop-shadow(0 0 calc(6px + var(--gate-bloom) * 3px) rgba(0,255,255,.22));
}

/* buttons rounded but still retro */
.tx-overlay .tx-pane:has(input[type="password"]) .actions button {
  border-radius: 10px;
}

/* accessibility: if motion reduced, chill the animations */
@media (prefers-reduced-motion: reduce) {
  .tx-overlay .tx-pane:has(input[type="password"])::before,
  .tx-overlay .tx-pane:has(input[type="password"])::after,
  .tx-overlay .tx-pane:has(input[type="password"]) .tx-title::before,
  .tx-overlay .tx-pane:has(input[type="password"]) .tx-prompt::before {
    animation: none !important;
  }
}

/* keyframes */
@keyframes gateScan {
  0%,100% { opacity: .85 }
  50%     { opacity: .95 }
}
@keyframes gateRollXform {
  0%   { transform: translateY(-20%); opacity: .55; }
  50%  { opacity: .75; }
  100% { transform: translateY(120%); opacity: .55; }
}
@keyframes gateTear {
  0%   { transform: translateY(0) }
  40%  { transform: translateY(110%) }
  41%  { transform: translateY(12%) }  /* snap back jitter */
  100% { transform: translateY(220%) }
}