/*
 * ログイン画面（全員共通）の見た目。テーマは「夜の書斎で契約書にサインする」。
 *   背景 .night   … 漆黒の茶。契約書の罫線（.night__lines）が上へゆっくり流れ、金と朱の明かり（.glow）が漂う
 *   題名          … 1文字ずつ墨がにじむように浮かび（ink-in）、金の文字の上を光が走る（shine）
 *   サインの線    … 金の線が左から描かれる（.gate__sign の stroke-dashoffset）
 *   朱の印        … 線の右端に押され（seal-in）、波紋が広がる（ripple）。ログイン成功で .is-pressed が付いてもう一度押される
 *   入力欄        … すりガラスの台に金の細線。フォーカスで金が灯る
 * 色は人事課の画面と同じ系統（濃茶×金×朱）。
 */

:root {
  --night: #120c08;
  --night-2: #23170e;
  --ink: #f3e9d6;
  --ink-soft: rgba(243, 233, 214, .62);
  --gold: #d6b16a;
  --gold-deep: #a9813c;
  --shu: #c43a22;
  --sans: "BIZ UDPGothic", "Meiryo", sans-serif;
  --mincho: "Shippori Mincho", "Yu Mincho", serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 40px 16px;
  overflow-x: hidden;
  background: radial-gradient(120% 90% at 50% 20%, var(--night-2) 0%, var(--night) 62%) fixed;
  color: var(--ink);
  font: 400 15px/1.6 var(--sans);
}

/* ---------- 背景 ---------- */

.night { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* 契約書の罫線（横線と、左の朱の余白線）。上へゆっくり流れ、上下はぼかして消す */
.night__lines {
  position: absolute;
  inset: -40px 0;
  background:
    linear-gradient(90deg, transparent calc(50% - 300px), rgba(196, 58, 34, .2) calc(50% - 300px),
                    rgba(196, 58, 34, .2) calc(50% - 299px), transparent calc(50% - 299px)),
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(214, 177, 106, .08) 33px 34px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  animation: lines-drift 9s linear infinite;
}
@keyframes lines-drift { to { transform: translateY(-34px); } }

/* 漂う明かり（金と朱） */
.glow { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
.glow--gold {
  width: 520px; height: 520px; left: calc(50% - 470px); top: -170px;
  background: radial-gradient(circle, rgba(214, 177, 106, .42), transparent 70%);
  animation: drift-a 16s ease-in-out infinite;
}
.glow--shu {
  width: 440px; height: 440px; right: calc(50% - 450px); bottom: -190px;
  background: radial-gradient(circle, rgba(196, 58, 34, .34), transparent 70%);
  animation: drift-b 19s ease-in-out infinite;
}
@keyframes drift-a { 50% { transform: translate(120px, 90px) scale(1.15); } }
@keyframes drift-b { 50% { transform: translate(-110px, -80px) scale(1.12); } }

/* ---------- 題名・サイン・印 ---------- */

.gate { width: min(400px, 100%); display: grid; gap: 30px; }

.gate__hero { display: grid; justify-items: center; }

.gate__title { margin: 0; display: grid; justify-items: center; gap: 12px; }

.gate__chars {
  position: relative;
  display: flex;
  padding: 0 0 0 .16em;           /* letter-spacing の右余白と釣り合わせる */
  font: 800 clamp(36px, 10vw, 48px)/1.25 var(--mincho);
  letter-spacing: .16em;
}
.gate__chars > span {
  display: inline-block;
  background: linear-gradient(110deg, var(--gold-deep) 0%, var(--gold) 38%, #fff6dd 50%, var(--gold) 62%, var(--gold-deep) 100%)
              100% 0 / 320% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(14px) scale(1.12);
  animation:
    ink-in .9s cubic-bezier(.2, .8, .2, 1) forwards,
    shine 5s ease-in-out infinite;
}
/* にじみ出る順と、光が1文字ずつ遅れて通る順（左から右へ） */
.gate__chars > span:nth-child(1) { animation-delay: .15s, 2.4s; }
.gate__chars > span:nth-child(2) { animation-delay: .27s, 2.48s; }
.gate__chars > span:nth-child(3) { animation-delay: .39s, 2.56s; }
.gate__chars > span:nth-child(4) { animation-delay: .51s, 2.64s; }
.gate__chars > span:nth-child(5) { animation-delay: .63s, 2.72s; }
@keyframes ink-in { to { opacity: 1; filter: blur(0); transform: none; } }

/* 金の文字の上を光が走る（文字の色の帯を右から左へずらす） */
@keyframes shine { 0% { background-position: 100% 0; } 30%, 100% { background-position: 0 0; } }

.gate__title small {
  font: 600 12.5px/1 var(--mincho);
  letter-spacing: .62em;
  margin-right: -.62em;
  color: var(--ink-soft);
  opacity: 0;
  animation: fade 1s 1s ease forwards;
}
@keyframes fade { to { opacity: 1; } }

.gate__signline { position: relative; width: min(320px, 86%); margin-top: 10px; }

/* 金のサインの線 */
.gate__sign { display: block; width: 100%; height: auto; overflow: visible; }
.gate__sign path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  filter: drop-shadow(0 0 6px rgba(214, 177, 106, .6));
  animation: sign 1.2s .95s cubic-bezier(.6, .1, .3, 1) forwards;
}
@keyframes sign { to { stroke-dashoffset: 0; } }

/* 朱の印。線の右端に押され、波紋が広がる */
.gate__seal {
  position: absolute;
  right: -30px;
  top: -18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  direction: rtl;                 /* 印は右の列から縦に読む */
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 4px;
  border-radius: 6px;
  background: var(--shu);
  color: #fbe9dc;
  font: 800 16px/1 var(--mincho);
  box-shadow: 0 0 0 2px rgba(196, 58, 34, .3), 0 8px 24px rgba(196, 58, 34, .4);
  transform: rotate(-8deg);
  opacity: 0;
  animation: seal-in .45s 2.1s cubic-bezier(.3, 1.6, .5, 1) forwards;
}
.gate__seal span { display: block; }
.gate__seal::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(196, 58, 34, .75);
  border-radius: 10px;
  opacity: 0;
  animation: ripple .9s 2.25s ease-out;
}
.gate__seal.is-pressed { opacity: 1; animation: seal-press .38s ease-out both; }
.gate__seal.is-pressed::after { animation: ripple .8s ease-out; }

@keyframes seal-in {
  from { opacity: 0; transform: rotate(-8deg) scale(2.2); }
  to   { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@keyframes seal-press {
  0%   { transform: rotate(-8deg) scale(1); }
  40%  { transform: rotate(-8deg) scale(.86); }
  100% { transform: rotate(-8deg) scale(1); }
}
@keyframes ripple {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.1); }
}

/* ---------- 入力欄 ---------- */

.gate__form {
  display: grid;
  gap: 18px;
  padding: 30px 30px 22px;
  border: 1px solid rgba(214, 177, 106, .24);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 244, 222, .075), rgba(255, 244, 222, .03));
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 244, 222, .08);
  opacity: 0;
  transform: translateY(14px);
  animation: rise .8s .7s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes rise { to { opacity: 1; transform: none; } }

