/* ============================================================
   The Sinigaglia Heritage — 密码门样式
   与主站共用同一套视觉语言：深墨底 / 橄榄绿 / 金色 / Cormorant 衬线
   ============================================================ */

:root{
  --ink:        #17130f;
  --ink-2:      #241d16;
  --paper:      #f2ece1;
  --olive:      #5b6b3c;
  --olive-2:    #46552e;
  --gold:       #b3934f;
  --gold-2:     #d3b673;
  --cream:      #efe6d5;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --serif-body: "EB Garamond", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html,body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(120% 90% at 50% 6%, #3a2f22 0%, #241d16 44%, #14100c 100%);
  color:var(--cream);
  font-family:var(--serif-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 布局 ---------- */
.gate{
  min-height:100svh; min-height:100vh;
  display:grid; place-items:center;
  padding:2.5rem 1.5rem;
}

.gate__panel{
  width:100%; max-width:460px;
  text-align:center;
  animation:gateIn 1s var(--ease) both;
}

@keyframes gateIn{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}

/* ---------- 徽标 ---------- */
.gate__mark{
  width:58px; height:58px; color:var(--gold);
  margin-bottom:1.5rem;
  animation:gateSpin 14s ease-in-out infinite;
}
@keyframes gateSpin{
  0%,100%{ transform:rotate(-4deg); }
  50%{ transform:rotate(4deg); }
}

/* ---------- 文字 ---------- */
.gate__kicker{
  font-family:var(--sans); font-size:.6rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold);
  margin:0 0 1rem;
}
.gate__title{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(2.1rem,7vw,3rem); line-height:1.08;
  margin:0 0 .9rem; color:var(--cream);
  background:linear-gradient(180deg,#f6efe1 25%,#d8c9a4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:.1em;
}
.gate__sub{
  font-size:1.02rem; line-height:1.6; margin:0;
  color:rgba(239,230,213,.6);
}

.gate__rule{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin:2rem auto 2.2rem; max-width:280px; color:var(--gold);
}
.gate__rule span{ flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(179,147,79,.5)); }
.gate__rule span:last-child{ background:linear-gradient(270deg,transparent,rgba(179,147,79,.5)); }
.gate__rule b{ font-size:.6rem; font-weight:400; }

/* ---------- 表单 ---------- */
.gate__form{
  display:flex; flex-direction:column; gap:.7rem;
}
.gate__label{
  font-family:var(--sans); font-size:.56rem; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(239,230,213,.45);
  text-align:left;
}
.gate__input{
  font-family:var(--serif-body); font-size:1.05rem; color:var(--cream);
  background:rgba(0,0,0,.3);
  border:1px solid rgba(179,147,79,.3);
  border-radius:2px;
  padding:.85rem 1rem;
  text-align:center;
  letter-spacing:.06em;
  transition:border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.gate__input::placeholder{
  color:rgba(239,230,213,.3); letter-spacing:.02em; font-size:.95rem;
}
.gate__input:focus{
  outline:none; border-color:var(--gold);
  background:rgba(0,0,0,.42);
  box-shadow:0 0 0 3px rgba(179,147,79,.14);
}
.gate__input.is-locked{ opacity:.4; }

.gate__btn{
  margin-top:.5rem;
  font-family:var(--sans); font-size:.64rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink);
  background:var(--gold); border:1px solid var(--gold);
  border-radius:100px; padding:.95rem 1.6rem;
  cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease), opacity .3s;
}
.gate__btn:hover:not(:disabled){
  background:var(--gold-2); border-color:var(--gold-2); transform:translateY(-2px);
}
.gate__btn:disabled{ opacity:.4; cursor:not-allowed; }
.gate__btn:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; }

/* ---------- 提示 ---------- */
.gate__error{
  margin:1.3rem 0 0; font-size:.98rem; color:#e08b7a;
  animation:shake .45s var(--ease);
}
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-5px); }
  40%{ transform:translateX(5px); }
  60%{ transform:translateX(-3px); }
  80%{ transform:translateX(3px); }
}
.gate__note{
  margin:1rem 0 0; font-family:var(--sans);
  font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(239,230,213,.42);
}
.gate__foot{
  margin:2.6rem 0 0; font-family:var(--sans);
  font-size:.55rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(239,230,213,.24);
}

/* ---------- 无障碍 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

@media (max-width:420px){
  .gate{ padding:2rem 1.1rem; }
  .gate__title{ font-size:2rem; }
}