/* ============================================================
   hormusjicama.com — auth.css
   Styles for the access gate (index.html) only.
   CSS-only background. No imagery of any kind.
   ============================================================ */

:root {
  --a-ink:      #16211C;
  --a-forest:   #1E3A31;
  --a-deep:     #0F1F19;
  --a-sage:     #DCE3D8;
  --a-mineral:  #F2F2EE;
  --a-paper:    #FAFAF8;
  --a-gold:     #C7AC76;
  --a-grey:     rgba(220, 227, 216, .66);
  --a-rule:     rgba(220, 227, 216, .20);
  --a-danger:   #E2A9A0;
  --a-font-d:   "Newsreader", "Iowan Old Style", Palatino, Georgia, "Times New Roman", serif;
  --a-font-u:   "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --a-ease:     cubic-bezier(.22, .61, .36, 1);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background-color: var(--a-deep);
  color: var(--a-sage);
  font-family: var(--a-font-u);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* CSS-only background: a soft mineral wash over deep forest,
   plus an almost-invisible ruled grid. No images. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body::before {
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(42, 75, 64, .95) 0%, rgba(15, 31, 25, 0) 62%),
    radial-gradient(90% 80% at 88% 96%, rgba(168, 137, 75, .16) 0%, rgba(15, 31, 25, 0) 58%),
    linear-gradient(168deg, #14261F 0%, #0F1F19 52%, #101E1A 100%);
  z-index: -2;
}
body::after {
  background-image:
    linear-gradient(to right, rgba(220, 227, 216, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(220, 227, 216, .045) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 45%, #000 0%, transparent 100%);
  mask-image: radial-gradient(75% 65% at 50% 45%, #000 0%, transparent 100%);
  z-index: -1;
}

:focus-visible { outline: 2px solid var(--a-gold); outline-offset: 3px; }

.gate {
  width: 100%;
  max-width: 430px;
}

.gate__frame {
  padding: clamp(1.75rem, 1.1rem + 2.6vw, 2.9rem);
  background: rgba(250, 250, 248, .045);
  border: 1px solid var(--a-rule);
  border-top: 2px solid var(--a-gold);
  border-radius: 3px;
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .gate__frame {
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
  }
}

.gate__mark {
  font-family: var(--a-font-d);
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -.018em;
  color: var(--a-paper);
  margin: 0;
}
.gate__hint {
  margin: .55rem 0 0;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(199, 172, 118, .92);
}

.gate__form { margin-top: 1.9rem; }

.gate__label {
  display: block;
  margin-bottom: .55rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--a-grey);
}

.gate__field { position: relative; display: flex; }

.gate__input {
  width: 100%;
  min-height: 54px;
  padding: .9rem 3.4rem .9rem 1rem;
  background: rgba(15, 31, 25, .55);
  border: 1px solid var(--a-rule);
  border-radius: 2px;
  color: var(--a-paper);
  font-family: var(--a-font-u);
  font-size: 1rem;      /* 16px — prevents iOS zoom on focus */
  letter-spacing: .12em;
  transition: border-color 180ms var(--a-ease), background 180ms var(--a-ease);
}
.gate__input::placeholder { color: rgba(220, 227, 216, .34); letter-spacing: .06em; }
.gate__input:focus { outline: none; border-color: rgba(199, 172, 118, .55); background: rgba(15, 31, 25, .78); }
.gate__input:focus-visible { outline: 2px solid var(--a-gold); outline-offset: 1px; }
.gate.is-invalid .gate__input { border-color: var(--a-danger); }

.gate__peek {
  position: absolute;
  top: 50%; right: .35rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 2px;
  color: var(--a-grey);
  cursor: pointer;
  transition: color 180ms var(--a-ease);
}
.gate__peek:hover { color: var(--a-gold); }
.gate__peek svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.gate__peek .icon-off { display: none; }
.gate__peek[aria-pressed="true"] .icon-on { display: none; }
.gate__peek[aria-pressed="true"] .icon-off { display: block; }

.gate__submit {
  width: 100%;
  min-height: 54px;
  margin-top: 1rem;
  padding: .9rem 1.5rem;
  background: var(--a-sage);
  border: 1px solid var(--a-sage);
  border-radius: 2px;
  color: var(--a-deep);
  font-family: var(--a-font-u);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms var(--a-ease), border-color 180ms var(--a-ease), color 180ms var(--a-ease);
}
.gate__submit:hover { background: var(--a-gold); border-color: var(--a-gold); }
.gate__submit:disabled { opacity: .55; cursor: progress; }

.gate__status {
  display: block;
  min-height: 1.35rem;
  margin-top: .85rem;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--a-danger);
}
.gate__status:empty { min-height: .5rem; }
.gate__status[data-state="ok"] { color: var(--a-gold); }

/* Shake on refusal — suppressed under reduced-motion */
@keyframes gate-shake {
  0%, 100% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  38% { transform: translateX(5px); }
  58% { transform: translateX(-3px); }
  78% { transform: translateX(2px); }
}
.gate.is-invalid .gate__frame { animation: gate-shake 420ms var(--a-ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
}

@media (max-width: 400px) {
  body { padding: 1.5rem 1rem; }
  .gate__frame { padding: 1.5rem 1.25rem; }
}

@media (max-height: 520px) {
  body { align-items: flex-start; padding-top: 1.75rem; }
}