/* ==========================================================================
   Passcode entry — index.html
   No imagery. Type, rules, shapes, gradients and minimal motion only.
   ========================================================================== */
:root{
  --g-ink:    #100E0B;
  --g-ink-2:  #1A1712;
  --g-brass:  #B08132;
  --g-brass-2:#DFC08A;
  --g-river:  #3B6F65;
  --g-clay:   #C4714A;
  --g-paper:  #F4EFE4;
  --g-mute:   #9A8D79;
  --g-line:   rgba(223,192,138,.2);
  --g-line-2: rgba(223,192,138,.4);
  --ff-d: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ff-b: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-m: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16,1,.3,1);
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(20px,5vw,48px);
  background:var(--g-ink);
  color:var(--g-paper);
  font-family:var(--ff-b);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  position:relative;
}

/* --- ambient background: drifting light + furrow rules + vignette -------- */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-glow{
  position:absolute; inset:-30%;
  background:
    radial-gradient(38% 34% at 22% 24%, rgba(176,129,50,.28), transparent 62%),
    radial-gradient(34% 32% at 78% 72%, rgba(59,111,101,.26), transparent 64%),
    radial-gradient(40% 40% at 60% 10%, rgba(196,113,74,.12), transparent 66%);
  filter:blur(10px);
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{
  0%{ transform:translate3d(-2%,-1%,0) scale(1); }
  100%{ transform:translate3d(3%,2%,0) scale(1.08); }
}
.bg-lines{
  position:absolute; inset:0;
  background:repeating-linear-gradient(180deg, rgba(223,192,138,.05) 0 1px, transparent 1px 12px);
  -webkit-mask-image:radial-gradient(72% 60% at 50% 50%, #000, transparent 78%);
  mask-image:radial-gradient(72% 60% at 50% 50%, #000, transparent 78%);
}
.bg-vig{
  position:absolute; inset:0;
  background:radial-gradient(90% 70% at 50% 45%, transparent 30%, rgba(8,7,5,.72) 100%);
}

/* --- stage --------------------------------------------------------------- */
.gate-stage{
  position:relative; z-index:1;
  width:100%;
  max-width:462px;
  animation:rise .9s var(--ease) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.gate-card{
  position:relative;
  border:1px solid var(--g-line);
  border-radius:4px;
  padding:clamp(30px,6vw,50px) clamp(24px,5vw,46px) clamp(28px,5vw,44px);
  background:
    linear-gradient(180deg, rgba(244,239,228,.055), rgba(244,239,228,.018));
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(244,239,228,.07);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.gate-card::before,.gate-card::after{
  content:""; position:absolute; width:20px; height:20px;
  border:1px solid var(--g-brass); pointer-events:none;
}
.gate-card::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.gate-card::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

/* --- mark: three chevrons over a rule (pure CSS shapes) ------------------ */
.gate-mark{
  width:46px; height:46px; margin:0 auto clamp(22px,3vw,30px);
  position:relative;
}
.gate-mark i{
  position:absolute; left:50%; width:24px; height:24px;
  border-top:1.4px solid var(--g-brass-2);
  border-right:1.4px solid var(--g-brass-2);
  transform:translateX(-50%) rotate(-45deg);
  opacity:0;
  animation:markIn .7s var(--ease) forwards;
}
.gate-mark i:nth-child(1){ top:2px;  animation-delay:.18s; }
.gate-mark i:nth-child(2){ top:12px; animation-delay:.28s; }
.gate-mark i:nth-child(3){ top:22px; animation-delay:.38s; }
.gate-mark b{
  position:absolute; left:50%; bottom:0; width:34px; height:1.4px;
  background:var(--g-brass); transform:translateX(-50%) scaleX(0); transform-origin:center;
  animation:ruleIn .7s var(--ease) .5s forwards;
}
@keyframes markIn{ from{ opacity:0; transform:translateX(-50%) rotate(-45deg) translateY(5px); } to{ opacity:.95; transform:translateX(-50%) rotate(-45deg); } }
@keyframes ruleIn{ to{ transform:translateX(-50%) scaleX(1); } }

/* --- type ---------------------------------------------------------------- */
.gate-kicker{
  font-family:var(--ff-m);
  font-size:.66rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--g-brass-2);
  text-align:center;
  margin:0 0 12px;
}
.gate-title{
  font-family:var(--ff-d);
  font-weight:500;
  font-size:clamp(1.42rem,1.1rem + 1.4vw,1.92rem);
  line-height:1.18;
  letter-spacing:-.022em;
  text-align:center;
  color:var(--g-paper);
  margin:0 0 10px;
}
.gate-sub{
  text-align:center;
  font-size:.9rem;
  line-height:1.68;
  color:var(--g-mute);
  margin:0 auto clamp(26px,4vw,34px);
  max-width:30ch;
}

/* --- field --------------------------------------------------------------- */
.gate-field{ position:relative; }
.gate-label{
  display:block;
  font-family:var(--ff-m); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--g-mute); margin-bottom:10px;
}
.gate-input-wrap{ position:relative; display:flex; align-items:center; }
#gateInput{
  width:100%;
  background:rgba(16,14,11,.55);
  border:1px solid var(--g-line-2);
  border-radius:3px;
  color:var(--g-paper);
  font-family:var(--ff-m);
  font-size:1rem;
  letter-spacing:.24em;
  padding:16px 54px 16px 17px;
  min-height:54px;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
#gateInput::placeholder{ color:rgba(154,141,121,.55); letter-spacing:.16em; }
#gateInput:focus{
  outline:none;
  border-color:var(--g-brass);
  background:rgba(16,14,11,.8);
  box-shadow:0 0 0 3px rgba(176,129,50,.18);
}
#gateInput:disabled{ opacity:.55; }

.gate-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:42px; height:42px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer;
  color:var(--g-mute);
  border-radius:3px;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.gate-toggle:hover,.gate-toggle:focus-visible{ color:var(--g-brass-2); background:rgba(223,192,138,.08); }
.gate-toggle svg{ width:18px; height:18px; display:block; }
.gate-toggle .eye-off{ display:none; }
.gate-toggle[aria-pressed="true"] .eye-on{ display:none; }
.gate-toggle[aria-pressed="true"] .eye-off{ display:block; }

/* --- button -------------------------------------------------------------- */
.gate-btn{
  margin-top:18px;
  width:100%;
  min-height:54px;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  border:1px solid var(--g-brass);
  background:var(--g-brass);
  color:#141109;
  font-family:var(--ff-m); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  border-radius:3px;
  cursor:pointer;
  position:relative; overflow:hidden;
  transition:color .4s var(--ease), border-color .4s var(--ease), opacity .3s var(--ease);
}
.gate-btn span,.gate-btn svg{ position:relative; z-index:2; }
.gate-btn::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--g-paper);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .5s var(--ease);
}
.gate-btn:hover::before,.gate-btn:focus-visible::before{ transform:scaleX(1); transform-origin:left center; }
.gate-btn:hover,.gate-btn:focus-visible{ color:var(--g-ink); border-color:var(--g-paper); }
.gate-btn svg{ transition:transform .35s var(--ease); }
.gate-btn:hover svg{ transform:translateX(3px); }
.gate-btn:disabled{ opacity:.5; cursor:default; }
.gate-btn:disabled::before{ transform:scaleX(0); }

