/* =========================================================================
   admage v5 — ログイン画面（design/assets/login.css から。モック用の部品は除いた）
   一覧・編集とは違い、ここだけは演出を優先する。テーマは常にダーク。
   色はブランドの紺〜青（tokens.css の --brand-*）を軸にする。
   ========================================================================= */

.login {
  --ink: #e8ecff;
  --ink-2: #9aa6d1;
  --ink-3: #5d6894;
  --deep: #02031a;
  --cyan: #2891ff;
  --glass: rgb(14 20 52 / 0.55);
  --line: rgb(140 165 255 / 0.16);

  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  background: radial-gradient(120% 90% at 70% 10%, #0b1450 0%, #040624 45%, var(--deep) 100%);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--font-mono); }

/* ---- 背景 --------------------------------------------------------------- */
#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }

.floor {
  position: fixed; left: -50%; right: -50%; bottom: -10%; height: 60vh; z-index: 0;
  background-image:
    linear-gradient(rgb(64 120 255 / 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgb(64 120 255 / 0.35) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(500px) rotateX(62deg);
  transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  animation: floor 6s linear infinite;
}
@keyframes floor { to { background-position: 0 64px, 0 0; } }

.aurora { position: fixed; inset: 0; z-index: 0; filter: blur(80px); opacity: .7; pointer-events: none; }
.aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.aurora span:nth-child(1) { width: 46vw; height: 46vw; left: -10vw; top: -14vw; background: #1c398e; animation: drift 18s ease-in-out infinite alternate; }
.aurora span:nth-child(2) { width: 36vw; height: 36vw; right: -8vw; top: 10vh; background: #2d50c6; animation: drift 22s ease-in-out infinite alternate-reverse; }
.aurora span:nth-child(3) { width: 30vw; height: 30vw; left: 35vw; bottom: -12vw; background: #2891ff; opacity: .45; animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(6vw, 4vh) scale(1.15); } }

.noise {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- レイアウト --------------------------------------------------------- */
.stage {
  position: relative; z-index: 2;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px; padding: 48px 16px 72px; box-sizing: border-box;
}

/* ---- ロゴ --------------------------------------------------------------- */
.logo { margin: 0; line-height: 0; opacity: 0; animation: rise .9s var(--ease-out) forwards; }
.logo img { width: 220px; height: auto; filter: drop-shadow(0 0 28px rgb(40 145 255 / .35)); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- 右：カード --------------------------------------------------------- */
.card-wrap { position: relative; perspective: 1200px; width: 100%; max-width: 420px; }
.card {
  position: relative; padding: 36px 32px 28px; border-radius: 22px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .04) inset;
  transform-style: preserve-3d;
  transition: transform .4s var(--ease-out), opacity .5s, filter .5s;
  opacity: 0; animation: card-in 1s .3s var(--ease-out) forwards;
}
@keyframes card-in { from { opacity: 0; transform: translateY(30px) rotateX(8deg); } to { opacity: 1; transform: none; } }

/* 回る光の縁 */
.card-border {
  position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 0 60%, #2891ff 75%, #8fb0ff 80%, transparent 90%), var(--line);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 6s linear infinite;
}
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }
.card-scan {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
}
.card-scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 120px; top: -120px;
  background: linear-gradient(transparent, rgb(40 145 255 / .08), transparent);
  animation: scan 5s 1.4s ease-in-out infinite;
}
@keyframes scan { to { top: 110%; } }

.card-head { margin-bottom: 28px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 11px; letter-spacing: .18em; color: #8fb0ff; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #2891ff; box-shadow: 0 0 10px #2891ff; display: inline-block; }
.card h2 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.sub { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; }

.fld { display: block; margin-bottom: 18px; }
.fld-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.fld-link { color: #8fb0ff; text-decoration: none; font-size: 12px; }
.fld-link:hover { color: #fff; }
.fld-box {
  position: relative; display: flex; align-items: center; height: 48px; border-radius: 12px;
  background: rgb(2 4 26 / .6); border: 1px solid var(--line);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.fld-box:focus-within {
  border-color: #2d50c6; background: rgb(8 14 50 / .8);
  box-shadow: 0 0 0 4px rgb(45 80 198 / .25), 0 0 24px rgb(40 145 255 / .25);
}
.fld[data-invalid="true"] .fld-box { border-color: #ff6369; box-shadow: 0 0 0 4px rgb(255 99 105 / .15); }
.fld-icon { width: 18px; height: 18px; margin: 0 10px 0 14px; fill: none; stroke: var(--ink-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; flex: none; }
.fld-box:focus-within .fld-icon { stroke: #8fb0ff; }
.fld input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  color: var(--ink); font: 15px var(--font-sans); padding-right: 14px;
}
.fld input::placeholder { color: var(--ink-3); }
.fld input:-webkit-autofill { -webkit-text-fill-color: var(--ink); transition: background-color 9999s; }
.fld-error, .fld-error { color: #ff8a8f; }
.fld-error:empty { display: none; }


.go {
  position: relative; overflow: hidden; width: 100%; height: 52px; border: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--brand-gradient); background-size: 160% 100%; background-position: 0 0;
  color: #fff; font: 600 15px var(--font-sans); letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 10px 30px -8px rgb(40 145 255 / .7), 0 0 0 1px rgb(255 255 255 / .12) inset;
  transition: background-position .5s var(--ease-out), transform .15s, box-shadow .3s;
}
.go::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .35), transparent);
  transform: skewX(-20deg); animation: shine 3.5s 2s ease-in-out infinite;
}
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.go:hover { background-position: 100% 0; box-shadow: 0 14px 40px -8px rgb(40 145 255 / .9), 0 0 0 1px rgb(255 255 255 / .2) inset; }
.go:active { transform: scale(.985); }
.go:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 3px; }
.go-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.go:hover .go-arrow { transform: translateX(4px); }
.go-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .3); border-top-color: #fff; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.go[aria-busy="true"] { pointer-events: none; }
.go[aria-busy="true"] .go-arrow { display: none; }
.go[aria-busy="true"] .go-spin { display: block; }

.form-msg { min-height: 20px; margin: 12px 0 0; font-size: 13px; color: #ff8a8f; text-align: center; }


.card.shake { animation: shake .45s; opacity: 1; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---- 成功の演出 --------------------------------------------------------- */
.granted {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px;
  pointer-events: none; opacity: 0;
}
.granted svg { width: 88px; height: 88px; fill: none; stroke: #8fdcff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 16px #2891ff); }
.granted circle { stroke-dasharray: 151; stroke-dashoffset: 151; }
.granted path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.granted p { margin: 0; letter-spacing: .3em; font-size: 13px; color: #8fdcff; }
.is-granted .card { opacity: 0; transform: scale(.94) rotateX(10deg); filter: blur(6px); }
.is-granted .granted { opacity: 1; transition: opacity .3s .2s; }
.is-granted .granted circle { animation: draw .7s .3s var(--ease-out) forwards; }
.is-granted .granted path { animation: draw .5s .8s var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.warp #field { transition: transform 1.2s cubic-bezier(.7,0,.3,1), opacity 1.2s; transform: scale(2.4); opacity: 0; }
.warp .stage, .warp .floor, .warp .aurora { transition: opacity .9s .3s; opacity: 0; }


/* ---- 状態（ログイン・送信済み・パスキー登録・無効なリンク） --------------- */
.view { animation: view-in .45s var(--ease-out); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
.card-head.center { text-align: center; }
.card-head.center .eyebrow { justify-content: center; }
.eyebrow.warn { color: #f5b544; }
.eyebrow.warn .dot { background: #f5b544; box-shadow: 0 0 10px #f5b544; }
.sub b, .addr { color: var(--ink); font-weight: 500; word-break: break-all; }

.go-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.go[aria-busy="true"] .go-icon { display: none; }

.or { display: flex; align-items: center; gap: 12px; margin: 24px 0 18px; font-size: 12px; color: var(--ink-3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.go-sub {
  width: 100%; height: 46px; border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgb(255 255 255 / .04); border: 1px solid var(--line);
  color: var(--ink); font: 500 14px var(--font-sans);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.go-sub:hover:not(:disabled) { background: rgb(255 255 255 / .08); border-color: rgb(140 165 255 / .35); }
.go-sub:focus-visible { outline: 2px solid #8fb0ff; outline-offset: 3px; }
.go-sub:disabled { cursor: default; color: var(--ink-3); }
.go-sub[aria-busy="true"] { pointer-events: none; }
.go-sub[aria-busy="true"] .go-spin { display: block; }

.view-icon {
  width: 64px; height: 64px; margin: 4px auto 20px; border-radius: 18px; display: grid; place-items: center;
  background: rgb(45 80 198 / .18); border: 1px solid rgb(140 165 255 / .25); color: #8fb0ff;
}
.view-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.view-icon.glow { box-shadow: 0 0 40px rgb(40 145 255 / .35); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 60px rgb(40 145 255 / .6); } }
.view-icon.warn { background: rgb(245 181 68 / .12); border-color: rgb(245 181 68 / .3); color: #f5b544; }

.steps { list-style: none; margin: 0 0 22px; padding: 14px 16px; border-radius: 12px; background: rgb(2 4 26 / .45); border: 1px solid var(--line); display: grid; gap: 8px; }
.steps li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.steps li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #2891ff; box-shadow: 0 0 8px #2891ff; }
.steps b { color: var(--ink); font-weight: 500; }

.foot-links { margin: 16px 0 0; text-align: center; font-size: 13px; }
.foot-links a { color: #8fb0ff; text-decoration: none; }
.foot-links a:hover { color: #fff; text-decoration: underline; }
.hint { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--ink-3); }

.inline-form { margin: 0; }
.notice { margin: 0 0 18px; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.6; background: rgb(245 181 68 / .1); border: 1px solid rgb(245 181 68 / .3); color: #f8d38a; }
.notice:empty { display: none; }

/* 規約・プライバシーポリシー・運営会社のリンク（コピーライトの上） */
.legal-links { position: fixed; z-index: 2; left: 0; right: 0; bottom: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 12px; }
.legal-links a { color: var(--ink-3); text-decoration: none; }
.legal-links a:hover { color: var(--ink-2); text-decoration: underline; }
.copyright { position: fixed; z-index: 2; left: 0; right: 0; bottom: 16px; margin: 0; text-align: center; font: 11px var(--font-mono); color: var(--ink-3); letter-spacing: .1em; }

/* ---- 狭い画面 ----------------------------------------------------------- */
@media (max-width: 480px) {
  .logo img { width: 180px; }
  .card { padding: 28px 20px 16px; }
}

/* ---- 動きを減らす設定 --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* システム設定でロゴを入れたとき：暗い背景でも読めるよう、白い台にのせる */
.logo--custom img { width: auto; max-width: 260px; max-height: 72px; background: #fff; padding: 10px 18px; border-radius: 12px; filter: none; }