/* ajitdoval.com — access gate (index.html only)
   Deliberately minimal: no imagery, no identity, no navigation. */

:root{
  --g-ink-900:#06090F;
  --g-ink-800:#0A101B;
  --g-ink-700:#0F1826;
  --g-line:rgba(197,183,158,.16);
  --g-line-strong:rgba(197,183,158,.34);
  --g-mist:#98A5B8;
  --g-ivory:#F2EFE8;
  --g-brass:#B8873C;
  --g-brass-light:#D9A85C;
  --g-danger:#E08A72;
  --g-ok:#8FBF9F;
  --g-mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --g-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --g-ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;
  background:var(--g-ink-900);
  color:var(--g-mist);
  font-family:var(--g-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:grid;
  place-items:center;
  padding:24px;
  overflow:hidden;
  position:relative;
}

/* atmospheric field — pure CSS, no assets */
.g-field{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(184,135,60,.10),transparent 62%),
    radial-gradient(90% 70% at 50% 108%,rgba(30,46,73,.75),transparent 65%),
    linear-gradient(180deg,var(--g-ink-800),var(--g-ink-900));
}
.g-field::before{
  content:"";position:absolute;inset:-10%;
  background-image:
    linear-gradient(90deg,rgba(197,183,158,.045) 1px,transparent 1px),
    linear-gradient(180deg,rgba(197,183,158,.045) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(70% 60% at 50% 45%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 10%,transparent 78%);
}
.g-field::after{
  content:"";position:absolute;left:50%;top:50%;
  width:min(150vmin,1100px);aspect-ratio:1;transform:translate(-50%,-50%);
  border:1px solid rgba(197,183,158,.06);border-radius:50%;
  box-shadow:0 0 0 1px rgba(197,183,158,.03) inset;
  animation:g-drift 46s linear infinite;
}
@keyframes g-drift{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* card */
.gate-card{
  position:relative;z-index:1;
  width:min(452px,100%);
  background:linear-gradient(170deg,rgba(16,24,38,.92),rgba(8,13,22,.94));
  border:1px solid var(--g-line);
  padding:clamp(30px,6vw,50px) clamp(24px,5vw,44px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
  animation:g-in .8s var(--g-ease) both;
}
@keyframes g-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* corner ticks */
.gate-card::before,.gate-card::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border-color:var(--g-brass);
}
.gate-card::before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.gate-card::after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}

.gate-label{
  display:block;
  font-family:var(--g-mono);
  font-size:.66rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--g-brass-light);
  margin-bottom:1.6rem;
}

.gate-field{position:relative;display:flex;align-items:stretch;border:1px solid var(--g-line-strong);background:rgba(6,9,15,.55);transition:border-color .35s var(--g-ease)}
.gate-field:focus-within{border-color:var(--g-brass)}
.gate-field input{
  flex:1;min-width:0;
  background:transparent;border:0;outline:0;
  color:var(--g-ivory);
  font-family:var(--g-mono);
  font-size:1rem;
  letter-spacing:.24em;
  padding:1.05rem 1rem;
  min-height:56px;
}
.gate-field input::placeholder{color:#4A5A72;letter-spacing:.18em}
.gate-field input:-webkit-autofill{-webkit-text-fill-color:var(--g-ivory);-webkit-box-shadow:0 0 0 1000px #0B121D inset}

#gate-reveal{
  flex:none;background:transparent;border:0;border-left:1px solid var(--g-line);
  color:var(--g-mist);cursor:pointer;
  font-family:var(--g-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  padding:0 1rem;min-width:64px;
  transition:color .3s var(--g-ease),background .3s var(--g-ease);
}
#gate-reveal:hover,#gate-reveal:focus-visible{color:var(--g-ivory);background:rgba(197,183,158,.06)}

.gate-btn{
  margin-top:1.1rem;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  background:var(--g-brass);border:1px solid var(--g-brass);color:#0A0F18;
  font-family:var(--g-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  padding:1.15rem 1.4rem;min-height:54px;cursor:pointer;
  transition:background .35s var(--g-ease),color .35s var(--g-ease),border-color .35s var(--g-ease);
}
.gate-btn:hover,.gate-btn:focus-visible{background:transparent;color:var(--g-brass-light)}

.gate-msg{
  display:block;min-height:1.5em;margin-top:1.05rem;
  font-family:var(--g-mono);font-size:.66rem;letter-spacing:.1em;line-height:1.6;
  color:var(--g-ok);
}
.gate-msg.is-error{color:var(--g-danger)}

.shake{animation:g-shake .42s var(--g-ease)}
@keyframes g-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  45%{transform:translateX(6px)}
  70%{transform:translateX(-3px)}
}

form.is-done{opacity:.35;pointer-events:none;transition:opacity .35s var(--g-ease)}

:focus-visible{outline:2px solid var(--g-brass-light);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:400px){
  .gate-field input{letter-spacing:.16em;font-size:.95rem;padding:1rem .85rem}
  #gate-reveal{min-width:56px;padding:0 .75rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
}