.gate__field { display: grid; gap: 6px; }
.gate__field span { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--ink-soft); }
.gate__field input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(214, 177, 106, .2);
  border-radius: 4px;
  background: rgba(10, 6, 3, .45);
  color: var(--ink);
  font: 400 16px/1.3 var(--sans);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.gate__field input:focus {
  border-color: var(--gold);
  background: rgba(10, 6, 3, .6);
  box-shadow: 0 0 0 3px rgba(214, 177, 106, .18), 0 0 18px rgba(214, 177, 106, .18);
}
.gate__field input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 40px #1a120b inset;
  caret-color: var(--ink);
}

.gate__note { min-height: 1.4em; margin: -6px 0; color: #ff9b84; font-size: 13px; }
.gate__note:empty { visibility: hidden; }

.gate__btn {
  position: relative;
  overflow: hidden;
  padding: 13px;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, #e2c27f, var(--gold-deep));
  color: #1b120a;
  font: 700 15px/1 var(--sans);
  letter-spacing: .32em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(169, 129, 60, .28);
  transition: filter .2s, transform .1s;
}
.gate__btn::after {          /* ホバーでボタンの上を光が走る */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transition: left .6s ease;
}
.gate__btn:hover { filter: brightness(1.08); }
.gate__btn:hover::after { left: 130%; }
.gate__btn:active { transform: translateY(1px); }
.gate__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gate__btn:disabled { cursor: default; filter: saturate(.6) brightness(.85); }

.gate__foot { margin: 2px 0 0; text-align: center; color: var(--ink-soft); font-size: 12px; }

.is-leaving { opacity: 0; transition: opacity .35s ease; }

/* 動きを減らす設定の人には、出来上がった状態を静止で見せる */
@media (prefers-reduced-motion: reduce) {
  .night__lines, .glow { animation: none; }
  .gate__chars > span, .gate__title small, .gate__form { animation: none; opacity: 1; filter: none; transform: none; }
  .gate__seal { animation: none; opacity: 1; }
  .gate__sign path { animation: none; stroke-dashoffset: 0; }
  .gate__seal::after { display: none; }
}

@media (max-width: 480px) {
  .gate { gap: 26px; }
  .gate__form { padding: 24px 20px 18px; }
  .gate__seal { width: 44px; height: 44px; font-size: 13px; right: -14px; top: -16px; }
}