/* majiq.dev access gate
   ------------------------------------------------------------------
   Three pieces, all hand-ported to vanilla CSS so the gate stays a
   dependency-free static page:
     1. terminal credential panel
     2. skeuomorphic cursor-lit nav (clear / unlock)
     3. full-screen glitch loader
*/

:root {
  --press-desktop: 0.3s ease;
  --press-mobile: 0.2s ease;
  --gap: 4px;

  --light: #00ff88;
  --light-red: #ff0044;

  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-900: #14532d;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Grey, not black: the cursor vignette below paints the darkness, and it
   only reads against a lit surface. */
body {
  margin: 0;
  background: #383838;
  color: var(--green-300);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" stroke="%23ffffff" fill="%23ffffff" width="10px" height="10px" viewBox="0 0 10.04 10.04"><circle cx="5.02" cy="5.02" r="4.52"/></svg>')
      5 5,
    auto;
}

/* the dot cursor gets in the way of actually typing */
.field input {
  cursor: text;
}

.stage {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 24px;
}

/* Not a glow — a mask of darkness centred on the cursor. Everything more
   than 400px from the pointer is pure black; the glowing icon layers are
   stacked above it so they bleed through. This is the whole effect. */
.light {
  position: fixed;
  top: 0;
  left: 0;
  width: 200vw;
  height: 200vh;
  margin: -100vh 0 0 -100vw;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0.15) 100px,
    rgba(0, 0, 0, 1) 400px
  );
  pointer-events: none;
  z-index: 5;
  will-change: transform;
}

/* ------------------------------------------------------------------ */
/* 1. terminal credential panel                                        */
/* ------------------------------------------------------------------ */

/* Above the darkness so the form stays readable wherever the cursor is. */
.terminal {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 28rem;
}

.terminal-inner {
  position: relative;
  padding: 1.5rem;
  background: #000;
  border: 2px solid var(--green-400);
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
    0 4px 6px -4px rgba(0, 0, 0, 0.5), 0 0 24px rgba(74, 222, 128, 0.12);
  overflow: hidden;
}

/* eight corner brackets */
.corner {
  position: absolute;
  background: var(--green-400);
}
.corner.tl-h { top: 0; left: 0; width: 1.5rem; height: 0.25rem; }
.corner.tl-v { top: 0; left: 0; width: 0.25rem; height: 1.5rem; }
.corner.tr-h { top: 0; right: 0; width: 1.5rem; height: 0.25rem; }
.corner.tr-v { top: 0; right: 0; width: 0.25rem; height: 1.5rem; }
.corner.bl-h { bottom: 0; left: 0; width: 1.5rem; height: 0.25rem; }
.corner.bl-v { bottom: 0; left: 0; width: 0.25rem; height: 1.5rem; }
.corner.br-h { bottom: 0; right: 0; width: 1.5rem; height: 0.25rem; }
.corner.br-v { bottom: 0; right: 0; width: 0.25rem; height: 1.5rem; }

.terminal-glow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4rem;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(20, 83, 45, 0.2),
    transparent
  );
  pointer-events: none;
}

/* decorative tick marks */
.tick {
  position: absolute;
  width: 1px;
}
.tick.t1 { top: 0; right: 3rem; height: 1rem; background: rgba(34, 197, 94, 0.5); }
.tick.t2 { top: 0; right: 4rem; height: 1.5rem; background: rgba(34, 197, 94, 0.3); }
.tick.t3 { top: 0; right: 5rem; height: 0.5rem; background: rgba(34, 197, 94, 0.7); }
.tick.b1 { bottom: 0; left: 3rem; height: 1rem; background: rgba(34, 197, 94, 0.5); }
.tick.b2 { bottom: 0; left: 4rem; height: 1.5rem; background: rgba(34, 197, 94, 0.3); }
.tick.b3 { bottom: 0; left: 5rem; height: 0.5rem; background: rgba(34, 197, 94, 0.7); }

.terminal-label {
  position: relative;
  margin-bottom: 0.75rem;
  color: var(--green-400);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}
.terminal-label .arrow {
  margin-right: 0.5rem;
  color: var(--green-600);
}
.terminal-label .name {
  color: var(--green-300);
  font-weight: 700;
}
.terminal-label .caret {
  margin-left: 0.5rem;
  opacity: 0.75;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  50% { opacity: 0.25; }
}

.field {
  position: relative;
  margin-bottom: 0.75rem;
}

