@charset "UTF-8";
@import url("../assets/_core.css");

/* INVITE — code gate */
html,body{height:100%}
.gate{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:40px 24px}
.gate-bg{position:absolute;inset:0;z-index:0}
.gate-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.42) contrast(1.05);transform:scale(1.08);animation:gdrift 30s var(--ease) forwards}
@keyframes gdrift{to{transform:scale(1)}}
.gate-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 45%,rgba(8,7,6,.55),rgba(8,7,6,.92))}

.gate-top{position:absolute;top:clamp(28px,4vw,46px);left:0;right:0;z-index:3;display:flex;justify-content:center}
.gate-top .b1{font-family:var(--serif-en);font-size:22px;letter-spacing:.4em;color:var(--paper)}
.gate-back{position:absolute;top:clamp(28px,4vw,46px);right:clamp(28px,4vw,46px);z-index:3;font-family:var(--serif-en);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute-2);transition:color .4s var(--ease)}
.gate-back:hover{color:var(--gold)}

.gate-card{position:relative;z-index:2;width:100%;max-width:480px;text-align:center}
.gate-card .eyebrow{justify-content:center}
.gate-card .eyebrow::after{content:"";width:34px;height:1px;background:var(--gold);opacity:.7}
.gate-card h1{font-family:var(--serif-jp);font-weight:500;font-size:clamp(30px,4.5vw,44px);letter-spacing:.16em;margin:26px 0 6px;color:var(--paper)}
.gate-card .en-h{font-family:var(--serif-en);font-size:13px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:24px}
.gate-card .lead{color:var(--mute);font-size:15px;line-height:2.05;letter-spacing:.06em;max-width:30em;margin:0 auto 44px;text-wrap:pretty}

.code-field{position:relative;margin-bottom:18px}
.code-input{width:100%;background:rgba(243,237,226,.03);border:1px solid var(--line);color:var(--paper);font-family:var(--serif-en);font-size:clamp(22px,3.4vw,30px);letter-spacing:.42em;text-align:center;text-transform:uppercase;padding:24px 20px;transition:border-color .4s var(--ease),background .4s var(--ease)}
.code-input::placeholder{color:var(--mute-3);letter-spacing:.42em}
.code-input:focus{outline:none;border-color:var(--gold);background:rgba(201,169,106,.05)}
.code-input.bad{border-color:#c98a7a;animation:shake .45s var(--ease)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.gate-err{display:none;font-size:13px;color:#e0a59a;letter-spacing:.04em;margin-bottom:22px;min-height:1em}
.gate-err.show{display:block;animation:fadeUp .4s var(--ease)}
.gate-hint{margin-top:34px;font-size:12.5px;color:var(--mute-2);letter-spacing:.06em;line-height:1.9}
.gate-hint b{color:var(--gold-2);font-family:var(--serif-en);letter-spacing:.18em;font-weight:500}
.gate-alt{margin-top:30px;font-size:13px;color:var(--mute-3);letter-spacing:.04em}
.gate-alt a{color:var(--gold);border-bottom:1px solid var(--line)}

/* unlock overlay */
.unlock{position:fixed;inset:0;z-index:80;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility .8s var(--ease)}
.unlock.show{opacity:1;visibility:visible}
.unlock .ring{width:64px;height:64px;border:1px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.unlock .ut{font-family:var(--serif-en);font-size:14px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.unlock .uj{font-size:13px;letter-spacing:.2em;color:var(--mute)}

@media (max-width:560px){.code-input{letter-spacing:.28em;font-size:22px}}

/* cream theme: gate-bg は常に暗い写真なので文字色を明るく保つ */
body.theme-cream .gate{
  --paper:#f0e8d8;
  --mute:rgba(240,232,216,.72);
  --mute-2:rgba(240,232,216,.50);
  --mute-3:rgba(240,232,216,.35);
}