/* --- message ------------------------------------------------------------- */
.gate-msg{
  margin:16px 0 0;
  min-height:1.4em;
  text-align:center;
  font-family:var(--ff-m);
  font-size:.68rem;
  letter-spacing:.1em;
  line-height:1.6;
  color:var(--g-mute);
  transition:color .3s var(--ease);
}
.gate-msg.is-bad{ color:var(--g-clay); }
.gate-msg.is-ok{ color:var(--g-river); }

/* --- states -------------------------------------------------------------- */
.gate-stage.is-wrong .gate-card{
  animation:shake .45s cubic-bezier(.36,.07,.19,.97) both;
  border-color:rgba(196,113,74,.55);
}
@keyframes shake{
  10%,90%{ transform:translateX(-2px); }
  20%,80%{ transform:translateX(4px); }
  30%,50%,70%{ transform:translateX(-7px); }
  40%,60%{ transform:translateX(7px); }
}
.gate-stage.is-ok .gate-card{
  border-color:rgba(59,111,101,.7);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85), 0 0 0 3px rgba(59,111,101,.14);
}

/* --- footnote rule ------------------------------------------------------- */
.gate-foot{
  margin-top:clamp(24px,4vw,32px);
  padding-top:18px;
  border-top:1px solid var(--g-line);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.gate-foot i{
  display:block; width:4px; height:4px; border-radius:50%;
  background:var(--g-brass); opacity:.7;
}
.gate-foot span{
  font-family:var(--ff-m); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--g-mute);
}

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

.gate-noscript{
  margin-top:20px;
  border:1px solid rgba(196,113,74,.5);
  border-radius:3px;
  padding:16px 18px;
  font-size:.84rem;
  line-height:1.6;
  color:var(--g-paper);
  background:rgba(196,113,74,.09);
  text-align:center;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .gate-mark i{ opacity:.95; }
  .gate-mark b{ transform:translateX(-50%) scaleX(1); }
}

@media (max-width:380px){
  #gateInput{ letter-spacing:.14em; font-size:.94rem; }
  .gate-kicker{ letter-spacing:.2em; }
}