.field-name {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: rgba(34, 197, 94, 0.75);
}

.field input {
  width: 100%;
  background: transparent;
  color: var(--green-300);
  font-family: inherit;
  font-size: 1rem;
  border: 2px solid var(--green-500);
  border-radius: 0.375rem;
  padding: 0.75rem;
  padding-right: 2.5rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input::placeholder {
  color: rgba(22, 163, 74, 0.6);
}

.field input:focus {
  border-color: var(--green-600);
  box-shadow: 0 0 0 2px var(--green-400);
}

.field .field-icon {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--green-500);
  pointer-events: none;
}

.warning {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--green-500);
  opacity: 0.8;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.warning .dot {
  width: 0.5rem;
  height: 0.5rem;
  background: #ef4444;
  border-radius: 9999px;
  flex: none;
}
.warning .tag {
  color: #f87171;
}

/* status line, replaces the warning text when something goes wrong */
.status {
  margin: 0.5rem 0 0;
  min-height: 1rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #f87171;
  letter-spacing: 0.04em;
}

.terminal.is-error .terminal-inner {
  border-color: #ef4444;
  box-shadow: 0 0 24px rgba(239, 68, 68, 0.25);
  animation: shake 0.4s ease;
}
.terminal.is-error .corner { background: #ef4444; }

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

/* ------------------------------------------------------------------ */
/* 2. skeuomorphic nav                                                 */
/* ------------------------------------------------------------------ */

/* Rules below are the pen's own, with two deliberate changes: the glow is
   per-button (red left, green right) instead of one shared colour, and the
   layers are anchored to .nav-wrap rather than a centred <main>. */

.nav-wrap {
  position: relative; /* no z-index: must not create a stacking context */
}

.nav {
  position: relative;
  z-index: 1; /* under .light */
  display: flex;
  gap: var(--gap);
  padding: var(--gap);
  border-radius: 1000px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 2.6px 2.6px 1.5px rgba(0, 0, 0, 0.027),
    5.8px 5.8px 3.4px rgba(0, 0, 0, 0.04),
    9.8px 9.8px 5.6px rgba(0, 0, 0, 0.05),
    14.8px 14.8px 8.5px rgba(0, 0, 0, 0.058),
    21.3px 21.3px 12.3px rgba(0, 0, 0, 0.065),
    30.1px 30.1px 17.4px rgba(0, 0, 0, 0.072),
    42.7px 42.7px 24.6px rgba(0, 0, 0, 0.08),
    62.1px 62.1px 35.8px rgba(0, 0, 0, 0.09),
    95.6px 95.6px 55.1px rgba(0, 0, 0, 0.103),
    170px 170px 98px rgba(0, 0, 0, 0.13);
}

.button {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  transform: translateZ(0);
  background: #242424;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.button-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.2s filter;
  pointer-events: none;
}

.frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  background: rgba(50, 50, 50, 0.5);
  backdrop-filter: blur(5px);
  box-shadow: 0 0 0 0 white, inset 0 0 0 2px rgba(0, 0, 0, 0.6),
    inset 0 0 16px rgba(160, 160, 160, 0.1), inset 0 0 0 0 rgba(0, 0, 0, 0.8);
  filter: brightness(1);
  transform: translate3d(0, 0, 0);
  transition: 0.2s;
}

.button.hover .frame {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5),
    inset 0 0 0 2px rgba(0, 0, 0, 0.6),
    inset 0 0 16px rgba(160, 160, 160, 0.1), inset 0 0 0 0 rgba(0, 0, 0, 1);
  transition: var(--press-desktop);
}

.button.press .frame {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5),
    inset 0 0 0 2px rgba(0, 0, 0, 0.6),
    inset 0 0 16px rgba(160, 160, 160, 0.1),
    inset 4px 4px 4px 2px rgba(0, 0, 0, 1);
  filter: brightness(0.8);
}

.frame svg,
.button-light svg {
  width: 24px;
  height: 24px;
  fill: none;
  transform: scale(1);
  transition: var(--press-desktop);
}

.button.press svg {
  transform: scale(0.91);
}

.frame svg path,
.frame svg rect,
.button-light svg path,
.button-light svg rect {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px;
}

.frame svg path,
.frame svg rect {
  stroke: rgba(255, 255, 255, 0.75);
}

.nav-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6; /* over .light, so the glow bleeds through the dark */
}

.button-light {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gap) + 4px);
  filter: blur(0.5px);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.button-light > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

/* left = clear (red), right = unlock (green) */
.button-light > div:nth-child(1) svg path,
.button-light > div:nth-child(1) svg rect {
  stroke: var(--light-red);
}
.button-light > div:nth-child(2) svg path,
.button-light > div:nth-child(2) svg rect {
  stroke: var(--light);
}

/* ------------------------------------------------------------------ */
/* 3. glitch loader                                                    */
/* ------------------------------------------------------------------ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.loader.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.card {
  width: 100%;
  max-width: 480px;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: #0b0b0f;
}
.card-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
}
.card-pct {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}

.card-body {
  position: relative;
  height: 400px;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.glitch-layer {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  z-index: 10;
}
.glitch-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.edge-fades {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.edge-fades > div {
  position: absolute;
  filter: blur(8px);
}
.edge-fades .top {
  top: 0; left: 0; width: 100%; height: 4rem;
  background: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.7), transparent);
}
.edge-fades .bottom {
  bottom: 0; left: 0; width: 100%; height: 4rem;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.7), transparent);
}
.edge-fades .left {
  top: 0; left: 0; width: 4rem; height: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0.7), transparent);
}
.edge-fades .right {
  top: 0; right: 0; width: 4rem; height: 100%;
  background: linear-gradient(to left, rgba(0,0,0,0.9), rgba(0,0,0,0.7), transparent);
}

.card-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
      ellipse 80% 60% at 50% 50%,
      rgba(0, 255, 136, 0.15),
      transparent 70%
    ),
    #000;
}

.card-content {
  position: relative;
  z-index: 20;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.spinner-slot {
  margin-bottom: 1rem;
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 8px rgba(0, 255, 136, 0.4));
}

.stage-text {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(229, 231, 235, 0.2));
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.stage-text.swap {
  opacity: 0;
  transform: translateY(-10px);
}

.bar {
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
}
.bar .bracket { color: rgba(255, 255, 255, 0.6); }
.bar .cells { display: flex; }
.bar .cells span { color: rgba(255, 255, 255, 0.3); }
.bar .cells span.on {
  color: var(--light);
  animation: cell-pop 0.4s ease;
}
.bar .pct {
  color: rgba(255, 255, 255, 0.6);
  margin-left: 0.5rem;
  font-size: 0.875rem;
}

@keyframes cell-pop {
  50% { transform: scale(1.2); }
}

/* four dots orbiting, from the source component */
.custom-loader-5 {
  height: 32px;
  width: 32px;
  position: relative;
  animation: loader-5-1 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes loader-5-1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.custom-loader-5::before,
.custom-loader-5::after,
.custom-loader-5 span::before,
.custom-loader-5 span::after {
  content: "";
  display: block;
  position: absolute;
  margin: auto;
  background: var(--light);
  border-radius: 50%;
}
.custom-loader-5::before {
  top: 0; left: 0; bottom: 0; right: auto; width: 8px; height: 8px;
  animation: loader-5-2 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes loader-5-2 {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(24px,0,0) scale(0.5); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
.custom-loader-5::after {
  top: 0; left: auto; bottom: 0; right: 0; width: 8px; height: 8px;
  animation: loader-5-3 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes loader-5-3 {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-24px,0,0) scale(0.5); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
.custom-loader-5 span {
  display: block; position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  margin: auto; height: 32px; width: 32px;
}
.custom-loader-5 span::before {
  top: 0; left: 0; bottom: auto; right: 0; width: 8px; height: 8px;
  animation: loader-5-4 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes loader-5-4 {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,24px,0) scale(0.5); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
.custom-loader-5 span::after {
  top: auto; left: 0; bottom: 0; right: 0; width: 8px; height: 8px;
  animation: loader-5-5 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@keyframes loader-5-5 {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-24px,0) scale(0.5); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* ------------------------------------------------------------------ */

@media screen and (max-width: 500px) {
  .stage { gap: 26px; }
  .frame { transition: var(--press-mobile); }
  .frame svg,
  .button-light svg { transition: var(--press-mobile); }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-label .caret,
  .custom-loader-5,
  .custom-loader-5::before,
  .custom-loader-5::after,
  .custom-loader-5 span::before,
  .custom-loader-5 span::after,
  .bar .cells span.on {
    animation: none;
  }
  .terminal.is-error .terminal-inner { animation: none; }
}